مقدمة إلى مايكروسوفت سيلفرلايت [فيديو + شرح تفصيلي]

This article is available in English too, check it out here.

المحتويات

محتويات هذا الموضوع:

• المحتويات
• نظرة خاطفة
• الفيديو
• الشرائح
• ما هو سيلفرلايت
  • التعريف
  • دعم نظم التشغيل
  • تطبيقات الويب الغنية
  • إحصائيات
  • لماذا سيلفرلايت
  • سيلفرلايت وفلاش
  • سيلفرلايت و WPF
  • الأغنى والأشهر
  • مشاريع سيلفرلايت
• أعمق أكثر
  • سيلفرلايت و XAML
  • نشر التطبيق
  • مكونات سيلفرلايت
• سيلفرلايت 5
• الأدوات
  • Microsoft Visual Studio 2010
  • Microsoft Expression Studio 4
• ماذا بعد
• المثال
• الخلاصة
• خاتمة

 

نظرة خاطفة

بسهولة وإيجاز نبدأ مع السيلفرلايت، نتعرف عليه، نقارنه بالتقنيات أخرى، نتعمق فيه أكثر، وأخيرا نختم بمثال بسيط.

 

الفيديو

http://blip.tv/play/AYK17S8C

أو

http://blip.tv/file/5058795

 

الشرائح

 

ما هو سيلفرلايت

التعريف

سيلفرلايت Silverlight هي عبارة عن تقنية برمجية (فريموورك) مقدمة من مايكروسوفت تسمح لك بإنتاج تطبيقات ويب متطورة، أو كما تسمى تطبيقات الويب الغنية Rich Internet Applications (أو RIA.) وتتميز سيلفرلايت بأنها قابلة للتشغيل في كل مكان، فيمكنك تشغيل تطبيقات سيلفرلايت على أي نظام تشغيل أو على أي متصفح أو جهاز. فسيلفرلايت هي تقنية العصر الحديث التي تمكنك من إنتاج تطبيقات ويب متطورة إلى أبعد درجة تستطيع التفاعل مع المستخدم بشتى الطرق.

دعم نظم التشغيل

واحدة من أهم مميزات سيلفرلايت هو أنه، وعلى عكس أغلب تقنيات مايكروسوفت الأخرى، يمكنك تشغيلها في كل مكان. فيمكن مثلا تشغيل تطبيق ويب تم تطويره بسيلفرلايت على ويندوز، لينيكس، ماك، أو غيره. كما يمكنك تشغيلها على أي متصفح تريده (إنترنت إكسبلورر، موزيللا فايرفوكس، جوجل كروم، إلخ.) ليس هذا فقط، بل أنه لا يشترط استخدامك لسيرفر ويندوز، بل يمكنك إستضافة موقع ويب تم تطويره بسيلفرلايت على سيرفر لينيكس أو ماك!!!

نعم، أنا لا أمزح، هذا صحيح. فتقنية سيلفرلايت مشابهة كثيرا لفلاش (انتبه لهذه النقطة كثيرا،) فهي تعتمد على أن تكون ملفات وقت التشغيل Runtime منصبة على جهاز تشغيل العميل، لذلك فالأكواد كلها (أكواد الدوت نت) يتم تنفيذها على جهاز العميل وليس السيرفر. أود إضافة أنه عند محاولة العميل زيارة موقع ويب تم تطويره بسيلفرلايت أو صفحة فيها جزء تم تطويره بها فإنه إن لم يكن سيلفرلايت منصبا على جهاز العميل فإن سيلفرلايت سوف يقوم بتنصيب نفسه (بعد إذن العميل طبعا) على جهاز العميل (تماما مثلما يحدث مع فلاش.)

تطبيقات الويب الغنية

عند كلامنا على سيلفرلايت وفلاش لابد أن نذكر الفئة التي تنتمي لها تقنيات تطبيقات سيلفرلايت وفلاش ألا وهي تطبيقات الويب الغنية Rich Internet Applications (أو RIA.) تطبيقات الويب الغنية RIA هي عبارة عن تطبيقات ويب متطورة جدا لديها العديد من المميزات والقدرات، فهي في مميزاتها تشبه كثيرا تطبيقات سطح المكتب Desktop Applications المعروفة بكل قوتها ولكنها في نفس الوقت تعمل على الويب. فهي يمكنها أداء العديد من المهام التي لا يمكن لتطبيقات الويب العادية فعلها، كما أنها تتفاعل مع المستخدم مباشرة وبسرعة بدون الحاجة إلى إعادة تحميل الصفحة مرة أخرى أو غيره، فيمكنك القول بأنها تطبيقات لسطح المكتب تعمل على الويب.

ومن التقنيات التي تنتمي لهذه الفئة (فئة تطبيقات الويب الغنية) مايكروسوفت سيلفرلايت Microsoft Silverlight، أدوب فلاش Adobe Flash، صن جافا Sun Java، وغيرها. فهذه جميعا تعتبر تقنيات لتطوير تطبيقات الويب الغنية RIA.

إحصائيات

وهنا نسأل: أين سيلفرلايت من فلاش وجافا وغيرها؟ هل يستخدمه الكثيرون؟ ما مدى انتشاره حتى الآن؟

بالدخول على موقع إحصائيات تقنيات الويب الغنية http://riastats.com يمكننا مشاهدة الرسم البياني التالي والذي يوضح لك الأجهزة المتصلة بالويب ودعمها لتقنيات الويب الغنية منها (نقصد بالدعم أن تكون هذه التقنية منصبة على الجهاز.) فنجد أن 96% من الأجهزة تدعم فلاش باختلاف إصداراته. يأتي بعده سيلفرلايت في المرتبة الثانية حيث يسيطر على 74% من الأجهزة. وأخيرا تأتي جافا بنسبة مقاربة لسيلفرلايت وهي 73% من الأجهزة.

وهنا نجد أن سيلفرلايت حقق نجاحا كبيرا وفي فترة قصيرة جدا حيث أن الإصدار الأول من سيلفرلايت كان في إبريل 2007.

أيضا يوفر لنا موقع StatOWL نفس الإحصائيات ولكن بتفصيل أكثر (وهي مختلفة بعض الشيئ،) ففي الشكل التالي نستطيع مشاهدة مدى تقدم سيلفرلايت ودعم الأجهزة المتصلة بالإنترنت له:

لماذا سيلفرلايت

لسيلفرلايت العديد من المميزات والتي تجعله من أهم التقنيات الموجودة حاليا بل من أكثرها حظا، ومن هذه المميزات:

• هو مجاني.
• يعمل على جميع الأنظمة، جميع المتصفحات، وأيضا الأجهزة (PC، ويندوز موبايل/فون، سمبيان، إلخ.)
• يمكنه العمل كموقع ويب، كما يمكن أيضا تنصيب التطبيق على الجهاز والعمل كتطبيق لسطح المكتب.
• سهولة إنشاء واجهات مستخدم مذهلة باستخدامه.
• يمكنك من تطوير أدوات بسيطة توضع في الصفحة لتنفيذ مهام معينة، وكذلك يمكنك تطوير مواقع كاملة تجارية باستخدامه.
• يدعم الجرافيك ثنائي الأبعاد وكذلك ثلاثيها 2D/3D.
• يتم برمجته باستخدام الدوت نت فريموورك، اللغة التي تفضلها.
• يمكنك أيضا ربطه بأكواد جافاسكريبت JavaScript والتعامل مع التطبيق من خلال الكود.
• هو الأفضل على الإطلاق في دعم الوسائط المتعددة (فيديو/صوت) ويدعم أكثر أنواع ملفات الوسائط.
• يدعم العديد والعديد من أدوات المستخدم المتطورة جدا والتي من ضمنها أداة DataGrid.
• يدعم العديد من التقنيات الحديثة المتطورة كخدمات الويب وخدمات WCF وأزور وغيرها.

