ما هي الـ XForms ؟
هي ببساطة عبارة عن البديل للنماذج (Forms) الموجوده حاليا في الإتش تي إم إل. سبب إيجاد هذه اللغه هو جعل مصمم الموقع قادر على التفريق بين سبب إيجاد النموذج و طريقة عرضه، و قادراً على التعامل مع المخرجات(Outputs).
باستخدام هذه اللغه يمكننا فصل المحتويات عن التصميم بشكل كامل، بهذا سيصبح لدينا القدرة على إعادة إستعمال المحتويات المستخدمه في أمور أخرى، بالإضافة إلى تسهيل عملية وصول الزائر لما يريده من الموقع.
كما أن هذه اللغه ستمكن المصممين و المطورين من عمل نماذج معقدة دون الحاجه لأي من لغات الاخرى مثل الإيه إس بي أو البي إتش بي أو أي لغة أخرى للتعامل مع المخرجات.
الآن دعونا ندخل بلب الموضوع...
لنأخذ أولاً مثال لنموذج لمحرك بحث بسيط كنّا نقوم بعمله باستخدام الإتش تي إم إل كالتالي:
كود HTML:
<html> <head><title>Search</title></head> <body> <form action="http://example.com/search"
method="get">
Find <input type="text" name="q"> <input type="submit" value="Go"> </form> </body> </html> الفرق الأهم الذي سنراه عند استخدامنا للXForms، هو أن المعلومات التي تخبرنا ماذا سيحصل بالبيانات المدخله إلى النموذج تكون موجوده في headصفحة الإتش تي إم إل، و تكون بداخل عنصر يسمى model. أما بداخل قسم الـ body فسنحتاج لأداوت التحكم بالنموذج و حسب.
الآن دعونا نرى كيف يمكننا كتابة هذا النموذج بالخانات ذاتها باستخدام الXForms...
كود:
<model>
<submission action="http://example.com/search"
method="get"
id="s"/>
</model> ملاحظه: يجب أن تكون جميع العناصر elements و الخواص attributes مكتوبه بالـ lower case .
الآن لن يصبح لنا حاجه بأن نقوم بإضافة وسم form للـ body بصفحتنا، ما نحتاجه في ذاك القسم هو فقط أدوات التحكم بالنموذج controls، و عند كتابتها.. فسيكون شكلها كالتالي:
كود:
<input ref="q"><label>Find</label></input>
<submit submission="s"><label>Go</label></submit>
الذي تلاحظه الآن أن أدوات التحكم بالنموذج تحتوي على عنصر إبن child element باسم <label>، الأمر الآخر الذي تراه هو أن الـ <input> تستخدم الخاصية ref بدلاً من الخاصية name التي كنَا نراها في النماذج التقليدية في الإتش تي إم إل. الأمر الأخير هو أن الـ submit قد أصبح منفصلاً تماماً الآن عن أي شيء آخر و عملها هو وصل البيانات المدخله للنموذج بالمعلومات التي وضعناها في قسم الـ head ، ليتم التعرف على كيفية التعامل مع هذه البيانات.
بهذا يصبح مثالنا كاملاً بالشكل التالي:
كود HTML:
<h:html xmlns:h="http://www.w3.org/1999/xhtml"
xmlns="http://www.w3.org/2002/xforms"> <h:head> <h:title>Search</h:title> <model> <submission action="http://example.com/search"
method="get" id="s"/> </model> </h:head> <h:body> <h:p> <input ref="q"><label>Find</label></input> <submit submission="s"><label>Go</label></submit> </h:p> </h:body> </h:html> Namespace Prefix
عندما ننظر إلى الكود السابق، نرى هناك شيء غريب بعض الشيء، و هو استعمال الـ h: قبل كل وسم في الإتش تي إم إل. هذه العملية ليس لها أي علاقه بموضوع الXForms، لكن له علاقة مباشره بالـ XML، التي صممت من أجل تمكين المطور من استخدام أكثر من لغة في نفس المستند. و بطبيعة الحال، فإن الXForms قد صممت لكي يتم إستخدامها مع أكثر من لغه أخرى، و ليس فقط الـ XHTML.
المشكله التي تواجهنا هذه اللحظه هي عدم تمكن معالج الـ XML من التعرف على الفرق بين اللغات المستخدمه، لذا فهو بحاجه إلى دليل معين يمكنه من التفريق بين اللغه و الأخرى، فلهذا قمنا بالمثال السابق بإضافة الـ h: قبل كل وسم إتش تي إم إل، كطريقة لإخبار المعالج أن كل وسم يبدأ بالرمز h: فهو من اللغه ذاتها. لكن قد يتساءل البعض، لماذا لم نضع أي رمز قبل وسوم الXForms؟ السبب بسيط و هو أننا جعلنا هذه اللغه هي اللغه الإفتراضيه للمستند، و اللغه الإفتراضيه ليست بحاجه لأي رموز قبل كتابة وسومها.
لكن لنفترض أنك أردت أن تجعل لغة الإتش تي إم إل هي اللغه الإفتراضيه، فماذا يجب علينا أن نفعل بهذه الحاله؟ إنظر إلى المثال التالي:
كود HTML:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://www.w3.org/2002/xforms"> <head> <title>Search</title> <f:model> <f:submission action="http://example.com/search"
method="get" id="s"/> </f:model> </head> <body> <p> <f:input ref="q"><f:label>Find</f:label></f:input> <f:submit submission="s"><f:label>Go</f:label></f:submit> </p> </body> </html> الشيء الوحيد الذي قمنا بتغيره هو قيمة الخاصية xmlns في الـ وسم الـ html، و من ثم الغاء جميع الرموز التي وضعناها قبل وسوم الإتش تي إم إل، و وضعها بالمقابل قبل وسوم الXForms.
عملية إختيار اللغه اللإفتراضية للمستند تعتمد عليك، فأنت وحدك الذي يحدد ذلك. أما بالنسبه لإختيار إسم الرمز الذي ستستخدمه قبل كتابة الوسوم، فهو يعتمد عليك أيضاً، فالإسم يمكن أن يكون أي شيء، مثل h:, x:, html:, form: أو أي شيء آخر تراه مناسباً.
في المستقبل، و عند استخدام الـ XHTML2 لن يكون هناك حاجه لإستخدام هذه الرموز عندك كتابة النماذج.
هذا وعد من الـ w3c و ليس مني..!
أداوت التحكم بالنماذج
تقدم الXForms أداوت تحكم بالمناذج تشابه تماماً الأدوات الموجوده في الإتش تي إم إل، لكن يوجد هناك فرق في الجوهر: فأدوات التحكم الموجوده فالإتش تي إم إل عملها يكون محصراً في تحديد كيفية ظهور الأداة، أما بالنسبه للXForms، فإن عملها يكون منحصراً في كيفية عمل الأداة.
فبينما كنَا نستخدم أداة الـ select لنظهر قائمه معينه، و أداة الـ radio button لنظهر بعض الأزرار التي تمكننا من اختيار أحدها فقط، فإن الXForms تحتوى على عنصرين هما الـ select و الـ select1 ، الأول يترك لنا حرية الإختيار من العدد صفر (أي عدم إختيار أي زر) أو أي عدد أكبر من ذلك (عدد الإختيارات التي يمكننا عملها يعتمد على عدد الأزرار الموجوده). أما العنصر الآخر فمهمته هو تمكيننا من اختيار زر واحد فقط من عدد من الأزرار. أما بالنسبه لكيفية ظهورها، فهذا يعتمد على نوعية الجهاز المستخدم لرؤيتها، و يعتمد أيضاًُ على ملف الـ style-sheet المستخدم للتحكم بتصميم الموقع.
لنقل أن لديك جهاز موبايل ذو شاشة صغيره و جهاز آخر ذو شاشه أكبر، و حاولت فتح صفحة تحتوي على نموذج مصنوع باستخدام الXForms، فستجد أن الموبايل ذو الشاشه الصغيره قد أظهر هذه الأزرار على أنها عباره عن قائمه بسيطه مصغره، أما بالموبايل ذو الشاشه الأكبر فإنه يظهر هذه الأزرار على أنها أزرار حقيقية يمكنك إختيار أحدها دون وجود أي قوائم، أي أن المقصود من هذا المثال هو تغّير شكل و طريقة إظهار النموذج تبعاً لنوع الجهاز المستخدم لرؤيتها.
دعونا الآن نتعرف على الكيفية التي تمكننا من كتابة أداوت التحكم بالنماذج باستخدام الXForms
ملاحظه: جميع المصطلحات ستكون باللغة الإنجليزيه
Simple Text Input كود HTML:
First name: <input type="text" name="firstname">
تكتب بهذه الطريقه:
كود:
<input ref="firstname"><label>First name:</label></input>
نوع القيمة الإفتراضية للبيانات المدخله لهذه الإداة هي text و تسمى string بالXForms.
Textarea كود HTML:
Message: <textarea name="message" rows="20" cols="80"></textarea>
تكتب بالشكل التالي:
كود:
<textarea ref="message"><label>Message:</label></textarea>
أما بالنسبه للستايل (كالطول و العرض هنا) فيمكننا عملها باستخدام الـ style sheet. مثال على هذا الكلام هو التالي:
كود HTML:
textarea[ref="message"] { font-family: sans-serif;
height: 20em; width: 80em } ملاحظه: الخيارات الموجوده في المثال السابق هي إختياريه، أي يمكنك تعديلها و تغيرها مثلما تريد.
أما بحال أردت أن تطبق ستايل معين على جميع الـ textareas الموجوده لديك بالموقع، فهذا ما تبحث عنه:
[CSS]textarea { font-family: sans-serif;
height: 20em; width: 80em }[/CSS]
أسهل طريقة لأضافة ملف CSS على المستند التعمل عليه هو بإضافة التالي إلى بداية مستندك:
كود:
<?xml version="1.0"?>
<?xml-stylesheet href="style.css" type="text/css"?>
حيث style.css هو اسم ملف الـ CSS المستخدم.
Radio Buttons
تمكنك هذه الأداة من إختيار زر واحد من عدد أزرار (خيار واحد من عدة خيارات)
كود HTML:
Gender:
<input type="radio" name="sex" value="M"> Male
<input type="radio" name="sex" value="F"> Female
تصبح:
كود:
<select1 ref="sex">
<label>Gender:</label>
<item>
<label>Male</label><value>M</value>
</item>
<item>
<label>Female</label><value>F</value>
</item>
</select1> ضع في ذهنك أنه يمكنك عرض هذه اللائحه باستخدام ثلاث طرق مختلفه و هي
Appearance=”full” = radio buttons
Appearance=”compact” = select area
Appearance=”minimal” = menu
Checkboxesتمكنك من إختيار صفر (عدم إختيار أي شيء) أو أكثر من الخيارات
كود HTML:
Flavors:
<input type="checkbox" name="flavors" value="v"> Vanilla
<input type="checkbox" name="flavors" value="s"> Strawberry
<input type="checkbox" name="flavors" value="c"> Chocolate
تصبح:
كود:
<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
إعتماداً على الخيار multiple فإن وظيفة الـ Menus تتغير من إمكانية إختيار خيار واحد فقط، أو عدة خيارات، أو عدم إختيار أي شي. بإمكانك إستخدام <select> لتمكين المستخدم من إختيار خيار واحد فقط، أو <select1> لإختيار أكثر من إختيار أو عدم إختيار شيء.
كود HTML:
Month:
<select multiple name="spring"> <option value="Mar">March</option> <option value="Apr">April</option> <option>May</option> </select>
تصبح:
كود:
<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>
File Select كود HTML:
<form method="post" enctype="multipart/form-data" ...>
...
File: <input type="file" name="attachment">
تصبح:
كود:
<submission method="form-data-post" .../>
...
<upload ref="attachment"><label>File:</label></upload>
Password
كود HTML:
Password: <input type="password" name="pw">
تصبح:
كود:
<secret ref="pw"><label>Password:</label></secret>
<<♠ طماع
ower: 
