اردو ویب پیڈ کا استعمال

نبیل

نبیل

تکنیکی معاون
کئی دوست مجھ سے اردو ویب پیڈ کو اپنے ویب پیجز میں انٹگریٹ کرنے کا طریقہ دریافت کر چکے ہیں۔ اسی کے پیش نظر میں یہ پوسٹ‌ لکھ رہا ہوں۔

اردو ویب پیڈ کو پہلے سے موجود ویب پیجز کے ٹیکسٹ ایریاز کے ساتھ انٹگریٹ کرنا بہت آسان ہے۔ اسے سنگل لائن ان پٹ ٹیکسٹ کنٹرول (INPUT) اور ملٹی لائن TEXTAREA دونوں میں اردو ایڈیٹنگ کی سپورٹ مہیا کرنے کے لیے استعمال کیا جا سکتا ہے۔ میں اسے ذیل کی مثال سے واضح کر رہا ہوں۔

ذیل میں ایک سادہ html پیج کا کوڈ ہے جس میں ایک سنگل لائن (input) اور ایک ملٹی لائن (textarea) ایڈٹ ایریا موجود ہے۔

کوڈ: 
<html>

<head>

<title>Urdu WebPad Integration</title>
</head>

<body>



<input type="text" name="username" size="20"></p>


<textarea rows="10" name="message" cols="20">
 </textarea>

</body>

</html>

اردو ویب پیڈ کی انٹگریشن کا پہلا سٹیپ اس کی جاوا سکرپٹ کو پیج میں ریفرینس کرنا اور اسے initialize کرنا ہے۔ یہ ذیل میں دیے گیے کوڈ کے ذریعے کیا جاتا ہے:

کوڈ: 
<script language="javascript1.2" type="text/javascript" src="UrduEditor.js"></script>
<script language="JavaScript" type=text/javascript>
	initUrduEditor("");				
</script>

اوپر والی مثال میں یہ assume کیا گیا ہے کہ اردو ویب پیڈ کی جاوا سکرپٹ (UrduEditor.js) اور اس سے متعلقہ سٹائل شیٹ (UrduEditor.css) اسی html فائل کی پاتھ میں موجود ہیں۔ اگر ایسا نہ ہو تو اسے src ایٹریبیوٹ اور initUrduEditor کے argument میں بھیجا جا سکتا ہے۔

اردو ویب پیڈ کی جاوا سکرپٹ‌ کو initialize کرنے کے بعد ہر مطلوبہ ایڈٹ‌ ایریا میں اردو ایڈیٹنگ کی سپورٹ مہیا کرنے کا مرحلہ آتا ہے۔ اس کے لیے یہ یاد رکھنا ضروری ہے کہ ویب پیڈ ایڈٹ ایریا کے آئی ڈی (ID) ایٹریبیوٹ کے ذریعے کام کرتا ہے۔ لہذا جس ایلیمنٹ میں یہ غیر موجود ہو، جیسا کہ اس پوسٹ کے شروع میں ‌دیے گیے html کوڈ میں ہے، تو وہاں ID ڈالنی پڑتی ہے۔ اس کے علاوہ ایڈٹ ایریا کا onfocus ایونٹ بھی ڈیفائن کرنا پڑتا ہے۔ اوپر مذکورہ ایڈٹ ایریاز میں یہ والی تبدیلیاں ذیل کے کوڈ میں دکھائی گئی ہیں:

کوڈ: 
<input type="text" name="username" id="username" onfocus="setEditor(this)" size="20"></p>


<textarea rows="10" name="message" id="message" onfocus="setEditor(this)" cols="20">

اس کے بعد اردو ویب پیڈ کی انٹگریشن مکمل کرنے کے لیے صرف ایک makeUrduEditor فنکشن کال کی ضرورت رہ جاتی ہے۔ اس فنکشن کو ایڈٹ ایریا کی آئی ڈی اور اس کا مطلوبہ پوائنٹ سائز فراہم کیا جاتا ہے۔

اوپر کی مثال میں پیش کیے گیے input کنٹرول کو ایک 12 پوائنٹ‌ سائز کا اردو ایڈٹ ایریا بنانے کے لیے ذیل کی فنکشن کال استعمال کی جائے گی:

