07-10-12, 12:10 PM
كاتب الموضوع : 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]
كود :
[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
نكمل في المرة القادمة ان شاء الله