منتدى فيجوال بيسك لكل العرب | منتدى المبرمجين العرب
مقدمة عن تقنية Silverlight 2 (مترجم ) - نسخة قابلة للطباعة

+- منتدى فيجوال بيسك لكل العرب | منتدى المبرمجين العرب (http://vb4arb.com/vb)
+-- قسم : قسم لغات البرمجة الاخرى (http://vb4arb.com/vb/forumdisplay.php?fid=4)
+--- قسم : قسم البرمجة بتقنية WPF (http://vb4arb.com/vb/forumdisplay.php?fid=86)
+--- الموضوع : مقدمة عن تقنية Silverlight 2 (مترجم ) (/showthread.php?tid=5370)



مقدمة عن تقنية Silverlight 2 (مترجم ) - RaggiTech - 07-10-12

كاتب الموضوع : DreamNet


بسم الله الرحمن الرحيم
درس مترجم مهم لكل من يريد القاء أول نظرة على تقنية ميكروسفت Silverlight
عناصر الدرس:

1-مقدمة:
2-انشاء مشروع Silverlight
3-التعامل مع عناصر الHTML داخل صفحة وب
4- التخاطب مع برامج وب أخرى
1.4 استقبال رسائل XML عن طريق HTTP
2.4 Silverlight وخدمات الوب

وفي الأخير سنرى تطبيق عملي لانشاء شات عادي باستعمال هذه التقنية


1-مقدمة:
Silverlight تقنية جديدة ولدت عند ميكروسفت بواسطتها يمكن انشاء تطبيقات وب غنية بالتأثيرات وحتى الألعاب
بعض الأمثلة
http://www.tafiti.com/
يمنك الحصول أيضا على عدة أمثلة من الموقع الرسمي
http://www.silverlight.net

Silverlight متوفرة حاليا باصدارين:
1.0 تسمح بانشاء تطبيقات جهة عميل client-side كاملة بالجافاسكريبت

2.0 (سابقا 1.1 ) تم دمج الفريمورك مع CLR يتم تنفيذ فيه كود vb أو سي شارب



في هذا الدرس سنستعمل الاصدار 2.0


2-انشاء مشروع Silverlight
نفتح مشروع جديد من النوع Silverlight Project



سيتم انشاء عدة ملفات مع المشروع
Page.xaml يحوي كود xaml للواجهة
Page.xaml.cs يحوي كود behind للواجهة المنشئة
TestPage.html صفحة تحوي اداة الsilvertlight
TestPage.html.js تحوي كود
Javascript يسمح بانشاء اداة Silverlight
Silverlight.js كود جافا سكريبت أيضا يقوم بالتأكد من تثبيت
Silverlight في جهة العميل client


3--التعامل مع عناصر الHTML داخل صفحة وب

في هذه الفقرة سنرى كيف نتعامل مع عناصر HTML موجودة على صفحتنا عن طريق الكود المسير من طرف برنامجنا
كما رأينا في الفقرة السابقة نقوم بانشاء تطبيق Silverlight وفي الملف TestPage.html نقوم باضافة عناصر HTML لاضافة زر وصندوق نص

كود :
[color=#000080]<div>[/color] [color=#ff8000]<input type=[COLOR=#0000ff]"text"[/color] id=[color=#0000ff]"name"[/color] />[/COLOR] [color=#ff8000]<input type=[COLOR=#0000ff]"button"[/color] id=[color=#0000ff]"send"[/color] value=[color=#0000ff]"Send"[/color] />[/COLOR] [color=#000080]</div>[/color]
في ملف page.xaml نقوم باستبدال الكود التالي:

كود :
[color=#000000][COLOR=#0000bb][/color][color=#007700]public [/color][color=#0000bb]partial [/color][color=#007700]class [/color][color=#0000bb]Page [/color][color=#007700]: [/color][COLOR=#0000bb]Canvas
[/COLOR][COLOR=#007700]{
public [/COLOR][color=#0000bb]void Page_Loaded[/color][color=#007700]([/color][color=#0000bb]object o[/color][color=#007700], [/color][color=#0000bb]EventArgs e[/color][COLOR=#007700])
{
[/COLOR][COLOR=#ff8000]// Required to initialize variables
[/COLOR][color=#0000bb]InitializeComponent[/color][COLOR=#007700]();
}
}  
[/COLOR][color=#0000bb][/color][/COLOR]

بالكود:

كود :
[color=#000000][COLOR=#0000bb][/color][color=#007700]public [/color][color=#0000bb]partial [/color][color=#007700]class [/color][color=#0000bb]Page [/color][color=#007700]: [/color][COLOR=#0000bb]Canvas
[/COLOR][COLOR=#007700]{
public [/COLOR][color=#0000bb]void Page_Loaded[/color][color=#007700]([/color][color=#0000bb]object o[/color][color=#007700], [/color][color=#0000bb]EventArgs e[/color][COLOR=#007700])
{
[/COLOR][COLOR=#ff8000]// Required to initialize variables
[/COLOR][color=#0000bb]InitializeComponent[/color][COLOR=#007700]();
[/COLOR][COLOR=#ff8000]// Get the HTML Document
[/COLOR][color=#0000bb]HtmlDocument document [/color][color=#007700]= [/color][color=#0000bb]HtmlPage[/color][color=#007700].[/color][color=#0000bb]Document[/color][COLOR=#007700];
[/COLOR][COLOR=#ff8000]// Get the 2 HTML elements by their ID
[/COLOR][color=#0000bb]HtmlElement textbox [/color][color=#007700]= [/color][color=#0000bb]document[/color][color=#007700].[/color][color=#0000bb]GetElementByID[/color][color=#007700]([/color][color=#dd0000]"name"[/color][COLOR=#007700]);
[/COLOR][color=#0000bb]HtmlElement button [/color][color=#007700]= [/color][color=#0000bb]document[/color][color=#007700].[/color][color=#0000bb]GetElementByID[/color][color=#007700]([/color][color=#dd0000]"send"[/color][COLOR=#007700]);
if ([/COLOR][color=#0000bb]textbox [/color][color=#007700]!= [/color][color=#0000bb]null[/color][COLOR=#007700])
{
[/COLOR][COLOR=#ff8000]// we set the value attribute to DVP
[/COLOR][color=#0000bb]textbox[/color][color=#007700].[/color][color=#0000bb]SetAttribute[/color][color=#007700]([/color][color=#dd0000]"value"[/color][color=#007700], [/color][color=#dd0000]"DVP"[/color][COLOR=#007700]);
}
if ([/COLOR][color=#0000bb]button [/color][color=#007700]!= [/color][color=#0000bb]null[/color][COLOR=#007700])
{
[/COLOR][COLOR=#ff8000]// we add an event to the button
// when the button will be clicked the event onJump will be called
[/COLOR][color=#0000bb]button[/color][color=#007700].[/color][color=#0000bb]AttachEvent[/color][color=#007700]([/color][color=#dd0000]"onclick"[/color][color=#007700], new [/color][color=#0000bb]EventHandler[/color][color=#007700]<[/color][color=#0000bb]HtmlEventArgs[/color][color=#007700]>([/color][color=#0000bb]this[/color][color=#007700].[/color][color=#0000bb]OnJump[/color][COLOR=#007700]));
}
}
private [/COLOR][color=#0000bb]void OnJump[/color][color=#007700]([/color][color=#0000bb]object sender[/color][color=#007700], [/color][color=#0000bb]EventArgs e[/color][COLOR=#007700])
{
[/COLOR][COLOR=#ff8000]// we send the user to this URI
[/COLOR][color=#0000bb]HtmlPage[/color][color=#007700].[/color][color=#0000bb]Navigate[/color][color=#007700]([/color][color=#dd0000]"http://www.vb4arab.com/"[/color][COLOR=#007700]);
}
}  
[/COLOR][color=#0000bb][/color][/COLOR]

بعد الانتهاء يمكننا ان نشغل الصفحة اما مباشرة أو بالضغط على F5

نكمل في المرة القادمة ان شاء الله




مقدمة عن تقنية Silverlight 2 (مترجم ) - RaggiTech - 07-10-12

4- التخاطب مع برامج وب أخرى:
كما قلنا فيما سبق فان هذه التقنية تسمح بتنفيذ برامج تحت منصة الدوت نت هذا يعني أننا نستطيع التخاطب مع برامج وب أخرى لكن من الصعب أن نتخاطب مع التطبيقات موجودة على خوادم أخرى مباشرة ومع الكائن HttpWebRequest
أسهل طريقة هي المرور بخدمة وب web Service تعمل على نفس الخادم الموجود به تطبيق Silverlight


1.4 استقبال رسائل XML عن طريق HTTP
قبل كل شئ ننشئ Blank solution

نضيف تطبيق خدمة وب للمشروع




في ملف Service1.asmx المنشئ نقوم باستبدال الدالة HelloWorld بالتالية

كود :
[color=#000000][COLOR=#0000bb][/color][color=#007700][[/color][color=#0000bb]WebMethod[/color][COLOR=#007700]]
[[/COLOR][color=#0000bb]System[/color][color=#007700].[/color][color=#0000bb]Web[/color][color=#007700].[/color][color=#0000bb]Script[/color][color=#007700].[/color][color=#0000bb]Services[/color][color=#007700].[/color][color=#0000bb]ScriptMethod[/color][color=#007700]([/color][color=#0000bb]UseHttpGet[/color][color=#007700]=[/color][color=#0000bb]true[/color][COLOR=#007700])]
public [/COLOR][color=#0000bb]string HelloWorld[/color][color=#007700]([/color][color=#0000bb]string input[/color][COLOR=#007700])
{
   if ([/COLOR][color=#0000bb]input [/color][color=#007700]== [/color][color=#0000bb]null[/color][color=#007700]) [/color][color=#0000bb]input [/color][color=#007700]= [/color][color=#dd0000]"Anonym"[/color][COLOR=#007700];
   return [/COLOR][color=#dd0000]"Hello World " [/color][color=#007700]+ [/color][color=#0000bb]input[/color][COLOR=#007700];
}  
[/COLOR][color=#0000bb][/color][/COLOR]

نضيف للملف web.config من أجل السماح باستعمال الدالة GET على المتصفح واعطائها قيمة
وذلك قبل httpHandlers

كود :
[color=#000000][COLOR=#0000bb] [/color][color=#007700]<[/color][color=#0000bb]webServices[/color][COLOR=#007700]>
<[/COLOR][color=#0000bb]protocols[/color][COLOR=#007700]>
  <[/COLOR][color=#0000bb]add name[/color][color=#007700]=[/color][color=#dd0000]"HttpGet"[/color][COLOR=#007700]/>
  <[/COLOR][color=#0000bb]add name[/color][color=#007700]=[/color][color=#dd0000]"HttpPost"[/color][COLOR=#007700]/>
</[/COLOR][color=#0000bb]protocols[/color][COLOR=#007700]>
</[/COLOR][color=#0000bb]webServices[/color][COLOR=#007700]>  
[/COLOR][color=#0000bb][/color][/COLOR]

نقوم بالضعط على F5 لتشغيل الخدمة بادراج المتغير لعنوان الصفحة مثلا
http://localhost:50436/Service1.asmx...orld?input=Sky
سيتم عرض النتيجة التالية
Hello World Sky

لقد أكملنا انشاء الخدمة بقي لنا انشاء تطبيقنا silverlight




مقدمة عن تقنية Silverlight 2 (مترجم ) - RaggiTech - 07-10-12

اليوم ننشئ تطبيق SilverLight لمشروعنا

كما رأينا في النقطة 2 نقوم باضافة تطبيق Silverlight
بعدها نقوم باضافة LABEL نسميه Helloworld مثلا للصفحة Page.xaml من أجل عرض نتيجة خدمة الوب التي سنتصل بها
في صفحة الكود Page.xaml.cs نقوم بكتابة الكود اللازم لعرض النتيجة داخل الLABEL
عن طريق الHttpRequest

كود :
[color=#000000][COLOR=#0000bb][/color][color=#007700]public [/color][color=#0000bb]partial [/color][color=#007700]class [/color][color=#0000bb]Page [/color][color=#007700]: [/color][COLOR=#0000bb]Canvas
[/COLOR][COLOR=#007700]{
    [/COLOR][COLOR=#ff8000]// an BrowserHttpRequest for execute our HTTP Request
    [/COLOR][color=#007700]private [/color][color=#0000bb]BrowserHttpWebRequest mRequest[/color][COLOR=#007700];

    public [/COLOR][color=#0000bb]void Page_Loaded[/color][color=#007700]([/color][color=#0000bb]object o[/color][color=#007700], [/color][color=#0000bb]EventArgs e[/color][COLOR=#007700])
    {
        [/COLOR][COLOR=#ff8000]// Required to initialize variables
        [/COLOR][color=#0000bb]InitializeComponent[/color][COLOR=#007700]();

        try
        {
            [/COLOR][COLOR=#ff8000]// replace the port by yours
            [/COLOR][color=#0000bb]mRequest [/color][color=#007700]= new [/color][color=#0000bb]BrowserHttpWebRequest[/color][color=#007700](new [/color][color=#0000bb]Uri[/color][color=#007700]([/color][color=#dd0000]"http://localhost:50436/Service1.asmx/HelloWorld?input=Sky"[/color][COLOR=#007700]));

            [/COLOR][COLOR=#ff8000]// Get the response to the request
            // You can call it asynchronously too
            [/COLOR][color=#0000bb]HttpWebResponse response [/color][color=#007700]= ([/color][color=#0000bb]HttpWebResponse[/color][color=#007700])[/color][color=#0000bb]mRequest[/color][color=#007700].[/color][color=#0000bb]GetResponse[/color][COLOR=#007700]();

            [/COLOR][COLOR=#ff8000]// Read response
            [/COLOR][color=#0000bb]StreamReader responseReader [/color][color=#007700]= new [/color][color=#0000bb]StreamReader[/color][color=#007700]([/color][color=#0000bb]response[/color][color=#007700].[/color][color=#0000bb]GetResponseStream[/color][COLOR=#007700]());
            [/COLOR][COLOR=#ff8000]// Read all the responde (ie : the XML text returned)
            [/COLOR][color=#0000bb]string allResponse [/color][color=#007700]= [/color][color=#0000bb]responseReader[/color][color=#007700].[/color][color=#0000bb]ReadToEnd[/color][COLOR=#007700]();
            [/COLOR][COLOR=#ff8000]// We create en XML Reader with the XML text returned
            [/COLOR][color=#0000bb]XmlReader xr [/color][color=#007700]= [/color][color=#0000bb]XmlReader[/color][color=#007700].[/color][color=#0000bb]Create[/color][color=#007700](new [/color][color=#0000bb]StringReader[/color][color=#007700]([/color][color=#0000bb]allResponse[/color][COLOR=#007700]));
            [/COLOR][COLOR=#ff8000]// Method return string so we search the string markup
            [/COLOR][color=#0000bb]xr[/color][color=#007700].[/color][color=#0000bb]ReadToFollowing[/color][color=#007700]([/color][color=#dd0000]"string"[/color][COLOR=#007700]);
            [/COLOR][COLOR=#ff8000]// Get following text node
            [/COLOR][color=#0000bb]xr[/color][color=#007700].[/color][color=#0000bb]Read[/color][COLOR=#007700]();

            [/COLOR][COLOR=#ff8000]// we display the result in the TextBlock
            [/COLOR][color=#0000bb]helloWorld[/color][color=#007700].[/color][color=#0000bb]Text [/color][color=#007700]= [/color][color=#0000bb]xr[/color][color=#007700].[/color][color=#0000bb]Value[/color][COLOR=#007700];

            [/COLOR][COLOR=#ff8000]// Close th XmlReader and the HTTP Request
            [/COLOR][color=#0000bb]xr[/color][color=#007700].[/color][color=#0000bb]Close[/color][COLOR=#007700]();
            [/COLOR][color=#0000bb]mRequest[/color][color=#007700].[/color][color=#0000bb]Close[/color][COLOR=#007700]();
        }
        catch ([/COLOR][color=#0000bb]Exception ex[/color][COLOR=#007700])
        {
            [/COLOR][COLOR=#ff8000]// if error, we display the exception's message in the textblock
            [/COLOR][color=#0000bb]helloWorld[/color][color=#007700].[/color][color=#0000bb]Text [/color][color=#007700]= [/color][color=#0000bb]ex[/color][color=#007700].[/color][color=#0000bb]Message[/color][COLOR=#007700];
        }
    }
}  
[/COLOR][color=#0000bb][/color][/COLOR]

المفروض كل شئ أصبح جاهز
لكن ليس بعد , فعند استعراض الصفحة تحدث مشكلة فيعرض لنا النص التالي:

اقتباس:
[TABLE="width: 100%"]
[TR]
[TD="class: alt2"]Cross domain calls are not supported by BrowserHttpWebRequest [/TD]
[/TR]
[/TABLE]

لكننا نشغل الخدمة على نفس الخادم المستعمل للSilverlight
المشكل حدث لاننا لا نشغلها على نفس المنفذ


من أجل حل هذه المشكلة نذهب إلى تطبيق الWeb Service الذي انشأناه بالزر الأيمن نضغط على Add Silverlight Link ونضيف تطبيق الsilverlight الذي أنشاناه
بذلك يتم اضافة مرجع لتطبيق الSilverlight داخل خدمة الوب ويقوم بنسخ الصفحة Page.xaml
داخل مجلد مشروع خدمة الوب المنشئ ولاننسى أيضا نسخ TestPage.html, TestPage.html.js ايضا

الأن نستعرض الملف TestPage.html الموجود حاليا في مجلد خدمة الوب وبذلك يتم تشغيل الصفحة بدون مشاكل


في المرة القادمة سنرى طريقة أخرى للتعامل مع خدمات الوب مع تطبيقات Silverlight