/About Dojo – IV

About Dojo – IV

لو مقريتش اخر تلت اجزاء ياريت تقراهم لو اتكيت من قايمه ال categories الى على اليمين Front-end هتلاقيهم قدامك 🙂
الجزء دا هيبقي طوييل بس جميييييييييييل وهتحبه
الاجنده بتاعتنا :-

JSON
using Ajax on a browser-based small application
Literals and Hashes

الاول Hashes and literals

الاول يعني ايه literal؟؟ -ملخص الموضوع ان فى الجافاسكربت “سترنج” داString literal
[1,2,3] دا Array literal يعني ال literal هو الجزء الى بيكون اي حاجه زي الطوبه فى المبني كدا
يعني ايه بقي Hashes? لو درست او عارف داتا ستركتشر هتعرف المفهوم نفسه هو بالظبط زي ال HashMaps فى الجافا وزي ال associative arrays فى ال PHP لو متعرفش داتا ستركتشر
الهاشز دي زي كدا التعاويذ – دا فرض – الساحر يقول كلام حاجه تحصل اهه كدا بالظبط انت بتقول فى البرنامج حاجه يقوم هو يعمل او يرجعلك حاجه

فى الجافاسكربت بقي الاوبجكت عباره عن حبه خصائص والخصائص دي بتاخد شكل ال Hash literal الكود هيوضح كلامى

فلو انا عاوز انفذ فنكشن 1 دي هقول Object.function1() او قلت Object.y هيرجعلي قيمتها الى هيا 12
ممكن برضه اعمل كدا

زي مابعمل فى الarray

برضه ممكن اعمل

طيب ماعلينا بقي ندخل على ال JSON

JSON : Javascript Object Notation

الاول احنا هنستخدمها فى التطبيق الى هنعمله بس اشمعني JSON مع ان الدنيا كلها شغاله XML بس احنا شغالين فى الفرونت اند
يعني Browser-based application وفى المنطقه دي بقي ال XML فيه عيبين اول عيب مش كل الBrowsers بيطبقوا المعايير بتاعه ال XML زي بعض, وال XML بطيئه فى ال Browser-Based applications وفى نوع التطبيقات دا بالذات السرعه غاليه جدا.
طيب ايه الفرق بين كود ال XML وكود ال JSON نفترض اننا هنعمل اوبجكت طالب
in XML

in JSON

مش بيفكركوا بحاجه؟؟ ايون هوا دا ال Hash literal الى كنا لسه بنتكلم فيه بس ال JSON فيه قواعد زياده
زي ان كل حاجه سترنجات اسم الاوبجكت والخصائص الى جواه – ال nesting مسموح بيه فى الجزء الى على اليمين بس الى هوا فيه القيمه
فلو انت في يوم من الايام قررت تشتغل بالدوجو من الافضل انك تستخدم الJSON لانها اسرعه ميه مره من ال XML (ميه مره بجد)

نروح بقي للتطبيق بتاعنا هنعمل قايمه طلبه, حاجه صغيره عشان دا تاتوريال اونلاين بس
هنكتب بقي ملف ال JSON الى فيه البيانات بتاعه الطلبه
ملف ال JSON الى هنكتبه هيبقي هو الداتا سورس (Data Source ) بتاعنا و ال url هيبقي حسب مكانه بس نفترض معانا هيبقي “json/students.json” كود بقي الملف بتاعنا هيبقي كالتالى

دي Array فيها الطلبه الى موجودين واخيرا الشكل النهائي الى فوق خالص

طيب تمام شرحنا ال JSON وعملنا عليها تطبيق نعمل بقي الابليكاشن او التطبيق بتاعنا طيب التطبيق دا هيبقي ايه؟؟
ببساطه شديده اوي اوي اوي هيبقي عباره عن جدول بيستمد البيانات الى فيه من السرفر عن طريق ال Ajax
وعشان نقرا الداتا الى هى JSON هنستخدم الدريفر الى اتكلمنا عنه المره الى فاتت الى اسمه dojo.data وبالتحديد dojo.data.ItemFileReadStore والدريفر دا بيتوقع او مستعد ان الداتا الى داخلاله JSON و JSON فقط
وهيقراها من خلال identifier الى هو المكان الى فيه الاي دي بتاع الاوبجكت او وحده من البيانات و label ودا الى فيه الحاجه الى ممكن اقراها عن الاوبجكت دا

انا من شويه كنت قلت اننا هنستخدم جدول بس بطبيعه الامر هو مش هيكون جدول اوي يعني هو حاجه اسمها Grid Widget الناس الى اشتغلت فى ال GUI’s فاهمين يعني ايه جريد , بس هو حاجه زي كدا ال spreadsheet وممكن تعمل عليه edit
الجريد ويدجت مش معروفه اوي وسط الناس الى شغاله فى الويب عشان صعب انها تتعمل او التعامل معاها بس فى Dojox (فاكرينه؟) هيبقي سهل جدا انك تحط جدول فيه الداتا بتاعتك ومن الحجات الجميله فى الموضوع انه من افضل الامثله على ال MVC Design pattern
بما اننا عملنا الداتا سورس بتاعنا نعمل بقي الى يكويري الداتا دي او يستدعيها

منظر الكود دا كأنه Dijit widget بس فى الحقيقه هو مش بيظهر اساسا دا حتي ال dojoType = dojo.somthing… يعني مش ديجيت اساسا يعني مش ويدجت امال ايه دا؟
الـ Jsid attribute بيعمل متغير بيتحط فيه الاوبجكت الى انا جبته من ملف ال json
ونعمل بقي الشكل بتاع الGrid

شكله زي ال HTML table العادي بس فى attributes  زياده زي dojoType=”dojox.grid.Grid” وزي store و clientsort و query
جوا ال store بنحط اسم المتغير الى انا استدعيت بيه الداتا فى الديف الى فوق عشان احط الداتا فى الجدول
جوا ال clientsort بعمل true لو كنت عاوز اخلي المستخدم يقدر يرتب الداتا على حسب الحقل و false للعكس
جوا ال query بقول انا عاوز كل الداتا الى فيها حقل اسمه studentId
وفى الاخر هيطلعلي الكود الكامل عامل كدا

الملفات