XAML مقدمة حول

قدمت شركة مايكروسوفت لغة  Extensible Application Markup Langauge وهي عبارة عن توسيع للغة XML بحيث نرى العلاقة الهرمية والأشجار والنمط الهيكلي قريبة جدا من لغة  XML , وتم أصدار اول نسخة في 2008 ضمن3.0  .Net Framework
وكان الهدف الرئيسي من تطوير هذه اللغة لأجل بناء وتصميم الواجهات الرسومية (User Interface) لتطبيقات .Net  بحيث ظهرت في البداية مصاحبة لتقنية Windows Presentation Form (WPF) و (SL) Silverlight وذلك من خلال فصل كود التصميمXAML  عن الكود الداخلي C#, VB ومن ثم أدخلت هذه اللغة في  تقنية  Windows Workflow Foundation (WF) و  Windows 8 Metro في  الأصدارات اللاحقة بحيث نرى ان الكثير من الواجهات في الويندوز 8 أعتمدت على هذه اللغة بسبب سهولة سياقها مقارنة باللغات الأخرى أضافة الى كفائتها وامكانياتها الفائقة  في التصميم .

Advantages of XAML

v      سهولة تعلمها وقرائتها وقصر اكوادها مقارنة بكود C# , VB

v      يتم فصل الكود التصميم عن الكود الداخلي (Code behind) 

v      يمكن توليدها عن طريق الادوات الرسومية في برنامج Expression Blend 

v      فصل كود التصميم XAML عن الكود UI Logic يسمح لنا بفصل الأدوار والبيئات مابين المصمم والمطور .

XAML vs. Code

عند أستخدام تقنية الكلاسيكية WinForm  في بناء التطبيقات والواجهات نشاهد أن المطور يستخدم لغة  C# , VB في كتابة الكود الداخلي وكود التصميم واقصد بناء الأزرار

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

 نشاهده من  code snippet  التالي الذي يتألف من نص (TextBlock) وزر(Button) موجودان داخل وعاء (StackPanel) أضافة الى خاصية الحاشية الداخلية (Margin)  والمحاذاة ألافقية (HorizontalAlignment).نشاهد التشابه الكبير بين XAML ولغة XML ,HTML 

ونلاحظ نفس الكود السابق لكن بأستخدام لغة  #C 

نلاحظ من الرسم ان أستخدام لغة XAML  يوفر الوقت بسبب الفرق من حيث حجم الكود 

 في الرسم التالي يوضح نتيجة تنفيذ الكود سواء كان بواسطة لغة XAML , C#  




  أذن ممكن ان نستنتج بأن لغة XAML تستخدم لبناء الواجهات الرسومية أما لغة C# ,  VB   لبناء الأكواد الداخلية Code behind  .
لغة XAML  تحتوي على الكثير من الأدوات التي تمكن المصمم من بناء كل شيئ يخطر على بال العميل وذوي المصلحة . ويمكن لأي مصمم ومطور تعلمها بسهولة من خلال 
المرجع التالي : XAML Developer Reference
 

WPF Development Tools

تقدم شركة مايكروسوفت أدوات لأجل تطوير التطبيقات بواسطة تقنية WPF , و من هذه الأدوات هي بيئة التطوير Visual Studio  لأجل المطوريين , وبيئة التصميم  Expression Blend لأجل المصممين , بحيث ركزت شركة مايكروسوفت على عمل فريق متكامل وتدفق متوازي لجميع أعضائه من خلال توفير بيئة للمطوريين وللمصممين وبأستخدام لغة XAML .بالرغم من أمتلاك بيئة VS أدوات التصميم ومحرر لكتابة XAML   بحيث يمكن للمطور أستخدامها لتصميم وكتابة الكودXAML,C# من دون الحاجة الى بيئة Blend   لكن في كل الأحوال بيئة Blend توفر أدوات كثيرة لأجل التصميم وتشبه بكثير أدوات Photoshop  .أختيار البيئة ترجع في النهاية الى المطور.

لكن ينصح بأستخدام البيئتين لأجل العمل  : فريق التصميم على بيئة Blend لأجل بناء الواجهات الجميلة وتوليد كود XAML اضافة فريق التطوير على  بيئة VS لأجل بناء الأكواد الخاصة Business Logic and Operation ويمكنهم العمل بالتوازي بأستخدام نمط يدعى  Model View ViewModel(MVVM) ويعتبر من الأنماط المهمة والحديثة سوف نتطرق اليها في المواضيع القادمة .

الصورة التالية توضح  Microsoft Visual Studio 2010

و يمكنكم تحميله من النص التالي : Download Microsoft Visual C# 2010 - Express Edition

في حالة لديك تطبيق يحتاج تصاميم جميلة و أبعاد ثلاثية و animations وقوالب وديكورات خاصة للتصميم يصعب عملها من خلال كتابة الكود XAML يدويا , في هذه الحالة سوف تحتاج الى Blend , لكن اذا  كان تطبيقك لا يحتاج هذه الامور فيكفيك أستخدام بيئة VS  لبناء وتطوير كود التصميم XAML أضافة الى كود الداخلي C# , VB  .

