برمجة الأندرويد

درس Data Binding Library

[mhc_section admin_label=”section”][mhc_row admin_label=”row”][mhc_column type=”4_4"][m[mhc_post_header admin_label=”عنوان المقالة” title=”on” meta=”off” avatar=”off” author=”off” date=”off” categories=”on” comments=”off” views=”off” text_orientation=”right” text_color=”dark” featured_image=”on” featured_placement=”below” parallax=”off” parallax_method=”off” animation=”off” custom_paddings=”40" size=”26px” title_bold=”off” text_shadow=”off” text_background=”off” text_bg_color=”#ffffff” overlay=”on”]/mh[/mhc_post_header][mhc_text admin_label=”نص” background_layout=”light” text_orientation=”right”]فى برمجة الأندرويد نضع المكونات فى الشاشات فى التصميم ب xml لنتعامل معها لاحقا باستخدام الـ Java والطريقة التقليدية لذلك هو أن تعطى الـ View معرف او id وعن طريق الجافا تقوم بالوصول الى هذا المكون عن طريق الميثود findViewByID وتعطيه الـ id الذى اعطيته للمكون فى xml وبالتالى وصلت للمكون وتستطيع التعامل معه كتغير النص ان كان TextView او اجراء حدث الضغط إن كان Button وما إلى ذلك ،

فى الوضع العادى عندما يكون لديك عدد قليل من الـ Views تكون الأمور على ما يرام لكن عندما يصبح لديك الكثير من الـ Views يصبح كتابة عدد كبير من الـ findViewByID أمر مزعج وتشعر كأنك احد موظفى شئون الطلاب تقوم بعمل findViewByID مرار وتكرار بشكل مزعج وروتينى ولاننا مبرمجين ويطلق علينا Problem Solvers سارع المبرمجين بايجاد حلول لهذه المشكلة فقام البعض بتوفير اضافة ل Android Studio تقوم بعمل findViewById تلقائيا معتمدة على الـ id وانواع المكونات مثل اضافة findViewByMe والبعض من المبرمجين قام بعمل مكتبة تسهل العملية مثل مكتبة ButterKnife التى تسهل عملية الـ Bind وبدلا من ان تكتب findViewById كل مرة ثم تقوم بعمل casting فانك تكتفى بعمل @BindView بالاضافة لمجهودات المبرمجين قامت جوجل أيضا بتوفير حل أو بديل لعملية الـ Binding التى نقوم بها عن طريق findViewByID وهو الـ Data Binding Library لتوفر حل اسرع يجعلك تصل للمكونات ويغنيك عن كتابة الكثير من اكواد findViewByID ويوفر عليك الوقت والمجهود.

 

 

تفعيل  الـ Data Binding Library فى المشروع 

لن نحتاج لإضافة سطور compile فى الجرادل ولكن فقط سنضيف الكود التالى بداخل android فى ملف الـ gradle الخاص بالـ app كما فى الصورة

    dataBinding {
        enabled = true
    }

 

نقوم بعمل Sync للـ Gradle  

والان نحن جاهزون للعمل فهيا بنا

 

فلسفة عمل الـ Data Binding Library

تعتمد هذه المكتبة على فكرة الـ Objects او الـ POJO او الـ Model اى نقوم بإنشاء كلاس جديد ونقوم بتعريف ما نريد فيه ثم نقوم يتم عمل Bind بين الـ xml وهذا الـ Model وبالتالى فإن  أى تغييرات تتطرأ على هذا الـ Model فهى تنعكس على الـxml والعكس كل تغيير يتم فى xml يطرأ على الـ Model وبالتالى كل ما نقوم به نقوم بوضع المكونات فى XML ونقوم بعمل Model يحمل متغيرات تمثل هذه المكونات ويتم الاشارة لهذا الـ Model فى xml كما سنوضح فى المثال وتعريف كل مكون بالمتغير الخاص به فى الـ Model ونقوم ببدء الاستخدام ونشاهد النتائج كما فى المثال التالى .

 

مثال عملى على الـ Data Binding Library 

سنقوم بإلذهاب الى xml الـ Main  أكتيتفى  او انشاء أكتيتيفى أخر اذا اردت والذهاب لل XML لنقوم بوضع المكونات وسنفترض انى اقوم بعمل صفحة بسيطة عن هنديوير وهى تحتوى على TextView يعرض اسم الموقع وTextView اخر يعرض رابط الموقع و TextView اخر يعرض بيانات عن الموقع لذلك سأقوم الان بعمل 3 TextViews كالتالى :

مجرد xml layout عادية جدا لم نقم بفعل شىء بعد سوف نقوم الان بإنشاء كلاس جديد ليعمل كـ Model او كـ DataObject وسأطلق عليه Hendiware وسيحتوى على 3 متغيرات نصية هى التى ستعرض فى الـ TextViews الثلاثة وسأقوم بإنشاء Getter and Setter لهم كالتالى :

package com.hendiware.databindingexample;

/**
 * Created by developerhendy on 9/2/16.
 * © 2016.
 */
public class Hendiware {
    private String siteName;
    private String siteLink;
    private String siteDetails;

    public String getSiteName() {
        return siteName;
    }

    public void setSiteName(String siteName) {
        this.siteName = siteName;
    }

    public String getSiteLink() {
        return siteLink;
    }

    public void setSiteLink(String siteLink) {
        this.siteLink = siteLink;
    }

    public String getSiteDetails() {
        return siteDetails;
    }

    public void setSiteDetails(String siteDetails) {
        this.siteDetails = siteDetails;
    }
}

أنشأنا الـ Model الان نذهب للـ xml لكى نربطه بهذا الـ model وأول خطوة فى ذلك هو زيادة tag الـ layout وجعله الroot الخاص بالاى اوت كالتالى :

الان هذه الـ layout جاهزة لعمل binding لكن لا تعرف اى موديل سيتم ربطها بها لذلك سنبدأ الان بتعريف الـ layout هذه بالـ Data Object او الـ Model  الذى ستتعامل معه كالتالى :

قمت بفتح الـتاج data وأغلاقه بدون صفات وبداخله وضعت الـتاج variable يحتوى على شيئين اولا الاسم وهو اسم المتغير الذى ستستخدمه بعد قليل فى xml وال type وهو عباره عن الكلاس التى أنشأناها قبل قليل شاملة اسم الـ package المتواجده بها .

الان نذهب الى الـ TextViews ونوزع عليهم المتغيرات بحيث يعرف كل TextView المتغير الخاص به من الـ Model  كالتالى :

كما تشير الاسهم فانى اضع الصفة text العادية لكن بدلا من أعطيه نص مؤقت الان فانى اقوم بعمل @ يليلها الـ {} وبداخلها اكتب اسم المتغير الذى أنشأته بالاعلى ثم نقطة ثم اسم المتغير الموجود فى الـ Model او الـ DataObject

 

الان الـ xml يعرف الـ DataObject الذى سيتعامل معه لكن اذا ذهبنا للأكتيتيفى كيف سنقوم بالوصول اليه او كيف سنتعامل معه ؟

لذلك يتبقى خطوة أخيرة الان اسم الـ layout التى وضعنا بها الـ textViews هى activity_main.xml لذلك سأذهب للجافا واقوم بعمل الخطوة النهائية للـ Binding كالتالى :

وسوف تلاحظ اننا استغنينا عن ميثود setContentView التقليدية واستخدمنا الميثود وبالنسبة للـ ActivityMainBinding هذا الكلاس تم إنشاؤه تلقائيا من خلال الأندرويد ستوديو اعتمادا على اسم الـ layout xml بالاضافة لكلمة Binding ولو كان اسم الـ layout اى اسم اخر مثلا register_activity فسيكون اسم  الكلاس RegisterActivityBinding تقوم بكتابته حسب اسم الاكتييتفى وستجد ان الـ AutoCompelete يظهرله لك ويكأنه كلاس سابق .

الان بما أننا عرفنا فى xml سابقا الـ variable والذى كان اسمه hendiware والـ type هو كلاس Hendiware فستجد أنه هناك ميثود فى الـ bindning باسم setHendiware

هذه الميثود تأخذ كلاس من النوع Hendiware وهو ما سنقوم بفعله كالتالى :

أنشانا اوبجكت Hendiware وأعطيناه كباراميتر للميثود وبالتالى لاحقا اى تغيير يطرأ على hendiware يتم عكسه على الـ TextViews  قم بتشغيل التطبيق الان وشاهد النتيجة .

 

يمكنك التعديل على hendiware فى أى وقت او تغيير الـ Object بأوبجكت اخر كإنشاء hendiware جديد

وحتى يصبح الامر منطقيا اكثر سوف اقوم بتعديل اسم الـ DataObject من Hendiware الى SiteData وذلك عن طريق الذهاب لكلاس Hendiware والوقوف بمؤشر الماوس على اسم الكلاس والضغط على shift+f6 واقوم بالتعديل لكى يتم تعديل اسم الكلاس فى كل الاماكن وسيكون بعد التغيرات  كالتالى :

 

 

الان سأقوم بكتابة كود ليقوم بتغيير البيانات فى الـ TextViews  بعد 5 ثوانى وهو كالتالى :

واستخدمت هنا الكلاس CountDownTimer لاقوم بتنفيذ امر بعد 5 ثموانى وليس لها علاقة بالـ Binding  قم بتشغيل التطبيق الان وشاهد ما سيحدث .

 

الان فهمت مبدأ عمل الـ Binding Library والامر لا يقتصر على النصوص فقط والمتغيرات النصية يمكنك استخدام int واستخدامها مع EditText او اى مكون اخر مثل togglebutton تربطه بـ boolean معين مثلا وكذلك عملية الـ handel للأزرار والكثير من العمليات الاخرى يمكنك مراجعة الموضوع الرسمى فى موقع المطورين عن المكتبة والتعرف على الأمور الاخرى وما يمكنك القيام به باستخدام الـ DataBindingLibrary

 

[/mh[/mhc_text][mhc_comments admin_label=”تعليقات” show_comments=”on” /][/mhc_column][/mhc_row][/mhc_section]
السابق
درس مكتبة EventBus : الإتصال بين مكونات التطبيق بسهولة
التالي
الإستخدام المتقدم للـ RecylcerView

4 تعليقات

أضف تعليقا

  1. ميسرة قال:

    أنا شايف الطريقة التلقيدية أسهل وأنظم نوعا ما

  2. Mohamed Yehia قال:

    اعتقد ButterKnife حلت المشكله بشكل اذكى من كدة

  3. MAhmoud قال:

    مشابهه لطريقة ASP.NET MVC مع RAZAR

  4. hunterand1 قال:

    الطريقة جد جد إحترافية احببتها لسبب بسيط انه غالبا مانقوم بإنشاء كلاس ليناسب معطيات صفحة, سنختصر الوقت ب وضع علاقة كلاس مع الصفحة (Y)

اترك تعليقاً

هذا الموقع يستخدم Akismet للحدّ من التعليقات المزعجة والغير مرغوبة. تعرّف على كيفية معالجة بيانات تعليقك.