ملاحظة : الموضوع عبارة عن حلقة من حلقات سلسلة برمجة وتطوير اندرويد Android Development

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

سنقوم في هذا الدرس ببرمجة تطبيق صغير , يقوم بالتحويل بين درجات الحرارة, حيث يتم اعطاء درجة حرارة معينة اما بالسيليسوس او بالفهرنهايت , ويقوم التطبيق بحساب التحويل بينهما.

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

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

تثبيت التطبيق التجريبي   : install the demo application

التطبيق الذي سنقوم ببرمجته الآن متوافر ايضا على Android Marketplace  تحت عنوان Android Temperature converter .

 إنشاء المشروع Create Porject

لإنشاء مشروع جديد سنقوم باختيار :

File → New → Other → Android → Android Application Project  

نملأ الآن حقول النافذة التي ستظهر بما يلي :

Application name:Temperature Converter

Project name: de.vogella.android.temperature

Package name: de.vogella.android.temperature

بعد الانتهاء من ملأ المعلومات ننقر على التالي “Next”

في النافذة التي تليها ننقر على التالي “Next” , في تلك النافذة يتم تحديد بعض الاعدادات الخاصة بايقونة التطبيق,

 بإمكاننا ترك الاعدادات كما هي وننتقل للنافذة التالية بنقر التالي “Next”

ضمن هذه النافذة نختار نوع الفعالية activity التي نريد.

من هذه النافذة سوف نختار قالب BlankActivity وننقر على زر التالي “Next”.

ومن ثم ننقر على “Finish”.

بعد الانتهاء من هذه الخطوات , يكون قد تم انشاء المشروع , وبإمكانك رؤية ملفات المشروع في القائمة الجانبية كما في الشكل التالي ادناه

إنشاء الخصائص

يمكننا اندرويد من انشاء الخصائص الثابتة static attributes (على سبيل المثال السلاسل المحرفية Strings أو الألوان Colors).

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

الآن , افتح الملف res/values/string.xml

وانقر على زر Add.

واختر ضمن النافذة التي ستظهر لك مدخل Color وانقر على زر “Ok”.

ضمن النافذة التي ستظهر , ادخل ضمن حقل الاسم “name” السلسلة المحرفية التالية : “myColor” , وضمن حقل القيمة “value” ادخل القيمة اللونية التالية : #F5F5F5.

سنقوم الآن بإضافة المزيد من الخصائص attributes ولكن هذه المرة من نوع String.

تمكن استخدام خصائص من نوع String المطورين والمبرمجين من ترجمة تطبيقاتهم لاحقا إلى عدة لغات.

سوف نقوم الآن بإدخال الخصائص من نوع String التالية:

Table 2. String Attributes

سنحول اسلوب العرض إلى XML عبر النقر على بتويب string.xml في اسفل الصفحة كما في الشكل ادناه

يصبح بإمكاننا ان نرى الترميز التالي:

<resources>

    <string name="app_name">Temparature Convertor</string>
    <string name="hello_world">Hello world!</string>
    <string name="menu_settings">Settings</string>
    <string name="title_activity_main">Temparature Convertor</string>
    <color name="myColor">#F5F5F5</color>
    <string name="celsius" >to Celsius</string>
    <string name="fahrenheit">to Fahrenheit</string>
    <string name="calc">Calculate</string>

</resources>

اضافة ال View:

سنقوم بفتح ملف res/layout/activity_main.xml  ضمن محرر اندرويد عبر النقر على الملف بنقرتين مزدوجتين. يمكننا هذا المحرر من انشاء التنسيق الذي نريد عبر سحب واسقاط المكونات مباشرة ,او عبر استخدام ترميز XML.

للتحويل بين شكلي التمثيل المتاحين, نقوم بالنقر على التبويبين اسفل المحرر ونختار الوضع الذي نريد , كما هو مبين في الشكل ادناه

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

ملاحظة : تختلف هذه اللوحة Palette بشكل كبير بحسب الإصدار, لذلك لا تهتموا كثيرا في حال كانت الصور الواردة مع الدرس تختلف عن النوافذ التي تظهر لديكم.

الآن سوف نقوم بإنشاء التنسيق الخاص بتطبيقنا.

سوف ننقر بالزر اليميني على النص “Hello World” الموجود ضمن التنسيق.ومن ثم من النافذة التي تظهر لنا سوف نختار Delete وذلك بهدف ازالة الغرض النصي من التنسيق.

ومن ثم من اللوحة الجانبية Palette  سوف ننقر على تبويب Text Fields ونبحث عن مدخل يدعى “Plain Text” (عبر الاستفادة من التلميحات التي تظهر فوق المداخل عند الوقوف عليها).

كل المدخلات الموجودة تحت تبويب “Text Fields” عبارة عن حقلول نصية. وتختلف عن بعضها البعض بحسب الخصائص التي تمتلكها, على سبيل المثال بعض الحقول النصية تسمح فقط بإضافة ارقام.

نقوم بسحب الحقل النصي الذي اخترناه إلى داخل التنسيق وبذلك يتشكل لدينا حقل نص ادخال  text input.

