الدرس الثاني: [دورة تعليميه - الدرس 2] تعلم صنع تطبيقات الاندرويد بالتفصيل - بنيه التطبيق ومكوناته
 

[RIGHT]السلام عليكم،

اهلا بكم في درسنا الثاني، في دوره تعلم برمجه تطبيقات الاندرويد.

سيكون هذا الدرس عباره عن شرح وتوضيح لبنيه البرنامج ومما يتكون وكيف يتم ربط اجزائه معا

[B]** يمكن ان نقسم مكونات البرامج الهواتف الذكيه الى ثلاث اقسام:[/B]
1- الواجهات المرئيه وتسمى Graphical User Interface ويرمز لها GUI وهي الازرار ومربعات ادخال النص والقوائم المنسدله وما الي ذلك...

2- الكود البرمجي، وهي طريقه التحكم بهذه الواجهات والعناصر وتطبيق المنطق الذي نرغب به ليؤدي البرنامج غرضه، ممكن ان نقول ان الواجهات هي سياره وان الكود البرمجي هو الشخص الذي يقود السياره ويتحكم بها.

مثلا لو اردنا عمل برنامج يجمع رقمين:سيكون لدينا مربعين نص و زر، هذه هي الواجهه. ثم الكود البرمجي هو الذي سيقوم بالعمل ... يأخذ الرقم الاول ويجمعه للرقم الثاني ويظهر النتيجه للمستخدم. كل هذا يحدث عندما يضغط المستخدم الزر.

3- المصادر الخارجيه او ما يسمى resources وهي اي شيء خارجي تستعمله في برنامجك... مثل الصور، ملفات صوتيه، ملف خط مثلا او ملف مكتبه jar وهذه معروفه بالجافا وهي ما يقابل ملف dll ببرمجيات الويندوز مثلا ال VB فيمكن ان تستعمل ملف jar به وظيفه معينه بدون ان تضطر لاعاده العمل.

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

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

من خلال بيئه العمل ايكليبس وبفضل ال ADT الذي تحدثت عنه، عمليه تصميم ال GUI سهله ان شاء الله، وكذلك كتابه الكود الخاص بها، كما قلت كل هذا يتم من خلال برنامج واحد الايكليبس.

نأتي للقسم الاول: GUI
الواجهات ببرامج الاندرويد يتم تصميمها بملف XML
ولمن لا يعرف الـ XML هو ليس لغه برمجه بل يسمى data structure اي بنيه بيانات وطريقه لتمثيل بيانات معينه بطريقه محكومه وهذا مثال بسيط عليه:[/RIGHT]
[FONT=&quot]
[/FONT]
** مثلا نريد تمثيل قائمه من الاشخاص لكل واحد اسم، بريد الكتروني وعمر سيكون ملف ال XML كما يلي

[php]<?xml version="1.0" encoding="UTF-8"?>
<myList>
<person>
<name>ahmad</name>
<email>ahmad@someemail.com</email>
<age>25</age>
</person>
<person>
<name>khaled</name>
<email>khaled@someemail.com</email>
<age>18</age>
</person>
</myList>
[/php]

وتستمر القائمه ويستمر بناء الملف ويمكن اضافه اي قدر تريده من الاسماء شرط ان تلتزم بالبنيه
والفكره لل XML هي انه لا يوجد له قواعد او ما يعرف بلغات البرمجه بال syntax اي انه لا يجبرج على اختيار كلمه معينه لكن له قواعد تلتزم بها اثناء بناء الملف.

شرح بسيط:
[php]<?xml version="1.0" encoding="UTF-8"?>[/php] هي الترويسه او header وهذه لكي تخبر اللغه او النظام الذي سيقوم بقراءه الملف عن معلومات مثل اي اصدار xml نستعمل وما هوالترميز encoding الذي نستعمله لانه قد يحوي كلمات عربيه او صينيه وهكذا

كل اشاره <> تسمى تاغ tag وتسمى باسم اول كلمه بها
مثلا تاغ العمر age tag <age>

<myList> هي العنصر الرئيسي بالملف root node
<person> هي ابن او child لـ mylist
<name> ، <email> ، <age> هي عناصر elements او ابناء لل person
الان لا يوجد قانون او قاعده تجبرني على انتقاء هذه الكلمات مثلا،
ممكن استعمل بدل من <myList> ان استعمل <myFriendsList>

نلاحظ وجود تاغ tag مشابه بالاسم ولكنه يحوي / هذا يسمى close tag او تاغ الاغلاق
وهذا من شروط ال xml يجب عليك ان تغلق كل التاغات التي تفتحها، وان تحافظ على ترتيب الفتح والاغلاق

