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

سنقوم بإنجاز تطبيق بسيط، نجعل واجهة الإستقبال تقترح عزل واحد بين ثلاثة ألوان، و عند الإختيار يتم تلوين الواجهة به. 

 

  1. الواجهة 

 

رسم الواجهة سيكون نقطة بدايتنا كما يظهر في الصورة الملف activity_mail.xml الذي يوجد إعتباطيا كما رئينا في الدرس السابق.  كل ما قمنا به هو

  • تغيير اللايوت الى Linear مع تضمينه خاصية  "LayoutDirection="rtl لجعل المكونات تترتب من اليمين الى اليسار (بما أن تطبيقنا بالعربي).
  • إضافة مجموعة RadioButton التي من المفترض بكل منها ان تحول الصفحة باللون المطلوب.

 

 

  • قمنا كذلك بإضافة الخاصية Onclick للازرار لنتمكن من التقاط تفاعل المستعمل، و يجب علينا أن نقوم بخلق الخاصية onRadioButtonClicked داخل فئة جافا.

 

لننتهي من الواجهة سننشيء ثلاث ملفات للألوان الثلاثة color_red.xml .. الخ، بالإمكان توليدها بإستعمال الزر الايمن للماوس كما هو مبين في الصورة أسفله.

 

ثم نقوم بتلوين كل واجهة باللون المطلوب:

 

 

 

 

  1. المحرك java 

 

كما تمت الإشارة لذلك من قبل، يجب أن نقوم بتعريف الخاصية onRadioButtonClicked. لاحظوا أنها تأخذ الواجهة view كمعامل.

 

 

 

 

هنا عند الصغط على أي من الأزرار الثلاثة، سيتم تنفيذ هذا الروتين الذي يقوم ببساطة بالنظر لمفتاح (Id) المكون المعني بالضغط. ثم نقارنه بالقيم المتوفرة لتوجيه التطبيق نحو الواجهة الجديدة (إذا كان أحمر، و إلا إذا كان أزرق، و إلا في جميع الحالات سيكون أخضرا). قوموا بتنفيذ البرنامج على هاتفكم أو عبر الهاتف الإفتراضي. إنها تعمل! لكنه ليس جيدا، سنعمل في الفقرة الموالية على تحسين فاعليته و أدائه.

 

  1. تطوير البرنامج

 

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


سنعمل إذن الآن على إجراء هذا التغيير، :
 

  • بالنسبة للطريقة onRadioButtonClicked ستصبح كما يلي (عدم نسيان إعمال الImport الإضافي)

 


import android.widget.LinearLayout;
//...

public void onRadioButtonClicked(View view) {

        LinearLayout linearLayout = (LinearLayout)findViewById(R.id.l);
            switch(view.getId()) {
                case R.id.red:
                    linearLayout.setBackgroundColor(Color.parseColor("#FF0000"));
                    return;
                case R.id.blue:
                    linearLayout.setBackgroundColor(Color.parseColor("#0000FF"));
                return;
            }
            linearLayout.setBackgroundColor(Color.parseColor("#00FF00"));
    }

 

  • باللون الاحمر أعلاه نبحث عن العنصر من فئة LinearLayout ذو id يأخذ القيمة l  لذلك وجب تحديث ملف الواجهة كما يلي؛  1. نضيف التعريف id الذي سيمكن الجافا كود من معرفة اللاياوت (لتبديل لون الخلفية) و 2. نجمع الازرار في مجموعة واحدة لتلافي أن تبقى مضغوطة رغم تغيير اللون.

 

 

بهذا نكون قد إنتهينا من إنجاز برنامجنا البسيط عبر دفتر التحملات المدرج. في الجزء الثاني من هذا الدرس/التطبيق سنقوم بوضع دفتر تحملات أكثر جرأة عبر إستعمال عشرات الألوان، مع إمكانية تغييرها دون تغيير الكود السورس .. سيدفعنا ذلك لتحرير جافا كود أكثر عمومية (عوض دراسة الحالات)."