کوڈ: 
<script language="JavaScript" type=text/javascript>
	makeUrduEditor("username", 12);							
</script>

جبکہ اسی مثال میں موجود textarea کو 20 پوائنٹ سائز کا ایڈٹ ایریا بنانے کے لیے ذیل کی فنکشن کال کی ضرورت ہو گی:

کوڈ: 
<script language="JavaScript" type=text/javascript>
	makeUrduEditor("message", 20);							
</script>

اس مرحلے پر ایڈٹ ایریاز میں اردو ویب پیڈ کی انٹگریشن مکمل ہو گئی ہے اور ذیل میں اس مثال کا اس انٹگریشن کے ساتھ پورا کوڈ دیا جاتا ہے:

کوڈ: 
<html>

<head>

<title>Urdu WebPad Integration</title>
</head>

<body>
<script language="javascript1.2" type="text/javascript" src="UrduEditor.js"></script>
<script language="JavaScript" type=text/javascript>
	initUrduEditor("");				
</script>



<input type="text" name="username" id="username" onfocus="setEditor(this)" size="20"></p>

<script language="JavaScript" type=text/javascript>
	makeUrduEditor("username", 12);							
</script>



<textarea rows="10" name="message" id="message" onfocus="setEditor(this)" cols="20">
 </textarea>
 
 <script language="JavaScript" type=text/javascript>
	makeUrduEditor("message", 20);							
</script>

</body>

</html>

لینگویج موڈ تبدیل کرنا
(Switching Language)

اردو ایڈٹ ایریاز میں لینگویج سوئچ کرنے کے لیے کی بورڈ شارٹ کٹ‌ CTRL+SPACE استعمال کیا جا سکتا ہے۔ اردو لینگویج موڈ میں ایڈٹ ایریا کا پس منظر سبز رنگ کا ہوتا ہے جبکہ انگریزی موڈ میں اس کا پس منظر بنفشئی رنگ کا ہو جاتا ہے۔

اس کی بورڈ شارٹ کٹم سے ناواقف یوزرز کی مدد کے لیے پیج پر ہی ریڈیو بٹن کنٹرول کے ذریعے لینگویج سوئچ کرنے کی سہولت فراہم کی جا سکتی ہے۔ اس میں setUrdu اور setEnglish فنکشن کو لینگویج سوئچ کرنے کے لیے استعمال کیا جاتا ہے اور ایڈٹ ایریا کی آئی ڈی کو بطور ان فنکشن کے پرامیٹر کے بھیجا جاتا ہے۔ ذیل کے کوڈ میں اوپر والا html پیج اس لینگویج سوئچ کرنے کی سہولت کے سمیت دیا جا رہا ہے:

کوڈ: 
<html>

<head>

<title>Urdu WebPad Integration</title>
</head>

<body>
<script language="javascript1.2" type="text/javascript" src="UrduEditor.js"></script>
<script language="JavaScript" type=text/javascript>
	initUrduEditor("");				
</script>



<input type="text" name="username" id="username" onfocus="setEditor(this)" size="20"></p>
English<input type="radio" value="English" name="toggle1" onclick='setEnglish("username")'>اردو<input type="radio" value="Urdu" checked name="toggle1" onclick='setUrdu("username")'>
<script language="JavaScript" type=text/javascript>
	makeUrduEditor("username", 12);							
</script>



<textarea rows="10" name="message" id="message" onfocus="setEditor(this)" cols="20">
 </textarea>
 



English<input type="radio" value="English" name="toggle2" onclick='setEnglish("message")'>اردو<input type="radio" value="Urdu" checked name="toggle2" onclick='setUrdu("message")'>
 
 <script language="JavaScript" type=text/javascript>
	makeUrduEditor("message", 20);							
</script>

</body>

</html>
 
نبیل

نبیل

تکنیکی معاون
آن سکرین کی بورڈ

