برنامه نویسی فایرفاکس قسمت 2

فرستاده شده: ژوئیه 24, 2008 توسط احسان شریعتی در برنامه نویسی فایرفاکس
برچسب‌ها:, , , ,
قبل از شروع:
برنامه نويسي فايرفاکس قسمت 0
برنامه نويسي فايرفاکس قسمت 1
همانطور که قول داده بوديم الان نوبت به آموزش XUL مي رسد، آموزش XUL سعي مي کنم عملي و به همراه يک مثال جلو ببريم. مثالي که براي اين جا انتخاب کردم اينترفيس يک افزونه است که با ستفاده از سايت TinyURL آدرس هاي بلند را به URL کوتاه شده توسط سايت TinyURL تبديل مي کند. اميدوارم با انتخاب اين مثال موافق باشيد. با توضيحاتي مختصر در مورد کليت زبان XUL به سراغ طراحي اينترفيس افزونه مورد نظرمان که اسمش را TinyURL Creator گذاشتم مي رويم.
XUL يا (XML User-interface Language) براي توسعه سريع تر و راحت تر مرورگر فايرفاکس ايجاد شد. اين زبان که بر پايه زبان XML ايجاد شده تمامي ويژگي هاي XML را نيز شامل مي شود. به طور مثال زبان هاي ديگر XML و نيز HTML را مي توان به داخل آن وارد کرد. XUL را مي توان به راحتي به زبان هاي ديگر ترجمه کرد براي استايل XUL مي توان از CSS استاندارد بدون اعمال هيچگونه تغييري استفاده کرد که اين را مي توان مزيت بزرگي براي آن بشمار آورد. Cross-platform بودن آن از ساير برتري هاي آن است که آن را قابل حمل کرده است.
قبل از شروع بايد يادآوري کنم که براي استفاده از آموزش ها در زمينه ي XUL بايستي از قبل HTML بلد باشيد و يا حداقل اطلاعات کلي در زمينه ي XML و CSS داشته باشيد.

  • المنت هاي XUL بايتي به صورت کوچک نوشته شوند، XUL به مانند XML و بر خلاف HTML حساس به حروف يا Case-sensetive است.
  • مقدار المنت ها بايستي در کوتيشن قرار بگيرند. حتي اگر عدد باشند.

window
هر اينترفيس XUL داراي حداقل يک تگ ريشه با نام window است. اين تگ را مي توانيد همانند تگ <HTML> در فايل هاي html تصور کنيد البته نه کاملا…

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>

<window
    id="TUCreator-window"
    title="TinyURL Creator"
    xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
 ...
</window>

بياييد با هم المنت هاي تگ window را با هم بررسي کنيم.
مقدار المنت id براي ارجاع به اين تگ توسط جاوااسکريپت استفاده مي شود. پس بايد در کل XUL مقدار آن منحصر به فرد باشد.
Title همان نقشي را که در html دارد را اينجا هم دارد و عنوان بالاي Window را مي نويسد با اين تفاوت که اينجا بر خلاف html تگ جداگانه اي نيست و به عنوان المنت تگ window بکار مي رود.
xmlns هم namespace افزونه هاي فايرفاکس هست که هميشه مقدار http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul به آن داده مي شود.
به جاي … هم ادامه تگ ها که همه زير مجموعه تگ window هستند در ادامه خواهند آمد.
براي طراحي اينترفيس
TinyURL Creator به دو ورودي متن يکي براي ورود Long URL و يکي براي URL کوتاه شده توسط TinyURL احتياج داريم. هر کدام از اين ورودي ها به يک Label احتياج دارند و همچنين يک کليد براي دستور ايجاد URL جديد نياز است که به طاراحي آن ها مي پردازيم.

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>

<window
    id="TUCreator-window"
    title="TinyURL Creator"
    xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

<label control="LongLabel" value="Long URL: " style="font-weight:bold;"/>
<textbox id="LongURL" value="http://"/> 