ثم من المميزات الجبارة لسيلفرلايت أنه من تطوير مايكروسوفت، لذلك فهي تدعمه بقوة كبيرة. وجدير بالذكر أن سيلفرلايت هو التقنية الرئيسية لبرمجة نظام تشغيل ويندوز فون Windows Phone.

سيلفرلايت وفلاش

قلنا أن سيلفرلايت وفلاش متشابهان كثيرا، وهنا نسأل من هو الأفضل، سيلفرلايت أم فلاش؟

نظرا لأنني من مشجعين مايكروسوفت (ونظرا لأنك الآن تقرأ في مدونة تهتم ببيئة الدوت نت) ورغم أنني أبدا لم أجرب فلاش إلا أنه يمكنني أن أقولها وبقوة أن سيلفرلايت هو الأفضل على الإطلاق. ولكن بالنظر إلى أننا في أزهى عصور الديموقراطية وحرية الرأي فأفضل أن أكون حياديا في هذا، فأقول أولا أن مايكروسوفت تمتلك 91% من السوق العالمي (بالنسبة لويندوز Windows،) وأنها تدعم سيلفرلايت بقوة شديدة. والحق يقال أن سيلفرلايت لاقى استحسانا كبيرا من المبرمجين على مستوى العالم، خاصة منذ الإصدار الثاني والذي يعتمد على لغات الدوت نت فريموورك لبرمجته.

ونحسم هذا الجدل بدراسة أجرتها InfoWorld وكانت نتائجها (وهي التي تظهر في الشكل التالي) تظهر أن سيلفرلايت يتفوق على فلاش بشكل عام:

سيلفرلايت و WPF

ننتقل إلى نقطة أخرى وهي علاقة سيلفرلايت بـ WPF.

أولا وقبل كل شيئ يجب أن نعرف ما هو WPF. تقنية WPF أو Windows Presentation Foundation هي التقنية الحديثة من مايكروسوفت والجيل الجديد لتكنولوجيا تطوير واجهات المستخدم وتطبيقات سطح المكتب. فبحلول الإصدار الثالث 3.0 من بيئة الدوت نت انتهت تقنية WinForms للأبد وانطلقت بدلا منها تقنية WPF والتي تعتبر هي الجيل القادم من تطبيقات سطح المكتب والتي تعتمد على الرسومات والجرافيك المتطور لإنشاء واجهة المستخدم، وفي هذا تعتمد على الدايركت إكس DirectX مما يجعلها أكثر قوة وقدرة بشكل هائل من WinForms والتي تعتمد فقط على الـ GDI.

وهل هناك علاقة بين سيلفرلايت و WPF؟ نعم، فعلاقة سيلفرلايت بـ WPF وطيدة جدا. فسيلفرلايت تعتبر هي الإبن الأصغر لـ WPF، فهي نسخة مصغرة جدا من WPF، وسابقا (أثناء فترة تطوير سيلفرلايت) كانت سيلفرلايت تسمى WPF/Everywhere (أو WPF/E) أي الإصدار من WPF الذي يمكنه العمل في أي مكان وعلى أي نظام بعكس WPF والتي لا يمكنها العمل إلا على ويندوز.

ومن خلال النموذج السابق نرى أن سيلفرلايت هي مثل WPF تماما ولكنها أقل منها في الإمكانيات، وأكثر منها في المميزات أخرى الخاصة بتطوير الويب.

الأغنى والأشهر

النموذج التالي يقارن بين سيلفرلايت وبعض التقنيات الأخرى من مايكروسوفت من حيث الغِنى Richness (أي إمكانيات واجهة المستخدم والتفاعل معه) والوصول Reach (أي التي يمكنها العمل على جميع الأنظمة والمتصفحات).

فمن خلال النموذج السابق يمكننا تحديد بعض الحقائق:

