About Dojo – Part 4

لو مقريتش اخر تلت اجزاء ياريت تقراهم لو اتكيت من قايمه ال 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
وفى الاخر هيطلعلي الكود الكامل عامل كدا

الملفات

 

About Dojo – Part 3

لو مقريتش الاجزاء الى فاتت ياريت تقرأها

الجزء التاني – الجزء الاول

الاجنده بتاعتنا بقي كالتالى : Debugging – Ajax in Dojo -validation

Debugging

طيب هبتدي بالديبج هنستخدم ال http://www.getfirebug.com فايربج… وال plugin دا ليه مميزات كتيره زي انه Dom viewer – Console logger – profiler – debugger بس احنا هنستخدمه اكتر كديبجر ” مصحح” شكله هيبقي عامل كدا

لواتكيت على الخنفسه ( 😀 ) الى تحت دي هيطلعلك المنظر دا دا منظر الكود Nested

طيب انا عاوز اعمل ديبج بقي او اشوف يعني ايه ديبدج. نفترض انك عملت صفحه وكتبت كود جافاسكربت بس فيه ايرور وانت مش عارف فين الايرور دا هيظهرلك فى الفايربج ساعتها طيب تعالى نجرب كدا نكتب مثلا فنكشن مش موجوده الكود هيبقي كدا

بس قبل كل دا افتح الفايربج واتكي على السهم الصغير الى جنب Console واعمل Enable

ساعتها هيظهرلي الشكل دا فى الكونسول

لاحظ كدا فى تحت مكتوب فى ايرور ياعم الحج وطلعلك الايرور ايه ورقم السطر كمان بس ودا كان الديبج

Forms & Validation

نيجي بقي للفورمات Forms والvalidation

فاكرين الكود بتاع المثال الى فات..افتحه عندنا فى اول Tab فى خانه تكست نقدر نكتب فيها بس الاتش تي ام ال بتفتحلك تكتب الى انت عاوزه ومحدش هيقولك لا..طبعا انا محتاج اعمل تأكيد ان البيانات دي صح

فى الدوجو فى حاجه اسمهاValidationبرضه تنتمي للديجيت المهم تاج الانبت بتاعنا هنغيره هيبقي كدا

ننزل الترجمه بقي

dojoType = دا نوع  الفورم الى انت شغال عليها

trim = دي بتشيل المسافات الى قبل التكست والى بعده

propercase = بخلي اول حرف كابيتال

required = بتحدد اذا كان الخانه دي لازم اليوزر يملاها او لا

missingMessage = لو اليوزر ساب الخانه فاضيه هتطلعله الرساله دي

ممكن برده تعمل Validation بال Regular Expressions بتحطه جوا Attribute RegExp

طيب لو عاوزين ندخل التاريخ مثلا…

جرب كدا تحط dojoType=”dijit.form.DateTextBox” متنساش تعمل require

file.html دا فايل فيه الى قولناه فى الفورمز عملي (كود)

AJAX

نتكلم بقي عن الاجاكس او Remote Scripting

للناس الى متعرفش الاجاكس فى تطبيقات كتير اجاكس مشهوره جدا زي Google Maps والممتع فى الموضوع انك ممكن تبعت ركوست للسرفر منغير ماتعيد تحميل الصفحه عشان تشوف الرد بتاع السرفر الاسم بتاعه

XmlHttpRequest فى الدوجو اسمهXHR منغير ماطول فى الكلام هقول بس ان الاجاكس استخدامه صح. صعب فخلي بالك وانت بتشتغل بيه.

معلش خلوني المره دي اتكلم بس عن الاجاكس فى الدوجو عامل ازاي ونتكلم بالكود المره الجايه

فى الدوجو فى تلت طرق للاجاكس فى تلت مكتبات :-

اول مكتبه

dojo.data ودي كدا زي ال JDBC مش هنستعملها كتير فهخلي الكلام عنها قدام

dojo.io.script بتستخدم على ال JSONP( javascript object notation with padding ) وبرضه نخلي الكلام عنها قدام

