+- منتدى فيجوال بيسك لكل العرب | منتدى المبرمجين العرب (http://vb4arb.com/vb)
+-- قسم : قسم لغات البرمجة الاخرى (http://vb4arb.com/vb/forumdisplay.php?fid=4)
+--- قسم : قسم البرمجة بتقنية WPF (http://vb4arb.com/vb/forumdisplay.php?fid=86)
+---- قسم : قسم دورات تقنية WPF (http://vb4arb.com/vb/forumdisplay.php?fid=87)
+---- الموضوع : [WPF حتى الاحتراف] {2} - لغة XAML (/showthread.php?tid=3220)
[WPF حتى الاحتراف] {2} - لغة XAML - الشاكي لله - 17-06-14
السلام عليكم ورحمة الله وبركاته
--
اليوم سنتحدث عن موضوع يعتبر من اهم اركان تقنية الWPF ، واتقانه هو امر ضروري لإحتراف هذه التقنية .
انها لغة XAML .. سنتعرف عليها وسنعرض ايجابياتها بجانب العديد من الامور المتقدمة نوعا ما.
بسم الله ...
--
اليوم سنتحدث عن موضوع يعتبر من اهم اركان تقنية الWPF ، واتقانه هو امر ضروري لإحتراف هذه التقنية .
انها لغة XAML .. سنتعرف عليها وسنعرض ايجابياتها بجانب العديد من الامور المتقدمة نوعا ما.
بسم الله ...
ماهي XAML
تعرف XAML بانها اختصار الى جملة Extensible Application Markup Language وتعني - لغة الرقم القابلة للامتداد للتطبيقات - وهي لغة قواعدها بسيطة وموروثة من لغة XML القياسية.
تُستخدم هذه اللغة لإنشاء وتهيئة الكائنات في تقنية WPF ، وتعمل هذه اللغة بنظام العلاقة الهرمية (اي Parent و Children ) ..
صورة 1.1 : العنصر Grid بتضمن بداخله 3 عناصر عبارة عن Button
الان من خلال الصورة السابقة نجد وبشكل واضح من هو الParent ومن هم ال Children
حيث ان الGrid يعتبر Parent والButtons تعتبر Children ، الان لنرى كود الXaml الذي قام بتكوين هذه العناصر :-
PHP كود :
<Grid HorizontalAlignment="Left" Height="105" Margin="140,110,0,0" Width="240" Background="#FFECECEC" >
<Button Content="Button" Width="75" Height="30" Margin="25,25,140,50"/>
<Button Content="Button" Width="75" Height="30" Margin="80,65,85,10"/>
<Button Content="Button" Width="75" Height="30" Margin="145,25,20,50"/>
</Grid>
شاهد هذه الصورة التي تشرح الكود السابق :-
فوائد لغة XAML
* اكواد XAML قصيرة وسهلة القراءة
* الفصل بين كود التصميم وكود البرمجة
* الفصل بين المبرمج والمصمم (حيث بالامكان استئجار مصمم ليقوم بتصميم واجهة خاصة لك) فلا يتطلب ان يكون خبيرا في البرمجة لانه فقط سيتعامل مع XAML
* امكانية كتابة الكود في برامج اخرى ك (Expression blend) ومن ثم نقله الى مشروعك .
Code-behind Vs Xaml
تعرفنا على كود ْXAML وقلنا انه هو المسؤول عن انشاء الواجهات والعناصر واسناد خصائص لها وغيرها ..
اما الCode-behind هو كود لغة البرمجة الذي يكون اما بلغة الفيجوال بيسك او السي شارب ، وهو الكود الاجرائي المسؤول عن تسيير البرنامج والقيام بوظائفه .
Code-behind هو نفسه الكود الذي نستخدمه في برمجة Windows Forms ، ولكن في WPF ، تستطيع الاكواد المكتوبة في الCode-behind الوصول الى عناصر معرفة في XAML او حتى انشاء عناصر وادراجها لكود xaml ، لتنعكس وتظهر العناصر على الواجهة .
كما قلنا انه يمكن للCode-behind انشاء عناصر جديدة واضافتها للواجهة ، ونفس الشيئ XAML يمكنها انشاء عناصر جديدة واضافتها للواجهة ..
الان نستعرض الكود السابق الذي قام بتكوين هذه الواجهة :
هذا الكود مكتوب بواسطة XAML :
PHP كود :
<Grid HorizontalAlignment="Left" Height="105" Margin="140,110,0,0" Width="240" Background="#FFECECEC" >
<Button Content="Button" Width="75" Height="30" Margin="25,25,140,50"/>
<Button Content="Button" Width="75" Height="30" Margin="80,65,85,10"/>
<Button Content="Button" Width="75" Height="30" Margin="145,25,20,50"/>
</Grid>
اما لو قررت استخدام الCode-behind لتكوين العناصر السابقة :-
PHP كود :
// عمل حاوية
Grid grid = new Grid();
grid.HorizontalAligment = Left;
grid.Height = 105;
grid.Margin = new Thickness(140,0,0,0);
grid.Width = 240;
this.Content = grid;
// عمل ازرار
Button button1 = new Button();
Button button2 = new Button();
Button button3 = new Button();
//اسناد الخصائص
button1.Content = "Button1";
...
...
...
...
//بعد اكمال الخصائص ، سيقوم الكود اسفله باضافة العناصر الى الواجهة
grid.Children.Add(textBlock);
ظاهر جدا وضوح ونظافة لغة XAML في انشاء وتهيئة العناصر بكل سهولة .
بعض امكانيات لغة XAML
Properties as Elements : يعرف ان الخصائص في لغة XAML تكتب في Line واحد متصل كهذا الكود مثلا :
PHP كود :
<Button Content="OK" />.
الكود السابق يقوم بتعريف Button واسناد قيمة نصية "OK" الى الخاصية Content
الان لو افترضنا ان القيمة كانت معقدة وطويلة .. في تلك الحالة ، يفضل وضعها في في مكان اخر وهذا المكان هو تحت الElement الذي هو عبارة عن Propertie - حيث بالامكان تحويل الPropertie الى Element :-
PHP كود :
<Button>
<Button.Content>
OK
</Button.Content>
</Button>
------------------
Markup Extensions : الوسوم الممتدة ، هي كلمات توضع كـ قيمة لخاصية ما . هذه الوسوم هي كلمات تنوب عن قيمة معينة ، حيث تشير هذه الكلمات الى قيمة في مكان ما .
بعبارة مبسطة ، انها مثل مبدأ (المُتغيرات) تقريبا .
مثال من واقع الحياة : انت اسمك الكريم (حسن منصور عبدالمنعم) وكنيتك "ابو علي"
لو ناديتك : "ابو علي" بدل (حسن منصور عبدالمنعم) هل في ذلك اشكالية ؟
من المنظور البرمجي هناك اختلاف بسيط تقنيا ، لكن نفس الفكرة المذكورة في الاعلى ..
--
بعض من هذه الوسوم الممتدة :-
* Binding
جلب قيمة خاصية من خاصية اخرى
* StaticResource
جلب قيمة من الرسورس
* DynamicResource
جلب قيمة من الرسورس ديناميكيا - طبعا كل هذا سيتم توضحيه في دروس متقدمة
* TemplateBinding
جلب قيمة من الTarget الذي تقوم بعمل templating له
* x:Static
جلب قيمة من خاصية معرفة كـ static
* x:Null
يتم تعويضها وقت الruntime ب null
--
بعض من هذه الوسوم الممتدة :-
* Binding
جلب قيمة خاصية من خاصية اخرى
* StaticResource
جلب قيمة من الرسورس
* DynamicResource
جلب قيمة من الرسورس ديناميكيا - طبعا كل هذا سيتم توضحيه في دروس متقدمة
* TemplateBinding
جلب قيمة من الTarget الذي تقوم بعمل templating له
* x:Static
جلب قيمة من خاصية معرفة كـ static
* x:Null
يتم تعويضها وقت الruntime ب null
--
مثال على طريقة الاستخدام :-
PHP كود :
<TextBox x:Name="textBox"/>
<Label Content="{Binding Text, ElementName=textBox}"/>
الوسم الممتد الذي تم استخدامه في الكود السابق هو Binding ..
قامت Binding بجلب قيمة الtextbox واسندتها الى خاصية content التابعة للLabel
اذن Binding تشير الى قيمة خاصية في عنصر ما .
امكانيات WPF عالية للغاية حيث بالامكان تكوين Custom Markup Extensions ، وهذا مفيد بشكل كبير لنقل قيم من والى Code-behind
وتستخدم بكثرة مع مستخدمي نمط MVVM .
------------------
Namespaces : ومن منا لايعرف فضاءات الاسماء التي تحتوي بداخلها على ال classes ..
كل ملف من نوع xaml لابد ان يحتوي على 2 من الNamespace على الاقل وهما :
إقتباس :http://schemas.microsoft.com/winfx/2006/xaml
^ تحتوي هذه المكتبة على الكلمات الرئيسية او الكلمات المحجوزة الخاصة ب xaml
إقتباس :http://schemas.microsoft.com/winfx/2006/xaml/presentation
^تحتوي هذه المكتبة على جميع الControls .. كـ Button, label, checkbox .....الخ
وطريقة اضافتها :-
PHP كود :
<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
</Window>
حيث انك لابد ان تقوم بكتابة الكلمة المحجوزة xmlns قبل اسم المكتبة لإضافتها .. ولكن هذا متاح لاول مكتبة فقط
فالمكتبات الاخرى لابد من اسناد حرف بجانب xmlns مثلا :-
PHP كود :
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
^ الحرف x تمت اضافته لكي نتمكن من اضافة هذه المكتبة - يمكنك اضافة اي حرف بدل ال X -
الخاتمة
احب اقول ان لغة XAML سهل وحلوة للغاية ، حاولوا بعد هالدرس تفتحون الفيجوال ستوديو وتكتبون يدويا اكواد XAML المذكورة في الموضوع - فقط للتدريب
قهذا مفيد جدا وسترى ذلك عندما تقوم بكتابتها لأنك سترى ماتكتبه في XAML ينعكس على الواجهة .
فا XAML هو كود الواجهات .
نلقاكم غدا - تحياتي
قهذا مفيد جدا وسترى ذلك عندما تقوم بكتابتها لأنك سترى ماتكتبه في XAML ينعكس على الواجهة .
فا XAML هو كود الواجهات .
نلقاكم غدا - تحياتي
انتهى
RE: [WPF حتى الاحتراف] {2} - لغة XAML - الكاتب - 17-06-14
الله لا يحرمك الاجر اخوي محمد.
RE: [WPF حتى الاحتراف] {2} - لغة XAML - a_almisery - 17-06-14
مــوضــوع مهــم .. مشــكور عـليه اخــي ...
لكــن ان تــِشرح بــلغه C# صح ...
هل بــامكــانك دمج لـغه Vb.Net
الــف شكـر لـيك اســتمر
RE: [WPF حتى الاحتراف] {2} - لغة XAML - hoob computer - 18-06-14
شرح ممتاز ... إستمر
وفقك الله ...
السلام عليكم
RE: [WPF حتى الاحتراف] {2} - لغة XAML - عبد الله - 21-06-14
وعليكم السلام ورحمة الله وبركاته
لعلي استوعب الدرس بالكامل ما عدا مسألة Namespaces ، لعلي أقرأ الدرس مرة أخرى لعلي استوعب المسألة.
أو لعلك تشرحها بطريقة أخرى إن أمكن بشيء من التفصيل مع مثال.
شاكر لك أخي الشاكي لله على جهودك الطيبة ، واسأل الله أن يجعلك ممن أخلصوا النية لله وأن لا يحرمك الله الأجر.
RE: [WPF حتى الاحتراف] {2} - لغة XAML - الشاكي لله - 21-06-14
(21-06-14, 03:09 AM)عبد الله كتب : وعليكم السلام ورحمة الله وبركاته
لعلي استوعب الدرس بالكامل ما عدا مسألة Namespaces ، لعلي أقرأ الدرس مرة أخرى لعلي استوعب المسألة.
أو لعلك تشرحها بطريقة أخرى إن أمكن بشيء من التفصيل مع مثال.
شاكر لك أخي الشاكي لله على جهودك الطيبة ، واسأل الله أن يجعلك ممن أخلصوا النية لله وأن لا يحرمك الله الأجر.
لماذا تستعمل هذه النيم سبيس في برامجك ؟
Import System
Import System.IO
...
Import System.IO
...
بالطبع عشان تستورد Classes .
نفس الشي في xaml ، تحتاج تستورد classes من بعض النيم سبيس
RE: [WPF حتى الاحتراف] {2} - لغة XAML - عبد الله - 21-06-14
(21-06-14, 03:38 AM)الشاكي لله كتب : لماذا تستعمل هذه النيم سبيس في برامجك ؟
Import System
Import System.IO
...
بالطبع عشان تستورد Classes .
نفس الشي في xaml ، تحتاج تستورد classes من بعض النيم سبيس
هذه مفهومة أنه حينما أريد استيراد class يجب أن أضمنه في البرنامج أُدرجه كمرجع.
لكن في شرحك هنا أضفت عناوين صفحات شبكة :
PHP كود :
<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
</Window>
...؟ فقط أُريد ماهية عمل مثل هذا الإستيراد (: معليش تحمل أسئلتي.
RE: [WPF حتى الاحتراف] {2} - لغة XAML - الشاكي لله - 21-06-14
السلام عليكم ورحمة الله وبركاته
اولا انا شاكر لك رسالتك على الخاص وهذا يظهر مدى اخلاقك الكريمة وحبك للخير ..
ثانيا بالنسبة للNamespace >>
في WPF هناك صيغتين لإستيراد الNamespace في XAML :
الصيغة الاولى ، صيغة استيراد الNamespace الخاصة بمكتبات Freamwork - مثال :
PHP كود :
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
الصيغة الثانية ، صيغة استيراد الNamespace الخاصة بClass library انت قمت بتصميمها او جايبنها من الانترنت ، يعني ان المكتبات ليست تابعة للFreamword ، فتلك المكتبات تستعمل معها الصيغة التالية لإستيرادها - مثال :
PHP كود :
xmlns:vb4arb="clr-namespace:SDKSample;assembly=SDKSampleLibrary"
واما ليش انها تشبه العناوين http ، فهذا مجرد syntex وليس عنوان حقيقي ، فلا يوجد اي رابط بالانترنت وبين هذا الكود ، انه مجرد صيغة ..
كما هو الحال في لغة HTML :
PHP كود :
<html xml:lang="ar" dir="rtl" xmlns="http://www.w3.org/1999/xhtml" lang="ar">
الNamespace في Xaml تقدر تستفيد منها في اضافة Custom control الى الواجهة ، حيث لابد من اضافة Namespace الى xaml لو حبيت تضيف كونترولك الخاص ، وحتى فيه امور ثانية منستعرضها في دروس قادمة ، خلينا ماشين حبة حبة ياعسل ..
على العموم شاكر لك سؤالك فهذا يدل على حرصك على فهم واحتراف التقنية بشكل صحيح
واي سؤال انا حاضر