• تقنية WPF هي الأكثر ثراءا من حيث التفاعل مع المستخدم وإمكانيات الواجهة بينما هي تقتصر للأسف على الويندوز وأيضا فهي مخصصة أكثر لسطح المكتب فبالتالي لا تستطيع الوصول إلى جميع المستخدمين.
• أما تقنية ASP.NET فهي الأقل ثراءا من حيث التفاعل مع المستخدم وإمكانيات واجهة المستخدم، بينما هي التي تستطيع العمل على جميع المتصفحات والأنظمة وتستطيع الوصول إلى جميع المستخدمين.
• أما سيلفرلايت فقد جمعت بين الخيرين، فهي تعتبر ثرية من حيث إمكانيات الواجهة والتفاعلية، وأيضا هي تستطيع العمل على أغلب وأشهر الأنظمة والمتصفحات، ولا ننكر أن قوة سيلفرلايت ودعمه للأنظمة والمتصفحات تزيد مع الوقت.

مشاريع سيلفرلايت

كي تستطيع فهم سيلفرلايت أكثر يجب عليك أن تشاهد مشاريع تم تطويرها به، ومن هذه المشاريع:

• Deep Earth (الرابط: http://deepearth.codeplex.com)
  تطبيق يعتمد على خرائط بينج Bing Maps يساعدك على مشاهدة الأماكن وتصميم الخرائط ونحوها.
• Hard Rock Memorabilia (الرابط: http://memorabilia.hardrock.com)
  صور ولقطات من هارد روك.
• OnTV (الرابط: http://www.ontveg.com)
  البث الحي لقناة OnTV المصرية.
• Sobees (الرابط: http://sobees.com/web)
  تطبيق ويب يساعدك على متابعة حساباتك في الشبكات الاجتماعية.
• Bing Maps Streetside (الرابط: http://www.bing.com/maps/explore)
  تطبيق من خرائط بينج يساعدك على رؤية الشوارع والسير فيها.
• PhotoSynth (الرابط: http://photosynth.net)
  تطبيق يساعدك على رؤية الصور ذات الدقة العالية وعرضها بصيغة 3D.
• PivotViewer (الرابط: http://www.silverlight.net/learn/pivotviewer)
  تطبيق يساعدك على معالجة البيانات وإنشاء تقارير ورسومات بيانية.
• Fantasia (الرابط: http://nokola.com/fantasia)
  تطبيق لتصميم ومعالجة الصور.
• Nibbles Tutorials (الرابط: http://www.nibblestutorials.net)
  موقع يشرح السيلفرلايت، تم تطويره بالسيلفرلايت.
• SilverlightShow (الرابط: http://www.silverlightshow.net/Books.aspx)
  أداة صغيرة تم تطويرها بسيلفرلايت تقوم بعرض أشهر الكتب في السيلفرلايت، الـ WPF، ويندوز فون، وغيرها.
• Shidonni (الرابط: http://www.shidonni.com)
• Justin Angel (الرابط: http://justinangel.net)
  مدونة جستين آنجل، تم تصميمها بالكامل بسيلفرلايت.

وأيضا، ربما تحب مشاهدة تطبيق يسمى SilveOS يحاكي نظام تشغيل الويندوز تم تطويره بسيلفرلايت: http://silveos.com.

وأخيرا، هاك قائمة بآلاف من التطبيقات التي تم تطويرها بسيلفرلايت مقسمة إلى أقسام: http://www.silverlight.net/showcase.

Deep Zoom

وبالكلام عن مميزات سيلفرلايت ومشاريعه يجب علينا أن لا نهمل أبدا تقنية Deep Zoom المقدمة من مايكروسوفت والمعتمدة من سيلفرلايت. تقنية Deep Zoom تسمح لك بعرض الصور ذات الحجم الضخم والدقة العالية جدا (مثلا خرائط جوجل أو بينج،) حيث تقوم هذه التقنية بتقسيم الصورة إلى قطع صغيرة وعرضها حسب طلب المستخدم (عندما يقوم بالانتقال إلى مكان آخر من الصورة أو الاقتراب من الصورة Zoom أو الابتعاد عنها ونحو ذلك.)

 

أعمق أكثر

تكلمنا بشكل عام عن سيلفرلايت، والآن فلنتفحص أكثر في تفاصيل هذه التقنية.

سيلفرلايت و XAML

تماما مثل WPF، يتم تطوير واجهة المستخدم في سيلفرلايت باستخدام أكواد XAML. أكواد XAML (تُنطَق ’زامِل Zammel‘) أو Extensible Markup Language هي أكواد بلغة XML تستخدم لإنشاء واجهة المستخدم في WPF وسيلفرلايت، حيث أن كل عنصر في هذه الأكواد يساوي مباشرة عنصر برمجي، فـ <Button> تساوي العنصر Button، و <TextBox> تساوي العنصر TextBox، وهكذا. (إذا كنت تعاملت مع ASP.NET سابقا فلن تجد هذه الأكواد غريبة عليك.)

ومع زامِل XAML لتطوير واجهة المستخدم يمكنك استخدام أي لغة تابعة للدوت نت فريمورك لتكويد هذه الواجهة. فيمكنك مثلا إضافة زر باستخدام زامِل، وتكويد هذا الزر باستخدام السي شارب كما سوف نتابع في المثال لاحقا.

وفكرة فصل أكواد الواجهة عن الأكواد البرمجية يتيح لنا فصل مهمتين أساسيتين في تطوير التطبيقات، وهي مهمة المصمم Designer ومهمة المطور Developer. فالمصمم يقوم بتصميم الواجهة (وتكون في ملف زامِل وامتداده xaml،) بينما يقوم المطور بكتابة الأكواد (وتكون في ملف كودي امتداده مثلا cs إذا كنت تستخدم سي شارب.) ويتم ربط ملف الزامِل بملف الكود تلقائيا وبدون الحاجة إلى أي أداة.

نشر التطبيق

الآن وقم انتهيت من تطوير التطبيق، كيف تقوم بنشر هذا التطبيق؟ كيف يمكن للمستخدم الوصول إلى التطبيق الخاص بك؟ هذا ما سنتكلم عنه الآن بقليل من الإيجاز، فكن منتبها للتالي.

بعد كتابتك لأكواد البرنامج وتصميم شاشاته أول ما تفعله هو أن تقوم بترجمة المشروع Compile أي أن تقوم بتحويله إلى ملفات قابلة للنشر والاستضافة على موقع ويب، وتتم هذه العملية من خلال بيئة التطوير التي تستخدمها (مثلا مايكروسوفت فيجوال ستوديو Microsoft Visual Studio.) وتقوم عملية الترجمة في سيلفرلايت بتحويل جميع الأكواد وملفات XAML والمكونات الإضافية والملفات تابعة للمشروع إلى مكونات Assemblies ووضعها في ملف مضغوط نوعه XAP (تُنطَق ’زاب‘)، ويكون الضغط بتقنية ZIP أي أنه يمكنك أن تقوم بفتحه بسهولة من خلال أي برنامج لضغط الملفات.

بعد حصولك على الملف XAP تقوم بتجهيز صفحة الويب المطلوب وضع التطبيق فيها لتشغيل هذا الملف، وهذه الصفحة ربما تكون صفحة فارغة تمام ويقوم تطبيقك بملء المساحة كاملة في هذه الصفحة (مثلا أن يكون تطبيقك عبارة عن برنامج أو موقع كامل،) وإما أن يكون تطبيقك عبارة عن أداة صغيرة توضع داخل صفحة أخرى في مساحة محددة (مثلا أن يكون تطبيقك عبارة عن شعار Banner يوضع في موقع معين، أو أن يكون تطبيقك مثلا عبارة عن مشغل للفيديو أو عارض للإعلانات،) وهذا كله حسب إرادتك. في كل الأحوال كما تعلم أن سيلفرلايت مثل فلاش تماما فلتشغيله تقوم بوضع إضافة Plugin داخل الصفحة ويتم تحديد مسار ملف الـ XAP في هذه الإضافة (تماما كما تقوم بتحديد مسار ملف الـ SWF بالنسبة لفلاش.)

وعند دخول المستخدم إلى الصفحة التي تحوي تطبيق السيلفرلايت فإن كان السيلفرلايت منصبا على جهازه فإن الصفحة تقوم بتحميل ملف الـ XAP إلى جهازه وتقوم بتشغيل تطبيق السيلفرلايت، وإلا إن لم يكن السيلفرلايت منصبا على جهازه فإن الصفحة تقوم بسؤال المستخدم أن يقوم بتنصيب السيلفرلايت على جهازه. وهذا كله يتم تلقائيا وبدون التدخل من المبرمج، ليس على المبرمج إلا أن يقوم بتطوير ملف الـ XAP ويضيفه إلى الصفحة فقط.

مكونات سيلفرلايت

سيلفرلايت كما قلنا هو عبارة عن تقنية برمجية، أو بمعنى آخر هو فريموورك Framework، أي أنه عبارة عن مجموعة من المكونات والمكتبات التي يقوم المستخدم ببرمجة تطبيقه باستخدامها. ويمكننا القول بأن سيلفرلايت يحوي كل ما يريده المستخدم من أول المكونات الخاصة بواجهة المستخدم وحتى المكونات الخاصة بقواعد البيانات وخدمات الويب. والنموذج التالي يوضح المكونات التي يدعمها سيلفرلايت:

 

سيلفرلايت 5

الإصدار الحالي من سيلفرلايت والنهائي هو 4، ولكن في مؤتمر المطورين المحترفين Professional Developer Conference (أو PDC) الأخير في 2010 أعلن إصدار أحدث من سيلفرلايت وهو الإصدار الخامس وهو حاليا إصدار بيتا Beta ويُتوقع الإصدار النهائي منه قريبا.

وفي عجالة نذكر أهم مميزات سيلفرلايت 5:

• الوسائط المتعددة:
  • الاعتماد على الهاردوير أكثر من المعالج Processor في عرض الميديا مما يزيد من سرعة وكفاءة العرض.
  • استغلال أفضل للطاقة وتوفيرها.
  • إمكانية استخدام أجهزة التحكم عن بعد Remote Control للتحكم في تشغيل العرض.
• النصوص والطباعة:
  • طباعة نصوص أفضل.
  • دعم أكبر للخطوط OpenType.
• الجرافيك:
  • دعم للرسومات والحركة الثلاثية الأبعاد 3D (الإصدار الرابع يدعم ثنائي الأبعاد 2D، وشبيه ثلاثي الأبعاد 2.5D.)
  • الاعتماد على كارت الشاشة أكثر لتنفيذ الجرافيك مما يعفي المعالج من كثير من مهامه ويحسن أداء التطبيق والنظام بأكمله.
• برمجة التطبيقات:
  • دعم لويندوز أزور Windows Azure.
  • دعم برمجة واجهة تطبيق النظام Platform Invocation (أو PInvoke.)
• الأداء والاختبار:
  • أداء أفضل مبني على استغلال إمكانيات الهاردوير.
  • وقت تشغيل أسرع.
  • دعم لأنظمة 64-بت.

لن نخوض في سيلفرلايت 5 أكثر من هذا، ولكن إن أردت المزيد من التفاصيل فننصحك بقراءة المزيد هنا: http://www.microsoft.com/silverlight/future.

 

الأدوات

وفيما يلي نستعرض أشهر أدوات لتطوير السيلفرلايت.

Microsoft Visual Studio

يفضل للمطورين ويمكن استخدامه أيضا للمصممين ولكن أغلبهم لا يفضلونه ويفضلون بدلا منه Microsoft Expression Blend.

Microsoft Expression Studio 4

يفضل للمصممين ولا يفضل أبدا للمبرمجين. هي عبارة عن حزمة بها العديد من التطبيقات وهي كالتالي:

• Microsoft Expression Blend:
  بيئة تطوير لسيلفرلايت و WPF.
• Microsoft Expression Web:
  مصمم ومحرر مواقع ويب.
• Microsoft Expression Design:
  مصمم للرسومات.
• Microsoft Expression Media:
  مدير لملفات الميديا ومعالج لها.
• Microsoft Expression Encoder:
  معالج لملفات الميديا يقوم بعمل ترميز Encoding لها لتقليص مساحتها ولجعلها قابلة للتشغيل في سيلفرلايت.

 

ماذا بعد

للبدء مع سيلفرلايت يجب أولا أن يكون Microsoft Visual Studio 2010 منصبا على جهازك، أو حتى Microsoft Expression Blend 4. بعد ذلك يجب عليك أن تقوم بتحميل فريموورك السيلفرلايت على جهازك كي تستطيع البدء في برمجتها.

• لتحميل Silverlight 4 SDK (الفريموورك الرئيسي): http://bit.ly/silverlight-4-sdk.
• لتحميل Silverlight 4 Tools for VS2010 (الفريموورك + بعض الإضافات الأخرى للفيجوال): http://bit.ly/silverlight-4-tools.
• لتحميل Silverlight 4 Toolkit (بعض الإضافات الهامة للسيلفرلايت التي لا تستغني عنها): http://silverlight.codeplex.com.

أما ما يحتاجه العميل لتشغيل تطبيقات سيلفرلايت على جهازه فهو الـ Runtime ويمكن تحميله من هنا: http://www.microsoft.com/getsilverlight (سوف يقوم تطبيقك بتنصيبه تلقائيا على جهاز العميل في حالة عدم تواجده على جهازه.)

 

المثال

الآن ننتقل إلى مثال بسيط بالسيلفرلايت وهو عبارة عن تطبيق Hello World المعروف. في هذا المثال سوف نقوم بتصميم شاشة فيها زر عندما يضغط المستخدم عليه تظهر له رسالة تقول ’Hello, World!‘. لتنفيذ هذا المثال اتبع الخطوات التالية:

أولا، وقبل كل شيئ تأكد من أن فريموورك السيلفرلايت Silverlight 4 SDK منصبا على جهازك (انظر الجزء السابق.) بعد ذلك يمكنك البدأ مع سيلفرلايت بفتح الفيجوال ستوديو ثم اختيار إنشاء مشروع جديد ومن شاشة إنشاء مشروع جديد اختر نوع المشروع ’سيلفرلايت Silverlight‘ من القائمة اليسرى ومن اليمين اختر مشروع ’تطبيق سيلفرلايت Silverlight Application‘.

بعد ذلك تظهر لك شاشة خيارات المشروع. كما تعلم فسيلفرلايت عبارة عن إضافة Plugin يتم وضعها في صفحة ويب، فلذلك هنا يسألك الفيجوال ستوديو إذا كنت تريد إنشاء مشروع ويب كامل وتجهيز الصفحة الرئيسية به لتشغيل مشروع سيلفرلايت الخاص بك، أم أنك تريد إنشاء فقط صفحة HTML بسيطة وتجهيزها للعمل. فلنجعل المثال أبسط ولنترك الخيارات كما هي بدون أي تعديل اللهم إلا اختيار الإصدار الرابع من السيلفرلايت من القائمة السفلى (إذا لم تجد هذا الإصدار فننصحك بالرجوع إلى القسم السابق من الدرس والتأكد من أنك قمت بتنصيب فريموورك السيلفرلايت 4 بشكل صحيح.)

الآن فلنعطي نظرة على متصفح المشاريع Solution Explorer. نجد أنه تم إنشاء مشروعين الأول هو مشروع السيلفرلايت (في هذه الحالة يسمى ’SilverlightApplication1‘،) الثاني هو مشروع الويب (يسمى ’SilverlightApplication1.Web‘) والذي يحوي صفحة الويب التي سيعمل السيلفرلايت بداخلها.

بالدخول إلى مشروع الويب نجد أن فيجوال ستوديو قد هيأ لك صفحتين ويب أحدهما من نوع ASPX والثانية من نوع HTML، أيهما تستخدم لتشغيل تطبيقك لا يهم فالاثنان واحد بَيْد أنه يمكنك الاستفادة من إمكانيات ASP.NET وإضافة بعض التطويرات الأخرى في صفحة ASPX.

بالرجوع إلى المشروع الأصلي وهو الذي يهمنا أكثر وهو مشروع السيلفرلايت، نجد أنه يحوي عدة ملفات:

1. App.xaml (وترتبط بها App.xaml.cs):
   بها أكواد تشغيل التطبيق.
2. MainPage.xaml (وترتبط بها MainPage.xaml.cs):
   هي الشاشة الرئيسية للتطبيق.

الآن، ندخل على الشاشة MainPage.xaml وفي داخل العنصر <Grid> نقوم بتعريف زر جديد باستخدام السطر التالي من كود XAML:

في السطر السابق قمنا بإضافة زر Button جديد باستخدام العنصر <Button> ومن خلال خصائص Attributes هذا العنصر قمنا بتحديد خصائص هذا الزر، والتي من أهمها الخاصية Content والتي تحدد محتويات هذا الزر، وأيضا الخاصية Click والتي تحدد الدالة التي سيتم النداء عليها عند إطلاق حدث الضغط Click لهذا الزر.

الآن، اضغط بزر الفأرة الأيمن على شاشة أكواد الـ XAML واختر منها View Code لتنتقل إلى ملف الكود (MainPage.xaml.cs) الخاص بهذه الشاشة. في شاشة الكود نقوم بتعريف دالة حدث Click الخاص بالزر ونقوم بكتابة الأكواد المطلوب تنفيذها بداخلها:

private void Button_Click(object sender, RoutedEventArgs e) {
    MessageBox.Show("Hello, World!");
}

الآن، اضغط على زر التشغيل F5 لتشغيل المشروع وقم بتجربته.

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

<div id="silverlightControlHost">
  
      
      ...
  
  
</div>

لاحظ أننا في الكود السابق في المدخل source قمنا بتحديد ملف الـ XAP والذي سوف يكون موجودا في مجلد ClientBin عند عمل ترجمة Compile للمشروع.

هذا فقط! بسيط، أليس كذلك؟

 

الخلاصة

• سيلفرلايت هو عبارة عن فريموورك مقدمة من مايكروسوفت تهدف إلى السماح للمستخدم بإنتاج تطبيقات للويب متطورة وتستطيع التفاعل مع المستخدم بشتى الطرق.
• سيلفرلايت يمكنه العمل على أي جهاز وعلى أي متصفح، بل ويمكنك استضافته على أي سيرفر.
• سيلفرلايت مشابه كثيرا وتستطيع مقارنته بفلاش.
• سيلفرلايت هو التقنية الرئيسية لبرمجة ويندوز فون.
• سيلفرلايت هو عبارة عن نسخة مصغرة من WPF، لذا فهو يعتمد على زامِل XAML لتطوير الواجهة.
• يمكنك برمجة سيلفرلايت باستخدام أي لغة دوت نت تفضلها.
• عند ترجمتك Compile لمشروع سيلفرلايت يتم تحويل كافة ملفات الـ XAML وملفات الأكواد وأي ملفات تابعة للمشروع إلى مكونات Assemblies ويتم وضعها في ملف من نوع XAP وهو عبارة عن ملف مضغوط بتقنية ZIP.
• يمكنك ربط ملف الـ XAP بصفحة ويب مجهزة بالإضافة Plugin المطلوبة لتشغيل سيلفرلايت.
• عند دخول العميل على صفحة تحوي تطبيق سيلفرلايت يتم تحميل XAP على جهازه وتشغيل التطبيق.
• الإصدار 4 من سيلفرلايت هو النهائي، بينما الإصدار 5 يعتبر بيتا حتى الآن.
• يمكنك استخدام Microsoft Visual Studio 2010 و Microsoft Expression Blend 4 لتطوير مشاريع السيلفرلايت، يفضل الأول للمطورين بينما يفضل الثاني للمصممين.
• يجب عليك تحميل فريموورك السيلفرلايت على جهازك أولا كي تستطيع البدء في برمجته.

 

خاتمة

هذا وفي دروس مقبلة بإذن الله تعالى نبتدئ خطوة بخطوة مع سيلفرلايت، وفقكم الله لكل ما يحب ويرضاه.