التحكم بأدوات التحكم
عندما كنّا نستخدم الإتش تي إم إل، كان باستطاعتنا تغيير نوع أدوات التحكم لجعلها Disabled أو read-only، لكن هذا التغيير كان يتطلب منا تحويل خواص الأداة بداخل السكريبت.
أما الآن و باستخدام الXForms، فإنه يمكنك أن تقوم تغيير نوع الأدوات بطريقه أسهل، كما أنها توفر لنا بعض الأنواع الأخرى أيضاً، و هي:
- أن القيمة مطلوبه، (أي أنه عليك أن تقوم بإدخال قيمة معينه إلى ذاك الحقل قبل أن تقوم بإرسال البيانات).
- أن تكون القيم متفاعله مع بعضها البعض ( فمثلاً يجب أن يكون تاريخ الميلاد قبل تاريخ الوفاه).
- أن تكون القيمة من فئة معينه (أي أن القيمة يجب أن تكون أرقاماً على سبيل المثال).
- أن تكون محسوبه من قيم أخرى (فيكون بإمكانك أن تأخذ مجموع قيم موجوده في حقول أخرى).
تذكر أنه بالXForms تكون هذه الأنواع مطبقة على القيم ذاتها، و ليس الأداة التي تحويها.
الأدوات الغير مفعّله Disabled Controls
لجعل أحد الأدوات غير مفعله (Disabled) فعليك باستخدام الخاصية relevant. فعلى سبيل المثال، إن أردت أن تقول أن حقل بطاقة الإئتمان يجب أن لا يكون فارغاً بحال كان الشخص يريد الدفع باستخدامه، فيمكننا استخدام التالي:
كود:
<model>
<instance><data xmlns="">
<amount/><method/><cc/><expires/>
</data></instance>
<bind nodeset="cc" relevant="../method='credit'"/>
<bind nodeset="expires" relevant="../method='credit'"/>
</model> نرى من المثال السابق أن حقلين cc و expires يكونان مطلوبين relevant بحال كانت الـ method تحتوي على القيمة credit، و بالتالي سيكونان غير مفعلين disabled بحال كانت قيمة method هي أي شيء آخر.
تكون للمتصفح حرية الإختيار بالنسبة لكيفية عرض أدوات التحكم الغير مفعله، (كما يمكن تغيير طريقة عرضهم باستخدام الـ 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، فبإمكاننا إختصار المثال السابق ليصبح:
كود:
<model>
<instance><data xmlns="">
<amount/><method/>
<cc>
<number/><expires/>
</cc>
</data></instance>
<bind nodeset="cc" relevant="../method='credit'"/>
</model> و من ثم تقوم أدوات التحكم بإرجاع الـ children للـ “cc”
كود:
<input ref="cc/number"><label>Card number:</label></input>
<input ref="cc/expires"><label>Expiry date:</label></input>
غير أنه يمكننا استخدام عملية الـ grouping لـ reset the context of the refs
كود:
<group ref="cc">
<input ref="number"><label>Card number:</label></input>
<input ref="expires"><label>Expiry date:</label></input>
</group>
Read-only Controls
كما هو الحال مع الـ relevant، فإنه بإمكاننا أن نقوم بتحديد شرط معين لتصبح أي قيمة "مقروءه فقط" أو read-only. على سبيل المثال:
كود:
<model>
<instance><data xmlns="">
<variant>basic</variant><color>black</color>
</data></instance>
<bind nodeset="color" readonly="../variant='basic'"/>
</model> طريقة عمل هذا المثال هي أن القيمة )أسود black ( يجب أن تكون مقروءه فقط بحال كانت القيمة الموجوده في الحقل variant هي basic.
Required Controls
أحد الخواص الجديد الموجوده في لغة الـ XForms هي القول على أنه يجب أن يتم تزويد قيمة معينه قبل أن يتم إرسال البيانات. أسهل و أبسط طريقة لعمل ذلك هي أن تحدد أحد القيم بأنها مطلوبه دائماً، فإذا أخذنا مثال محرك البحث البسيط الذي تكلمنا عنه بالجزء الأول و الثاني، نرى التالي:
كود:
<model>
<instance><data xmlns=""><q/></data></instance>
<bind nodeset="q" required="true()"/>
<submission .../>
</model>
لكن و كما كان الحال مع الreadonly و الrelevant، فإنه يممكننا استخدام الـ XPath لوضع بعض الشروط:
كود:
<bind nodeset="state" required="../country='USA'"/>
نرى من المثال السابق أنه يجب علينا أن نقوم بوضع بعض القيم في الحقل state بحال كانت الcountry هي الـ "USA".
الأمر يعتمد على المتصفح الذي تستخدمه في كيفية إخبارك بأن أحد القيم مطلوبه، و لكن قد يكون من الممكن لك تحديد ذلك من خلال الـ stylesheet.
Constraint Property*
هذه الخاصية تعطيك قدرة أكبرعلى التحكم بنموذجك، على سبيل المثال:
كود:
<bind nodeset="year" constraint=". > 1970"/>
هذا المثال يجبر المستخدم على وضع قيمة في الحقل year بحيث تكون بعد العام 1970. لاحظ أن الXPath يستخدم "." ليعني "هذه القيمة". ( الرمز "<" يجب أن يكتب على الشكل > و ذلك بسبب تعليمات الXML، و لكن المفروض انك تعرف هذه الأمور من قبل!)
Calculate Property*
من الأمور الأخرى التي توفرها لك لغة الـ XForms هي القدرة على إيجاد قيمة معينة نتيجة لعملية حسابية تم عملها على بعض القيم الأخرى، و لنأخذ مثال على ذلك بالقول:
كود:
<bind ref="volume" calculate="../height * ../width * ../depth"/>
عندما يتم حساب أحد القيم بالطريقة التاليه، فإنها تصبح "مقروءه فقط" بشكل أوتوماتيكي.
هناك أيضاً عدد أخر من الوظائف functions المتوفرة، مثل arithmetic, string manipulation, date handling, and conditionals using 'if'.
Types*
خاصية مفيدة أخرى موجوده بالـ XForms و هي القدره على إعطاء أحد القيم نوعية معينة، و بالتالي سيتمكن المتصفح من التدقيق إن كانت نوعية القيمة المدخلة مطابقة للنوعية المطلوبة.
على سبيل المثال، إن كان محرك البحث السابق هدفه هو البحث عن الأرقام و حسب ( للقيام بأعمال إختبار لأحد قواعد البيانات على سبيل المثال)، بالتالي ما علينا القيام به هو إضافة السطر التالي:
كود:
<bind nodeset="q" type="xsd:integer"/>
يقوم هذا السطر بمنع إرسال البيانات إلى بحال كانت الفيمة المدخلة إلى حقل البحث هي أرقام integer
(ثم عليك أن تقومك بإضافة xmlns:xsd="http://www.w3.org/2001/XMLSchema" إلى الـ root element)
إذا أردت أن تحصل على عنوان موقع الويب الخاص بشخص، فما عليك إلا أن تضيف السطر التالي:
كود:
<bind nodeset="homepage" type="xsd:anyURI"/>
ستلاحظ أن بعض الـ user agents يقومون بعمل بعض الأشياء المعينة عند معرفتهم لنوع القيم التي يجب إدخالها، فبحال كانت القيمة المطلوبه هي date، يقوم بالتالي بإظهار روزنامه يمكنك إختيار تاريخ منها، بدل أن يلزمك بكتابة التاريخ يدوياً.
هناك عدد من أنواع القيم 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 لكل أداة تحكم:
كود:
<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 بدلاً من الـ Ref
اذا كان هناك bind موجود في الـ model، فيمكنك الرجوع إليه من خلال أداة التحكم بدلاً من الذهاب إلى القيمة مباشرة. هذه الميزة تعطيك القدره على تغيير التفاصيل عن كيفية هيكيلة الـ instance دون الحاجة إلى تغيير أدوات التحكم. كما أنه لا يجب عليك أن تحدد أي model هو المشارك:
كود:
<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>
لاحظ أن خاصية الـ bind ماهي إلا مرجع لـ id محدد على عنصر bind، أي أنها ليست تعبير XPath.