السلام عليكم ورحمه الله وبركاته
سنبدأ اليوم في إكمال رحلتنا لتعلم السلفرلايت, وسنستعرض اليوم كيفية بناء تطبيقات السلفرلايت وماهي البرامج اللازمه لعملها.
بعد أن عرفنا ماهي السلفرلايت وماذا توفر لك كمطور تطبيقات إنترنت غنيه, فحان وقت التعرف على كيفية بناء تطبيقات سلفرلايت. يمكننا من تطوير برامج سلفرلايت باستخدام الفيجوال ستوديو - وهو مجال موضوعنا اليوم – او ال Expression Blend وكذلك ال Eclipse. ولكن البرنامجين الأولين هما البيئتين الأساسيتين لتطوير برامج سلفرلايت وقبل ان نبدأ بإنشاء وتطوير تطبيقات سلفرلايت بإستخدام الفيجوال ستوديو .. أريد التنويه أن ال Expression Blend واحد من أعظم البرامج التي قدمتها مايكروسوفت والتي تسهل إنشاء وتطوير تطبيقات السلفرلايت كما توفر الكثير من الإمكانيات و التأثيرات بدون سطر كود, ولا نطيل الحديث عنه لأنه خارج نطاق دورتنا.
أفضل طريقه لفهم كيفية عمل السلفرلايت في الفيجوال ستوديو بواسطة بناء تطبيق, لذا نبدأ وقم بفتح الفيجوال ستوديو 2010 من ثم لنشىء مشروع جديد اختر لغتك المفضله من ثم قم بإختيار مشروع سلفرلايت كما هو موضح في الشكل التالي
والذي يحتوي مجموعه مختلف من المشاريع:
Silverlight Application
تطبيق سلفرلايت أساسي يحتوي على أداه إفتراضيه بدون محتوى أو مخطط تنقل بين الصفحات
Silverlight Class Library
مشروع مكتبة فئات
Silverlight Business Application
تطبيق سلفرلايت يتضمن خدمات WCF RIA بالإضافه إلى أداه إفتراضيه و مخطط تنقل بين الصفحات
Silverlight Navigation Application
مشروع سلفرلايت أساسي يحتوي على أداه إفتراضيه مع مخطط للتنقل بين الصفحات بالإضاف إلى مجموعه من الصفحات
WCF RIA Services Class Library
مكتبة فئات تحتوي على إضافات لخدمات WCF RIA
Silverlight Unit Test Application
مشروع إختبار أساسي
لأول تطبيق لنا نختار الخيار الأول وغير إسم المشروع إلى HelloSilverlight من ثم انقر زر موافق, بعد ذلك يظهر مربع الحوار التالي
الذي يسألنا إذا كنا نريد إستضافة هذا التطبيق في مشروع ASP.NET أو لا, لأنه من المعروف أن السلفرلايت تقنيه تشتغل ضمن المتصفح عند الزبون. ننقر زر موافق في نفس مربع الحوار مع التحقق أن الإصدار المختار هو الرابع. بعد ذلك سيقوم الفيجوال ستوديو بإنشاء مشروعين HelloSilverlight والذي يمثل تطبيق السلفرلايت و HelloSilverlight.Web الذي يمثل المستضيف الذي يمكن من خلاله إستعراض محتوى تطبيقنا كما هو موضح في الشكل التالي
اذا كنت مطور تطبيقات ويندوز أو ويب بإستخدام تقنية الدوت نت فإن عناصر الواجهه السابقه ليست بغريبه عليك, فنرى مستكشف الحلول الذي يحتوي على مشروع أو أكثر مستعرضاً جميع الملفات التي تتضمنها تلك المشاريع, مربع الأدوات الذي يحتوى على جميع أدوات السلفرلايت والتي سوف يتم الحديث عنها في الدرس التالي, وآخيراً وليس آخراً نلاحظ السطح المرئي لتطبيق السلفرلايت كما هو الحال في ال Windows Form أو ال Web Form أو ال Mobile Form , وفي الأخير محرر ال XAML.
نتوقف برهة بسيطه هنا ونتعرف على ال XAML, طبعاً كما ذكرنا سابقاً أن تقنية السلفرلايت هي WPF/e يعني عبارة عن التقنية الجيل الأخير لمايكروسوفت لبناء واجهات الويندوز والتي تضم جميع تقنيات العرض السابقه تحت منصه واحده: DirectX, Media Player, GDI+ والكثير الكثير, وهنا فكرت مايكروسوفت في إنشاء لغة جديده سميت XAML وهي عبارة عن تقنية تعزل الكود عن التصميم والذي أثارت ضجة كبيره وإنجاز عظيم في برمجة تطبيقات الويندوز كما هو الحال في ال ASP.NET , فيمكن للمصمم والمبرمج الآن أن يشتغلا معاً في نفس الوقت.
يكفينا نبذه بسطيه عن ال WPF و ال XAML لأنهما ذا علاقة وطيده جداً بالسلفرلايت .. وللمزيد يمكنك الرجوع لأي كتاب WPF للتعرف على أسرار هذه التقنية.
نعود مجدداً فمحرر ال XAML يمكنك من عمل نفس الشيء في التصميم ولكن بلغة ال XAML مثل تقنية ال ASP.NET فعند سحب أي أداه في التصميم يولد لها سطر بلغة ال XAML للتعبير عنها بالإضافة أن هذا المحرر غني بالمميزات مثل التلوين والتنسيق والتكميل التلقائي. لكن سيسأل البعض سأشتغل فقط بالتصميم ولاداعي أن أتعرف على ال XAML وما أدراك ما ال XAML؟!! كلا .. صدوقني ال XAML وحسب معرفتي الضيئله بها تقنية قويه جداً فتخيلوا يمكن كتابة برامج كاملة بدون سطر كود برمجي وهذه هي واحد من أهم ميزات هذه اللغه أنها لغه تصريحيه.
كما يمكننا التبديل بين العرض وال XAML وتكبير واجهة العرض بإستخدام شريط التكبير لرؤيه جيده لعناصر التطبيق.
وحان الآن الوقت للبدء بتكملة تطبيقنا الأول, من شريط الأدوات نقوم بسحب أداة الزر Button وسنلاحظ إضافة سطر جديد لمحرر ال XAML
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">
<Grid x:Name="LayoutRoot" Background="White">
<Button Content="Button" Height="23" HorizontalAlignment="Left" Margin="158,124,0,0" Name="Button1" VerticalAlignment="Top" Width="75" />
</Grid>
</UserControl>
<UserControl x:Class="HelloSilverlight.MainPage"
كل الكود السابق موجود مسبقاً عندما أنشئنا المشروع عدا السطر التالي
<Button Content="Button" Height="23" HorizontalAlignment="Left" Margin="158,124,0,0" Name="Button1" VerticalAlignment="Top" Width="75" />
فمن الوهله الأولى نلاحظ أن الأداه المضافه هي زر ولها مجموعه من الخواص فمثلاً محتواه هو Button وإرتفاعها 23 ... إلخ. أما إذا نظرنا لبقيه الكود فماهي إلا تصريحات للأداة الأساسيه المسماه إفتراضياً MainPage وركزوا معي أداه وليست صفحه, بالإضافه إل عنصر Grid طبعاً كل صفحه أو أداه منشئه من قبل المستخدم لابد أن تحتوى على أداه إحتواء مثل ال Grid لتنظيم العناصر المضافه .. وسنتعرف على الحاويات في الدرس المقبل.
نقوم الآن بتغيير محتوى الزر إلى Click Me! سنرى تغييراً متزامناً في محرر ال XAML, من ثم ننقر على الزر نقرتين ونضيف الكود التالي MessageBox.Show("Hello Silverlight!!")
ولرؤية التطبيق نقوم أولاً بالنقر باليمين على مشروع السلفرلايت وإختيار Build ليتم بناء المشروع والتأكد من صحة الأخطاء وسيتم بعد ذلك تكوين ملف HelloSilverlight.xap في مجلد Client Bin الموجود داخل المشروع المستضيف و الذي يمثل الملف النهائي للمشروع. ولرؤية التطبيق ننقر على HelloSilverlightTestPage.html أو HelloSilverlightTestPage.aspx باليمين ونختار View in Browser, سيظهر تطبيقنا بعد تحميله على المتصفح من ثم ننقر على الزر ليتم تنفيذ الكود المراد والذي هو عباره عن رساله في مثالنا الأول.
تهانينا لقد أكملت تطبيقك الأول بالسلفرلايت. وهكذا قد وصلنا إلى مشارف نهاية درسنا, ولكن أحببت قبل أن أختم أن نستعرض دور حياة البرنامج في السلفرلايت.
سنلاحظ في برنامجنا وجود ملف App.xaml ولو فتحنا الملف App.xaml.vb سنلاحظ الكود التالي
Me.RootVisual = New MainPage()
End Sub
Private Sub Application_Startup(ByVal o As Object, ByVal e As StartupEventArgs) Handles Me.Startup
والذي يبين أن عند تشغيل التطبيق ستكون الواجه الأساسية للتطبيق هي الأداه المسماه MainPage.
والآن لنلقي نظره عالشكل التالي الذي يبين دورة حياة تطبيق السلفرلايت
وبهذا نصل إلى ختام درسنا هذا والله ولي التوفيق