الصورة التالية توضح  Microsoft Expression Blend 4 

و يمكنكم تحميله من النص التالي :   Download Microsoft Expression Blend 3

ومن مميزات المنتج Blend  انه يتلائم مع المنتجات  Adobe Illustrator , Adobe Photoshop بحيث يمكن عمل صورة جميلة أو ديكور معين ومن ثم استيراده من قبل Blend  بحيث يقوم مباشرة بتحويل الفايلات التابعة للمنتجات المذكورة أعلاه الى كود XAML ليتلائم مع بيئة المطوري .Net ومن ثم يمكن للمطوري وبأستخدام بيئة VS  بأستلام أكواد التصميم من برنامج Blend لأجل كتابة أكواد C# , VB    لبناء التطبيق .

الرسم التالي يوضح تدفق العمل مابين البيئات :                                                                                                     

ويمكنكم تحميل الكتاب الذي يعتبر دليل لتعلم المنتج Blend : 

 : Expression Blend studio 4

WPF vs Win Form الفرق بين

في غضون السنوات الخمس الماضية قامت شركة Microsoft بتحويل ستراتيجيتها التي أعتبرها بعض المختصين بالعالم البرمجي والتقني بأنها ستراتيجية كلاسيكية وذلك بسبب عدم وجود تطوير كبير يحول قواعد لعبة برمجة التطبيقات التي تعمل تحت منصة .Net فنشاهد استخدام تقنية Windows Form(Win Form) لسنوات طويلة بالرغم من أضافة بعض الخصائص والوظائف بين فترة وأخرى لكن في كل الأحوال مشاكل عانى منها مطوري .Net ومنها :

v      صعوبة فصل الكود البرمجي الداخلي (Code behind) عن كود التصميم .

v      صعوبة استخدام التصاميم والالوان والواجهات وتحويلها الى لغة C# , VB .

v      صعوبة تصميم الواجهات ذات الأبعاد   3D , 2D .

v      غياب لغة قياسية شبيه بلغة HTML , XML لبناء تصميم الواجهات الرسومية (User interface) .

v      عدم وجود بيئة منفصلة للمصمم والمطور .

كل هذه المشاكل تم حلها من خلال أضهار تقنية   Windows Presentation Foundation WPF بحيث تم اصدار أول  نسخة (WPF 3.0) في Nov 2006 , ركزت على توفير نموذج برمجي (programming model) لأجل بناء التطبيق وتزويد فاصل مابين واجهات المستخدم (User interface) والمنطق التجاري (Business logic)  .تعتبر تقنية WPF من التقنيات الحديثة والمرنة بسبب أعتمادها على لغة   Extensible Application Markup Language (XAML) وهي لغة شبيهة بلغة HTML , XML وكان الغرض الرئيسي من خلق هذه اللغة هو عمل تكامل لعمل المطور والمصمم وأحتوائها على الكثير من الخصائص والمميزات.

تطبيقات WPF يمكن ان تكون عبارة عن تطبيقات تنصب على الكمبيوتر الشخصي standalone desktop programs او تضيف على المتصفح  hosted as an embedded object in a website.

الصور التالية توضح الفرق مابين التقنية الكلاسيكية (Win Form) والتقنية الحديثة (WPF) 

تقنية Win Form

نلاحظ من نوافذ تقنية (Win Form) ابتعادها عن الألوان الزاهية أضافة الى تداخل الكثير من الأمور في النافذة الواحدة وافتقارها الى المرونة بسبب اعتمادها على لغة VB, C# في بناء الواجهات الرسومية , وذا رأينا الكود الداخلي للتطبيق سوف نشاهد حجم الكود المكتوب الكبير بسبب عدم فصل الكود البرمجي عن الكود التصميم.النوافذ المببينة اعلاه عبارة عن نوافذ جامدة.

تقنية WPF

