في بداية الدرس الرابع أتمنى ان أكون وُفقت في شرح الدروس الثلاثة الماضية وقد وصلتني بالفعل ردود أفعال حمستني لإستكمال هذه السلسة عن برمجة اندرويد ، استكمالاً للحديث... بعد ان قمنا بعمل تصميم برنامح لعرب هاردوير الذي يُعرض فيه مختلف الخدمات مثل عن الموقع والفريق وغيره وقد قمنا بعمل شاشة عرض مختلفة ولكن لم يتم ربطها بالواجهة الرئيسية الى الآن ، سنقوم من خلال هذا الدرس بعرض كيفية اكمال هذا البرنامج وكتابة بعض الأكواد (في الحقيقة انا من عشاق كتابة الكود ولذالك انا متحمس لهذا الدرس! ) [rtl]
دعوني ارجع الى آخر صورة تم استعراضها في الدرس الثالث وهي صورة توضيحية تبين كيفية ربط الشاشات ببعض[/rtl]
[rtl]
[/rtl]
[rtl]
وقائمة الملفات الموجوده لدينا هي كالتالي :[/rtl]
[rtl]
[/rtl]
[rtl]اذن قمنا بعمل شاشات عرض مختلفة ، ونريد ان تعمل كل واحده على حدى ، لو رجعنا الى الوراء قليلاً وخاصة الى الدرس الثاني كنا قد شرحنا انه من مكونات البرنامج لعمل شاشة عرض هو عمل Class من نوع Activity تذكرت ؟ وسنلاحظ ايضاً ان الملف الرئيسي والذي بالنسبة لي اسمه HelloWorldActivity.java من نوع Activity ومخصص لشاشة البداية التي تظهر عند بداية عمل البرنامج ، ولذالك نحن الآن نريد عمل اربع شاشات أخرى لكل من aboutus.xml و email.xml و services.xml و teamwork.xml وذالك عن طريق انشاء اربع ملف داخل المجلد src من نوع java ، بالضغط بالزر الأيمن على com.arabhardware او ما يماثلها لديكم وبعدها اختيار New ثم Class ستظهر الشاشة التالية:[/rtl]
[rtl]
[/rtl]
[rtl]سنقوم مثلاً بعمل اول class لشاشة about us فسنقوم بكتابة اسم الـ class وبعدها الضغط على Browse لاختيار نوع الـ class والذي سيكون من نوع Activity وبعدها الضغط على موافق وانشاء الملف[/rtl]
[rtl]
[/rtl]
[rtl]
سيتم انشاء الملف وسيكون به فقط هذا الكود :[/rtl]
package com.arabhardware;
import android.app.Activity;
public class aboutus extends Activity
{
}[rtl]سنقوم بعدها بعدها بعمل override للـ function الأساسية والتي تسمى onCreate ليحل محلها الكود الذي سيجعل ملف aboutus.xml هو الملف الرئيسي ليعرض من خلال هذه الـ Activity ، سنقوم بكتابة oncreate وبعدها الضغط على CTRL+Space سنجد ان هنا قائمة كاملة بها جميع خيارات انشاء هذه الـ function سنقوم باختيار اول خيار[/rtl]
[rtl]
[/rtl]
[rtl]
بمجرد احتيارها سيظهر الكود بشكل تلقائي على هذا الشكل :[/rtl]
[rtl]
[/rtl]
[rtl]
ولو لاحظت فهو نفس الكود الموجود داخل الملف الرئيسي HelloWorldActivity.java ولكن ينقصه شئ واحد وهو السطر المسؤول عن اختيار شاشة العرض[/rtl]
[ltr]
[b style="margin: 0px; padding: 0px; border: 0px;"]setContentView(R.layout.services);[/b][/ltr]
[rtl]ولذالك سنرجع الى الملف الذي كنا قد انشأناه وداخل oncreate سنقوم بكتابة الكود وتوجيهه الى شاشة العرض about us لتكون بهذا الشكل[/rtl]
[rtl]
:[/rtl]
[rtl]فقط كل ما علينا هو تكرار هذه الخطوة مع الشاشات الأخرى ليصبح عدد ملفات الـ .java هو نفس عدد ملفات XML Layout ، وبهذا قد نكون ربطنا ملفات التصميم بملف برمجي وستبقى بعض الأكواد الأخرى لنقوم بربط الأزرار للتنقل بين الشاشات المختلفة . لتصبح بهذا الشكل[/rtl]
[rtl]
[/rtl]
[rtl]رائع... الآن نريد ان نقوم بربط الأزرار الموجودة في الشاشة الرئيسية لتحويلنا الى الشاشة المفترض الذهاب اليها ، من الآن سيكون التعامل مع ملفات الكود java الموجوده داخل src ، نريد في هذه الخطوة أن نقوم بتوجيه أول زر وهو About Arabhardware إلى الـ aboutus.java ، سنذهب اذن الى الملف الرئيسي HelloWorldActivity.java ونقوم بتعريف الزر ليكون له ارتباط برمجي بالكود ... دعنا من كثرة الكلام ودعونا نبدأ بكتابة الكود...[/rtl]
[ltr]
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.services);
Button bt_about = findViewById(R.id.####)
}[/ltr]
[rtl]قمت باضافة سطر يقوم بتعريف الزر حسب الـ ID الخاص به ... هل تتذكر في الدرس السابق حينما ذكرت لك ان الـ ID هو أمر هام جدا ويقوم البرنامج بوضع ID تلقائي.... في الحقيقة الأمر مرهق لمعرفة ما هو الـ ID الخاص بزر About Arabhardware فكم من زر قمنا بوضعه في جميع الملفات...؟ الكثير... وسيظهر لك بهذا الشكل حينما تحاول كتابة الكود[/rtl]
[rtl]
[/rtl]
[rtl]
ولذالك دعونا نرجع مره أخرى الى ملف الـ xml ونختر الزر ونقوم بتغيير الـ ID الخاص به وكذالك باقي الأزرار بهذه الطريقة :[/rtl]
[rtl]
[/rtl]
[rtl]
وبعد نقوم بكتابة الكود وسنجد الـ id ظهر بكل سهولة ضمن القائمة[/rtl]
[ltr]
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
etContentView(R.layout.services);
Button bt_about = (Button) findViewById(R.id.m_about);
}[/ltr]
[rtl]
وبعدها سيطلب منك البرنامج عمل casting بوضع (Button) ليجعلها من نفس النوع ، الآن يمكننا التحكم في زر About Arabhardware كيفما نشاء بأي اضافة لكود أو غيره ، سنقوم بوضع event على هذا الزر بأنه مجرد الضغط سيقوم بعمل حدث معين وهو onClick ليكون الكود على هذا الشكل (استخدم CTRL_Space ) سيسهل عليك كثيراً في تكملة الكود.[/rtl]
[ltr]
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.TextView;
public class HelloWorldActivity extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.services);
Button bt_about = (Button) findViewById(R.id.m_about);
bt_about.setOnClickListener(new OnClickListener()
{
public void onClick(View v)
{
// نقوم بوضع الكود المسؤل عن الذهاب الى شاشة أخرى هنا
}
});
}
}[/ltr]
[rtl]وبعدها نقوم بعمل نداء لـ function باسم StartActivity وتستقبل معيار من نوع Intent وبعدها نقوم بعمل New Intent ونختر ما يتم ارسال له الـ Context وهو المقصود به الـ Class الذي يتم منه التحويل وهو في حالتنا HelloWorldActivity والمعيار الآخر الذي نقوم بارساله هو الـ Activity المطلوب تشغيله... دعنا نشاهد الكود ليكون اوضح:[/rtl]
[ltr]
public void onClick(View v)
{
startActivity(new Intent(HelloWorldActivity.this, aboutus.class));
}
[/ltr]
- HelloWorldActivity.this : هو اسم الـ Class ا لرئيسي الذي سيكون المصدر للتحول متبوعاً بكلمة this للإشاة الـ class نفسه
- aboutus.class : وهو اسم الـ class الذي من نوع Activity ومطلوب عرض الشاشة الخاصه به
الآن أنت قد أتممت عملية ربط زر About Arabhardware بالشاشة الخاصه له... دعنا نقوم بالتجربة ... قم بالضغط على زر About Arabhardware .... هل ظهرت لك هذه الشاشة؟
[rtl]
لا تقلق لست وحدك... ليس بجديد في عالم البرمجة من الصعب ان يعمل البرنامج من أول مره!
[/rtl]
دعونا نتعرف على هذه المشكلة ، المشكلة في عملية نداء الشاشة الأخرى ... إذن المشكلة من الـ class الآخر الذي من نوع Activity ... ولكن على حد علمنا الـclass نفسه لا يوجد به مشكلة... فما المشكلة؟! نعم تذكرت... دعنا نراجع الملف الذي قلنا عنه في الدرس السابق انه يقوم بالتحكم في كل مكونات البرنامج AndroidManifest.xml حيث من المفترض ان تكون كل الـ Activities معرفة فيه بشكل جيد ... اذن دعنا نلقي نظرة ... هذا هو الكود :
نلاحظ ان محتوى الكود لا يحتوي سوى على Activity واحده فقط ... وهي الـ Activity الرئيسية ... إذن من هنا يجب تعلم أنه عند عمل أي class من نوع Activity لا تنس في وضع التعريف الخاص به في هذا الملف يدوياً لأنه لا يتم بشكل تلقائي...فقط بشكل بسيط ستقوم بتعريف الـ activity على هذا الشكل (لا تنسى وضع نقطة قبل اسم الـ class) وبعدها قم بالتجربة.
[rtl][color]
رائع أليس كذالك! مبروك عليك أولى خطوات اعداد البرنامج... قم بعمل هذه الخطوة مع باقي الأزرار على شاشة الترحيب... بعد الإنتهاء منها أكمل قراءة الدرس.سنقوم الآن من جديد للدخول على كل شاشة لضبط الإعدادات الداخليه لها وكتابة الكود الخاص بالأزرار او خلاف ذالك من مكونات كنا قد وضعناهاشاشة About Arabahrdware :سنقوم بعمل ربط بين الكود والزر الخاص بـ Back to Home وبعدها نعطيه القيمة المسؤولة عن انهاء هذه الـ Activity وهي عباره عن function باسم finish ، وفي الكود التالي قمت ايضاً بتعريف Intent في حالة لديك الرغبة في ان ترسل اي شئ الى الشاشة السابقة فستساعدك على ذالك ويمكن تجاهلها تماماً وكتابة finish فقط[ltr]
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
setContentView(R.layout.aboutus);
Button back = (Button) findViewById(R.id.ab_back);
back.setOnClickListener(new OnClickListener()
{
public void onClick(View v)
{
Intent intent = new Intent();
setResult(RESULT_OK, intent);
finish();
}
});
}
[/ltr]
وبهذا عند الضغط على زر Back to Home سيرجع بك الى الشاشة السابقةشاشة TeamWork لا يوجد بها اي اضافات ولذالك سننتقل مباشرة الى شاشة Sections أو Servicesشاشة Sections :هذه الشاشة كنا قد وضعنا بها بعض الخيارات فعن الضغط على اي صورة سيقوم الـ Web View بتحميل الصفحة اونلاين من على موقع عرب هاردوير وعرضها مباشرة ، في البداية هذه المره نريد عمل event عند الضغط على صورة وليس على زر كما كان بالسابق... ولكن دعني اقول لك ان الطرق مماثلة تماماً أنظر الى الكود الذي قمت بكتابته داخل ملف services :[ltr]
@Override
protected void onCreate(Bundle savedInstanceState)
{
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
setContentView(R.layout.services);
ImageView Im_forum = (ImageView) findViewById(R.id.im_forum);
Im_forum.setOnClickListener(new OnClickListener() {
public void onClick(View arg0)
{
}
});
}
[/ltr]
الآن بمجرد الضغط على اول صورة ولتكن صورة المنتدى سيقوم باتخاذ اجراء معين... لم نقم بتحديده بعد. ما نريد به هو عند الضغط على اصورة يظهر محتوى المنتدى من الرابط http://arabhardware.net/forum من خلال الـ WebView الذي قمنا بوضعها ، الأمر أبسط مما تتخيل[ltr]
public void onClick(View arg0)
{
WebView wb = (WebView) findViewById(R.id.webView1);
wb.loadUrl("http://arabhardware.net/forum/");
}[/ltr]
[/color][/rtl]
دعنا للتجربة الآن ، قم بستغشل البرنامج ... هي تعمل ولا تعمل... تعمل اننا بالفعل نجحنا في ان نرسل رابط للـ WebView ليقوم باستعراضه ولم تعمل لأن Web View فشل في استعراض الرابط ولكن هذه المره تبدو وكأنها مشكلة في اتصال الإنترنت رغم انني قمت بتجربة الـمتصفح الخاص بالمحاكي وهو يعمل بشكل طبيعي.
لو رجعنا الى الوراء قليلاً ايضاً من خلال ملف AndroidManifest لقد ذكرت ان هذا الملف يقوم بالتحكم في صلاحيات البرنامج ، ومن صلاحيات البرنامج التي يجب ان تمنح هي ان هذا التطبيق يمكنه اجراء اتصال بالشبكة وعند تحميل البرنامج على جهازك يبين لك ان هذا التطبيق سيستخدم الإنترنت اذن دعونا نذهب ونضيف سطر بسيط داخل هذا الملف لنمنح لأنفسنا تصريح استخدام الإتصال
الأمر بسيط اليس كذالك ؟ لا عليك في حفظ هذه التصاريح فهناك صفحة يمكنك الإستعانه بها لتظر لك جميع التصاريح كاستخدام البلوتوث واستخدام قائمة العنواين وغيره والآن دعونا للتجربة الحية أمامنا :
رائع هي الآن تعمل بشكل جيد... دعونا من مشكل اللغة العربية مع بعض الإصدارات سنتحدث عنها لاحقاً ، والآن قم بتكرار العملية مع كل صورة بنفس الطريقة.
تبقى لدينا آخر شاشة وهي شاشة المراسلة سنقوم بشرحها من خلال الدرس الخامس ان شاء الله.
الرئيسية
البوابة