مثلا
[php]<person>
<name>ahmad</name>
<email>ahmad@someemail.com</email>
<age>25</age>
</person>
[/php]
لاحظو معي ترتيب الفتح والاغلاق، فتح person وبداخله:
فتح name وقيمه له ثم اغلاق name
فتح email وقيمه له ثم اغلاق email
فتح age وقيمه له ثم اغلاق age
اغلاق person
[FONT=&quot]
[/FONT]
[COLOR=Red]لا يجوز مثلا عمل هذا[/COLOR]

[php]<person>
<name>ahmad</person>
</name>
[/php]

ترتيب الفتح يجب ان يكون مطابق للاغلاق وهذا يسمى nest او nesting
يعني يجب ان يكون ال nesting صحيح.

الان يمكن ان تكون القيم بداخل ما يسمى attribute وليس داخل عناصر elements كما في المثال السابق
فتصبح مثلا:

[php]<myList>
<person name="ahmad" age="18" email="ahmad@someemail.com"></person>
<person name="khaled" age="22" email="khaled@someemail.com"></person>
</myList>
[/php]

هذه افضل من ناحيه الحجم وكميه الكتابه، اذا كنت تبني ملف ال xml الخاص بك لك الحريه بالانتقاء اما اذا كنت تبني ملف xml سيتم استعماله من قبل نظام اخر يجب ان تلتزم بقوانين هذا النظام.

شيء اخر ممكن ان يكون تاغ الاغلاق عباره عن / بنهايه التاغ الاول بدون اعاده كتابته، مثال:

[php]<person name="ahmad" age="18" email="ahmad@someemail.com"></person>
يصبح
<person name="ahmad" age="18" email="ahmad@someemail.com" />
[/php]

لاحظو معي اضافه / فقط والاستغناء عن </person> كامله. هذا جائز ايضا.

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

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

في الاندرويد كل شاشه بها عناصر مثل الزر والقوائم الخ، تسمى Activity او نشاط، لكن لا احبذ هذه الترجمه ممكن نستخدم كلمه فعاليه مثل التي بالمهرجانات مثلا، فالمهرجان به عده فعاليات او فقرات، وكذلك برنامج الاندرويد كل برنامج به عده شاشات او فعاليات نبني كل واحده منهم على حدى من ناحيه GUI وكذلك من ناحيه الكود الخاص بها ونربطهم معا حسب المنطق الذي نريده

كل فعاليه تحتاج ملف برمجه وملف GUI، ملف البرمجه يكون بلغه Java وملف ال GUI يكون مكتوب على شكل ملف XML الذي شرحناه الان.


[FONT=&quot]
[/FONT] فيما يلي ملف xml بسيط لشاشه (او فعاليه) او activity لبرنامج اندرويد بسيط:

[php]<?xml version="1.0" encoding="utf-8"?>

<TableLayout
android:id="@+id/TableLayout01"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:stretchColumns="1"
xmlns:android="http://schemas.android.com/apk/res/android">

<TableRow>
<TextView
android:text="User Name"
android:padding="3dip" />

<EditText android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/txtLoginUsername">
</EditText>

</TableRow>

</TableLayout>
[/php]

[B][COLOR=SeaGreen]لا تخافو ... هذا كله يكون جاهز من الايكليبس، المهم نحاول نفهمه ونفرق بين التاغات الموجوده.[/COLOR][/B]

<?xml version="1.0" encoding="utf-8"?> هو الترويسه التي تكلمنا عنها
<TableLayout هو تاغ لشيء يسمى layout وهو معروف بالجافا حيث انه يحدد الطريقه التي سيتم عرض العناصر بها على الشاشه من ناحيه ترتيبها واحتلالها للمساحات... هنا نستعمل واحد نوعه table
وهذا تاغ البدايه له.

android:id="@+id/TableLayout01"
android:layout_width="fill_parent"
هذه عباره عن خصائص او attributes للتاغ السابق... لا تقلقو كلها تأتي جاهزه لن نكتب بها شيء ربما نغير كلمه او اثنتين لكن الملف الرئيسي يتم بنائه بشكل سهل جدا.

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

التاغ <EditText هو مربع نص يمكن للمستخدم الكتابه بداخله من خلال لوحه المفاتيح، ويكون لاخذ مدخلات من المستخدم لكي نعالجها ببرنامجنا.