الآن سوف ننقر على تبويب “Form Widgets” الموجود ضمن اللوحة الجانبية Palette , وسنسحب مدخل “RadioGroup” إلى التنسيق.

يختلف عدد ازرار الراديو التي تظهر ضمن “RadioGroup”  اعتمادا على نسخة Eclipse  المتوافرة لديك. وضمن تطبيقنا نريد فقط زري راديو two radio buttons لذلك إما يجب ان تقوموا بحذف او اضافة ازرار بحسب نسخة eclipse  المتوافرة لديكم.

نسحب أيضا Button من تبويب “Form Widgets” إلى التنسيق

يجب ان تبدو النتيجة بعد اضافة الحقل النصي و  RadioGroup والزر button كما في الشكل التالي :

الآن , سوف نقوم بالتحويل إلى تبويب MXL لنستعرض الرماز وراء هذا التنسيق. سيبدو الرماز مشابها للرماز التالي:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <EditText
        android:id="@+id/editText1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:ems="10" >

        <requestFocus />
    </EditText>

    <RadioGroup
        android:id="@+id/radioGroup1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_below="@+id/editText1" >

        <RadioButton
            android:id="@+id/radio0"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checked="true"
            android:text="RadioButton" />

        <RadioButton
            android:id="@+id/radio1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="RadioButton" />
    </RadioGroup>

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_below="@+id/radioGroup1"
        android:text="Button" />

</RelativeLayout>

تحرير وتعديل الخصائص الموجودة Edit View properties

عندما نقوم باستخدام مكونات واجهة المستخدم ( والتي هي بدورها مستنسخات من view), يصبح بإمكاننا تعديل خصائصها عبر لوحة properties ضمن  eclipse(كما في الشكل ادناه).

يمكن تغيير اغلب الخصائص عبر القائمة التي تظهر عند النقر بالزر الايمن على العنصر المطلوب التعديل عليه.

بإمكانكم ايضا تعديل خصائص الحقول بشكل مباشر من XML. يعتبر تعديل الخصائص من ملف XML سريع جدا, وذلك طبعا في حال كنت تعرف ماللذي تريد تعديله. ولكن طريقة “الزر الايمن” في التعديل , طريقة لا بأس بها خصوصا إذا كنت تبحث عن خاصية معينة.

سوف نفتح الآن ملف التنسيقاتLayout file .

سننقر بالزر اليميني على زر الراديو الأول first radio button وذلك بهدف اسناد السلسلة المحرفية “clsius” إلى خاصية النص الخاصة بزر الراديو.

وبنفس الطريقة سوف نسند السلسلة المحرفية “Fahrenheit” إلى خاصية النص ضمن رز الراديو الثاني.

من الآن وصاعدا, سوف نفترض بأنكم قادرين على استخدام قائمة الخصائص لتغيير الخصائص الخاصة بمكونات واجهة المستخدم, لذا لن نعود إلى ذكر التفاصيل في كل مرة نريد فيها تعديل الخصائص.

 ودوما بإمكانكم إما تعديل ملف XML بشكل مباشر أو تعديل الخصائص عبر طريقة النقر على العنصر المطلوب تعديل خصائصه بالزر الايمن.

سنسند القيمة “true” إلى خاصية “checked” لأول زر راديو RadioButton.

سوف نسند الآن السلسلة المحرفية “calc” إلى العنصر button, وسنقوم ايضا بإسناد القيمة “onClick” إلى الخاصية “onClick”.

سوف نعدل خاصية “input type” الخاصة بالحقل النصي “EditText” لتاخذ القيم التالية :

numberSigned , numberDecimal

كل مكونات واجهة المستخدم التي لدينا محتواة ضمن تنسيق.

سوف نقوم الآن بتحديد لون خلفية التنسيق كما يلي :

ننقر بالزر اليميني على مساحة فارغة ضمن نمط استعراض “Graphical Layout”, ومن ثم نختار

 Other Properties → All by Name → Background

ومن ثم نختار Color ومن هنالك نختار “myColor”

بعد ذلك يجب ان يتغير لون الخلفية إلى اللون الذي قمنا بتحديده عند انشاء “myColor” في مقطع سابق ضمن هذا الدرس.( في حالتنا هذه , اللون الأبيض الرمادي الفاتح).

ننتقل الآن إلى تبويب activity_main.xml السفلي لنتعرف إلى التعديلات التي جرت بعد هذه الخطوات على كود XML.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/myColor" >

    <EditText
        android:id="@+id/editText1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:ems="10"
        android:inputType="numberSigned|numberDecimal"
         >

        <requestFocus />
    </EditText>

    <RadioGroup
        android:id="@+id/radioGroup1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_below="@+id/editText1" >

        <RadioButton
            android:id="@+id/radio0"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checked="true"
            android:text="@string/celsius" />

        <RadioButton
            android:id="@+id/radio1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/fahrenheit" />
    </RadioGroup>

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_below="@+id/radioGroup1"
        android:onClick="onClick"
        android:text="@string/calc" />

