دورة كاملة لتعليم الاندرويد | الدرس الثالث : التطبيق الأول

دورة كاملة لتعليم الاندرويد | الدرس الثالث : التطبيق الأول

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

1- انشاء مشروع جديد:
افتح الايكليبس واختر


ثم اختر android project

اضغط next فيظهر المربع التالي:
حيث تمثل الارقام:
1 – اسم المشروع بالنسبه لبرنامج الايكليبس
2- اختر اصدار نظام التشغيل الذي ترغب ببناء البرنامج له والذي سيتم تشغيل البرنامج عليه اثناء العمل
3- اسم البرنامج الذي سيظهر عند تنصيبه على الهاتف
4- اسم الحزمه التي سيكون الكود بداخلها وله تسميه متداوله حيث يبدأ ب com ثم اسم مميز لك مثلا اسم شركتك او اسمك ثم اسم التطبيق، تفصل كل واحده نقطه . عن الثانيه، هذه تهدف لترتيب الكود ولكي تحصل لنفسك على حزمه مميزه لانه قد تنشء ملف له نفس الاسم لملف موجود مسبقا فعندما تريد الوصول له يكون باستعمال اسم الحزمه وبهذا تضمن انك تستعمل الملف الذي تريده، الحزم بالنهايه ستكون على شكل مجلدات وعند توليد ملف البرنامج APK ستكون كلها وحده واحده.
5- اذا وضعت اشاره صح فإن الايكليبس ينشئ لك اول شاشه او فعاليه كما ذكرنا بالدرس السابق وهذا نوع من اختصار الوقت والجهد، فمؤكد ان برنامجك سيحوي فعاليه، اصطلاحا تنتهي اسماء الفعاليات بكلمه Activity
ويفضل ان يكون اسمها يدل على عملها لكي تسهل عملك اذا زاد عدد الفعاليات... مثلا فعاليه تسجيل الدخول يكون اسم ملفها LoginActivity وهكذا...
6 – الحد الادنى المستعمل لاصدار ال SDK في العمل، يتم تعبئته تلقائيا عندما تحدد اصدار نظام التشغيل من نقطه رقم 2
7- اضغط انهاء


يقوم الايكليبس بتوليد وانشاء كافه الملفات الضروريه للمشروع ويضعها بترتيب معين
وكذلك ينشئ لك اول ملف للفعاليه التي طلبت انشاءها وكذلك ملف ال GUI الخاص بها
ويكون شكل الملفات وترتيبها كما في الصوره:
والارقام شرحها كما يلي:
1- مجلد src مجلد الكود المصدري الذي ستقوم بكتابته، تجد فيه عنوان رئيسي هو اسم الحزمه package الذي ادخلته عند انشاء المشروع com.ce4arab.helloworld وكذلك به اول ملف Java انشأه ADT بشكل تلقائي وهو للفعاليه الاولى التي طلبت انشاءها.
2- الملجد gen هو مجلد يقوم ال ADT بانشاء ملفات به بشكل تلقائي لا تعبث به ولا تغير شيء به نهائيا.
3- مجلد res وهو المجلد الذي يحوي اي مصادر غير الكود، مثل ما ذكرت سابقا: صور، اصوات، وغيرها، كذلك فهو يحوي مجلد layout وبداخله يكون كل ملفات XML التي تستخدم لانشاء شاشات ال الفعاليات من ناحيه التصميم GUI،
نشاهد به ملف main.xml وهو ملف ال GUI
للفعاليه الموجوده حاليا HelloWorldCe4arabActivity.java
4- الملف AndroidManifest.xml هو ملف xml كذلك ومهم للغايه يكون به كل فعاليه يتم اضافتها وكذلك به معلومات عن الصلاحيات التي سيحتاجها النظام وسيحوي ايضا اشياء اخرى مهمه نذكر بعضها لاحقا.

بالجافا كل ملف يتم انشاؤه يحوي شيء يسما Class او فئه، هذا الكلاس هو وحده البناء الاساسيه للجافا من ناحيه كتابه الكود، يشترط ان يكون اسم الكلاس واسم الملف الموجود به متطابقين 100% اذا كان الكلاس من نوع الدخول public.

لنلقي نظره على ملف الفعاليه الموجود لدينا HelloWorldCe4arabActivity.java انقر عليه نقر مزدوج وسيظهر محتواه الذي تم توليده تلقائيا من قبل اداه ال ADT

---

php

package com.ce4arab.helloworld;
 
  import android.app.Activity;
  import android.os.Bundle;
   
  public class HelloWorldCe4arabActivity extends Activity {
      /** Called when the activity is first created. */
      @Override
      public void onCreate(Bundle savedInstanceState) {
          super.onCreate(savedInstanceState);
          setContentView(R.layout.main);
      }
  } 

**اول سطر هو اعلان ان هذا الملف موجود في الحزمه المذكوره.
package com.ce4arab.helloworld;

