Android

كيفيّة استخدام WebView في تطبيقات الآندرويد

مقدّمة

عند زيارتك لموقع ما، وليكن موقع برمج على سبيل المثال (وذلك من خلال العنوان www.barmej.com)، فإنَّ متصفِّحك، سواء أكان Mozilla Firefox، أو Google Chrome، أو Safari، أو غيرهم، سيقوم بطلب ملفّات صفحة الواجهة (Homepage) الخاصّة بالموقع من خادم هذا الموقع، وهذه الملفّات هي عبارة عن ملفّات مكتوبة بلغة HTML، وهي لغة ترميز تُبيِّن كيفيّة ظهور الصفحة، بالإضافة إلى صور (كشعار موقع برمج) ومقاطع فيديو وغير ذلك. أخيراً، يقوم المتصفِّح برسم الصفحة كما يجب أن تبدو على شاشة المستخدم.

إنَّ كل هذه العمليّة تحدث خلف الكواليس في متصفِّح الويب من خلال برنامج يُسمّى مُحرِّك التصميم (Browser engine)، وكل متصفِّح يستخدم مُحرِّك مُختلف عن الآخر، ومن أشهر هذه المحرِّكات هو محرِّك Blink المُستخدم في متصفِّح Google Chrome، ومتصفِّح Gecko المُستخدم في متصفِّح Firefox. إنَّ العمليّة التي ذكرناها هي عمليّة مُعقّدة جدّاً بحيث أنَّ عدد مُحرِّكات التصميم الموجودة حاليّاً والتي لازالت قيد الاستخدام يُمكِن عدُّها على أصابع اليد.

من أجل ذلك، فقد وفَّرت شركة جوجل لمطوّري تطبيقات نظام آندرويد آليّة بسيطة تُمكِّنهم من إدراج مُتصفِّح بسيط في تطبيقاتهم يمكن من خلاله زيارة المواقع وإظهار محتواها ببضع أسطر من الكود فقط، دون الحاجة للخوض في أي تفاصيل معقّدة. ويُمكن الوصول إلى هذا المتصفِّح من خلال عنصر WebView.

إدراج عنصر WebView

قبل أن نتمكَّن من استخدام عنصر WebView في تطبيقنا، يجب علينا تفعيل صلاحيّات استخدام الإنترنت من خلال إضافة السطر التالي إلى ملفّ الManifest في المشروع، وتحديداً في وسم <manifest>:

الآن يمكننا إضافة عنصر WebView إلى تطبيقنا من خلال مُصمِّم برنامج Android Studio، ويمكن إيجاد العنصر في تصنيف Widgets:

بحيث سيصبح ملفّ الXML الخاصّ بواجهتنا كما يلي:

زيارة موقع

للانتقال إلى موقع معيَّن في الWebView، نقوم باستخدام دالّة ()loadUrl الموجودة في كلاس WebView. ولكن يجب علينا أوّلاً أن نقوم بتعريف كائن (Object) ليشير إلى عنصر WebView في الواجهة حتّى نتمكَّن من الوصول إليه برمجيّاً، فنقوم بتعريف كائن من نوع WebView، ومن ثمَّ نستدعي دالّة ()findViewById في ()onCreate لوصل العنصر بهذا الكائن فور بدء التطبيق، فيصبح الكود في ملفّ MainActivity.java كالتالي:

الآن أصبح بإمكاننا الوصول إلى عنصر myWebView واستدعاء الدالّة ()loadUrl، وهذه الدالّة تأخذ معاملاً واحداً وهو عنوان الموقع المُراد زيارته، فلزيارة موقع برمج، نقوم بكتابة التالي:

ولكن ستظهر لنا مشكلة هنا وهي أنَّ التطبيق سيقوم باستدعاء متصفِّح الويب الموجود في الجهاز لفتح الموقع، ولن يتم فتح الموقع في التطبيق نفسه، وسبب ذلك هو أنَّ عنصر WebView الذي قمنا بتعريفه لا يحتوي على كائن WebViewClient الذي يمكّنه من عرض المواقع، لذلك، يجب علينا استدعاء دالّة ()setWebViewClient قبل دالّة ()loadUrl لنتمكَّن من زيارة المواقع من خلال عنصر WebView، ونقوم باستدعاؤه كالتالي:

الآن عند تجربتنا للتطبيق، سيتم زيارة موقع برمج كما في الصورة التالية:

التنقُّل بين الصفحات

يمكننا استخدام الدالّتين ()goBack و ()goForward للرجوع للصفحة السابقة أو العودة للصفحة اللاحقة، ولكن هاتين الدالّتين لن تكونا ذات أهميّة إن لم نربطهما بأزرار أو وسيلة لتفعيلهما من قِبَل المستخدم، لذلك، فسنقوم بإضافة زرّين في أسفل الواجهة أحدهما للرجوع والآخر للتقدُّم. يمكننا استخدام LinearLayout أفقيّة لاحتواء الزرّين، بحيث تظهر واجهتنا كما في الصورة:

ما يلي هو كود XML الخاص بالواجهة:

الآن لنقم بتعريف الزرّين في كلاس MainActivity باستخدام ()findViewById:

الآن سنقوم بتعريف onClickListener لكلا الزرّين حتّى نتتبَّع حالة كل زرّ، وعند الضغط على زرّ العودة إلى الخلف، نقوم باستدعاء دالّة ()goBack لنرجع للصفحة السابقة، ونفس الشيء في حالة زرّ التقدُّم:

بذلك أصبح بإمكاننا الرجوع للخلف أو التقدُّم من خلال الزرّين.

إضافة حقل للعنوان

بإمكاننا تحسين المشروع البسيط من خلال إضافة حقل لكتابة عناوين المواقع (Address Bar)، وسنحتاج لذلك عنصر EditText أعلى الزرّين السابقين، بالإضافة إلى زرّ جديد لإتمام كتابة العنوان (Go button)، وبإمكاننا وضع كلا العنصرين في LinearLayout أفقيّة. ستصبح الواجهة كالتالي:

ما يلي كود XML الخاصّ بالواجهة:

الآن سنقوم بتعريف كِلا العنصرين في ملفّ MainActivity.java من خلال دالّة ()findViewById:

وسنقوم بتعريف OnClickListener لزرّ GO ونجعله يقوم باستدعاء دالّة ()loadUrl لزيارة الموقع الموجود عنوانه في عنصر EditText:

فقد أصبح الكود كاملاً كما يلي:

يمكنك تجربة التطبيق وكتابة عنوان موقع معيَّن وزيارته، ولا تنسى سبق العنوان بعبارة “//:http” حتّى نُحدِّد البروتوكول المُستخدم.

بذلك نكون قد قمنا بعمل متصفِّح ويب بسيط باستخدام عنصر WebView.

معالجة كود HTML بشكل مباشر

يتيح عنصر WebView إمكانيّة معالجة كود مكتوب بلغة HTML بشكل مباشر وإظهار محتوى الصفحة الناتجة على الشاشة، ويتم ذلك من خلال دالّة ()loadData كالآتي: