WPF Application بناء التطبيق الأول

لبناء تطبيق بأستخدام WPF يجب اولا ان تقوم بقراءة المقالة السابقة Setting Up Visual Studio for WPF .بعد تنفيذ الخطوات المتتالية في المقالة السابقة  لأجل خلق تطبيق FirstWPFApp .سوف ينتج الشكل التالي:

نلاحظ اسم التطبيق قد ظهر مباشرة في أعلى النافذة الرسومية وأيضا ظهر داخل كود XAML .يمكنك تغير اسم التطبيق الى FirstWPFApplication من خلال محرر ال XAML بتغير محتوى Title او من خلال نافذة Properties Windows انظر الرسم التالي :

نقوم ألان ببناء زر (Button)واضافة مواصفات معينة, بداية 

 نقوم بسحب Button من مربع الأدوات (ToolBox)ووضعة على منطقة التصميم وأقصد النافذة.أنظر الرسم :

ومن ثم نأشر على الزر ونقوم باضافة بعض المواصفات له من خلال نافذة Properties window بحيث نظيف محاذاه افقية وعامودية أضافة الى الهامش.

بحيث نشاهد المحاذاة الأفقية (Horizontal Alignment)  تعطي محاذة للزر من الجهة اليسرى , أما المحاذاة العامودية (Vertical Alignment) تعطية من الأعلى ,وقمنا بأعطائه هامش (Margin) بالأرقام الظاهرة ويعطى الهامش من أجل أبعاد جميع الكائنات التي تقع حوله بأبعاد تحدد بأرقام.

الأن نقوم ببناء نافذةأكثر تعقيدا وهي نافذة الدخول الأمني الى اي نظام والتي  تحوي على أكثر من عنصر  بحيث تتألف من زر (Button) وكتلة نص (TextBlock) و مربع نص (TextBox)ومربع كلمة سر (PasswordBox) ولوحة او وعاء يدعى (StackPanel) لأجل المحافظة على العناصر في كتلة واحدة, وهذه العناصر والتي تسمى (Controls) ترتب جميعها داخل شبكة (Grid)متألفة من صفوف وأعمدة يتم تحديدها.لنأتي الى الخطوات الرئيسية لبناء النافذة:

1. نقوم بتصغير حجم النافذة الرئيسية وذلك بتقليل الأرتفاع والعرض.

2. رسم شبكة الأعمدة يتم بطريقتين اما بكتابة الأكواد XAML يدويا او من خلال استخدام الماوس في تحديد الأعمدة والصفوف واليا سوف يولد الكود ,ويمكن عمل هذا وذلك بتأشير الشبكة المحيطة بالنافذة او التأشير على Grid في محرر XAML ومباشرة سوف يتحدد الأطار المحيط بالنافذة وهنا يأتي دور الماوس بتحديد الأضلع والصفوف التي تحتاجها ويمكنك تغير الأبعاد يدويا.

أذن بعد توليد الصفوف يمكنك أيضا ان تولد الأعمدة ونحتاج في تطبيقنا عامود واحد يفصل TextBlock عن TextBox .

 بعد أكمال الشبكة نعمل على أدخال Controls في الصفوف والأعمدة .

3 . نقوم بوضع TextBlock  عدد 2 لأجل أن نبين تسمية الحقل المجاور:

4.  نقوم الأن بوضع حقول الأدخال وذلك بوضع TextBox و  PasswordBox الأول لأجل الأسم الكامل والثاني لأجل أدخال كلمة السر.

5. نقوم بأضافة زر (OK)لأجل الموافقة بعد أدخال الأسم الكامل وكلمة السر وزراخر (Cancel) في حالة الغاء الدخول , ويتم وضع الزران داخل وعاء او لوحة لتكوين قطعة كاملة.

6. نأتي الى وضع الأحداث , يجب أن نعرف أن كل Controls يحوي على Events وهي تفاعل مابين المستخدم والواجهة الرسومية مثلا : عند قيام المستخدم بأدخال الأسم الكامل ومن ثم كلمة السر يأتي المستخدم الأن ويضغط على زر OK لأجل التأكد من صحة الأسم وكلمة السر والدخول الى النظام الضغط على الزر يسمى حدث , وهناك الكثير من الأحداث التي تدعمها مكتبة Net. ,ويتم خلق حدث ما من خلال طريقتين الأولة عن طريق الظغط مرتين على الزر OK فيفتح مباشرة الحدث في Code behind ,الطريق الثانية عن طريق Properties Window  يتم أختيار الحدث من قائمة الأحداث كما مبين بالرسم:

7. نأتي الى أخر خطوة تعبئة الكود الداخلي للحدث , سوف اقوم بوضع رسالة تخرج للمستخدم في حالة الضغط على زر OK وذلك بمساعدة MessageBox , وفي حالة الضغط على الزر Cancel يتم أنهاء البرنامج مباشرة من دون أظهار اي شيئ . يتم أستخدام لغة #C .

الرسم التالي يظهر تنفيذ التطبيق وأضهار الرسالة في حالة الضغط على زر OK :

Setting Up Visual Studio for WPF

تقنية WPF تتطلب بيئة عمل لتصميم وكتابة الأكواد وقد قلنا سابقا توجد بيئة أساسية وهي Visual Studio 2010/2012 أضافة الى بيئة لأجل فصل المصممين عن المطوريين وهي Expression Blend ويمكنك قراءة المقالة السابقة WPF Development Tools. نأتي الأن الى شرح بيئة VS لأجل تطبيق تقنية WPF بداية يجب أن تنصب برنامج VS 2010 ومن ثم :

1. تقوم بتشغيل VS 2010.

2. تذهب الى القائمة الرئيسية ثم فايل وتختار جديد ومن ثم مشروع جديد .

3. يظهر لك مباشرة مربع الحوار للمشروع الجديد .

يجب ان تقوم بالخطوات المؤشرة في الرسم :

* 1. تختار اللغة المناسبة لك اما C#,VB

* 2. تختار نوعية التطبيق وهي WPF

* 3. تختار أسم معين لتطبيقك

*4. تضغط على زر OK

وعليك أيضا أن تتحقق من نسخة Net Framework. هل النسخة ذات أصدار 0.4 ام الأقل.من ألافضل أن تكون نسخة 0.4 أو الحديثة 4.5 بسبب المميزات التي تملكها عن سابقتها .

4. يظهر لك البيئة الداخلية التي سوف تعمل عليها لتطوير التطبيق الذي خلقته.يتميز VS 2010 بالوظائف المتعددة والواجهات الجميلة التي توسع نطاق العمل التصميمي والتطويري للمطور ونشاهد من خلال الشكل التالي :

نلاحظ تقسيم ساحة عمل المطور الى عدة مهام مقسمة ومرتبة بشكل رائع :

* 1. Text Editor Toolbar - وهو شريط أدوات خاص بتعديل الكود المكتوب من حيث تحويل الكود الى تعليق او أضافة هامش ,علامة أختبار الى اخره.

* 2. Toolbox - يحوي على جميع الأزرار والأدوات الرسومية الأخرة أضافة الى المكونات البرمجية ويتم سحب العناصر الرسومية الى بيئة التصميم او بيئة تحرير كود XAML.

* 3. Error List : يظهر لك جميع الأخطاء البرمجية والمنطقية ويمكن الوصول الى الخطأ من خلال الضغط مرتين  على الخطأ الموجود في هذه القائمة.

* 4. Designer Region : وهي منطقة التصميم التي تمكن المطور من رؤية تصميمه اضافة الى التعديل وأضافة الأزرار والتبويبات  مباشرة الى التصميم من خلال سحب اي عنصر من Toolbox ووضعه على منطقة التصميم , وتحوي هذه المنطقة على محرر XAML بحيث نشاهد الكود المتولد عند وضع الأزرار على منطقة التصميم ويمكن للمطور مباشرةالتعديل على الكودالمتولد أوأضافة عناصر رسومية يدويا .

* 5. Solution Explore : يظهر لك جميع العناصر والفايلات المكونة للتطبيق ويمكنك اضافة فايلات وعناصر برمجية وشاشات ومكتبات ومراجع من خلال هذه الواجه .

* 6. Properties Windows : وهي تحوي على جميع المواصفات والوظائف والأحداث (Events) للكائنات والعناصر المخلوقة على منطقة التصميم مثلا :زر معين يمكننا أن نعدل عليه بطريقتين الأولة نقوم بكتابة كود XAML يدويا لأجل أضافة لون معين او محاذاة او أرتفاع , الطريقة الثانية هو أن نستخدم نافذه Properties Windows لأجل التعديل على الزر من دون كتابة اي كود بل سوف تتحول الخطوات التي قمنا بها الى كود XAML أوتماتيكيا .الرسم التالي يوضح زر OK تم وضع خلفية حمراء بأستخدام نافذة  Properties Windows :

ونلاحظ الكود XAML الذي تولد اوتماتيكيا في الرسم التالي.

لقد تم ذكر النوافذ الأساسية لعمل تطبيق WPF ولن نذكر المميزات والوضائف والواجهات الأخرة بسبب كبر الموضوع لأن VS تطبيق كبير يحوي بداخله على تطبيقات فرعية متداخلة مع تطبيقات اخرة مثل SqlServer .

Methodologies SDLC

تعرف دورة حياة النظام (System Development Life Cycle)  على أنها مدى الانشطة المرتبطة بالنظام والتي تضم أنشاء النظام وتطويره وتنفيذه وتشغيله وصيانته وتسليمه بالكامل.ظهر هذا العلم بسبب الصعوبات التي واجهها المبرمجيين والمطوريين في بداية الاربعينات من حيث عدم وجود قواعد وأنظمة تحدد العمليات المتتالية لبناء النظام البرمجي أظافة الى عدم وجود سياسة تحدد العمليات وتقسم الاعمال على فريق العمل والاكثر من هذا أفتقار المراجع والقصد من هذا توثيق مراحل بناء النظام البرمجي ضمن قواعد مسبقة لاجل الرجوع اليها في حالة أريد تغير او تطوير أحد وظائفه نظرا للبيئة المحيطة ,هذه الاسباب ادت بدورها الى ظهور تقنية  دورة حياة الانظمة في أواخر عام 1960 بحيث ظهرت الشرارة الاولى بظهور تخصص هندسة الحاسبات الذي أدخل الى نطاق التخصصات الحاسوبية ويركز هذا التخصص على تقنية دورة حياة الانظمة بجميع جوانبها.وهناك أعتقاد خاطئ عند البعض أن البرمجة عبارة عن عملية لصنع النظام البرمجي بل هي مرحلة من مراحل بناء النظام البرمجي وهذه المراحل توصف الخطوات المتشاركة لبناء وتطوير الانظمة من بداية دراسة الجدوى مرورا ببناءه الى صيانته واخيرا تسليمه.على مر السنين ظهرت الكثيرمن المنهجات التي أعطت طابع جديد لدورة حياة الانظمة وايضا صاحب هذا التطور ظهور لغات متخصصة تستخدم في مراحل بناء النظام, ويرجع السبب في تطوير دورة حياة الانظمة الى ان النظام البرمجي بطبيعته يحتاج الى التطوير والتغيير ليواكب المتطلبات المستجدة والاختلافات التي تظهر في البيئة المحيطة به . 

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

الانشطة الفنية والتقنية

Ø      تعريف فريق العمل(محلل,مصمم,مبرمج,مختبر)

Ø      تنصيب النظام(التدريب,ككتابة الدليل الارشادي)

Ø      دعم الانتاجية(ادارة المشاكل والحلول )

Ø      تعريف الاصدارات المحدثة وتقييم البدائل

الانشطة االأدارية

Ø      تحديد الاولويات وتعريف الهدف

Ø      تتبع المشروع وتقدير الحالة

Ø      تقييم المخاطر ومراقبة العمل خطوة بخطوة

Ø      تحليل الكلف والفوائد

Ø      أدارة المورديين وذوي المصلحة

      Ø      التأكد من ضمان الجودة 

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

 النموذج الشلالي (Waterfall Mode)

      النماذج (Prototyping)

      أطار العمل التكراري التزايدي (Iterative, Increment   Framework)

      النموذج اللولبي (Spiral Mode)

      تطوير السريع للتطبيقات (Rapid Application Development)    

      تطوير المشترك للتطبيقات (Join Application Development)     

     تطوير البرامجيات المرن(Agile Software Development)    

أن ابسط منهجية ونموذج لدورة حياة الانظمة هو مايعرف بالنموذج الشلالي او التتابعي (Waterfall Mode) الذي يركز على أعداد الانظمة بشكل تسلسلي اي تبدأ مرحلة بعد أنتهاء المرحلة التي تسبقها .يتألف النموذج من عدة مراحل تضم كل مرحلة مجموعة من الانشطة يجب ان تنجز ضمن فترات زمنية محددة مسبقا وبعد أكتمال جميع الانشطة الموجودة في المرحلة الحالية يمكن الانتقال الى المرحلة التالية لبدأ في تنفيذ أنشطتها.الرسم التالي يوضح الموديل الشلالي:

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

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

Development Workflow of a WPF Project

تمر جميع الانظمة بمراحل تنظم نمو تقدمها وتقسم الأعمال على فريق العمل وهناك الكثير من المنهجيات التي تركز على تنظيم مراحل عمل بناء وتطوير الأنظمة ويمكنك الأطلاع على النص التالي SDLC .وعند أستخدامك لتقنية WPF لبناء نظام برمجي من نوع Customer Management Relation او غيره يفضل في هذه الأنظمة استخدام مراحل واضحة تحدد المهام والوظائف لفريق العمل أضافة الى توزيع البيئات التي سوف يستخدمها الفريق على مراحل التطوير واقصد بيئة  Visual Studio تذهب الى مرحلة التطوير مثلا.أذن لنبدأ بشرح المراحل لتطوير مشروع WPF :

1.أستخلاص المتطلبات  (Elicit Requirement)                      :   

وهي المرحلة الأولة في بناء أي نظام وتضم هذه المرحلة الزبون ومايسمى أحيانا بذوي المصلحة(Stack older)ومحللي الأنظمة وتعتبر هذه المرحلة من أهم المراحل لأنها القاعدة الأساسية التي سوف يعتمد عليها المراحل اللاحقة لذا يجب أن تكون واضحة ومفهومة من كلاالطرفين ويمكن التعديل عليها.وتضم هذه المرحلة في مقدمتها جمع المتطلبات وتلخيصها مع الطرف الأخر أضافة الى تحليلها وتكوين مسودة تسمى (User Stories) وهي عبارة عن مسودة تشرح كافة التفاعلات مابين العناصر اضافة الى المهام والوضائف المطلوبة من قبل العميل.ألأدوات المستخدمة القلم والورقة وكاميرة فيديو لتسجيل المقابلات.

2. الخلق والتحقق من النموذج الأولي (Create and Validate     Prototype) :

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

  . أستخدام الورق والقلم ورسم الواجهات الجامدة وعرضها على ذوي المصلحة والتعيل عليها اذا اقتضت الضرورة.

 .أستخدام برنامج PowerPoint , Visio لأجل رسم الخطوط العريضة للواجهات الرسومي وعرضها بشكل العرض التقديمي.

 .أستخدام برنامج (Expression Blend Sketch Flow)وهو برنامج حديث ومتميز يعمل على بناء نموذج أولي ديناميكي بتم عرضه على الطرف الأخر ببيانات غير حقيقية وهو أكثر جمالية ووضوح من الطريقتين السابقتين وياتي ضمن طقم Expression Blend .

3. تنفيذ الأعمال تجارية المنطقية وأكواد الواجهات (Implement Business Logic and UI) :

وهنا تأتي مرحلة التطوير والبناء وكتابة الأكواد البرمجية بحيث يتم الأعتماد على المراحل السابقة, تستخدم في هذه المرحلة بيئة Visual Studio أضافة الى بعض المكتبات والتقنيات المساعدة لتطوير أكواد  Validation Rules , Transaction,Business Logic ,Business Rules الى أخره من الأمور الأخرة.وعادة تتألف هذه المرحلة من فريق برمجي ويعتمد في كل الأحوال على نوعية وكبر المشروع.

4. تكامل التصميم الرسومي (Integrate Graphical Design)        : 

وهنا تأتي مرحلة تصميم الواجهات الرسومية الحقيقية الفعالة بألاعتماد على النموذج الأولي النهائي أضافة الى مرحلة تطوير الأكواد يتم استخدام بيئة Expression Blend لأجل أدواته الكثيرة أضافة الى فصل المطوريين والمصممين ببيئات مختلفة ويمكنك قراءة المقالة التالية Development tools .وبعد انتهاء هذه المرحل سوف ينتج قطعة برمجية يمكن نقلها الى المرحلة التالية.

   5. أختبار البرنامج  (Test Software)     وبعد اكتمال المراحل السابقة سوف تتولد حزمة برمجية يمكن أختبارها والتأكد من عملها ونوعية الأخراج الحاصل عند تنفيذ أمر ما , تيتخدم في هذه المرحلة بيئة Visual Studio بسبب احتوائها على أدوات الأختبار وتوليد (Unit test)ويقوم بهذه المهمة متخصصين بأختبار البرامجيات .

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

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

أن جميع المراحل التي ذكرناها سوف تتكرر لكل مهمةاو عملية موضوعة مثلا الطلبات (Order Process)سوف نبدأ اولا بمرحلة جمع المتطلبات وتحليل العمليات الخاصة بالطلبات والشروط المستحقة والمخرجات عند نجاح العملية او فشل العملية الى أخرة من الأمور , ومن ثم تأتي مرحلة رسم النموذج الأولي للواجهات الطلبيات وعرضها على ذوي المصلحة وأضافة بعض التعديلات , وتأتي مرحلة تكوير وكتابة الأكواد وبناء الأعمال التجارية المنطقية والموديل الذي سوف يرتكز عليه الى أخره , وبعد أكتمال هذه المرحلة تتأتي مرحلة تصميم الواجهات الرسومي الجميلة وربطها مع الأكواد المطورة , ,اخيرا تأتي مرحلة أختبار عمل الكود ومشاهدة المخرجات .وبعد أكتمال هذه العملية او المهمة نأخذ العملية التالية مثلا مهمة الأشخاص (Personal Operation) التي سوف تمر بنفس المراحل السابقة .

وبعد انتهاء جميع المهام سوف ينتج التطبيق المتكامل الذي سوف يختبر كحزمة برمجية متكاملة. الرسم التالي يوضح المراحل التطويرية لمشروع ونلاحظ التكرار الذي يكرر المراحل لكل عملية في المشروع المقترح.