الى عاوزينه دلوقتي الى هوا

dojo.xhrGet ,dojo.xhrPost, dojo.xhrPut…etc

دي ابسط واسهل نوع اي نعم هو ساذج شويه بس احسن بدايه 🙂

المره الجايه بقي ان شاء الله هتكون الاجنده جامده وهتكون بدايه الشغل بجد

 

About Dojo – Part 2

قبل ماتقرا المقاله دي لو مقريتش الجزء الاول ياريت تقراه

اولا فى جوانب رئيسيه لازم تعرفها عن الدوجو منهم ان الدوجو ينقسم لتلت مشاريع
(Dojo – Dijit – Dojox) :-
الدوجو : هو المشروع الرئيسي الي اتبني عليه باقي المشاريع وهو بيحتوي على عدد كبير اوي من السكربتات الى مهمتها بس تطبيع المتصفح  واضافات تانيه للجافاسكربت زي الكويري والدراج والدروب وتخزين بيانات
الديجيت : هو فريمورك للويدجتس وهنشوف يعني ايه ويدجتس دلوقتي بمفهوم الدوجو
الدوجو اكس : ممكن كتير منكم يخمن ان اكس بتعبر عن اكستنشن او امتداد (بالعربي) وهى فعلا كدا , هى بتحتوي على حجات كتير جدا من اول الشكل للويدجتس لحد مكتبات الجرافيك. يعني بالفلاحي الدوجو اكس هى الاصدار الجامد من الدوجو

طيب كويس برده انا معرفتش هعمل ايه بالدوجو…
لو بصيت فى الجزء الاول على البريزنتيشن هتلاقي العنوان (DOJO the Ajax UI) يعني الهدف او الاستخدام الغالب او المعتاد فى الدوجو هو الاجاكس(Ajax)
طيب نشوف شويه شغل بقي؟؟
المره الى فاتت انا شرحت ازاي بنشتغل بالدوجو المره دي هنشتغل بالديجيت مع الدوجو , طيب خليني اوريك حاجه تفتح نفسك. ده مثال لصفحه مستخدم فيها الديجيت . الشكل دا اسمه ثيم وديجيت فيه تلت ثيمز رئيسيه (tundra – soria – nihilo ) وطبعا ممكن تعمل انت ثيم ليك.
لما تيجي تعمل صفحه بقي انت عاوز تستعمل فيها الديجيت هيبقي الشكل فى الهيد(head) كالتالى :-

فى السي اس اس @import كأنك بتجيب الكود من الملف دا وتحطه فى دا. فمثلا انت عاوز تستخدم تندرا كثيم هتقوم تجيب tundra.css عندك فى الصفحه ولازم تجيب dojo.css فى اي ثيم
فى تاج السكربت djConfig هى بتتيح ليك انك تستخدم الويدجتس declaratively . فى نوعين من استخدام الويدجتس ممكن programmatic و declaratively الفرق هقوله بعدين لو عاوزه دلوقتي ياريت تطلبه بس اختصاراً هعديها.

بعد كدا هتحط كلاس للبودي باسم الثيم يعني فى حالتنا دي tundra

بعد ماتعمل الكلاس هتعمل require اكيد عرفنا يعني ايه require من المره الى فاتت

دا شكل للويدجت مستخدمين فيها ديجيت
ثيم تندرا
TabContainer

عملنا require للبارسر عشان احنا استخدمنا declarative djConfig واي صفحه بتستخدم ال declarative widgets لازم نعمل require للبارسر. بعد كدا عملنا تحميل ل contentpane زي مافى البرمجه عشان تعمل فريم وتحط جواه فورمه بتحطها فى بانل هنا نفس النظام حملناه عشان نعمل بانل نحط فيها الفورمه بتاعتنا جواها

طيب عاوزين مثال حي بقي
فى المثال بتاعي هستخدم Tabbed Panel دا اسمها البرمجي. فى الدوجو بقي اسمها TabContainer هنجيبها ازاي. اكيد بريكوير dojo.layout.TabContainer
مثال بيطلع الشكل الى فى الصوره ياريت تنزل الكود وتحطه تحت فريمورك دوجو وتشغله ومعاك الكود بقي تأمله براحتك