<label control="TinyURL"  value="TinyURL: " style="font-weight:bold;"/>
<textbox id="TinyURL" value="" readonly="true" /> 

<button id="tinyCreate" label="Create"/> 
</window>

ابتدا بياييد با هم نتايج کد بالا ببينيم سپس کد را با هم بررسي خواهيم کرد. کد را هم از (اينجا) دريافت کنيد.



Label

از تگ Label براي درج متن در پنجره هاي XUL استفاده مي شود. المنت هاي استفاده شده value که نوشته ي متن را مشخص مي کند و style که استايل متن را يا استفاده از CSS مشخص مي کند.
textbox
تگ ورودي متن. المنت id براي ارجاع به جاوااسکريپت، value براي مقدار پيشفرض و از المنت readonly که براي تعيين قابليت اديت بودن اين قسمت توسط کاربر استفاده مي شود.
button
تگ Button براي درج کليد استفاده مي شود. در اينجا تنها ما از دو المنت id براي نامگذاري و value براي برچسب کليد استفاده کرديم.
لازم به ذکر است که تگ هاي بالا مي توانند المنت هاي ديگري را نيز بگيرند که در جاي لازم از آن ها استفاده خواهيم کرد.
در ادامه دو تگ ديگر را نيز معرفي خواهيم کرد که براي اصلاح ظاهر اينترفيس بکار ميرود تگ vbox و تگ hbox عملکرد اين تگ ها بدين شکل مي باشد که عناصر ما بين تگ hbox به صورت افقي مرتب مي شوند و بالعکس عناصر مابين تگ vbox به صورت عمودي مرتب مي گردند. همانطور که در کد و شکل بالا نيز ديديد در صورت عدم استفاده از اين تگ ها عناصر ما به صورت عمودي مرتب مي شوند .
کد مرتب شده را از (اينجا) و شکل حاصله را در زير ببينيد.

اميدوارم از اين قسمت استفاده برده باشيد. در قسمت هاي آينده به تکميل اين افزونه خواهيم پرداخت.
دنبال کار مي گردم:دانشجوي سال آخر رشته ي IT

طراحي سايت: (PHP, MySQL) و (ASP.NET, SQL Server) و HTML و CSS و …

برنامه نويسي: VB.NET

پست الکترونيکي:ehsan.shariaty@gmail.com

امرسان ياهو: ehsan_shariaty

Advertisements
دیدگاه‌ها
  1. محمد امامی می‌گوید:

    سلام
    خدا قوت
    از ارتباط مجدد با شما مسرورم
    موفق باشید

  2. Godfather می‌گوید:

    شدیدا دارم از این بحث لذت میبرم . تو رو خدا نصفه کاره نذارش .

  3. Ali Fakhari می‌گوید:

    من هم مثل سایر دوستان پی گیر این بحث هستم
    امیدوارم به کمک شما یه روز اکستنشن های خوبی بنویسم
    لطفا ادامه بدین

  4. imei می‌گوید:

    خيلي عالي هست…. من شديدا مشتاق ادامه ي اين مطالبم… چقدر پيچيده ميتونه باشه؟

پاسخی بگذارید

در پایین مشخصات خود را پر کنید یا برای ورود روی شمایل‌ها کلیک نمایید:

نشان‌وارهٔ وردپرس.کام

شما در حال بیان دیدگاه با حساب کاربری WordPress.com خود هستید. بیرون رفتن / تغییر دادن )

تصویر توییتر

شما در حال بیان دیدگاه با حساب کاربری Twitter خود هستید. بیرون رفتن / تغییر دادن )

عکس فیسبوک

شما در حال بیان دیدگاه با حساب کاربری Facebook خود هستید. بیرون رفتن / تغییر دادن )

عکس گوگل+

شما در حال بیان دیدگاه با حساب کاربری Google+ خود هستید. بیرون رفتن / تغییر دادن )

درحال اتصال به %s