</RelativeLayout>

تعديل الكود المصدر للفعالية Change the Activity source code

خلال عملية توليد مشروع اندرويد, كنا قد حددنا بأن يتم توليد فعالية Activity تدعى MainActivity . (الشكل ادناه لتذكيركم بالمكان الذي قمنا فيه بتحديد اسم الفعالية اثناء انشاء مشروع اندرويد في البداية).

يقوم هذا التوليد الآلي ضمن المشروع ايضا بتوليد صف جافا Java class المكافئ لهذه الفعالية MainActivity.java.

سنقوم الآن بتعديل الصف MainActivity ليحوي على التابع ( الوظيفة)  التي تدعى “onClick” والتي يتم استدعائها عندما يتم النقر على زر Button.كماحددنا ذلك سابقا عبر خاصية onClick الخاصة بالزر.

سنقوم بتعديل الملف ليصبح كما يلي :

package de.vogella.android.temperature;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.EditText;
import android.widget.RadioButton;
import android.widget.Toast;

public class MainActivity extends Activity {
  private EditText text;

  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    text = (EditText) findViewById(R.id.editText1);

  }

  // This method is called at button click because we assigned the name to the
  // "OnClick property" of the button
  public void onClick(View view) {
    switch (view.getId()) {
    case R.id.button1:
      RadioButton celsiusButton = (RadioButton) findViewById(R.id.radio0);
      RadioButton fahrenheitButton = (RadioButton) findViewById(R.id.radio1);
      if (text.getText().length() == 0) {
        Toast.makeText(this, "Please enter a valid number",
            Toast.LENGTH_LONG).show();
        return;
      }

      float inputValue = Float.parseFloat(text.getText().toString());
      if (celsiusButton.isChecked()) {
        text.setText(String
            .valueOf(convertFahrenheitToCelsius(inputValue)));
        celsiusButton.setChecked(false);
        fahrenheitButton.setChecked(true);
      } else {
        text.setText(String
            .valueOf(convertCelsiusToFahrenheit(inputValue)));
        fahrenheitButton.setChecked(false);
        celsiusButton.setChecked(true);
      }
      break;
    }
  }

  // Converts to celsius
  private float convertFahrenheitToCelsius(float fahrenheit) {
    return ((fahrenheit - 32) * 5 / 9);
  }

  // Converts to fahrenheit
  private float convertCelsiusToFahrenheit(float celsius) {
  return ((celsius * 9) / 5) + 32;
  }
}

تشغيل المشروع Start Project

لتشغيل تطبيق اندرويد, سوف نحدد المشروع, ومن ثم ننقر بالزر اليميني عليه , ومن القائمة الجانبية التي سوف تظهر نختار : Run-As → Android Application في حال لم يكن المحاكي emulator يعمل, فإنه سوف يبدأ العمل فورا. ولكن يجب ان تتحلوا بالصبر , لأن المحاكي يستغرق وقتا لكي يبدأ بالعمل من جديد. ضعوا الآن رقما في الحقل النصي, واختاروا نوع التحويل, ومن ثم انقروا على الزر. سوف يتم عرض النتيجة ضمن الحقل النصي , وسيتم اختيار زر الراديو الموافق لنتيجة التحويل.

تشغيل التطبيقات المثبتة على اندرويد: Starting an installed application

بعد ان تقوم بتشغيل تطبيقك على جهاز افتراضي, بإمكانك تشغيلة مرة اخرى على هذا الجهاز الافتراضي.

إذا نقرنا على زر Home , ومن ثم على رمز المربعات الصغيرة اسفل الشاشة فتظهر لنا التطبيقات التي قمنا بتشغيلها من قبل بالاضافة إلى غيرها.

بإمكاننا التنقل بين التطبيقات ,ومن ثم نختار التطبيق الذي نريد تشغيله فننقر عليه ليعمل ببساطة!.

كما في الصور التوضيحية ادناه.

عند هذا القدر نكتفي في هذه الحلقة , وعلى امل ان القاكم في حلقة جديدة من سلسلة برمجة وتطوير اندرويد نتحدث فيها عن التنسيقات Layout التي تتحكم باسلوب عرض العناصر على الشاشة.

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

وإلى لقاء جديد, وإلى ذلك الحين استودعكم الله والسلام عليكم ورحمة الله وبركاته.

تحوي سلسلة اندرويد المواضيع التالية :

1. التعريف باندرويد What is Android
2. مكونات واجهة المستخدم الاساسية في اندرويد Basic Andorid User Interface Components
3. خطوات تثبيت اندرويد Android Install Steps
4. بناء مشروع اندرويد
5. تشغيل تطبيقك على اندرويد Running Your Application  
6. بناء واجهة مستخدم بسيطة UI 
7. تشغيل فعالية أخرى Starting another Activity
8. بناء مشروع اندرويد – التحويل بين درجات الحرارة Android Temperature Converter
9. تنسيقات واجهة المستخدم ضمن اندرويد  UI Layouts
10. …