آن سکرین کی بورڈ نئے اردو ٹائپنگ کرنے والوں کے لیے مفید رہتا ہے جو اردو کی بورڈ سے زیادہ واقف نہیں ہوتے۔ آن سکرین کی بورڈ استعمال کرنے کے لیے محض ایک فنکشن کال writeKeyboard کی ضرورت ہوتی ہے۔ اس فنکشن کال سے html پیج پر ایک آن سکرین کی بورڈ نمودار ہو جاتا ہے۔ یہ افقی (horizontal) سمت میں تمام جگہ گھیر لیتا ہے۔ ذیل میں اوپر والی پوسٹ کی مثال میں پیش کیے گئے کوڈ کو کچھ ترتیب دے کر اور آن سکرین کی بورڈ والی فنکشن کال کے ساتھ دوبارہ یہاں پیش کیا جا رہا ہے:

کوڈ: 
<html>

<head>

<title>Urdu WebPad Integration</title>
</head>

<body>
<script language="javascript1.2" type="text/javascript" src="UrduEditor.js"></script>
<script language="JavaScript" type=text/javascript>
	initUrduEditor("");				
</script>

<table border="1" width="64%">
  <tr>
    <td width="100%" align="center">



<input type="text" name="username" id="username" onfocus="setEditor(this)" size="20"></p>
English<input type="radio" value="English" name="toggle1" onclick='setEnglish("username")'>اردو<input type="radio" value="Urdu" checked name="toggle1" onclick='setUrdu("username")'>
      </td>
<script language="JavaScript" type=text/javascript>
	makeUrduEditor("username", 12);							
</script>
  </tr>
  <tr>
    <td width="100%" align="center">



<textarea rows="10" name="message" id="message" onfocus="setEditor(this)" cols="20">
 </textarea>
 



English<input type="radio" value="English" name="toggle2" onclick='setEnglish("message")'>اردو<input type="radio" value="Urdu" checked name="toggle2" onclick='setUrdu("message")'>
    
<script language="JavaScript" type=text/javascript>
	makeUrduEditor("message", 20);							
	writeKeyboard();
</script>
</td>
  </tr>
</table>

</body>

</html>


اگرچہ ان اردو ایڈٹ ایریاز میں اردو نسخ ایشیا ٹائپ فونٹ سیٹ کیا جاتا ہے لیکن اردو ویب پیڈ کے کوڈ میں معمولی سے ردو بدل کے ساتھ دوسرے اردو فونٹس کا استعمال بھی آسانی سے ممکن ہے۔

میں یہاں پیش کی گئی مثال کی آخری شکل کو بمع اردو ویب پیڈ کے بطور اٹیچمنٹ پوسٹ کر رہا ہوں۔ اسے آپ کسی بھی ڈائریکٹری میں ان زپ کرکے استعمال کر سکتے ہیں۔

اگر اس سلسلے میں آپ کو کوئی مشکل پیش آئے تو بلا جھجک پوچھیں۔
 

Attachments

  • urdu_webpad_tutorial_368.zip
    5.8 KB · مناظر: 109
زیک

زیک

مسافر
نبیل: یہ آپ نے بہت اچھا کام کیا ہے کہ یہ ہدایات پوسٹ کر دیں۔

اگر آپ مائنڈ نہ کرو تو اپنی مثالوں میں valid html استعمال کرو۔
 
عبدالرحمٰن

عبدالرحمٰن

محفلین
نبیل بھائی

بڑی مہربانی کہ آپ نے ہمیں‌اردو ویب پیڈ کا اپنی ویب سائٹ پر استعمال کرنے کا طریقہ واضح‌طریقہ سے بتایا۔

ویب ڈیزائنر ہونے کے ناطہ میں‌یہ تو کرلوں‌گا مگر اپنے وی بی فورم میں‌پی ایچ پی لینگویج میں‌مجھ سے نہیں ہورہا، اُس کی سب سے بڑی وجہ یہ ہے کہ مجھے پروگرومنگ نہیں آتی،
 
نوید

نوید

محفلین
السلام علیکم ورحمتہ اللہ وبرکاتہ
امیدہے کہ سب ساتھی خیریت سے ہونگے

نبیل بھائی اور دوسرے ساتھیوں کے لیے ایک اطلاع اور ایک خوش خبری

http://www.minhajspain.org/forums/index.php?showtopic=301
انوژن بورڈ کے نئے ورژن پر اردو اڈیٹر لگانے میں بری طرح ناکامی ہونے کے بعد میں‌ انوژن بورڈ کی فاسٹ ریپلائی بکس میں اردو اڈیٹر لگانے میں‌کامیاب ہو گیا ہوں ۔۔۔
اگر کسی ساتھی نے اپنے انوژن بورڈ پر اردو اڈیٹر لگانا ہو تو یہاں پوسٹ‌کردے

