الدرس العربي الأول عن لغة الـ XForms

**isader.com** · 04-02-2005

ما هي الـ 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>

**isader.com** · 04-02-2005

Reset
بعد عشر سنوات من الخبرة في مجال الويب، نلاحظ أن زر المسح Reset قليلاً ما يتم إستخدامه من قبل مستخدمي الويب، و مع ذلك فإن الكثير من النماذج مازالت تحويه بداخلها. المشكله الوحيده التي واجهناها من وجود هذا الزر هي أن الزائر و عند إنهاءه تعبئة الفراغات بالنموذج يقوم بالنقر على الزر Reset بدلاً من الزر OK و ذلك بسبب أن الزر الأول أكبر حجماً من الثاني، لذلك فهو يلفت الإنتباه أكثر، و نتيجة لهذا فإن المستخدم يخسر جميع البيانات التي أدخلها. لذلك تم تصعيب عملية إدراج زر Reset في لغة الXForms لعدم تشجيع الناس على إدراجه، إلا اذا كانت هناك حاجه ماسة لذلك.

كود HTML:

<input type="reset">

تصبح:

كود:

<trigger>
   <label>Clear all fields</label>
   <reset ev:event="DOMActivate"/>
</trigger>

Buttons

كود HTML:

<input type="button" value="Show" onclick="show()">

تصبح:

كود:

<trigger><label>Show</label>
   <h:script ev:event="DOMActivate" type="text/javascript">show()</h:script>
</trigger>

أو:

كود:

<trigger ev:event="DOMActivate" ev:handler="#show">
    <label>Show</label>
</trigger>

حيث #show تحدد مكان العنصر (على سبيل المثال عنصر الـ script) الذي ينفذ التصرف كالتالي:

كود:

<script id="show" ...>...

تحتوي الXForms على عدد من built-in actions و التي يمكن تشغيلها باستخدام أي زر، إنظر إلى مثال زي المسح السابق.

بسبب وجود الرمز ev قبل خاصية event، هذا يني أن ليك أن تضيف الـ XML Namespace التالي للـ head:

كود HTML:

xmlns:ev="http://www.w3.org/2001/xml-events"

Image Buttons

كود HTML:

<input type="image" src="..." ...>

يكتب بوضع صورة بداخل عنصر الـ label، و يكون هذا بالشكل التالي:

كود:

<trigger...><label><h:img src="..." .../></label></trigger>

أو بتحديدها عن طريق الـ style sheet:

كود:

<trigger id="activate" ...>

و ملف الستايل يكون كالتالي:

كود:

trigger#activate {background-image: url(button.png);
                  background-repeat: none}

و الشيء ذاته يكون للزر submit

Optgroup

كود HTML:

Drink:
<select name="drink">
   <option selected value="none">None</option>
   <optgroup label="Soft drinks">
      <option value="h2o">Water</option>
      <option value="m">Milk</option>
      <option value="oj">Juice</option>
   </optgroup>
   <optgroup label="Wine and beer">
      <option value="rw">Red Wine</option>
      <option value="ww">White Wine</option>
      <option value="b">Beer</option>
   </optgroup>
</select>

تكتب:

كود:

<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>

Grouping Controls

كود HTML:

<fieldset>
   <legend>Personal Information</legend>
   Last Name: <input name="lastname" type="text">
   First Name: <input name="firstname" type="text">
   Address: <input name="address" type="text">
</fieldset>

تصبح:

كود:

<group>
   <label>Personal Information</label>
   <input ref="lastname"><label>Last name:</label></input>
   <input ref="firstname"><label>First name:</label></input>
   <input ref="address"><label>Address:</label></input>
</group>

لاحظ الإستخدام المتوافق لـ <label>

Output Controls

يوجد أداتا تحكم جديدتين في الXForms لم يكونوا موجودين في الإتش تي إم إل قبل ذلك و هما: output و range.

Output
أداة الـ output تمكنك من تضمين البيانات لى أنها text داخل مستندك:

كود:

Your current total is: <output ref="sum"/>

أو:

كود:

<output ref="sum"><label>Total</label></output>

و يمكن استخدام عذع الأداة لتمكين الزائر من رؤية البيانات التي أدخلها إلى النموذج.

كما يمكنك إجراء بعض العمليات الحسابية باستخدام هذه الأداة:

