بداء العمل مع Gadgets

[iAGx]

السلام عليكم , طبعا الجميع رائ المسابقة التي طرحها المنتدى حول تصميم و برمجة الـGadgets , احوال في هذا المقال التعمق اكثر في تقنية Gadgets و التي اتت مع قدوم windows vista .

نظرة عامة

• • ما هو Gadgets ؟
• • خصائص مشتركة .
• • قوانين و اعدادات .

بدا العمل

• • بدأ العمل مع المشيد Gadget.xml .
• • ملف الشفرة .
• • تحزيم الاداة استعدادا لنشر .

نظرة عامة

ما هو Gadgets ؟

لا نستطيع ان نقول بان Gadgets هيا برنامج , ربما يكون التعبير الصحيح لتعريف هذه التقنية بلغة العربية و طبقا للوضيف و ليس المعنى هيا الادوات الذكية , او الادوات السريعة , و هيا تقنية تقدم لك خدمة معينة بسهولة و بساطة ربما دون ان تضغط على زر واحد في الفأرة , سهولة هذه التقنية ليست فقط على صيعد الاستخدام بل و ايضا البرمجة فيكفي ان تتعلم لغة HTML مثلا لتقوم ببناء أداتك الخاصة , كما انها لا تحتاج لمعالج تثبيت او تحزيم , لاحظ ايضا ان هذه الادوات الصغيرة في برمجتها و استخدامها هيا ايضا صغير للغاية في الحجم , كما تستطيع ان تبرمج أدات الخاصة فقط باستخدام المفكرة دون اي تعقيدات ما دمت تعلم ماذا تكتب , الملفت للانتباه هنا بأن هذه التقنية ليست من بنات افكار Microsoft و انها تقنية موجودة في انظمة Apple ( سبق و عملت عليها داخل نظام Tiger ) تحت مسمى واجتس , هذا الامر الذي خلق لـ Microsoft مسلسل قانوني جديد مع شركة Apple داخل المحاكم الامريكية .

بعيدا عن محافل المحاكم , افضل أن تقضي فترة و لو قصير في فهم البيئة التي تعمل عليها هذه الاداة داخل شريط Windows Sidebar , انقر على قائمة ابداء و حدد مجلد الملحقات ثم حدد البرنامج Windows Sidebar او الشريط الجانبي في النسخة العربية , عندما تنقر على البرنامج سيبدا الشريط الجانبي بالعمل , حاول تحريك بعض الادوات من مكانها , انقر على اي اداة موجودة امامك بزر الفأرة الأيمن و حاول تغير خصائص تلك لاداوات مثل معدل الشفافية او وضع الاداة فوق كل البرامج , اذا كنت لا ترى اية أدوات يمكن ان تنقر في أي مكان فارغ على الشريط الجانبي بزر الفأرة الايمن وحدد الخيار Add Gadget , سيظهر امامك مربع مستعرض الادوات , اسحب اية اداة و القيها على الشريط الحانبي لبدا العمل فورا , اذا نقرت على الكلمة show Details الموجودة في مستعرض الاداوت سترى مجموعة من المعلومات حول الاداة , المبرمج و الشركة تاريخ التطوير معلومات سريعة ... ألخ.

خصائص مشتركة

ربما لاحظة اثناء العبث بالشريط الجانبي بان هناك خصائص مشتركة بين جميع تلك الاداوت مثل الشفافية و وضع الاداة فوق كل البرامج و امكانية تحريك الاداوات لأي مكان على سطح المكتب , و هي خصائص تكون لأي اداة دون أدنى تدخل منك او كتابة سطر واحد . ما يهمني في هذه الفقر ليس الخصائص التي تظهر امام المستخدم و انما الخصائص التي تهم المبرمج .

التواجد في مكان واحد

جميع الادوات التي تأتي مع نظام التشغيل vista تكون موجودة داخل المسار التالي :

C:\Program Files\Windows Sidebar\Gadgets

اما الادوات التي تحصل عليها من الخارج , او تقوم ببرمجتها فجميعها تكون داخل المسار التالي :

C:\Users\Administrator\AppData\Local\Microsoft\Win dows Sidebar\Gadgets

ملاحظة : يجب عليك تمكين عرض الملجلدات المخفية قبل الذهاب للمسار .

الانتهاء بالمتداد Gadgets. :

لاحظ ان جميع المجلدات و دقق انني ذكرت المجلدات الموجود داخل المسارين نتهي بالامتداد .Gadgets .

الملفات الاساسية

حاول التجول داخل تلك المسارات , ستجد بأن كل مجلد لابد أن يحتوي على الملف Gagdets.xml و بعض الملفات الاخر التي تنهي بالامتداد HTML .