خوش رہیں
 
نبیل

نبیل

تکنیکی معاون
السلام علیکم نوید،

یہ تو اچھی خبر ہے کہ آپ کو انویژن کے فاسٹ‌ رپلائی میں ویب پیڈ انٹگریٹ کرنے میں کامیابی حاصل ہوئی ہے۔ لیکن آپ کو ناکامی کس چیز میں ہوئی ہے؟ کیا عام پوسٹ‌ پیج کے ایڈیٹر میں ویب پیڈ شامل کرنے میں کوئی مشکلات پیش آ رہی ہیں؟

آپ اگر یہاں انویژن میں اردو ویب پیڈ نصب کرنے کے سلسلے میں رہنمائی کرنا چاہتے ہیں تو بصد شوق۔ اس کے لیے الگ تھریڈ کھول لیں۔ ہم اس کی اپنے بلاگ پر تشہیر بھی کر دیں گے۔ اگر آپ انویژن کی آفیشنل سائٹ پر اس کے بارے میں پوسٹ‌ کر دیں تو اس سے بھی زیادہ لوگوں کو اس کے بارے میں علم ہو جائے گا۔

والسلام
 
نوید

نوید

محفلین
نبیل نے کہا:
السلام علیکم نوید،

یہ تو اچھی خبر ہے کہ آپ کو انویژن کے فاسٹ‌ رپلائی میں ویب پیڈ انٹگریٹ کرنے میں کامیابی حاصل ہوئی ہے۔ لیکن آپ کو ناکامی کس چیز میں ہوئی ہے؟ کیا عام پوسٹ‌ پیج کے ایڈیٹر میں ویب پیڈ شامل کرنے میں کوئی مشکلات پیش آ رہی ہیں؟

آپ اگر یہاں انویژن میں اردو ویب پیڈ نصب کرنے کے سلسلے میں رہنمائی کرنا چاہتے ہیں تو بصد شوق۔ اس کے لیے الگ تھریڈ کھول لیں۔ ہم اس کی اپنے بلاگ پر تشہیر بھی کر دیں گے۔ اگر آپ انویژن کی آفیشنل سائٹ پر اس کے بارے میں پوسٹ‌ کر دیں تو اس سے بھی زیادہ لوگوں کو اس کے بارے میں علم ہو جائے گا۔

والسلام
مزید نمائش کے لیے کلک کریں۔۔۔

السلام علیکم ورحمتہ اللہ وبرکاتہ

نبیل بھائی انویژن کے نئے سسٹم میں نارمل ٹیکسٹ ایڈیٹر کے ساتھ ساتھ جدید ٹیسکٹ اڈیٹر جس کو شائد Ritch Tex بولتے ہیں ، بھی لگایا ہوا ہے ان لوگوں‌نے ، اس کے ساتھ مجھ سے آپ کا بنایا ہوا اردو ایڈیٹر سیٹ نہیں ہوا ۔۔

جاوا سکریپٹ وغیرہ کے سارے کوڈ اسی طرح استعمال کرتا ہوں لیکن مسئلہ یہ ہے کہ

انوژن بورڈ میں کبھی کبھی تو یہ کوڈ ،، ٹیکسٹ ایریا کے Nameسے چلتے ہیں اور بعض دفعہ ٹیکسٹ ایریا کی Idسے چلتے ہیں ۔۔۔۔

انوژن کے پرانے ورژن پر ٹیکسٹ ایریا کیidاور اس کا Nameایک ہی ہوا کرتے تھے اس لیے یہ مسئلہ پیش نہیں آتا تھا۔

آپ کا باقی مشورہ بھی پسند آیا اس پر کل جواب دوں گا ان شاء اللہ

خوش رہیں‌
 
نبیل

نبیل

تکنیکی معاون
السلام علیکم نوید،