كود:

Total volume: <output value="height * width * depth"/>

حيث height و width و depth قد تم حسابهم باستخدام أدوات أخرى.

Range Controls
هذه الأداة تساعدك على تحديد ضوابط constraints على أحدى القيم:

كود:

<range ref="volume" start="1" end="10" step="0.5"/>

إلى هنا يكون قد إنتهى الجزء الأول من أول درس عربي يتكلم عن لغة الXForms ..

إنتظروا الجزء الثاني قريباً...

المصدر: http://w3c.org/MarkUp/Forms/2003/xfo...l-authors.html

عماد الصدر

**Dr.Server** · 04-02-2005

isader.com

رائع يابطل راااااااااااائع في اختيارك للدرس وشرحك الأكثر روعة

جزاك الله ألف خير واعتبرني أول المنتظرين للدرس القادم

:nice: :app:

**Zizwar** · 04-02-2005

بارك الله فيك أخي و كثر من أمثالك
فعلا درس مميز :nice:

في إنتظار الجرء الثاني

<<♠ طماع

**Fuga** · 04-02-2005

مشكور وتم تثبيت الموضوع لأهميته

**لامـع** · 04-02-2005

اكثر من رائع سلمت يداكـ

**باسل نت** · 04-02-2005

وضعت فأبدعت ... لي عودة لقراءة الدرس ان شاء الله

**محمود المسعودي** · 04-02-2005

ممتاز جداً ... اول شخص عربي يتحدث عن لغة الـ XForms ، حتى لو كان الدرس معرب فتعريبه في حد ذاته انجاز.
يعطيك العافية و استمر .

اخوك
ابو محمود

**إنترنت بلس** · 05-02-2005

ممتاز يا أخ عماد

جزاك الله خيرا وبارك فيك ..

**المتواضع** · 05-02-2005

درس قوي جدا
تستحق عليه التقدير
الله يعطيك العافية

**الشريف.نت** · 05-02-2005

الله يعطيك ألف عافية
بصراحة درس مميز

**Mr.php-ar** · 05-02-2005

المشاركة الأصلية كتبت بواسطة Dr.Server

isader.com

رائع يابطل راااااااااااائع في اختيارك للدرس وشرحك الأكثر روعة

جزاك الله ألف خير واعتبرني أول المنتظرين للدرس القادم

:nice: :app:

الله يعطيك القوة والعافية

وشرح جميل ولا اروع

تحياتي

**yemen-1-host** · 05-02-2005

isader.com

رائع يابطل راااااااااااائع في اختيارك للدرس وشرحك الأكثر روعة

جزاك الله ألف خير واعتبرني أول المنتظرين للدرس القادم

**X Sewar X** · 05-02-2005

جزاك الله الف خير .

ملاحظة : موقعك يعمل لدي .

تحياتي .

**beshoo** · 05-02-2005

السلام عليكم .

مشكور اخي الكريم ....

ower:

ولكن أجد نفسي اما امر اني سوف اكتب بيدي من جديد كود ال HTML ؟
انا عندي نظرية .
لطالما الدريم ويفر والفرونت بيج لم يدعمو الموضوع بشكل اساسي وما زالو على ال HTML
بمعنى ان أسلوب العرض القياسي هو ال HTML فما زال هو سيد الساحة ....
الموضووع الذي طرحتة من وجهة نظري الشخصية لم اجد تلك الفائدة المرجوة .

ولا ارى من صانعي هذه التقنية سوى شطحة برمجية إن صح لنا التعبير .
ربما تكون ميزة للبعض ولكن لم اجد نفسي الا راجعا للوراء في بداية للخبطة جديدة ...

ربما أكون مخطء فالتعامل مع وسوم ال XML رائع جدا ولكن. ما أنظر إلية هو " القياسية " الي
Standard

ربما هذا الموضوع هو ال Standard لعالم الغد . :con2:

الموضوع: الدرس العربي الأول عن لغة الـ XForms

أدوات الموضوع

بحث في الموضوع

الدرس العربي الأول عن لغة الـ XForms

المواضيع المتشابهه

الدرس الأول: مدخل الـ Asp

PHP === الدرس الأول! :)

الدرس الأول في التعريب

الدرس الأول :C

ضوابط المشاركة