قوانين و اعدادات

هناك مجموعة من القوانين التي يجب ان تعرفها و تتقيد بها قبل ان تتطور اداتك الخاصة و هيا مع شيء من التفصل و اعدروني على الاطالة و لاكني ارغب ان تكون المعلومة كافية إلى حدا ما

اسماء المجلدات :

كما دكرت في فقرة ( خصائص مشتركة - الانتهاء بالامتداد .Gadget) يجب على اسم المجلد الذي يحتوي على الاداة ان يكون بشكل التالي : Tools.Gadget حيث ان Tools هيا اسم اداتي , انظر لهذا المثال :

iagxQruanRadio.Gadget

الكل في مكان واحد :

يجب ان تكون قد لاحظة شيء مهما للغاية و هو ان جميع الملفات و الصور التي ترتبط بالاداة بشكل أو بأخر لابد ان تكون موجودة داخل مجلد الاداة , و تستطيع تنضيمها كما يحلو لك بإنشاء مجلدات فرعية داخل مجلد الاداة .

الملف المشيد Gadget.xml :

كل أداة يجب ان تحتوي على هذا الملف Gadget.xml , حيث يقوم هذا الملف بتجهيز خصائص الاداة المعروضة في مستعرض الادوات مثل اسم المبرمج و الشركة و الاصدارة ..الخ , كما يقوم هذا الملف بإستعداء ملف الكود , ليجعل الاداة تعمل بشكل مباشر بعد رميها على الشريط الجانبي .

ملف الكود

في الاصل هذا الملف عبارة عن صفحة HTML عادية , تستطيع ان تستخدم اية لغة كانت لبرمجة المواقع مثلا لتصميم الاداة ربما تستخدم CSS و لبرمجة الاداة تستخدم JS او VBS او اية لغة اخرى خاصة في برمجة صفحات HTML , هذا يعني انه لا يمكنك استخدام C# او VB.net إلا في حالة تحديد جهة تنفيذ الكود على سيرفر و ليس على جهاز المستخدم .
بعض مصممي هذه الادوات يفضلون تسمية هذا الملف ( او الملفات ) بامتدادات اخرى غير HTML بغيت حماية الكود , فقد تجد مثلا بعض الادوات لها ملفات بإمتدادات غريبة مثل ( .TTCT او .FRE او ربما .iagx  ) و لكن في الحقيقة فيها جميعها ملفات HTML تستطيع تعديلها من خلال المفكرة .

يفضل ان تستخدم VS لبرمجة ملف المشيد Gadget.xml و ملف الكود , و لاكن لا مانع من استخدام برنامج المفكرة في برمجة الملفين .

بدأ العمل

بدا العمل مع ملف المشيد Gadget.xml

سأقول لك كلمة واحد قبل بدأ العمل ( تخيل انك تبرمج صفحة ويب بشكل بحث ) ثم قم بإنشاء مجلد جديد على سطح المكتب و سمه بإسم الاداة و لا تنسى ان تنهي المجلد بالامتداد .Gadget ( راجع فقرة القوانين ) , افتح VS و من قائمة File حدد new File ثم اختر XML File , اترك السطر المكتوب و انتقل مباشرة لسطر جديد و كتب

<gadget></gadget>

و هنا انت تعلن ان الملف عبارة عن مشيد أداة Gadget.

الوسوم التي ستتعامل معها داخل ملف Gadget.xml تنقسيم لقسمين الأول وسوم تخص مستعرض الادوات , و الثاني وسوم لتحديد الهوست ( لم جد ترجمة مناسبة ) :


اولا وسوم مستعرض الادوات

• <name> : لتحديد اسم الـ Gadget .
• <author name > : لتحديد اسم مبرمج الاداة .
  • < info URl > : لتحديد رابط الاداة ( ربما يكون رابط موقعك , او المنتدى ..الخ ) .
  • <logo src> : وهنا انت تحدد ايقونة الاداة في و التي تضهر بجوار اسم المبرمج.
• <Copyright> : لتحديد حقوق الاداة .
• <description> : لتحديد وصف الاداة .
• <icons> : تحدد الايقونة التي ستحملها الاداة في صندوق الاداوت .
  • <icon> : لتحديد مسار و خصائص الأيوقنة
• <version> : لتحديد رقم النسخة .

لتنفيد الجزء الاول و هو بشكل التالي الشفرة :

الرمز PHP:

[left]<gadget>
 
      <name>Radio MP3 Quran</name>
      <author name="iagx">
            <info url="http://www.mp3quran.net/"/>
            <logo src="Images/mp3quran.gif"/>
      </author>
      <copyright> © iagx  </copyright>
      <description>A tool to listen to Holy Quran</description>
      <icons>
            <icon width="100" height="80" src="Images/mp3quran.gif"/>
      </icons>
      <version>1.1.04</version>
 