لو اي حد مدايق من العربي وعاوزني ارجع اكتب انجليزي ياريت يقول

 

About Dojo

Asalamu Alaikum,

This is Saad Talaat,

How are you?? :).

This time not as i promised last time sadly to talk about the tooltip plugin enterprising…but i will start talking about Dojo and then will give you the main idea of how to enterprise the previous tooltip plugin.in  a next topic..

Anyway Let’s start with Dojo :). before i begin i gave a session about that 2 or 3 months ago..but sadly few have attended so i am gonna talk about it here :).and here is the slide

Front-End Engineering

View more presentations from Saad Talaat`.

http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=session-100813084545-phpapp01&stripped_title=session-4961258&userName=SaadTalaat

First What is Dojo ??

Dojo is a Javascript framework not a library which actually depends most on Ajax development for doing it’s marvelous tweaks it’s main job is to program a semi-Dekstop applications over web and it is sooo good in doing that,it also does a good job doing widgets and all of that is open source..

Dojo Also supports all browser which library like jQuery can’t do..and Dojo’s UIs also supports all browser unlike jQuery UI the current version at least the accordion has a pathetic look on the IE browser..but Unlike jQuery Dojo only have 3 themes for it’s UIs but also Unlike the jQuery UIs they arn’t just different in color they are also different in shape.

To be more honest the Dojo’s UIs arn’t UIs they are more like a look and feel for a desktop application over web..

Dojo also provides it’s application with alot of desktop applications facilities like resizing for example table panes…actually a normal table can be a table pane just with changing the dojoType attribute of the table

also those dojoType attributes are gonna disappear soon with html5’s custom attributes they are gonna be deprecated..

Dojo is Used by AOL – IBM – SUN (not anymore sun)- Cisco

anyway let’s see a hello world application 😀

Simply our application will have a button and onclick a message box with hello world comes out.

<html>

<head>

<title>bla bla</title>

<link ur css….. />

<script src=”dojo/dojo.js” language=”javascript”></script>

<script language=”javascript”>

dojo.require(“dojo.fx”);

dojo.require(“dojo.Nodelist-fx”);

function efx(){alert(“Hello WOOOOOOORLD!!”);}

function init(){var h=dojo.byId(“btn”);dojo.connect(h,”onClick”,efx);}

dojo.addOnLoad(init);

</script>

</head>

<body>

<button id=”btn”>Hello</button>

</body>

</html>

The previous code only does a hello world message the html is quite clear i think let’s start from the 1st script tag

we import the main dojo script that compile or interpret actually

we open another script tag then we require the what?!!!!!!!!!!!

it’s like importing in java but if u went to folder dojo u will find the next names as js files…so instead of writing a big script tag u just require it by dojo so if u went to folder dojo u will find file called fx and nodelist-fx so we just import scripts…anyway

we required fx script which is resonsible for effects…fadein..slide..etc nodelist is an api like the $() function in Jquery u just use query function like this

dojo.query(“.class,#id”);

we actually won’t need those scripts am just showing the structure of the dojo code…

anyway

we defined a function that shows a message box

and the next function…dojo.byId!!! yea that is just like document.getElementById!!

then connect….yup 🙂 you can connect the (object,”onevent”,withfunction);

and can connect 2 objects too which i will talk about later..

then we addOnLoad the init function to be invoked or u can use anonymous function inside it the init() function….

i guess it’s quite clear now xD >.> ^.-

to be continued…

Regards,

 

Structring a tooltip javascript plugin

Asalamu Alaikum,

This is Saad Talaat.

As the title says we are structuring a tooltip javascript plugin, but what is the point with that??
Actually it’s not about tooltips, I’ve been workin on that recently but after i got done was done with that…i found that it would benfit much people to get to know the javascript more :).and i found talking about my experience would help some people not to fall in these bugs..
Why i am not doing that with JQuery. cuz actually i am the type that like doing his own stuff!!

Anyway let’s start 🙂

First as a study to what tooltip do.
it appears only while mouse is over an titled element…but what we want is to create our own tooltip adjusted the way we like.

First we are gonna need our old getElementByClass.
for tooltip we need a function that creates a tooltip…a function that removes tooltip and a function that position tooltips and a function the initalize events.( the elements that are enabled to show the tooltips will be with class name)

to start with creating those Tooltips

function puttp(p){
var h=document.createElement(“p”);
h.innerHTML=innerHTML=p.attributes[‘title’].nodeValue;
title=p.attributes[‘title’].nodeValue;
p.attributes[‘title’].nodeValue=null;
h.setAttribute(“class”,”tooltip”);
document.body.appendChild(h);
}

Ok here is what we’ve done!!we are reciving one param which is the object that will use our tooltip. we created a paragraph element. and it’s text will be the param’s title. and we stored our title into a var named title and then we removed it from the old element so we won’t have multiple tooltips. and we setted the class attribute of the tooltip as tooltip so we can style it later

.tooltip{
position:absolute;
background:yellow;
padding:10px;
font:.8em verdana;
}

That was my style…it’s a bit simple you can change it the way you want.

function rmvtp(p){
var h=document.getElementsByClass(“tooltip”)[0];
document.body.removeChild(h);
p.setAttribute(“title”,title[title.length-1]);
title=undefined;
}

That is the removing function..it should take the element that has a current tooltip shown as a param. of course since we have one tooltip we need to call the 0-indexed element of our class array.then we will remove it from the body and we are gonna let our element to retrieve it’s old title attribute value.and we will reset our title variable…so far so good!!

function position(e){
var j=document.getElementsByClass(“tooltip”)[0];
j.style.top=e.clientY;
j.style.left=e.clientX;
}

This is the positioning function which is quite really easy :). we just will keep our absolute positioned tooltip to these coords.

function init(){
var i;
for(i=0;document.getElementsByClass(“tp”)[i];i++){
if(document.all){

document.getElementsByClass(“tp”)[i].attachEvent(“onmouseover”,function(){puttp(this)});
document.getElementsByClass(“tp”)[i].attachEvent(“mouseout”,function(){rmvtp(this)});
document.getElementsByClass(“tp”)[i].onmousemove=position;
}
if(document.getElementById){
document.getElementsByClass(“tp”)[i].addEventListener(“mouseover”,function(){puttp(this)},true);
document.getElementsByClass(“tp”)[i].addEventListener(“mouseout”,function(){rmvtp(this)},true);
document.getElementsByClass(“tp”)[i].onmousemove=position;
}
}
}

Then we are initializing our events to the objects. so as long as we have an array elements that holds a value loop.and then we intialize the events so if (document.all) it means if (our browser is IE) cuz document.all is a Microsoft Standard we attach events on the way they are attached on IE.
and if(document.getElementById) it means if(our browser is one of the good side (FF-Chrome-Opera-Safari) which use DOM standards) we attach events on the DOM standards way :).

And then invoke the function init or add it to load event to body.

Anyway our simple tooltip plugin won’t work with nested elements(if you nested an element which uses our tooltip in an element which does that too).
Because there is nothing to hold an extra tooltip data(we have one title variable) so if we hover the inside element with disabling bubbling in our EventListener it will show the inside tooltip but without restoring the parent’s title..so it’s title is lost so if we hover it again…we will be having an empty tooltip.but if we enabled bubbling.when we hover in the inside element the tooltip will be holding the parent’s title..cuz it’s the last it met.. and when we hover out…we will be having nothing.

So in this point an idea comes to your mind why not array??.and push and pull everytime we get inside an element

Actually this process in Javascript will be asynchronized so while we are pulling (or actually deleting) the last element we used javascript will be still holding this index’s value as undefined.and also when you are pulling the last title to restore it,cuz of being asynchronized you may be pulling the undefined element..on the other side the parent element will still be having the event triggered ON!! so it’s title won’t be restored…

so give it a thought till we meet in the next post 🙂 .