یہ مسئلہ وی بی میں بھی پیش آتا ہے کیونکہ وی بی میں بھی رچ ٹیکسٹ‌ ایڈیٹر یا وزی وگ موڈ موجود ہے۔ لیکن ویب پیڈ اس کے نارمل ٹیکسٹ ایڈیٹر موڈ میں انٹگریٹ کیا گیا ہے۔ انویژن میں بھی یقیناً سادہ ٹیکسٹ ایریا میں ایڈیٹنگ کی آپشن موجود ہوگی۔ آپ کو اسی سے متعلقہ ٹمپلیٹ تلاش کرکے اس میں تبدیلی کرنا ہوگی۔ آپکو شاید یہ چیک بھی لگانا پڑے کہ ویب پیڈ صرف اسی سادہ ٹیکسٹ ایڈیٹنگ موڈ میں فعال ہو۔ میں نے وی بھی میں اوپن پیڈ کی انٹگریشن کے لیے یہی طریقہ استعمال کیا ہے۔ میں انشاءاللہ جلد ہی اس کا ہیک پبلش کر دوں گا۔

والسلام
 
نوید

نوید

محفلین
السلام علیکم ورحمتہ اللہ وبرکاتہ
اس وقت تو جاب پر ہوں ،، گھر جا کر دیکھوں‌گا اس کو ۔۔۔۔۔۔

ویسے ہے بہت عجیب و غریب معاملہ
بعض دفعہ بالکل ٹھیک چلنے لگ جاتا ہے خود ہی اور میں تھوڑی دیر بعد ٹرائی کروں تو اس کی حالت ہی بدل چکی ہوتی ہے ۔۔۔۔

اب یہ فاسٹ ریپلائی کو ہی دیکھ لیں‌،،، کل ٹھیک چل رہی تھی میرے پاس گھر میں‌، آج پاکستان سے پتا کروایا ہے تو بتا رہے ہیں‌کہ نا ہی فائر فاکس میں ٹھیک ہے اور نا ہی انٹرنیٹ ایسپلورر میں ۔۔۔۔
 
نوید

نوید

محفلین
السلام علیکم ورحمتہ اللہ وبرکاتہ

لیجیے نبیل بھائی مسئلہ کافی حل ہو چکا ہے

اب میں نے آئی ڈی ہی سے اس کو سیٹ تو کر لیا ہے مگر چھوٹا سا مسئلہ باقی ہے

یہاں محفل پر تو جب لکھنے لگتے ہیں‌تو از خود اردو لکھنی شروع ہو جاتی ہے

وہاں پر جب اڈیٹر کھلتا ہے تو وہاں بیکگراؤن کا رنگ تو اردو والا ہی ہوتا ہے لیکن لکھنے سے پہلے اردو والی ریڈیو انپٹ پر کلک کرنا ہوتا ہے، اگر آپ ڈائرکٹ لکھنا چاہیں‌، یا کٹرول سپیس سے دبا کر لکھنا چاہیں تو اردو نہیں‌لکھنے ہوتی، صرف انگریزی لکھتا ہے اور اس کے ساتھ ساتھ سٹیٹس بار پر ایک ایرور بھی آجاتا ہے
currEdit.ID, IS NULL اس طرح‌کا ۔۔۔۔۔ کیا اس کا کوئی حل ہے ؟

خوش رہیں
 
نبیل

نبیل

تکنیکی معاون
نوید، آپ شاید ویب پیڈ کے استعمال کا پرانے والا طریقہ ہی استعمال کر رہے ہیں۔ اب ویب پیڈ کا پروگرامنگ انٹرفیس قدرے بدل گیا ہے۔ کیا آپ نے ذیل کی پوسٹ‌ ملاحظہ کی ہے:

اردو ویب پیڈ اپڈیٹ
 
نوید

نوید

محفلین
السلام علیکم ورحمتہ اللہ وربرکاتہ

لیکن اسکے لیے تو نئی Js کی ضرورت ہو گی نا ؟
اگر ہاں تو وہ کہاں سے مل سکتی ہے (ڈاؤنلوڈ سسٹم تو چلتا ہی نہیں )

خوش رہیں
 
نوید

نوید

محفلین
السلام علیکم ورحمتہ اللہ وبرکات
نبیل بھائی بہت شکریہ، میں گھر جا گھر دوبارہ ٹرائی کروں گا

خوش رہین
 
جواب دینے کے لیے داخل ہوں یا شمولیت اختیار کریں۔
Top