من الوهلة الاولى نرى تحول كبير من حيث الألوان الزاهية والأزرار الجميلة والترتيب الأنيق أضافة الى شكل النوافذ وأنطلاقها من دون التأثير على النوافذ المصاحبة, والأهم من هذا هو فصل الكود البرمجي الداخلي(C#/VB) عن الكود التصميم (XAML) مما يقلل من حجم الكود وزيادة كفاءة التطبيق.أضافة الى وجود الكثير من الخصائص التي تتوفر في هذه التقنية ومنها :

Direct3D

Media services

Data binding

 Style and Templates

Animations

Effects

 

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

 

Data Modeling نمذجة البيانات

وهي جزء لا يتجزأ من عملية تصميم  و تطوير نظام البيانات , فهي تزود طرق و معاني لأجل وصف معلومات و متطلبات العالم الحقيقي بطريقة مفهومة (لذوي المصلحة  Stakeholder ) .

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

لنأخذ مثال بسيط عن مفهوم نمذجة البيانات :- تصميم نظام بيانات لأجل (مؤسسة مصرفيةBanking institution ) , يجب عليك أولاً أن تزود بيانات حول العملية المصرفية التجارية (صكوك , عملية الخزن , الضرائب , الحسابات المصرفية , التحويلات .... الخ) و يتم تزويدك بهذة البيانات من خلال التعاون المستمر مع ذوي المصلحة إضافة الى مصادر معلوماتية أخرى و علماً أن جمع هذه البيانات و ترتيبها تدخل ضمن مرحلة تعريف المتطلبات و هي أهم مرحلة لنمذجة البيانات .

مثال أخر :- تصميم نظام بيانات لأجل مركز طبي , يجب عليك توفير بيانات حول (المريض , الأطباء , طقم التمريض , العلاج , الجدولة .... الخ) علماً أن هذة البيانات المجمعة تدخل عدة مراحل من التحليل و التعديلات لأجل الوصول الى متطلبات ترضي ذوي المصلحة و المستخدمين والمطورين .

وبعد التعريف البسيط حول نمذجة البيانات , وقبل أن ندخل الى عالم النمذجة أريد أن أتطرق الى موضوع أساسي في النمذجة وهو (النموذجModel )

النموذج :- هو تمثيل خاص لجوانب من العالم الحقيقي , لأجل تبسيط مفهوم النموذج لنأخذ المعادلة الرياضية التالية :-

 5 + 4 = 9

هذه المعادلة عبارة عن موديل رياضي(Mathematical Model)  بحيث يستخدم هذا النموذج رموز(Symbol) و منطق(Logic) . هذا النموذج يمثل حقيقة وذلك في حالة وضعنا 5 أشياء و جمعناها مع 4 أشياء من نفس النوع سوف نحصل على نتيجة 9 أشياء من نفس النوع . فيزيائياً نحن خلقنا نموذج لتمثيل خصائص مادية من العالم الحقيقي . لنأتي الأن و نبسط المفهوم بأخذ مثال :- أردت أن تشتري بيت في منطقة معينة . يجب أولاً أن تذهب الى مكتب المبيعات , في هذا المكتب وجدت أنهم يملكون عدة أشكال للمنازل التي ممكن أن تبنى و تكتمل في غضون ثلاث سنوات , بمعنى أنك سوف تشتري مساحة أرض فارغة و تقرر أي شكل من الأشكال (التي سوف يعرض عليك المطور) سوف تختارة . هذه الأشكال عبارة عن منازل متكاملة من حيث الطوابق والغرف والأشياء المحيطة بها مع إمكانية إضافة متطلبات و تحديثات معينة على الشكل المختار من قبل الزبون , هذه الأشكال هي ما يسمى بـ (Models) إذن النموذج عبارة عن تمثيل حقيقي لبعض جوانب العالم الحقيقي , فهو مخطط يمثل بناء هياكل مقترحة من العالم الحقيقي . بهذا النموذج يعطي تصور حقيقي للمنزل المستقبلي بالرغم أنه لا يوجد على أرض الواقع , وعند إختيارك لنموذج معين سوف يقوم المطورون بالعمل على أرض الواقع بالأعتماد على النموذج المنصوص عليه و لمدة ثلاث سنوات .

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

الأجابة على هذا السؤال بأخذ المثال التالي :-

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

الزبائن (Customers) , المنتجات (Products) , المبيعات (Sales) . نقوم الأن بتحديد مواصفات كل من الكائنات التالية .

الزبائن :-

رقم الزبون , أسم الزبون , هاتف الزبون , المدينة , العنوان الكامل .

المبيعات :-

رقم الطلبية , تاريخ الطلبية , طريقة الشحن , السعر النهائي للبيع .

المنتجات :-

رقم المنتج , شرح المنتج , كلفة المنتج , عدد وحدات المنتج .

أنظر الرسم التالي الذي يوضح المكونات الثلاث :

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

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

نأتي الأن لعمل ترابط بين الكائنات لتكون أكثر وضوحاً من الناحية المنطقية و مفهومة لكلا الجهتين ( ذوي المصلحة , المطورين )))( .

العلاقة بين الزبائن \ المبيعات :-

كل زبون يمكنة الشراء لمرة واحدة أو أكثر وفي نفس الوقت كل شراء أو ما يسمى الطلبية تنتمي الى زبون واحد فقط . مثال :- أحمد قام بشراء معين ( طلبية معينة ) واحدة و يمكنة أن يقوم بعمل طلبية أخرى أو أكثر و في كل الأحوال هذين الطلبين ينتميان الى أحمد فقط بمعنى لا يمكن أن يتشارك أكثر من زبون بطلبية واحدة .

العلاقة بين المبيعات \ المنتجات :-

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

أنظر الرسم  الأولي التالي الذي يوضح نموذج البيانات Data Model لمتجر بيع الحاسوب .

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

-المستوى المفاهيمي .

-المستوى الخارجي .

-المستوى المنطقي .

-المستوى الفيزيائي .

هذة المستويات سوف يتم شرحها في الدروس القادمة إن شاءالله .