سلسلة تعليم برمجة تطبيقات الأندرويد (الدرس الثالث والعشرون)

سلسلة تعليم برمجة تطبيقات الأندرويد

الدرس الثالث والعشرون

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

لنبدأ كما اعتدنا بفتح برنامج الأندرويد استديو والذهاب إلى المجلد res ومن ثم إلى المجلد layout من أجل إنشاء الواجهة التصميمية للتطبيق (وسنسمي التطبيق WebExa) وسنضيف العناصر التالية إلى الواجهة:

1- عنصر علامة التسمية Plain Text.

2- عنصر الحقل Edit Text.

3- عنصر عرض موقع الويب Web View.

4- عنصر الزر Button.

وسيكون الشكل النهائي للواجهة كما يلي:

وهنا لابد من التنويه إلى أننا استخدمنا ما يلي:

1- العنصر Medium Plain Text من أجل علامة التسمية ووضعنا بداخله النص Enter Url ليدل المستخدم على المكان الذي سيدخل فيه المستخدم رابط الموقع الذي يريد عرضه ضمن الواجهة.

2- عنصر الحقل وهو Plain Text ليدخل المستخدم عنوان (أي رابط) الموقع الذي يريد عرضه.

3- العنصر Button سيمثل الزر الذي سيضغط عليه المستخدم بعد أن يقوم بكتابة عنوان الموقع وأسمينا هذا الزر GO.

4- عنصر عرض صفحة الويب ويسمى Web View وهو موجود في الجزء Widgets من الأدوات وقمنا بتطبيق التنسيقات التالية على هذا العنصر عبر تعليمات xml بشكل يدوي كما يلي:

<WebView     android:layout_width="400dp"     android:layout_height="500dp"     android:layout_marginTop="140dp"     android:id="@+id/webView"     android:layout_centerHorizontal="true" />

وهذه التنسيقات كافية أي يمكن اختيار الأبعاد التي تناسبكم ولكن لابد منها وإلا لن يظهر الموقع ضمن عنصر عرض الويب بالشكل المناسب.

وبعد الانتهاء من الواجهة لابد من الانتقال إلى الكود البرمجي من أجل إضافة الطريقة onClick() وذلك بعد إضافة الزر كعنصر برمجي وإضافة الحدث له كما اعتدنا عبر التعليمات التالية:

Button b=(Button)findViewById(R.id.button); b.setOnClickListener(this);

ومن ثم نضيف الطريقة onClick() كما يلي:

@Override public void onClick(View v) { }

وسنبدأ الآن بمعالجة الحدث عبر تعريف العناصر المطلوبة برمجياً ضمن الطريقة onClick() وهنا لابد من تعريف عنصر الحقل لأننا بحاجة إلى القراءة منه وذلك وفق الكود البرمجي التالي:

EditText e=(EditText)findViewById(R.id.editText); String url; url=e.getText().toString();

وبالحديث قليلاً عن الكود السابق سنلاحظ أننا عرفنا متحول من نوع السلاسل الحرفية (String) وأسميناه url وهو اسم افتراضي (تستطيعون تسميته كما تشاؤون) ومن ثم قمنا بقراءة ما أدخله المستخدم ضمن الحقل ووضعه كقيمة للمتغير url عبر التعليمتين getText() و toString() كما اعتدنا سابقاً.

الآن لابد من البدء بالتعامل مع عنصر عرض الويب والذي يسمى برمجياً Web View  وذلك بتعريفه أولاً كما في الكود البرمجي التالي:

WebView w=(WebView)findViewById(R.id.webView);

ولكي نتعامل معه لابد من كتابة الكود البرمجي التالي:

w.getSettings().setJavaScriptEnabled(true); w.loadUrl(url);

ويمكننا شرح التعليمتين السابقتين كما يلي:

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

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

هل انتهى التطبيق؟! لا لم ينتهي وانتظرونا في الدرس القادم لنكمل هذا التطبيق المهم.