موضوع جميل و اسلوب حوار ارقى
تسلم اخي الصدر على الموضوع الرائع انا خبرتي بسيطة و لن استطيع المشاركة في الحوار لكن ان شاءالله نتعلم و نشارككم مستقبلا و هذا وعد مني فاتمنى من الله التوفيق و منكم الدعاء
موضوع جميل و اسلوب حوار ارقى
تسلم اخي الصدر على الموضوع الرائع انا خبرتي بسيطة و لن استطيع المشاركة في الحوار لكن ان شاءالله نتعلم و نشارككم مستقبلا و هذا وعد مني فاتمنى من الله التوفيق و منكم الدعاء
__________________
أهلا و سهلا بك أخي بيشوو من جديد...
الحقيقه لم أفهم بالضبط ما قصدك بهذا السؤال.... :con2:يعني ما ذا تتميز ال <div> برمجيا ؟؟؟؟؟
فالDiv ليس لها علاقة ببرمجة الموقع، أي أنها وجدت لبناء الموقع من الناحية التصميمة، و ليس التطويرية أو البرمجية..
على العموم أنتظر منك توضيحاً أكثر لسؤالك ذاك....
الموضوع لم يأخذ حدة بعد.............. سوف أشعل النار بين سطور الموضوع ...
تابعونا .....
معكم بيشو من قناه سوالف ............. موسكوووووووووووووووووووووووووووووووووووووووووووووو
بس شو اللي وصلك على موسكو!!
و بانتظار ردودك النارية...... :nice:
تحيتي لك...
_____________________________________________________
EaRL_GreY: شكراً لك أخي على ردك اللطيف... و بانتظار مشاركاتك القوية بالمستقبل القريب جداً..
_____________________________________________________
بعد قليل سأنشر الجزء الثاني من درس الـ XForms
فكونوا بالإنتظار... :eek2:
عماد الصدر
__________________
معاً لإنترنت عربية أفضل...
معلومات مهمة عن أدوار فريق العمل في مواقع الويب
http://www.swalif.net/softs/showthread.php?t=120925
البيانات المرسله Submitted Values
الخاصية المسماه بـ ref و الموجودة في كل أداة تحكم بالنموذج، تقوم بالحقيقه بالإشارة إلى عنصر إبنchild element موجود بالـ model، حيث تجمع البيانات المدخله أولا في هذه العناصر قبل إرسالها إلى أي مكان. أما بحال لم يكن هناك عنصر لأحد البيانات (مثل مثال محرك البحث البسيط الذي ذكرناه في الجزء الأول من هذا الدرس) فإنه يتم صنع واحد تلقائياً.
مع أنه مسموح لك بشكل كامل أن تترك النظام يقوم بعملية صنع العناصر لك، إلا أنه هناك بعض الأسباب التي تجعل من إدراجك بنفسك للعنصر شيئا جيداً.
و يمكنك رؤية هذا المثال كتطبيق عملي على الكلام السابق:
من نظرة سريعة على المثال السابق، يمكنك ملاحظة أن المعلومات الوحيده المرسله عبر هذا النموذج تسمى “q”. الفائدة الواضحه للجميع من المثال الذي شاهدناه هو أننا بهذه الطريقة سنكون قادرين على رؤية أي البيانات التي يتم إرسالها عن طريق هذا النموذج، لكن النظام سيقوم أيضاً بالتدقيق عندما تقول له ref=”q” أنه هناك بالفعل عنصر يسمى q.كود:<model> <instance><data xmlns=""><q/></data></instance> <submission action="http://example.com/search" method="get" id="s"/> </model>
لاحظ أنه من الضروري أن تقوم بوضع xmlns=”” بداخل العنصر data و ذلك لإخبار المعالج أن هذه العناصر هي ليس XHTML و لا حتى XForms. كما أنه قد استعملت الكلمة data هنا لوصف العنصر، لكنه بالحقيقه يمكنك استخدام أي كلمة أخرى تريدها.
القيم الأولية Initial Values
يمكنك تعريف بعض القيم الأولية لأدوات التحكم متضمنة الـ checked boxes و selected menu الخ.
لمثال محرك البحث:
هذا المثال سيملئ الـ text control بالكلمة keywordsكود:<instance><data xmlns=""><q>Keywords</q></data></instance>
و ذات الشيء يمكن تطبيقه على قسم الـ checkboxes ، و سيظهر بالشكل التالي:
و يمكنك إختيار خياري الـ vanilla و الـ strawberry كما يلي:كود:<select ref="flavors" appearance="full"> <label>Flavors:</label> <item> <label>Vanilla</label><value>v</value> </item> <item> <label>Strawberry</label><value>s</value> </item> <item> <label>Chocolate</label><value>c</value> </item> </select>
و يمكننا عمل القوائم menus بالشكل التالي:كود:<instance><data xmlns=""><flavors>v s</flavors></data></instance>
و من ثم يمكننا اختيار الخيارين March و April كما يلي:كود:<select ref="spring" appearance="minimal"> <label>Month:</label> <item><label>March</label><value>Mar</value></item> <item><label>April</label><value>Apr</value></item> <item><label>May</label><value>May</value></item> </select>
أما بالنسبه للـ optgroup فهي كالتالي:كود:<instance><data xmlns=""><spring>Mar Apr</spring></data></instance>
كود:<select1 ref="drink"> <label>Drink:</label> <item><label>None</label><value>none</value></item> <choices> <label>Soft drinks</label> <item><label>Water</label><value>h2o</value></item> <item><label>Milk</label><value>m</value></item> <item><label>Juice</label><value>oj</value></item> </choices> <choices> <label>Wine and beer</label> <item><label>Red wine</label><value>rw</value></item> <item><label>White wine</label><value>ww</value></item> <item><label>Beer</label><value>b</value></item> </choices> </select1>
و من ثم اختيار القيمة none كقيمة افتراضيه بالشكل التالي:
القيم المخفية Hidden Valuesكود:<instance><data xmlns=""><drink>none</drink></data></instance>
السبب الذي يدعو الـإكس فورمز لعدم احتياجها للأدوات المخفية Hidden Controls هو أن جميع العناصر التي يتم وضعها بداخل الmodel دون وجود أداة تحكم تمثلها بداخل الـ body في ملف الإتش تي إم إل ستكون مخفية. بهذه الحاله اذا أضفنا القيمة results لمثال محرك البحث فسنغير العنصر فيصبح بالشكل التالي:
إحضار القيم الأولية من مكان آخر Getting Initial Values From Elsewhereكود:<instance><data xmlns=""><q/><results>10</results></data></instance>
لا يجب عليك أن تحدد القيم الأولية من خلال المستند ذاته وحسب، بل يمكنك إحضار قيمة من مصدر خارجي، كما يلي:
أما المستند t21.xml فسيحوي البيانات بالشكل التالي:كود:<instance src="http://example.org/forms/templates/t21.xml"/>
ملاحظة: لست بحاجه للـ xmlns=”” في المستند الخارجي، لكن وجوده لا يضر بشيء.كود:<data><w>640</w><h>480</h><d>8</d></data>
تعديل أي مستند XML
تحميل المستندات الخارجية تعطيك قدرات عظيمة، هذا بسبب أن خاصية الـ ref ليست فقط كخاصية الـ name في الإتش تي إم إل تقوم فقط بإعطائك المجال لتحديد identifier معين و حسب، لكنها بالحقيقه تمكنك من استخدام الـ XPath. و باستخدام هذه اللغة (XPath) يمكنك تحديد مكان أي عنصر أو خاصية تريدها في أي مستند XML.
هذا يعني أنه حين تعلمك للغة XPath، ستكون قادراًً على إحضار أي عتصر من أي مستند XML ، و وضعه (مثالا) في مستند XHTML . دعنا نأخذ المثال التالي على ما ذكر:
إن أردنا أن نحضر عنصر من مستند XML و أن نضعه في عنصر الـ title في مستند الXHTML، فيمكننا استخدام التالي:
و بهذا نعني وسم الـ title الذي هو بداخل وسم الـ head الذي هو بداخل وسم الـ html، و كلهم قد وضع لهم الرمز الذي يرمز على أنهم عناصر من لغة الـ HTML (namespace)كود:<input ref="h:html/h:head/h:title">...
مثال آخر:
و هو يعني خاصية الـ class بداخل وسم الـ body في مستند الXHTML...كود:<input ref="h:html/h:body/@class">...
دعنا نأخذ مثالاً حياًً على هذا الكلام، و لنفترض أن لدينا محل يفتح في ساعات غير معروفه (ولنقل أنه يعتمد على الطقس، فإن كان مشرقاً يكون المحل مفتوحاً، أما بِأي حال آخر فيقوم صاحبه بإغلاقه)، لهذا فإن صاحب هذا المحل يريد أن تكون له صفحه على الويب، يمكنه أن يخبر زوار المحل من خلالها إن كان المحل مفتوحاً الآن أو مغلقاً. بهذه الحاله، و إن كان لدينا صفحة إتش تي إم إل، فإنها ستكون كالتالي:
لكن إن إردنا أن نريح أنفسنا من مهمة تعليم صاحب المحل تغيير ملف الإتش تي إم إل، فيمكننا بهذه الحالة أن نقوم بصنع نموذج بسيط بصفحه منفصله، فيكون استخدامها أسهل من عملية تعديل ملف الإتش تي إم إل. وعند عملها تكون كالتالي:كود HTML:<p>The shop is <strong>closed</strong> today.</p>
ملاحظه مهمة: إن أردت أن تقوم بعمل المثال السابق، فيجب عليك أن تنتبه لنقطتين، الأولى هي أن الملف الأول يجب أن يكون مكتوب الـ XHTM:L و ليس الHTML... و الأمر الآحر هو أن عليك التأكد من أن السيرفر الذي يستضيف هذه الصفحات يقبل الطريقه “put” (ليس جميع الخوادم تقوم بذلك).كود:<model> <instance src="http://www.example.com/shop/status.xhtml"/> <submission action="http://www.example.com/shop/status.xhtml" method="put" id="change"/> </model ... <select1 ref="/h:html/h:body/h:p/h:strong"> <label>The shop is now:</label> <item><label>Open</label><value>open</value></item> <item><label>Closed</label><value>closed</value></item> </select1> <submit submission="change"><label>OK</label></submit>
__________________
معاً لإنترنت عربية أفضل...
معلومات مهمة عن أدوار فريق العمل في مواقع الويب
http://www.swalif.net/softs/showthread.php?t=120925
إرسال البيانات Submission
الإرسالات المتعددة Multiple Submissions
كنا باستخدام الإتش تي إم إل قادرين على إرسال المعلومات المدخلة إلى النموذج بطريقة وحيده و إلى سيرفر وحيد أيضاً.
لكن باستخدام الـإكس فورمز يمكننا إرسال البيانات ذاتها إلى سيرفرات متعدده، أو بطرق متعددة، و يكون هذا عن طريق إستخدام أداتا تحكم موجودتين بالنموذج الموجود بالصفحة
و لأخذ مثال على هذا الكلام، دعنا نعود إلى المثال السابق الذي طرحناه عن محرك البحث البسيط، لنرى كيف يمكننا إرسال البيانات ذاتها إلى أكثر من سيرفر في الوقت ذاته:
و نضع هذين الوسمين في الـ body لصفحة الإتش تي إم إل:كود:<model> <instance><data xmlns=""><q/></data></instance> <submission action="http://example.com/search" method="get" id="com"/> <submission action="http://example.org/search" method="get" id="org"/> </model>
طرق إرسال البيانات Submission Methodsكود:<submit submission="org"><label>Search example.org</label></submit> <submit submission="com"><label>Search example.com</label></submit>
مثلما الحال في الإتش تي إم إل، فهناك طرق متعددة لإرسال البيانات من النموذج، في الإتش تي إم إل يمكننا التعبير عن طرق إلرسال البيانات بطريقتين هما method و enctype، أما الـإكس فورمز فهي تحتوي على طريقة وحيده و هي الـ Method.
من المعلومات التالية يمكننا رؤية وسوم الالـإكس فورمز و الوسم الذي توافقه من الإتش تي إم إل:
HTML
method="get"
تكون:
XForms
method="get"
HTML
method="post"
enctype="application/x-www-form-urlencoded"
تكون:
XForms
method="urlencoded-post"
HTML
method="post"
enctype="multipart/form-data"
تكون:
XForms:
method="form-data-post"
هناك بعض الطرق الجديده لإرسال البيانات، أهمها هي طريقة method=”post” و التي تبعث النتائج على أنها ملف XML، أما الطريقة الثانيه فهي method=”put” و التي تضع النتائج في ملف XML. أحد الإستعمالات الرائعه لهذا الكلام هو التالي:
و الذي يقوم بتخزين البيانات المرسلة من النموذج في ملف XML باستخدام الـ scheme (fileكود:<submission action="file:results.xml" method="put"/>
من خلال المثال السابق، يمكنك أن ترى أنه باستخدام هذه الطريقة يمكننا أن نوفر للمستخدم زرين في نهاية كل نموذج الأول هو "التخزين على القرص" (save to disk) او "إرسال" (Submit)
ماذا يحصل بعد الإرسال؟
المفروض و كما بالإتش تي إم إل أن تقوم البيانات الجديدة المرسلة بالحلول محل البيانات القديمه، لكن الآن و باستخدام الـإكس فورمز سيتوفر لنا بعض الخيارات الأخرى التي يمكننا تعريفها باستخدام الخاصية replace بالعنصر submission. القيمة replace=”instance” تعمل على إحلال البيانات الجديده مكان البيانات القديمة. أما القيمة replace=”none” تترك المستند كما هو دون أن تحل محله أي شيئ آخر.
على سبيل المثال، إذا كان عندنا نموذج لموقع بنك معين، و أردنا أن نمنح المستخديمن القدره على تغيير عناوينهم فيه، فيمكننا بهذه الحاله أن نوفر زرين، الأول يعمل على إملاء خانات النموذج بمعلومات الإسم و العنوان إعتماداً على رقم الحساب، و الآخر يعمل على إرسال العنوان الجديد المدخل:
الزر find يقوم بإحلال البيانات المخرجه (الإسم و العنوان) إعتماداً على رقم الحساب بدل مكان البيانات القديمة، و التي يمكنك بعد ذلك تغيرها مثلما تريد. أما الزر submit فيقوم على إرسال التغيرات الحديثه، تاركاً النموذج موجوداً في المتصفح، ليمكن المستخدم من إعادة استخدامه و تغيير البيانات، أو أن يقوم بإرسال معلومات جديده بعد إدخال رقم حساب جديد.كود:<model> <instance><data xmlns=""> <accountnumber/><name/><address/> </data></instance> <submission method="get" action="http://example.com/prefill" id="prefill" replace="instance"/> <submission method="get" action="http://example.com/change" id="change" replace="none"/> </model> ... <input ref="accountnumber"><label>Account Number</label></input> <submit submission="prefill"><label>Find</label></submit> <input ref="name"><label>Name</label></input> <textarea ref="address"><label>Address</label></textarea> <submit submission="change"><label>Submit</label></submit>
و إلى هنا ينتهي الجزء الثاني من درس الXForms العربي الأول...
انتظروا قريباً الجزء الثالث و الأخير من هذا الدرس... قريباً...
تحيتي الخالصه...
عماد الصدر
__________________
معاً لإنترنت عربية أفضل...
معلومات مهمة عن أدوار فريق العمل في مواقع الويب
http://www.swalif.net/softs/showthread.php?t=120925
الساعة الان 8.4 صباحا ولم انم ............
قريت بسرعة بدون تركيز ......................
ولكن اجوبة سريعة .....
قصدت بسؤالي ....
وجدت اني سوف ابقى على ال table
ال div لم تنسابني .....ولكن سوف احاول ان اطور نفسي فالموضوع شيق .
طلب بسيط
ممكن تبعت لي صفحة تم اعادا البينات فيها بشكل مبسط وتم عرضها بطرقيتين مختلفتين عن طريق ال XHTML?
بالنسبة للدرس الجديد ...
روعة ويحتاج الى تمحيص ولم استطع ان اجرب لان عندي XP. والاداة لا تعمل على النظام .
الى النووووووووووووووووووووووووووووووووووووووووووووووو ووووووووووووووووووم
أهلا بك أخي بيشوو مره جديده...
زيارتك بتنور الموضوع...
الحقيقة أنني لم أعتقد ولو للحظة أنك ستقلب موازينك كلها، و تنقلب مباشرة من التصميم من خلال الجداول إلى التصميم باستخدام الCSS...قصدت بسؤالي ....
وجدت اني سوف ابقى على ال table
ال div لم تنسابني .....ولكن سوف احاول ان اطور نفسي فالموضوع شيق .
ولكن هذا التغيير المفروض أن يكون تدريجياً.. و أن يأخذ وقتاً منك لتعلم الطريقة الثانية و ممارستها، و البدء بعمل بعض الأمثلة و النماذج...
و الظاهر لي أن هذا التغيير قد بدء بالفعل.. فعبارتك تدل على أنك ستبدأ بالمحاولة لتعلم هذه الطريقة... و هذا المطلوب... :nice:
الحقيقة لم أفهم قصدك..طلب بسيط
ممكن تبعت لي صفحة تم اعادا البينات فيها بشكل مبسط وتم عرضها بطرقيتين مختلفتين عن طريق ال XHTML?
لكن إن كان طلبك هو أنك تريد صفحة تم تصميم ملف ال XHTML بطريقتين مختلفتين عن طريق الCSS... ؟
فقد سبق و أعطيتك هذا الموقع
http://www.csszengarden.com
و هو عبارة عن صفحة XHTML واحده، و قد تم تطبيق العديد من التصاميم المختلفه عليها باستخدام ملفات CSS مختلفه... أي أن ملف الXHTML لم يتغير أبداً...
الرجاء توضيح السؤال أكثر إن لم يكن هذا ما عنيته منه...
على العموم.. أشكرك من أعماق قلبي على الكلام الجميل الذي تفضلت به..
و أنا في انتظار ردك المقبل على أحر من الجمر، لكن بشرط أن لا تكون على عجلة من أمرك أثناء كتابتك له...
و السلام عليكم
عماد الصدر
__________________
معاً لإنترنت عربية أفضل...
معلومات مهمة عن أدوار فريق العمل في مواقع الويب
http://www.swalif.net/softs/showthread.php?t=120925
درس جميل اخوي شكرا لك
بصراحة ..........
صدمت وقت جربت ال DIV بشكل معمق .
وعلى الدريم ويفر رسمتها رسم ولا كتابة كود ولا خرابيط
رسمت الصفحة وسميت الDIV بأسمائها......
وذهلت .......
بالفعل صفحة عادية جدا إستطعت ان أغير تصميمها ............. وظلت الصفحة كما هية لم امس كودها.
ولكن سؤال أنت فعليا عندما تريد ان تغير لون كلمة سوف تضع وسوم على الكمة .......... صحيح ؟؟؟؟
وهنا أقصد أنك سوف تعدل على الصفحة الرئيسية أولا و أخيرا ....
ولكن السؤال ,,,,,
لا اعرف أحس الجدول أكثر متانة ... مبعنى عندما تحجم الشاشة تتأثر كل خلية بالأخرى ... عرفت علي شلون .....
أبقى جديد على الموضوع وانا ما زلت أجب وأهم شيء عندي التوافق بين المستعرضات وتالله هذا الأمر يسهل التصميم جدا ...........
كل ما علي أن أصنع صفحة برمجية تظهر المحتويات بشكل إعتباطي .....
وبال DIV أقوم بترتيب الصفحة على كيفما أشاء .....
ولكن ما زلت أحس أن الموضوع محفوف بالمخاطر .... على أن يظهر وقعك فجئة على شاشة على خلالف شاشة أخرى .....
بالنسبة لموضوع ال XForms .... تقنية جيدة جدا ولكن فضلت أن اكون من رأى الغعلان ولم يشتري المنتج (مبدئيا)......
مع تحياتي القلبية لك أخي عماد الصدر ...
marioo: العفو أخوي.. و كن بانتظار الجزء الثالث و الأخير قريباً.......
beshoo: أعجبتني صراحتك في ردك... و الذي ما كنت لأتوقعه إلا من شخص قدير مثلك...
قد تكون تجربتك الأولى هذه مذهله (كما أسميتها)... و لكن أظنك ستذهل أكثر عندما ترى الإمكانيات العظيمة الأخرى التي يمكنك القيام بها باستخدام الـ CSS...
صحيح أنك سوف تضطر لأن تضع بعض الوسوم في ملف الXHTML.. ولكن ما تقوم به هذه الوسوم، هو عملية التوصيل مع ملف الCSS فيعرف المتصفح ما الستايل الذي سيتم تطبيقه على كل كلمة في ملف الXHTML.. أي أن وجودها ضروري جداً، و من دونها لن يتم تطبيق أي ستايل على أي جزء من صفحة الويب التي حضرناها...ولكن سؤال أنت فعليا عندما تريد ان تغير لون كلمة سوف تضع وسوم على الكمة .......... صحيح ؟؟؟؟
وهنا أقصد أنك سوف تعدل على الصفحة الرئيسية أولا و أخيرا ....
أظن أن ما قمت به اثناء عملك على الدريم ويفر، هو أنك قمت بتحديد أماكن الـ Divs بشكل ثابت... كالتالي:ولكن السؤال ,,,,,
لا اعرف أحس الجدول أكثر متانة ... مبعنى عندما تحجم الشاشة تتأثر كل خلية بالأخرى ... عرفت علي شلون .....
لهذا كانت النتيجه أن "الصناديق" لم تكن لتتفاعل مع بعضها البعض، بل ظلّت ثابته في مكانهاكود:position:absolute
بالنسبة للتوافق بين المتصفحات، فهو أمر يعتمد على المصمم.. فكلما زادت عدد المتصفحات التي يقوم بتجربة موقعه عليها.. قل احتمال أن يظهر الموقع بشكل مختلف عند استعراضه في متصفح آخر.. أي أن مدة اختبار الموقع يجب أن تزيد قليلاً...
قد تكون بداية الطريق باتجاه تصميم الموقع باستخدام الCSS وعره قليلاً،، على اعتبار أنها طريق جديده بعض الشيء على البعض،، و لكن ثق بي.. فهذه الطريق ستصبح ناعمه كالحرير عندما تبدأ بتعمق فيها أكثر فأكثر.... (و عندما تقوم مايكروسوفت باصلاح الأعطال الموجوده بمتصفحها .. و أيضاً عندما يتخلى متصفح الأوبرا عن دور "الذيل" للإكسبلورر!)
أفكر حالياً في طرح سلسة من الدروس المتعلقة بتصميم المواقع باستخدام الCSS، لذا كن بانتظارها
كما أسلفت لك بالذكر.. فالـXForms لا أظن أن الكثير يمكنهم استخدامها الآن في هذا الوقت، و لكن ما يجب علينا القيام به مبدئياً هو أن نعرف ماهية هذه اللغه، و بعض الأساسيات البسيطه عنها (كالدرس الذي أقوم بطرحه الآن)، و لا أعتقد أن التعمق بها أكثر من ذلك في الوقت الحالي سيعطي أي فائدة كبرى..بالنسبة لموضوع ال XForms .... تقنية جيدة جدا ولكن فضلت أن اكون من رأى الغعلان ولم يشتري المنتج (مبدئيا)......
و لكن من الآن لسنتين قادمتين، فالكثير من التغييرات ستطرأ على عالم الويب، لذا يجب أن نكون مستعدين للتحول و التغير معه، و إلا فسيطوى علينا الزمان أوراقه، و سينسانا الجميع!
تحيتي و تقديري لك أخي بيشوو...
عماد الصدر
__________________
معاً لإنترنت عربية أفضل...
معلومات مهمة عن أدوار فريق العمل في مواقع الويب
http://www.swalif.net/softs/showthread.php?t=120925
طيب اريد ان ارسما كما ارسم الجداول واريد ان تتاثر ببعضها كما يحدث بالجداول
حلها ذا بتنحل معك
إن شاء الله أخي بشوو سأبدأ بطرح سلسلة من الدروس في عملية التصميم باستخدام الCSS ..
فكن بانتظارها...
عماد الصدر
__________________
معاً لإنترنت عربية أفضل...
معلومات مهمة عن أدوار فريق العمل في مواقع الويب
http://www.swalif.net/softs/showthread.php?t=120925
أعتذر عن تأخري في طرح الجزء الثالث من هذا الدرس.. و ذلك بسبب إنشغالي في بعض الأمور
قريباً بإذن الله سأحاول الإنتهاء منه و طرحه في أسرع وقت ممكن...
شكراً لكم جميعاً
__________________
معاً لإنترنت عربية أفضل...
معلومات مهمة عن أدوار فريق العمل في مواقع الويب
http://www.swalif.net/softs/showthread.php?t=120925
موزيلا تطلق الاصدار بيتا من متصفحها فايرفوكس الداعم لل XForms
للتفاصيل:
http://www.mozilla.org/press/mozilla-2005-02-02.html
__________________
معاً لإنترنت عربية أفضل...
معلومات مهمة عن أدوار فريق العمل في مواقع الويب
http://www.swalif.net/softs/showthread.php?t=120925
و أخيراً إنتهيت من كتابة الجزء الثالث من هذا الدرس...
المشاكل و العوائق التي حصلت كثيره.. أهمها إنشغالي ببعض الأمور الشخصيه..
بكل الأحوال، سأقوم الآن بنشر الجزء الثالث و الأخير من الدرس العربي الأول عن لغة الـ XForms...
و أعتذر عن أي تقصير..
تحيتي للجميع..
عماد الصدر
__________________
معاً لإنترنت عربية أفضل...
معلومات مهمة عن أدوار فريق العمل في مواقع الويب
http://www.swalif.net/softs/showthread.php?t=120925
التحكم بأدوات التحكم
عندما كنّا نستخدم الإتش تي إم إل، كان باستطاعتنا تغيير نوع أدوات التحكم لجعلها Disabled أو read-only، لكن هذا التغيير كان يتطلب منا تحويل خواص الأداة بداخل السكريبت.
أما الآن و باستخدام الXForms، فإنه يمكنك أن تقوم تغيير نوع الأدوات بطريقه أسهل، كما أنها توفر لنا بعض الأنواع الأخرى أيضاً، و هي:
- أن القيمة مطلوبه، (أي أنه عليك أن تقوم بإدخال قيمة معينه إلى ذاك الحقل قبل أن تقوم بإرسال البيانات).
- أن تكون القيم متفاعله مع بعضها البعض ( فمثلاً يجب أن يكون تاريخ الميلاد قبل تاريخ الوفاه).
- أن تكون القيمة من فئة معينه (أي أن القيمة يجب أن تكون أرقاماً على سبيل المثال).
- أن تكون محسوبه من قيم أخرى (فيكون بإمكانك أن تأخذ مجموع قيم موجوده في حقول أخرى).
تذكر أنه بالXForms تكون هذه الأنواع مطبقة على القيم ذاتها، و ليس الأداة التي تحويها.
الأدوات الغير مفعّله Disabled Controls
لجعل أحد الأدوات غير مفعله (Disabled) فعليك باستخدام الخاصية relevant. فعلى سبيل المثال، إن أردت أن تقول أن حقل بطاقة الإئتمان يجب أن لا يكون فارغاً بحال كان الشخص يريد الدفع باستخدامه، فيمكننا استخدام التالي:
نرى من المثال السابق أن حقلين cc و expires يكونان مطلوبين relevant بحال كانت الـ method تحتوي على القيمة credit، و بالتالي سيكونان غير مفعلين disabled بحال كانت قيمة method هي أي شيء آخر.كود:<model> <instance><data xmlns=""> <amount/><method/><cc/><expires/> </data></instance> <bind nodeset="cc" relevant="../method='credit'"/> <bind nodeset="expires" relevant="../method='credit'"/> </model>
تكون للمتصفح حرية الإختيار بالنسبة لكيفية عرض أدوات التحكم الغير مفعله، (كما يمكن تغيير طريقة عرضهم باستخدام الـ stylesheets)، لكن بشكل عام سيكون شكلها رمادي.
يمكننا كتابة أدوات التحكم بالطريقة التالية (لاحظ أنه لا يوجد أي مؤشر على أن هذه الأدوات ستكون غير مفعله، فهذا الأمر مورث من القيمة التي سيتم إدخالها):
كود:<select1 ref="method"><label>Method of payment:</label> <item><label>Cash</label><value>cash</value></item> <item><label>Credit card</label><value>credit</value></item> </select1> <input ref="cc"><label>Card number:</label></input> <input ref="expires"><label>Expiry date:</label></input>
بحال استخدمنا structured instance، فبإمكاننا إختصار المثال السابق ليصبح:
و من ثم تقوم أدوات التحكم بإرجاع الـ children للـ “cc”كود:<model> <instance><data xmlns=""> <amount/><method/> <cc> <number/><expires/> </cc> </data></instance> <bind nodeset="cc" relevant="../method='credit'"/> </model>
غير أنه يمكننا استخدام عملية الـ grouping لـ reset the context of the refsكود:<input ref="cc/number"><label>Card number:</label></input> <input ref="cc/expires"><label>Expiry date:</label></input>
Read-only Controlsكود:<group ref="cc"> <input ref="number"><label>Card number:</label></input> <input ref="expires"><label>Expiry date:</label></input> </group>
كما هو الحال مع الـ relevant، فإنه بإمكاننا أن نقوم بتحديد شرط معين لتصبح أي قيمة "مقروءه فقط" أو read-only. على سبيل المثال:
طريقة عمل هذا المثال هي أن القيمة )أسود black ( يجب أن تكون مقروءه فقط بحال كانت القيمة الموجوده في الحقل variant هي basic.كود:<model> <instance><data xmlns=""> <variant>basic</variant><color>black</color> </data></instance> <bind nodeset="color" readonly="../variant='basic'"/> </model>
Required Controls
أحد الخواص الجديد الموجوده في لغة الـ XForms هي القول على أنه يجب أن يتم تزويد قيمة معينه قبل أن يتم إرسال البيانات. أسهل و أبسط طريقة لعمل ذلك هي أن تحدد أحد القيم بأنها مطلوبه دائماً، فإذا أخذنا مثال محرك البحث البسيط الذي تكلمنا عنه بالجزء الأول و الثاني، نرى التالي:
لكن و كما كان الحال مع الreadonly و الrelevant، فإنه يممكننا استخدام الـ XPath لوضع بعض الشروط:كود:<model> <instance><data xmlns=""><q/></data></instance> <bind nodeset="q" required="true()"/> <submission .../> </model>
نرى من المثال السابق أنه يجب علينا أن نقوم بوضع بعض القيم في الحقل state بحال كانت الcountry هي الـ "USA".كود:<bind nodeset="state" required="../country='USA'"/>
الأمر يعتمد على المتصفح الذي تستخدمه في كيفية إخبارك بأن أحد القيم مطلوبه، و لكن قد يكون من الممكن لك تحديد ذلك من خلال الـ stylesheet.
Constraint Property*
هذه الخاصية تعطيك قدرة أكبرعلى التحكم بنموذجك، على سبيل المثال:
هذا المثال يجبر المستخدم على وضع قيمة في الحقل year بحيث تكون بعد العام 1970. لاحظ أن الXPath يستخدم "." ليعني "هذه القيمة". ( الرمز "<" يجب أن يكتب على الشكل > و ذلك بسبب تعليمات الXML، و لكن المفروض انك تعرف هذه الأمور من قبل!)كود:<bind nodeset="year" constraint=". > 1970"/>
Calculate Property*
من الأمور الأخرى التي توفرها لك لغة الـ XForms هي القدرة على إيجاد قيمة معينة نتيجة لعملية حسابية تم عملها على بعض القيم الأخرى، و لنأخذ مثال على ذلك بالقول:
عندما يتم حساب أحد القيم بالطريقة التاليه، فإنها تصبح "مقروءه فقط" بشكل أوتوماتيكي.كود:<bind ref="volume" calculate="../height * ../width * ../depth"/>
هناك أيضاً عدد أخر من الوظائف functions المتوفرة، مثل arithmetic, string manipulation, date handling, and conditionals using 'if'.
Types*
خاصية مفيدة أخرى موجوده بالـ XForms و هي القدره على إعطاء أحد القيم نوعية معينة، و بالتالي سيتمكن المتصفح من التدقيق إن كانت نوعية القيمة المدخلة مطابقة للنوعية المطلوبة.
على سبيل المثال، إن كان محرك البحث السابق هدفه هو البحث عن الأرقام و حسب ( للقيام بأعمال إختبار لأحد قواعد البيانات على سبيل المثال)، بالتالي ما علينا القيام به هو إضافة السطر التالي:
يقوم هذا السطر بمنع إرسال البيانات إلى بحال كانت الفيمة المدخلة إلى حقل البحث هي أرقام integerكود:<bind nodeset="q" type="xsd:integer"/>
(ثم عليك أن تقومك بإضافة xmlns:xsd="http://www.w3.org/2001/XMLSchema" إلى الـ root element)
إذا أردت أن تحصل على عنوان موقع الويب الخاص بشخص، فما عليك إلا أن تضيف السطر التالي:
ستلاحظ أن بعض الـ user agents يقومون بعمل بعض الأشياء المعينة عند معرفتهم لنوع القيم التي يجب إدخالها، فبحال كانت القيمة المطلوبه هي date، يقوم بالتالي بإظهار روزنامه يمكنك إختيار تاريخ منها، بدل أن يلزمك بكتابة التاريخ يدوياً.كود:<bind nodeset="homepage" type="xsd:anyURI"/>
هناك عدد من أنواع القيم value types المبنية و التي يمكنك استخدامها، من ضمنها:
• xsd:string, xsd:normalizedString (a string with whitespace characters replaced by the space character).
• xsd:integer, xsd:nonPositiveInteger, xsd:negativeInteger, xsd:nonNegativeInteger, xsd:positiveInteger
• xsd:boolean
• xsd:decimal, xsd:double
• xsd:date, xsd:time, xsd:dateTime
• xsd:anyURI (A URI)
• xforms:listItems (A space-separated list of strings for use with select)
• xforms:listItem (A string without any spaces)
Combining Properties
اذا كان لديك العديد من الـ binds و جميعهم يعودون لنفس القيمة، فيمكنك جمعهم كما يلي:
أكثر من نموذج واحد بالصفحةكود:<bind nodeset="q" type="xsd:integer" required="true()"/>
إذا كان لديك أكثر من نموذج واحد في الصفحة ذاتها، فإنك تحتاج إلى model لكل واحد منهم، و بعد ذلك عليك أن تقوم بإرجاع كل أداة تحكم موجوده إلى الـ model الذي تنضم إليه.
يمكنك القيام بذلك عن طريق استخدام id لكل model، و model attribute لكل أداة تحكم:
استخدام الـ Bind بدلاً من الـ Refكود:<model id="search"> <instance><data xmlns=""><q/></data></instance> <submission id="s" .../> </model> <model id="login"> <instance><data xmlns=""><user/><passwd/></data></instance> <submission id="l" .../> </model> ... <input model="search" ref="q"><label>Find</label></input> <submit submission="s"><label>Go</label></submit> ... <input model="login" ref="user"><label>User name</label></input> <secret model="login" ref="passwd"><label>Password</label></input> <submit submission="l"><label>Log in</label></submit>
اذا كان هناك bind موجود في الـ model، فيمكنك الرجوع إليه من خلال أداة التحكم بدلاً من الذهاب إلى القيمة مباشرة. هذه الميزة تعطيك القدره على تغيير التفاصيل عن كيفية هيكيلة الـ instance دون الحاجة إلى تغيير أدوات التحكم. كما أنه لا يجب عليك أن تحدد أي model هو المشارك:
لاحظ أن خاصية الـ bind ماهي إلا مرجع لـ id محدد على عنصر bind، أي أنها ليست تعبير XPath.كود:<model> <instance><data xmlns=""><q/></data></instance> <submission id="s" .../> <bind id="query" nodeset="q" required="true()"/> </model> ... <input bind="query"><label>Find</label></input>
__________________
معاً لإنترنت عربية أفضل...
معلومات مهمة عن أدوار فريق العمل في مواقع الويب
http://www.swalif.net/softs/showthread.php?t=120925