لاحظو معي كافه الاغلاقات للتاغات موجوده وبالترتيب واخر شيء اغلاق التاغ
الرئيسي وهو تاغ الـ </TableLayout>
*** هناك قاعده بسيطه لترتيب الفتح والاغلاق وهي: اول تاغ تفتحه هو اخر تاغ تغلقه وهكذا... لاحظو ان اول تاغ تم فتحه هو <TableLayout واخر تاغ تم اغلاقه هو </TableLayout> وبداخلهما كل التاغات الاخرى.

سأقف هنا في هذا الدرس، سيكون الدرس التالي نظره تفصيليه اكثر على ملف GUI ال XML حتى نفهم كل شيء يهمنا به وبعدها ننتقل الى ملف الكود الذي سيشغل البرنامج.

قد اكون تكلمت كثيرا عن ال XML هنا ولكنه شيء مهم برأيي لانك بالمستقبل ستبني واجهات قد تكون معقده قليلا فإذا لم تفهم بشكل جيد البنيه للملف وقواعد الكتابه به، لن تستطيع انجاز عملك بسهوله

والى درس قادم ان شاء الله،

اخوكم يزن - الاردن


فهرس الدوره
[url]http://www.ce4arab.com/vb7/showthread.php?t=325071[/url]

بارك الله فيك على الشرح وننتظر الدروس بفارغ الصبر

[RIGHT]حياك الله hksalameh واتمنى الفائده للجميع


[B][COLOR="Red"]ملاحظه[/COLOR][/B]: تم اعاده تنسيق الدرس باستعمال phpcode بدل من code العادي لانه افضل للعرض
من واجه صعوبه بالقراءه اول مره الان الوضع اصبح واضح[/RIGHT]

بارك الله فيك ،، استمرررررر جاري قراءته بتمعن

الله يعــطيك العــافية

لي رجعــة بإذن الله بعد الإختبارات و التطبيق و التجربة على الترانسفورمر ^^

دمت في حفظ الله

تحياتي و إحترامي

.
..
...

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

الله يعطيك العافيه صراحتاً كنا منتظرين مثل هالدروس عسى الله يوفقك ويجعلها في موازين حسناتك

للامام

موفقين ...>>

جزاك الله خير

متابع ومتحمس

الله يجزاك خير متابعين لك

كل الشكر لكم اخوتي
وجزاكم كل الخير عن دعواتكم الطيبه

[quote=stinger1;2527355]الان يمكن ان تكون القيم بداخل ما يسمى attribute وليس داخل عناصر elements كما في المثال السابق
فتصبح مثلا:

[php]<myList>
<person name="ahmad" age="18" email="ahmad@someemail.com"></person>
<person name="khaled" age="22" email="khaled@someemail.com"></person>
</myList>
[/php]

هذه افضل من ناحيه الحجم وكميه الكتابه، اذا كنت تبني ملف ال xml الخاص بك لك الحريه بالانتقاء [COLOR=red]اما اذا كنت تبني ملف xml سيتم استعماله من قبل نظام اخر يجب ان تلتزم بقوانين هذا النظام.[/COLOR]
[/quote]


معليش يا استاد جاي متأخر بس أصبر عليا ..:thumbup:

عندى لحسه في اللي مكتوب بالاحمر .. يعني اذا اكتب xml خاصه بي هذي صحيحة لكن اذا بكتب لغه في نظام اخر لازم ارجع للطريقة الاولى في طريقة الفتح والاغلاق ..:confused:

طبعا انا وش وش ابغى ب xml خاص بي << يمكن متسرع في سؤال
اكيد راح استخدم xml خاص ببرنامج و راح استخدم طريقة الفتح والاغلاق العادية الغير مختصره ..


ادري ان سألي يمكن ماله داعي بس تذكر اني جديد جدا عاللغة والبرمجة

ملاحظه : في تشابه لو بسيط بين هذي اللغة ولغة ++c .. او انا غلطان لأني درسة لغة ++c مستوي واحد في الجامعة وتقريبا ع حسب ذاكرتي فيه تشابه في مسألة الاختصارات << لاتشغل نفسك في الاجابة عالملاحظة يمكن تكون فيه فرق واسع في اللغتين بس خويك جاهل واكتفي بإجابة بسيطه

وشكرا يا استاد ..:o

[quote=ولد طيب;2566855]معليش يا استاد جاي متأخر بس أصبر عليا ..:thumbup:

عندى لحسه في اللي مكتوب بالاحمر .. يعني اذا اكتب xml خاصه بي هذي صحيحة لكن اذا بكتب لغه في نظام اخر لازم ارجع للطريقة الاولى في طريقة الفتح والاغلاق ..:confused:

طبعا انا وش وش ابغى ب xml خاص بي << يمكن متسرع في سؤال
اكيد راح استخدم xml خاص ببرنامج و راح استخدم طريقة الفتح والاغلاق العادية الغير مختصره ..


ادري ان سألي يمكن ماله داعي بس تذكر اني جديد جدا عاللغة والبرمجة

ملاحظه : في تشابه لو بسيط بين هذي اللغة ولغة ++c .. او انا غلطان لأني درسة لغة ++c مستوي واحد في الجامعة وتقريبا ع حسب ذاكرتي فيه تشابه في مسألة الاختصارات << لاتشغل نفسك في الاجابة عالملاحظة يمكن تكون فيه فرق واسع في اللغتين بس خويك جاهل واكتفي بإجابة بسيطه

وشكرا يا استاد ..:o[/quote]
اهلا بك اخي ... لست متأخر ابدا ان شاء الله

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

اما لماذا تحتاجه ... يمكن انت تصمم برنامج يحتاج بيانات معينه ولكي تخزنها بطريقه سهله للاسترجاع والتعديل يمكنك استعمال ال XML او قاعده بيانات Database لكن في بيئه مثل الهواتف النقاله دائما نسعى للاصغر والاسرع ... لهذا ال XML احيانا يؤدي الغرض وحيث ان له مكتبات وكلاسات تسهل قرائته من ناحيه كونه ملف نصي text في النهايه

مثلا قد تصمم برنامج تحويل للعمله ... وتريد ان تضع به قيم مبدأيه لقيم العملات يمكنك تصميم ملف XML يتم تحميله كل ما تم تشغيل البرنامج، مثلا:
[php]
<?xml version="1.0" encoding="UTF-8"?>
<currenceyList>
<currencey name="USD" value="0.7"/>
<currencey name="JOD" value="1"/>
<currencey name="SAR" value="0.2"></currencey>
</currenceyList>
[/php]

لاحظ اخر اغلاق مختلف عن اول اثنين .. لكن هذا لن يعطي خطأ


اما من ناحيه التشابه ... نعم ال C++ تشبه الجافا الى حد ما . والجافا اسهل في التعامل احيانا ... حيث انها لا تحتاج pointers كما ال c++ لتعريف متغير نص مثلا ...

ربما اطلت الرد لكن اردت توضيح الصوره بشكل افضل

واهلا بك معنا

شكرا على تجاوبك السريع جداا .. يا استادي

مسألة الاطالة : قصدي ما ابغى اتعبك معي في الرد وانا جاي متأخر


وشكرا عزيزي >> وانتظرني في الدرس الثالث معاي اسئله راح تجيبلك الشيب ^_^

يعطيك الف عآفيـه ..

بآستفيد فيه ..

تسلم ,,

[quote=ولد طيب;2567454]شكرا على تجاوبك السريع جداا .. يا استادي

مسألة الاطالة : قصدي ما ابغى اتعبك معي في الرد وانا جاي متأخر


وشكرا عزيزي >> وانتظرني في الدرس الثالث معاي اسئله راح تجيبلك الشيب ^_^[/quote]
العفو اخي ان شاء الله اقدر اساعد الجميع

لا يوجد شيء اسمه متأخر ومتقدم ... كونك بدأت ... فأنت معنا ...تسأل ما تريد واجاوبك ان شاء الله:)

السلام عليكم
شرح فيديو :[دورة تعليميه - شرح فيديو] تعلم صنع تطبيقات الاندرويد بالتفصيل - شرح هيكليه وبنيه تطبيق الاندرويد
[url="http://www.ce4arab.com/vb7/showthread.php?t=364252"]شرح فيديو :[دورة تعليميه - شرح فيديو] تعلم صنع تطبيقات الاندرويد بالتفصيل - شرح هيكليه وبنيه تطبيق الاندرويد - الكمبيوتر الكفي[/url]

شرح فيديو :[دورة تعليميه - شرح فيديو] تعلم صنع تطبيقات الاندرويد بالتفصيل - شرح عمل برنامج بسيط وتشغيله على المحاكي
[url="http://www.ce4arab.com/vb7/showthread.php?t=365108"]شرح فيديو :[دورة تعليميه - شرح فيديو] تعلم صنع تطبيقات الاندرويد بالتفصيل - شرح عمل برنامج بسيط وتشغيله على المحاكي - الكمبيوتر الكفي[/url]

شكرا من القلب لك أخي الكريم


وجاري القراءة ..