</gadget>
[/left] 


للموضوع بقية

[iAGx]

ثانيا الوسوم المتعلقة بالجزء هوست
للنتقل الان إلى الجزء المتعلق بـ Host و هو جزء يستخدم لتحديد ملف الكود و اين سيتم تنفيد الكود على جهاز العميل ام على سيرفر , و اللغة المستخدمة و هكذا .



<hosts>

• 
  
  
  <host> : لتحديد مكان تنفيد الكود عن طريق الخاصية name .
  • 
    <base> : لتحديد نوع اللغة المستخدمة و نسخة اللغة و ملف الكود .
  • 
    <permissions> : لتحديد الادونات .
  • 
    <platform> : لتحديد منصة العمل . ( لا اعلم الكثير عن هذه الوسم) .
  • 
    <defaultImage> لتحديد الصورة التي ستعرض على شريط الجانبي .

لتنفيذ هذه الوسوم الشفرة :

الرمز PHP:

[left]<hosts>
     <host name="sidebar">
  <base type="HTML" apiVersion="1.0.0" src="main.html"/>
 <permissions>Full</permissions>
 <platform minPlatformVersion="1.0" />
 <defaultImage src="Images/mp3quran.gif" />
     </host>
 </hosts>
[/left] 


في النهاية يصبح لدينا هذه الشفرة بالكامل لملف gadget.xml :

الرمز PHP:

[left]<?xml version="1.0" encoding="utf-8"?>
<gadget>
 <name>Radio MP3 Quran</name>
 <author name="iagx">
  <info url="http://www.mp3quran.net/"/>
  <logo src="Images/mp3quran.gif"/>
 </author>
 <copyright> © iagx  </copyright>
 <description>A tool to listen to Holy Quran</description>
 <icons>
  <icon width="100" height="80" src="Images/mp3quran.gif"/>
 </icons>
 <version>1.1.04</version>
 <hosts>
  <host name="sidebar">
  <base type="HTML" apiVersion="1.0.0" src="main.html"/>
   <permissions>Full</permissions>
   <platform minPlatformVersion="1.0" />
   <defaultImage src="Images/mp3quran.gif" />
  </host>
 </hosts>
</gadget>
[/left]

لاحظ أنني قمت بتحديد main.html كملف لشفرة و ذالك عن طريق الوسم base .
الان احفظ الملف داخل مجلد الاداة الذي مقت بإنشائه سابقا . و للنتقل لملف الكود .

ملف الكود

كما اوضحت سابقا ملف الكود وهو عبارة عن صفحة HTML عادية جدا و ربما ترتبط بعدد ملفات CSS و او ملفات JS و خلافة , هنا و لمجرد اشرح و لكي لا افرض تعليمات او ماشابه على هذا الملف , فقط لشرح قمت ببناء صفحت HTML و استخدمت لغة JavaScript و ذالك لتشغيل برنامج windows made player ثم برمجة الحدث onclick الخاص بالصفحة لتشغيل الاداعة عند النقر على زر Player . - لطول الشفرة فضلت ان اضعها في المرفقات - .


التحزيم استعدادا لنشر

البساطة ثم البساطة وهو الهدف من ادوات gadgets , كل ما عليك فعله لتحزيم الاداة اذهب إلى المجلد الذي قمت بإنشائة ثم حدد جميع الملفات التي قمت ببرمجتها , حدد الخيار send To ثم اختر Compressed (Zipped ) Folder , جراء هذه العملية سينتج لديك ملف zip غير اسم هذا الملف إلى اسم الاداة و غير الامتداد إلى .gadget بحيث كما في الصور :

و بهذا نكون قد انتهينا من تصميم و برمجة الاداة , لتجربة الاداة انقر على الملف النتاج iagxQuran.gadget و ثم تثبيت و انظر إلى الاداة و هيا تعمل .

لاحظ ان طريقة التحزيم مجرد عملية ضغط للملفات لا اكثر و لا اقل مع تغير الامتداد .

محلاضات :

• شفرة الاداة غير محمية بأي شكل من الاشكال , لذالك اياك ثم اياك ان تكتب امور مهمة او اكواد دات قيمة او كلامات مرور لهوست معين او ماشبه .
• عندما تحوال تثبيت بعض الادوات تأكد من المصدر قبل تثبيتها فهيا تعتبر ثغير في النظام اذا ما اوسيء استخدامها .
• الميزة العضمة هنا انك تستطيع تشغيل هذه الاداة على نظام Mac فقط بتغير اللاحقة من gadget الى wadget او شيء من هذا القبيل فقد ترتك الماك منذ سنة تقريبا .
• هناك بعض الامور التي لم اتطرق لها و هيا امور عامة و تخص الملف gadget.xml و لكني لن اتررك بسهولة انضر المصادر .
• كما اوضحت بأن ملف الكود هو صفحت HTML عادية , هذا يعني ان يمكنك اضافة فورم او صندوق نص او كمبوبس و اية ادوات اخرى ترغب في استخدامها .

