التعامل مع عناصر الواجهة بواسطة الكود

الدرس الثامن : التعامل مع عناصر الواجهة بواسطة الكود

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

إنشىء مشروع جديد

Project name: P0081_ViewById

Build Target: Android 4.0.3

Application name: ViewById

Package name: com.masafa.develop.viewbyid

Create Activity: MainActivity

لكي يتم الإشارة ألي أحد عناصر الواجهة من داخل الأكواد ، لابد أن تراعي إستخدام خاصية الID و التي طبعا بإمكانك تحديدها من مربع الخواص properties ، بإمكانك أن تضع قيمة الخاصية ID كما تشاء ولكن عليك مراعاة الشكل الصحيح لإدخال تلك الخاصية و هوه  "@+ID/Name" و حتي يتثني للبرنامج إضافة العنصر إلي الملف R.java .

الان قم بفتح الملف activity_main.xml و قم بالإستعراض على هيئة XML ثم قم بتغير خاصية الID .. أما لو كانت الخاصية غير موجودة فبإمكانك أن تضيف الخاصية مباشرتا إلي ملف الXML أو تعود إلي Layout و تضغط بزر الفأر الأيمن على العنصر و إختار Assign ID كما هو مبين في الشكل و أجعل القيمة myText . كما هو مبين في الشكل

الأن توجه إلي مكان الملف R.java ثم قم بفتحة ستجد أن الخاصية ID للعنصر تم تسجيلها بشكل فريد على الملف حتي يمكنك الوصول لها من اي ملف أكواد و أيضا تم إعطائها كود لا يتم تكراره ، كما هو مبين في الشكل .

سنبدأ الأن في إستخدام ملفات الجافا لكتابة الاكواد اللازمة و سنبدأ بشرح كود بسيط .. في البداية توجه نحو الملف

/P0081_ViewById/src/com/masafa/develop/viewbyid/MainActivity.java

و قم بفتح الملف و ستجده كما في الشكل القادم.

سأقوم الأن بشرح لك تكوين الدالة onCreate على إن أقوم بشرح الأخري فيما بعد . لو قمت بقرائة الأكواد الموجوده في OnCreate ستجد أن

super.onCreate(savedInstanceState);

في هذا الكود يقوم البرنامج بإستدعاء الملف داله OnCreate من الكائن الأب لهذه الدالة "يرجي مراجعة قواعة برمجة الOOP" لو كنت لا تعرف معني كلمة الوراثة في البرمجة ،
أما في السطر الأخر

setContentView(R.layout.activity_main);

فهنا البرنامج يعطي أمرا بإستخدام الدالة setContentView لكي يقوم بإنشاء واجهة المشروع عن طريق الخصائص الموجوده في الملف XML و التي سيتعرف عليها عن طريق الخاصية ID و التي سيكون الدليل الخاص بها موجود في الملف R.java و من هنا نستنتج أهمية الخاصية ID كما أخبرتكم سابقا.

TextView myTextView = (TextView) findViewById(R.id.myText);
myTextView.setText("New text in TextView");

و هذه الأكواد بإختصار تعني أنك سوف تقوم بإستدعاء الClass الخاص بالعنصر TextView و تصنع كائن object منه ثم تقوم بوضع قيمة العنصر الموجود على الواجهة التي قمت بتصميمها من قبل داخل هذا الكائن الجديد ، ولأنه حتي تقوم بعمل ذالك عليك أن تقوم بإستخدام الداله findViewById و التي دائما ما تعود بكائن من نوع object فقط فعليك تحديد نوع الكائن الذي سوف تعود به تلك الأداة عن طريق أن تكتب أسم العنصر و تضعه بين قوسين () كما هو مبين في الكود و يسمي هذا direct casting و الأن بإمكانك أن تستخدم الكائن الجديد في تغير خواص العنصر عن طريق السطر الثاني من الكود ، و عن طريق الدالة setText كما هو مبين في الكود………. و لكن للأسف لن يعمل هذا الكود مباشرتا و سيظهرك لك خطا في الكود عن طريق خط أحمر يظهر تحت الكود ما هو مبين في الشكل القادم.

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

المشكلة هي أنه يجب أن تحدد في كل ملفاتك الكائنات التي سوف تستخدمها خلال كل ملف حتي يسهل عليه إستدعاء تلك الكائنات، و لحل تلك المشكلة عليك بإختيار من تلك القائمة   Import "TextView" ، حينما تختار ذالك الإختيار ستجد أن الخط الاحمر قد إختفي وأيضا حينما تذهب إلي أعلي ملف الكود ستجد أن البرنامج قد أضاف سطر جديد للكود بشكل تلقائي كما في الشكل القادم و هو عبارة عن تصريح للملف بإستخدام الكائن TextView كما شرحت من قبل.

الأن قم بحفظ التغيرات ثم قم بعمل Run او قم بالعمليتين معا عن طريق الضغط بشكل مباشر على CTRL + F11 و ستجد التغيرات كما في الشكل القادم .

الأن قم بالعودة من جديد إلي الواجهة و قم بإضافة Button و قم بتغير الخاصية ID  ولتكن myButton و الأن أذهب إلي ملف الكود و قم بكتابة كود التعريف كالتالي

Button myBtn = (Button) findViewById(R.id.myButton);

ولا تنسي تصحيح الخطاء كما في المثال السابق و الأن قم بتغير بعض الخواص الأخري مره عن طريق

myBtn.setText("the New Txt Button");

myBtn.setEnabled(false);

قد سبق لك التعرف على الدالة setText أما الدالة setEnabled في المتحكمة في الخاصية Enalble و هي التمكين من إستخدام العنصر لو قمت بتجربة التطبيق ستجد الناتج كما هو مبين في الشكل .

كما هو واضح تم تغير النص الموجود على العنصر button مع وضع العنصر في وضعية لا تسمح لك بإستخدمة،

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

أيضا بإمكانك إضافة بعض العناصر الأخري مثلا checkbox و قم بتغير الخاصية ID إلي myCheckbox ثم قم بعمل تصريح للعنصر أيضا داخل الكود .

CheckBox myChb = (CheckBox) findViewById(R.id.myCheckbox);

ثم قم بإختبار خصائص هذا العنصر مثلا الخاصية setChecked .. و لا تتردد لحظه في عرض أي مشكله قد تواجهك في عمل هذا التطبيق…

و نلتقي في الدرس القادم

و السلام عليكم ورحمة الله وبركاته.

أحمد محمدي