** السطور التي تبدأ بكلمه import تعني انه يتم استيراد كلاسات مكتوبه سابقا ليتم استعمالها هنا في هذه الفعاليه
وهذه الكلاسات سيم استيرادها من ال android SDK التي قمنا بتنزيلها ... من هنا نعرف اهميتها لانه هي مثل المواد الخام الموجوده في المصنع وسنبدأ باستغلالها لتصنيع برامجنا.

** السطر
public class HelloWorldCe4arabActivity extends Activity {
هو سطر يحدد بدء انشاء الكلاس الخاص بهذه الفعاليه، محدد الدخول له public اي عام يعني يستطيع اي كلاس من اي حزمه الوصول له، وكلمه class هي كلمه مفتاحيه keyword تخبر المترجم الـ compiler اننا ننشئ كلاس جديد... واسمه HelloWorldCe4arabActivity وهو مطابق لاسم الملف.. لاحظو معي ..

** اما extends فهي كلمه مفتاحيه كذلك تخبر المترجم ان هذا الكلاس HelloWorldCe4arabActivity سيقوم بوراثه كلاس اخر موجود واسم الكلاس هو Activity

** الوراثه: في اللغات التي تدعم ما سيمى البرمجه الكينونيه او Object Oriented ويرمز لها احيانا O.O.
مبدأها يقوم على كتابه كلاسات ثم تداخلها معا، ولا داعي لاعاده الكتابه من الصفر دوما، بل تستعمل كلاس موجود سابقا وترثه، والوراثه تكون لكل الخصائص والوظائف التي يملكها الكلاس الاب، الا التي تم تعليمها انها غير قابله للوراثه اثناء فتره برمجه الكلاس الاب، ويكون هناك اسباب منطقيه لا داعي ان نخوض بها لمنع وراثه وظيفه معينه او خاصيه معينه.

** السطر
public void onCreate(Bundle savedInstanceState) {
هو سطر يخبر المترجم اننا نريد انشاء وظيفه (function, method) وهي مجموعه من الاكواد تكتب داخل مكان واحد محصوره ب {} ويتم اعطاؤها اسم، ويتم استدعاؤها وقت الحاجه دون اعاده كتابه الكود مره ثانيه، او تكون وظيفه اساسيه، مثل هذه الحاله حيث ان كل فعاليه يشترط ان يكون بها هذه الوظيفه onCreate لكي يتم مناداتها عند انشاء الفعاليه وقت التشغيل.
اذا لدينا وظيفه اسمها onCreate محدد دخولها public وتأخذ مدخلات من نوع Bundle واسم المدخل savedInstanceState
كلمه void هنا تعني ان هذه الوظيفه لن تقوم بارجاع شيء او قيمه بل ستكون نتيجه استدعاؤها عمليه تنفذها فقط ولن ترجع قيم.

** السطر
super.onCreate(savedInstanceState);
يتم مناداه وظيفه اخرى اسمها onCreate كذلك لكنها موجوده في الكلاس الاب لهذا سبقها كلمه super اي الكلاس الاعلى الذي تم وراثته وبهذه الحاله هو Activity ... تتذكرون الجمله extends Activity

** السطر
setContentView(R.layout.main);
يتم مناداه وظيفه اسمها setContentView وهي موجوده بالكلاس الاب كذلك،
ويتم تمرير مدخلات لها وهي R.layout.mainهذه مأخوذه من الملف المولد تلقائيا في المجلد gen اذا كنتم مركزين معي هناك ستجد ملف اسمه R.java وهو ملف يتم بناؤه تلقائيا كلما اضفت شيء للمشروع ومن خلاله تستطيع الوصول للعناصر وبعض الملفات ... فهنا R.layout,main ترمز لملف ال main.xml الموجود في مجلد ال layout الذي تكلمنا عنه سابقا.

اذا هذه الفعاليه سيتم انشاؤها، ووضع التصميم لها باستعمال الملف main.xml الذي تم بناؤه كذلك وبهذه الطريقه تكون اول شاشه ظاهره على الموبايل عند تشغيل البرنامج.

الان دعونا نلقي نظره على ملف main.xml عند النقر المزدوج على الملف

كما تشاهدون تظهر شاشه الفعاليه وهكذا ستظهر على الهاتف، اذا لاحظتم بالاسفل هناك مربعين
Main.xml و Graphical Layout
ما تشاهدوه الان اذا كان شاشه سوداء وبها جمله بالاعلو هو Graphical Layout
واذا ضغطتم على main.xml سيظهر الكود المصدري للملف وهو xml الذي شرحناه بالدرس السابق

كود PHP:

---

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

  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

      android:orientation="vertical"

      android:layout_width="fill_parent"

      android:layout_height="fill_parent"

      >

  <TextView  

      android:layout_width="fill_parent" 

      android:layout_height="wrap_content" 

      android:text="@string/hello"

      />

  </LinearLayout>

اعتقد ان الملف اصبح مألوف لكم...
يتم استعمال layout من نوع linear له خصائص اذكر منها
android:layout_width="fill_parent" اي انه يملأ المكان الموجود به من ناحيه العرض وكذلك من ناحيه الارتفاع android:layout_height="fill_parent"

TextView هي كما قلت مثل ليبل label يتم عرض معلومه او عنوان به وهذه هي ما يظهر على الشاشه السوداء عند التحول لنظام العرض ال graphical
لها خصائص كذلك، والجديد هنا هو الخاصيه android:text وهي القيمه التي تكتب بها
للوقت الحالي تجاهلو ما كتب بها ... يمكنكم الان تعديل ما داخل ال "" ليعرض اي نص تريدونه مثلا:

android:text="my name is Yazan"

الان لو عدنا لنظام العرض ال graphical وقمنا بالضغط بالماوس على المربع بأعلى الشاشه السوداء والذي تغيرت قيمته (اذا كنتم قد غيرتم ما كتب به) الان بعد ان نقرت عليه مره واحده انظر لليمين ستشاهد اطار تأكد ان تختار من اعلى الاطار الخيار properties والذي سيحوي خصائص هذا العنصر...

شخصيا لا اعرف كل شيء فيها لكن يهمنا منها مثلا id حيث هذا هو الاسم المميز لهذا العنصر والذي من خلاله نستطيع استعماله عن طريق ملف الكود java
وهنا كذلك تجد الخاصيه text والتي قمنا بتعديلها من داخل الملف .. يمكن تعديلها من هنا ايضا
وانصح باستعمال هذه الطريقه بدل من عرض ملف ال xml والتعديل به بشكل يدوي تجنب لحدوث خطأ الا اذا الحاجه لتعديل يدوي..... مع الحذر الشديد.

الان حدد العنصر واعمل عليه كليك يمين right click واختر Edit Id واكتب بها lblTitle

على يسار الشاشه السوداء تشاهدون العناصر التي يمكن اضافتها للشاشه وهذا سهل جدا حيث تقوم بعمل نقر وسحب للعنصر ثم تفلته فوق الشاشه السوداء drag drop وبذلك تكون اضفته.

سنضيف زر button وهو موجود على اليسار قم بسحبه وافلاته فوق الشاشه السوداء
اضغط عليه وكليك يمين و Edit Id واكتب btnChange و OK

لتغير النص المكتوب داخل الزر اختر الزر ثم ابحث بالقائمه على اليمين عن الخاصيه text واكتب بها Change واضغط Enter
شكر لكل من sma666 و fartoot321 على التنبيه.

الان بعد ان اعطيت قيمه لل ID فان ال ADT يعيد بناء الملف R.java ويضيفها له
وهنا يأتي دور الربط بين الكود والتصميم...

*** نعود لملف HelloWorldCe4arabActivity.java :

*** يلزمنا للعمل:

- تعريف متغيرات تؤشر على الbutton وال textView الذين انشأناهما سابقا
- نحتاج لانشاء كلاس لكي يتعامل مع ضغطت الزر اي انه عندما يضغط احد على الزر ... ماذا يحدث؟
هذا الكلاس سيكون actionListener الخاص بالزر، ومن صفاته انه يستعمل كلاس اسمه OnCLickListener وهذا الكلاس بدوره يعالج عمليه الكليك على الزر او اللمس بحالتنا.

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

ومن ثم سنضيف الكود الخاص بعمل الزر .. وفي حالتنا هذه سنعمل كود يؤدي لتغير قيمه lblTitle لتصبح قيمتها الجمله Hello Android!
*** الشرح:

Button btnChange;
TextView lblTitle;
متغيرات ستقوم بالتأشير على كل من ال button وال textview

btnChange = (Button) findViewById(R.id.btnChange);
lblTitle = (TextView) findViewById(R.id.lblTitle);
اسناد قيمه للمتغيرين لكي يؤشرو على العناصر من شاشه التصميم
باستعمال الوظيفه findViewById() والتي تحضر ال object من خلال اسمه، ونحصل الاسم من خلال الكلاس المولد تلقائيا R.java

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

btnChecng_onclickListener btnChngeLsnr = new btnChecng_onclickListener(this);

btnChange.setOnClickListener(btnChngeLsnr);

هذه الجمله تحدد ان المعالج للحدث الخاص بهذا الزر سيكون object وسيكون من كلاس اسمه btnChecng_onclickListener وقد انشأنا المتغير btnChngeLsnr واسندناه لهذه المهمه.

واخر فقره ..
من عند class btnChecng_onclickListener implements OnClickListener{ والى نهايه الملف، هي المكلاس المعالج للحدث، والذي ينفذ الوظيفه
onClick(View v) كلما تم لمس الزر وبداخلها كتبنا الكود الخاص بوضع نص داخل المتغير lblTitle والذي بدوره يؤشر على العنصر على شاشه التصميم.



بهذا نكون قد اتممنا الشرح لدرس اليوم
ويبقى ان نشغل برنامجنا الدرس القادم ان شاء الله
تشغيل البرنامج يحتاج بعض الاعدادات سنتكلم عنها لاحقا ان شاء الله.