انقر هنا لتحميل الاداة

مصادر اكثر :

• Developing Vista sidebar Gadgats .
• Build your one windows vista sidebar gadgets
• windows vista sidebar

تم بحمد الله .. بالتوفيق للجميع في المسابقة

[أحمد جمال]

مقالة مميزة جداً ، للتثبيت للاستفادة في مسابقة تصميم الجادجيتس .

شكراً iAGx وننتظر منك مشاركة مميزة في المسابقة .

[iAGx]

بعد ان رأيت المسابقة و الكثير من الاعضاء يتسألون حول هده التقنية و الكم الهائل من المعلومات لدي خصوصا اني من مستخدمي الماك سابقا , و مازاد الامر اثارة انك اخبرتني بأنها ستكون اول مقالة عربية عن هده التقنية فأحببت ان ترك بصمتي في المنتدى قبل ان اذهب لليابان , الايام القادمة ستكون ايام مثيرة في حياتي فقد تم ترشيحي من جامعة الملك فهد للبترول و المعادن للبعثة في اليابان , لذالك عدرني اخ احمد سأحاول المشاركة و لكني لا أعدك.

[أحــــمــــدAHMAD]

جميل جدًا أخ ... صراحة شرح فريد من نوعة جزاك الله كل خير .

[أحــــمــــدAHMAD]

عذرًا ... ولكن بعد أن رأيت الأداه( ذهلت ) وأريد أن أشكرك مرة أخرى بارك الله فيك .

[iAGx]

اهلا اخ احمد ahmad , اشوفك في المسابقة

[lo2i]

جزاك الله كل خير

اداة في غاية الجمال ودرس اجمل !

[محمد بن عمر]

هل يتطلب لتطبيق الشرح نظام فيستا؟!
ام يمكن على الاكس بي؟!

[Mr.Ahmed]

درس حقا روعة شكرا لك

وجزاك الله خيراً أخي الكريم

[iAGx]

المشاركة الأصلية بواسطة محمد بن عمر

هل يتطلب لتطبيق الشرح نظام فيستا؟!
ام يمكن على الاكس بي؟!

الحقيقة لا اعلم اذا كانت تعمل على اكس بي ام لا , و لكن ما اعرفة في هده النقطة مجرد معلومات قليلة بأن هناك شريط جانبي خاص على ويندوز اكس بي..

[أحــــمــــدAHMAD]

المشاركة الأصلية بواسطة محمد بن عمر

هل يتطلب لتطبيق الشرح نظام فيستا؟!
ام يمكن على الاكس بي؟!

لا .

[محمد أسامة جندية]

أحترم جدا كل شخص يقوم بطرح أو يشجع على تقنية جديدة في منتدى عربي لأننا نفتقد بشكل كبير لكثير من هذه التقنيات في المنتديات العربية.

شكر كبير لكاتب هذا الموضوع.

[nourex]

بارك الله فيك اخــي الكريم .. و لكــن من لا يملك windows Vista مذا سيفعل ؟

[iAGx]

جرب هذا الرابط , في المرفقات
http://vista-sidebar-xp.en.softonic.com/

[kheshkar]

شكرا لك ..... المقال مفيد جدا وجديد من نوعه

[محمد أبوجناح]

بارك الله فيك على هذا الموضوع القيم وأنني سوف أبداء معكم إن شاء الله تعالى بعد فترة قليلة وأكتب ما تعلمته في فترة دراستي لهذا الموضوع السالف ذكره.
أخوكم في الإسلام محمد أبوجناح

[ابن النيل]

عمل رائع جدا مشكور عليه ودي اول مره اقرا عن التقنيه دي وده لكثرة مشاغلي فلك الف شكر وجاري تنفيذ ما قمت بشرحه ونتمني لك التوفيق دائما والف مبروووووووووووووك علي الجائزه :d:d:d والي الامام دائما............

[المحلاوي]

يا جماعة انا اسف لكن انا عاوز اعرف شرح للموقع اروح فين واجي منين انا مبتدا برمجة ...لكن مش عارف امشي ازاي في الموقع اي حد يبعتلي رسالة لو سمحتم وشكرا . وسوري لصاحب الموضوع لان الرد مش متعلق بالموضوع سوري مرة تانية