معايير مخطط واجهة المستخدم

المحتويات

نماذج مخططات واجهة المستخدم الأساسية

تتشارك كل مخططات واجهة المستخدم في نفس البنية الأساسية بغض النظر عن الموضع (منطقة الصفحة أو المنطقة أو عنصر منبثق) أو الاستخدام (للعرض فقط أو للإدخال).

عينة XML

تعتمد كل المعلومات في هذا المستند على بنية XML التالية.

<xml>
    <root>
        <address>123 Main St</address>
        <city>Alameda</city>
        <state>CA</state>
        <zip>94770</zip>
        <contactInformation>
            <type>Home Phone</type>
            <number>510-555-2287</number>
        </contactInformation>
        <contactInformation>
            <type>Cell Phone</type>
            <number>510-555-4285</number>
        </contactInformation>
    </root>
</xml>

مخطط واجهة مستخدم للعرض فقط

<html>
<head>
    <title oraMdLabel="ADDRESS_LBL"></title>
    <link rel="stylesheet" type="text/css" href="cisDisabled.css"/>
    <link rel="stylesheet" type="text/css" href="cisEnabled.css"/>
</head>
<body class="oraZoneMap">
<table cellspacing="4" width="100%">
    <colgroup>
        <col class="oraLabel oraTableLabel" />
        <col class="oraNormal oraTableData" />
    </colgroup>
    <tr>
        <td oraLabel="address"></td>
        <td oraField="address"></td>
    </tr>
    <tr>
        <td oraLabel="city"></td>
        <td oraField="city"></td>
    </tr>
    <tr>
        <td oraLabel="state"></td>
        <td oraField="state"></td>
    </tr>
    <tr>
        <td class="oraSectionEnd" oraLabel="zip"></td>
        <td class="oraSectionEnd" oraField="zip"></td>
    </tr>
    <tr>
        <td colspan="2" class="oraSectionHeader" oraMdLabel="CONTACT_LBL"></td>
    </tr>
    <tr>
        <td colspan="2" class="oraSectionStart oraEmbeddedTable">
            <table oraList="contactInformation" cellspacing="2">
                <thead >
                    <tr>
                        <th class="oraGridColumnHeader" nowrap="nowrap">
                            <span oraLabel="contactInformation/type></span>
                        </th>
                        <th class="oraGridColumnHeader" nowrap="nowrap">
                            <span oraLabel="contactInformation/number"></span>
                        </th>
                    </tr>
                </thead >
                <tbody>
                    <tr>
                        <td class="oraNormalAlt oraDisplayCell">
                            <span oraField="type"></span>
                        </td>
                        <td class="oraNormal oraDisplayCell">
                            <span oraField="number"></span>
                        </td>
                    </tr>
                </tbody>
            </table>
        </td>
    </tr>
</table>
</body>
<xml>
    <root>
        <address>123 Main St</address>
        <city>Alameda</city>
        <state>CA</state>
        <zip>94770</zip>
        <contactInformation>
            <type>Home Phone</type>
            <number>510-555-2287</number>
        </contactInformation>
        <contactInformation>
            <type>Cell Phone</type>
            <number>510-555-4285</number>
        </contactInformation>
    </root>
</xml>
</html>

مخطط واجهة مستخدم المدخلات

<html>
<head>
    <title oraMdLabel="ADDRESS_LBL"></title>
    <link rel="stylesheet" type="text/css" href="cisDisabled.css"/>
    <link rel="stylesheet" type="text/css" href="cisEnabled.css"/>
</head>
<body>
<table width="100%" cellpadding="12">
  <tr class="oraErrorText">
    <td><a href="" onclick="oraShowErrorAlert(); return false;">
      <span  class="oraErrorText" oraErrorVar="ERRMSG-TEXT"></span></a>
    </td>
  </tr>
</table>
<table cellspacing="4" width="100%">
    <colgroup>
        <col class="oraLabel oraTableLabel" />
        <col class="oraNormal oraTableData" />
    </colgroup>
    <tr>
        <td oraLabel="address"></td>
        <td><input type="text" oraField="address"/></td>
    </tr>
    <tr>
        <td oraLabel="city"></td>
        <td><input type="text" oraField="city"/></td>
    </tr>
    <tr>
        <td oraLabel="state"></td>
        <td><input type="text" oraField="state"/></td>
    </tr>
    <tr>
        <td oraLabel="zip"></td>
        <td><input type="text" oraField="zip"/></td>
    </tr>
    <tr>
        <td colspan="2" class="oraSectionHeader" oraMdLabel="CONTACT_LBL"></td>
    </tr>
    <tr>
        <td colspan="2" class="oraSectionStart oraEmbeddedTable">
            <table oraList="contactInformation" cellspacing="2">
                <thead >
                    <tr>
                        <th class="oraGridColumnHeaderButton"></th>
                        <th class="oraGridColumnHeaderButton"></th>
                        <th class="oraGridColumnHeader" nowrap="nowrap">
                            <span oraLabel="contactInformation/type></span>
                        </th>
                        <th class="oraGridColumnHeader" nowrap="nowrap">
                            <span oraLabel="contactInformation/number"></span>
                        </th>
                    </tr>
                </thead >
                <tbody>
                    <tr>
                        <td oraType="addGridRow"></td>
                        <td oraType="deleteGridRow"></td>
                        <td>
                            <input type="text" oraField="type"/>
                        </td>
                        <td>
                            <input type="text" oraField="number"/>
                        </td>
                    </tr>
                </tbody>
            </table>
        </td>
    </tr>
    <tr>
      <td colspan="2" class="oraSectionStart oraEmbeddedTable">
        <table cellspacing="2">
          <tr>
            <td>
              <input class="oraButton" oraMdLabel="C1_SAVE_LBL" type="button" 
                onClick="oraSubmitMap('OK');"/>
            </td>
            <td>
              <input class="oraButton" oraMdLabel="CANCEL_LBL" type="button" 
               onClick="oraSubmitMap('CANCEL',false);"/>
            </td>
          </tr>
        </table>
      </td>
    </tr>
</table>
</body>
<xml>
    <root>
        <address>123 Main St</address>
        <city>Alameda</city>
        <state>CA</state>
        <zip>94770</zip>
        <contactInformation>
            <type>Home Phone</type>
            <number>510-555-2287</number>
        </contactInformation>
        <contactInformation>
            <type>Cell Phone</type>
            <number>510-555-4285</number>
        </contactInformation>
    </root>
</xml>
</html>

HTML والأنماط الأساسية

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

صحف الأنماط

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

...
 			<link rel="stylesheet" type="text/css" href="cisDisabled.css"/>
 			<link rel="stylesheet" type="text/css" href="cisEnabled.css"/>
...

العنوان

يجب أن يكون لكل مخطط من مخططات واجهة المستخدم علامة <title>.

...
 			<title oraMdLabel="ADDRESS_LBL"></title>
...

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

إذا تم عرض مخطط واجهة المستخدم في "إطار منبثق"، فسيظهر العنوان في شريط عنوان الإطار.
إذا تم عرض مخطط واجهة المستخدم في منطقة الصفحة، فستتم إضافة العنوان كعلامة <span> إلى مخطط واجهة المستخدم، وسيظهر بعد ذلك في أعلى مخطط واجهة المستخدم.
إذا تم عرض مخطط واجهة المستخدم كمخطط منطقة، فسيتم تجاهله. ولكن لا يزال من الضروري تضمين بطاقة التعريف <title> في HTML كعنصر قياسي.

مخططات المنطقة

عند عرض المخطط في إحدى المناطق كجزء من البوابة، يجب أن يكون لمخطط واجهة المستخدم حد بحيث يتم "احتواء" المعلومات ضمن المنطقة.

...
 			<body class="oraZoneMap">
...

مقارنة مخططات منطقة الصفحة بالمخططات المنبثقة

يمكن أن يختلف عرض مخططات واجهة المستخدم حسب التصميم. ولذلك، تم تطبيق المعايير التالية لتحديد متى يتم استخدام "مخطط واجهة المستخدم في منطقة الصفحة" ومتى يتم استخدام "المخطط المنبثق":

في حالة وجود تسلسل لعدة مخططات واجهة مستخدم، فاستخدم دائمًا مخططات "منطقة الصفحة".
إذا كان لمخطط واجهة المستخدم عدة حقول مدخلات، فاستخدم دائمًا مخططات "منطقة الصفحة".
إذا كان مخطط واجهة المستخدم من النوع مربع حوار "تأكيد" أو لا يحتوي إلا على حقل أو اثنين من حقول المدخلات، فاستخدم المخطط "المنبثق".

ملاحظة: يعتبر الاختلاف بين "القليل من حقول المدخلات" و"عدة حقول إدخال" أمرًا تقديريًا. ويعود القرار النهائي لصاحب التصميم.

رسائل الخطأ

يجب أن يكون لمخططات المدخلات القدرة على عرض رسائل خطأ للمستخدم.

...
<table width="100%" cellpadding="12">
 	<tr class="oraErrorText">
 		<td><a href="" onclick="oraShowErrorAlert(); return false;">
        <span class="oraErrorText" oraErrorVar="ERRMSG-TEXT"></span></a></td>
 	</tr>
</table>
...

توفر بنية HTML العناصر والدالات الضرورية لعرض الأخطاء للمستخدم. ويجب إدخال هذه البنية بعد بطاقة التعريف <body>. وفي حالة عدم وجود أي أخطاء، فلن يظهر شيء في مخطط واجهة المستخدم. ولكنه سيظهر عند وجود خطأ، وسيتم إعادة عرض مخطط واجهة المستخدم للمستخدم. وسيؤدي نقر الرابط (عند ظهوره) إلى ظهور إنذار منبثق يحتوي على نص رسالة خطأ طويل.

الأنماط والمخططات القياسية

يتم عرض المعلومات في مخطط واجهة المستخدم باستخدام بطاقة التعريف <table> لتنظيم المعلومات في شكل صفوف وأعمدة.

... 			
<table cellspacing="4" width="100%">
<colgroup>
<col class="oraLabel oraTableLabel" />
 			<col class="oraNormal oraTableData" />
 			</colgroup>
...

تعمل العلامتان <colgroup> و<col> على تطبيق الفئات على الأعمدة (التسمية في العمود الأول والبيانات في العمود الثاني). وباستخدام هاتين العلامتين، لن يكون هناك ضرورة لتحديد سمة الفئة (لتطبيق الأنماط) في كل علامة <td>.

الشبكات (جداول البيانات)

يمكن لمخطط واجهة المستخدم أن يحتوي على معلومات، أفضل طريقة لعرضها هي عرضها كشبكة. ويشار إلى تلك المعلومات باعتبارها "الجداول المضمنة". ويمكن أن يتم استخدام الجدول المضمن لعرض المعلومات أو لإدخال المعلومات.

مثال على HTML لجدول مضمن

سيتم تضمين الجدول المضمن في أحد صفوف (<tr>) في المخطط الأساسي:

...
<tr>
    <td colspan="2" class="oraEmbeddedTable">
        <table oraList="contactInformation" cellspacing="2">
            <thead >
                <tr>
                    <th class="oraGridColumnHeader" nowrap="nowrap">
                        <span oraLabel="contactInformation/type></span>
                    </th>
                    <th class="oraGridColumnHeader" nowrap="nowrap">
                        <span oraLabel="contactInformation/number"></span>
                    </th>
                </tr>
            </thead >
            <tbody>
                <tr>
                    <td class="oraNormalAlt oraDisplayCell">
                        <span oraField="type"></span>
                    </td>
                    <td class="oraNormal oraDisplayCell">
                        <span oraField="number"></span>
                    </td>
                </tr>
            </tbody>
        </table>
    </td>
</tr>
...
<xml>
    <root>
        <address> 123 Main St</address>
        <city>Alameda</city>
        <state>CA</state>
        <zip>94770</zip>
        <contactInformation>
            <type>Home Phone</type>
            <number>510-555-2287</number>
        </contactInformation>
        <contactInformation>
            <type>Cell Phone</type>
            <number>510-555-4285</number>
        </contactInformation>
    </root>
</xml>

تضمين جدول

يتم تضمين الجدول المضمن في بنية الجدول الكلية. وتعمل سمة colspan على ضمان تغطية الجدول المضمن للعمودين القياسيين في جدول المخطط الكلي.


...
<tr>
    <td colspan="2" class="oraEmbeddedTable">
    ...
    ...
    ...
    </td>
</tr>
...

بنية الجدول المضمن

يتشابه الجدول المضمن بشكل كبير مع جدول المخطط الأساسي.

...
<table oraList="contactInformation" cellspacing="2">
<thead>
          ...
          ...
</thead>
<tbody>
          ...
          ...
</tbody>
</table>
...

يمتاز التباعد بين الخلايا في علامة <table> بأنه أصغر، وتعمل تلك العلامة على تحديد عنصر "القائمة" الموجود في XML والذي سيتم استخدامه لإدخال البيانات.
يتم استخدام عنصر <thead> لإضافة عناوين للأعمدة في الجدول المضمن.
العنصر <tbody> هو العنصر الذي سيتم تكراره مع كل عنصر "قائمة" مشار إليه في XML. في المثال السابق، يوجد عنصرا قائمة "contactInformation"، لذلك سيحتوي الجدول المضمن المعروض على صفين.

عناوين الأعمدة

يجب أن تحتوي الأعمدة المعروضة من الجدول المضمن على عناوين. وتعمل العلامة <thead> على تحديد هذه العناوين.

...
<thead>
    <tr>
        <th class="oraGridColumnHeader" nowrap="nowrap">
            <span oraLabel="contactInformation/type></span>
        </th>
        <th class="oraGridColumnHeader" nowrap="nowrap">
            <span oraLabel="contactInformation/number"></span>
        </th>
    </tr>
</thead>
...

تعمل سمة nowrap على منع ظهور عنوان العمود على أكثر من سطر واحد. ولكن في حالة تطلب الأمر أكثر من سطر واحد، يمكن إزالة السمة nowrap.

حقول المدخلات

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

...
<tr>
    <td colspan="2" class="oraEmbeddedTable">
        <table oraList="contactInformation" cellspacing="2">
            <thead >
                <tr>
                    <th class="oraGridColumnHeaderButton"></th>
                    <th class="oraGridColumnHeaderButton"></th>
                    <th class="oraGridColumnHeader" nowrap="nowrap">
                        <span oraLabel="contactInformation/type></span>
                    </th>
                    <th class="oraGridColumnHeader" nowrap="nowrap">
                        <span oraLabel="contactInformation/number"></span>
                    </th>
                </tr>
            </thead >
            <tbody>
                <tr>
                    <td oraType="addGridRow"></td>
                    <td oraType="deleteGridRow"></td>
                    <td>
                        <input type="text" oraField="type"/>
                    </td>
                    <td>
                        <input type="text" oraField="number"/>
                    </td>
                </tr>
            </tbody>
        </table>
    </td>
</tr>
...

هناك نوعان من الأعمدة الجديدة التي تتم إضافتها إلى جدول الإدخال المضمن.

سيضيف oraType="addGridRow" زر "+" إلى الصف. سيتيح هذا للمستخدم إضافة صف للشبكة الحالية.
سيضيف oraType="deleteGridRow" زر "-" إلى الصف. سيتيح هذا للمستخدم حذف صف موجود من الشبكة.

ملاحظة: تتطلب العلامة <thead> إضافة هذين العمودين الجديدين.

يتم وضع عنصري التحكم هذين، كما هو قياسي، في بداية الصف بالترتيب المعروض. يمكن حذف أي العنصرين إذا تطلب الأمر ذلك (على سبيل المثال، في حالة عدم السماح للمستخدم بحذف معلومات).

وسيؤدي وجود أي من عنصري التحكم هذين إلى تنشيط عملية "القائمة الفارغة". بمعنى أنه إذا كان XML لا يحتوي على أية بيانات للقائمة المحددة، ستعرض شبكة الإدخال صف فارغ جاهز لإدخال معلومات جديدة.

أزرار الإجراء

مثال على HTML لزر إجراء

يتم استخدام أزرار الأجراء لتنفيذ دالة محددة في مخطط واجهة المستخدم. وتختلف هذه الإجراءات بقدر اختلاف المعلومات التي يتم عرضها أو تحديثها. فيما يلي اثنان من الأمثلة الشائعة:

حفظ. عادة ما يتم استخدام هذا الزر في "مخطط واجهة المستخدم المدخل" للسماح للمستخدم بحفظ أي تغييرات قام بإجرائها.
إلغاء. عادة ما يتم استخدام هذا الزر في "مخطط واجهة المستخدم المدخل" للسماح للمستخدم بإلغاء أي تغييرات قيد التشغيل.

...
<tr>
  <td colspan="2" class=" oraEmbeddedTable">
    <table cellspacing="2">
      <tr>
        <td>
          <input class="oraButton" oraMdLabel="C1_SAVE_LBL" type="button"
              onClick="oraSubmitMap('OK');"/>
        </td>
        <td>
          <input class="oraButton" oraMdLabel="CANCEL_LBL" type="button"
  onClick="oraSubmitMap('CANCEL',false);"/>
        </td>
      </tr>
    </table>
  </td>
</tr>
...

معايير الأزرار

توضح النقاط التالية بعض المعايير المرتبطة بالأزرار.

يتم تضمين الأزرار كجدول مضمن.
يجب تجميع الأزرار معًا. كما يجب ألا يتم وضعها في مناطق مختلفة من مخطط واجهة المستخدم.
يعتمد موقع الأزرار بشكل أساسي على نوع مخطط واجهة المستخدم.
- يجب أن تحتوي "مخططات واجهة المستخدم للعرض فقط" على قسم "إجراءات السجل" في أعلى القسم الأيسر من مخطط واجهة المستخدم.
- يجب أن تحتوي "مخططات واجهة المستخدم المدخلة" على الأزرار في أسفل مخطط واجهة المستخدم (بعد كل حقول المدخلات).

الأنماط المتاحة

توجد كل الأنماط في صحف الأنماط CSS المشار إليها. ويتم تطبيقها بواسطة السمة class في HTML. أما إعدادات الأنماط الفعلية فلن يتم توثيقها هنا نظرًا لإمكانية تعديلها. يحدد هذا القسم متى يجب استخدام نمط معين فقط.

ملاحظة: قد تشير السمة class إلى أكثر من نمط واحد (class="oraLabel oraSectionEnd")


النمط	تعليقات	مثال
oraButton	يتم تطبيق هذا النمط على العناصر <input> حيث النوع هو "زر".	`... <input class="oraButton" oraMdLabel="CANCEL_LBL" type="button" onClick="oraSubmitMap('CANCEL',false);"/> ...`
oraDisplayCell	يتم تطبيق هذا النمط على علامة <td> في أحد الجداول المضمنة. كما يعمل الزر على تحديد مظهر الخلايا (وليس البيانات داخل الخلية).	`... <td class="oraDisplayCell"> <span oraField="type"></span> </td> ...`
oraEmbeddedTable	يتم تطبيق هذا النمط على علامة <td> التي ستحتوي على الجدول المضمن.	`... <tr> <td colspan="2" class=" oraEmbeddedTable"> <table cellspacing="2"> ... ... ... </table> </td> </tr> ...`
oraError	يتم تطبيق هذا النمط على العناصر التي تم تحديدها على أنها "عناصر خطأ". لمزيد من المعلومات، ارجع إلى عرض الأخطاء. ملاحظة: عادة لا يتم تطبيق هذا النمط مباشرة في HTML لمخطط واجهة المستخدم
oraErrorText	يتم تطبيق هذا النمط على العناصر المتعلقة برسائل الأخطاء.	`... <table width="100%" cellpadding="12"> <tr class="oraErrorText"> <td><a href="" onclick="oraShowErrorAlert(); return false;"> <span class="oraErrorText" oraErrorVar="ERRMSG-TEXT"></span> </a> </td> </tr> </table> ...`
oraGridColumnHeader	يتم تطبيق هذا النمط على علامات <td> التي تحدد عناوين الأعمدة في الجدول المضمن.	`... <thead > <tr> <th class="oraGridColumnHeaderButton"></th> <th class="oraGridColumnHeaderButton"></th> <th class="oraGridColumnHeader" nowrap="nowrap"> <span oraLabel="contactInformation/type> </span></th> <th class="oraGridColumnHeader" nowrap="nowrap"> <span oraLabel="contactInformation/number"> </span></th> </tr> </thead > ...`
oraGridColumnHeaderButton	يتم تطبيق هذا النمط على علامات <td> التي تحدد عناوين الأعمدة لزري "+" و"-" المستخدمين في الجداول المضمنة القابلة للتحرير.	`... <thead > <tr> <th class="oraGridColumnHeaderButton"> </th> <th class="oraGridColumnHeaderButton"> </th> <th class="oraGridColumnHeader" nowrap="nowrap"> <span oraLabel="contactInformation/type> </span></th> <th class="oraGridColumnHeader" nowrap="nowrap"> <span oraLabel="contactInformation/number"> </span></th> </tr> </thead > ...`
oraInput	يتم تطبيق هذا النمط على حقول المدخلات: <input type="text"> <input type="checkbox"> <select> <textarea> ملاحظة: عادة ما يمكن حذف هذا النمط حيث يتم تطبيق الأنماط المدخلة آليًا عندما تكون oraSchemaDataTypes="true".	`... <input type="text" class="oraInput" oraField="address"/> ...`
oraInputMoney	يتم تطبيق هذا النمط على حقول المدخلات: <input type="text"> <select> (نادرًا) <textarea> (غير مستحسن) ملاحظة: عادة ما يمكن حذف هذا النمط حيث يتم تطبيق الأنماط المدخلة آليًا عندما تكون oraSchemaDataTypes="true".	`... <input type="text" class="oraInputMoney" oraField="amount"/> ...`
oraInputNumber	يتم تطبيق هذا النمط على حقول المدخلات: <input type="text"> <select> (نادرًا) <textarea> (غير مستحسن) ملاحظة: عادة ما يمكن حذف هذا النمط حيث يتم تطبيق الأنماط المدخلة آليًا عندما تكون oraSchemaDataTypes="true".	`... <input type="text" class="oraInputNumber" oraField="count"/> ...`
oraLabel	يتم تطبيق هذا النمط على حقول التسميات القياسية التي تتم محاذاتها لليمين. ملاحظة: عادة ما يمكن حذف هذا النمط حيث يتم تطبيقه بالفعل بواسطة العلامة <col>.	`... <td class="oraLabel" oraLabel="address"></td> ...`
oraLabelAlt	لا يتم تطبيق هذا النمط على حقول التسميات القياسية إلا في حالة الرغبة في محاذاة التسمية إلى اليسار.	`... <td class="oraLabelAlt" oraLabel="address"></td> ...`
oraLabelCenter	لا يتم تطبيق هذا النمط على حقول التسميات القياسية إلا في حالة الرغبة في محاذاة التسمية في وسط الخلية.	`... <td class="oraLabelCenter" oraLabel="address"></td> ...`
oraLink	يتم تطبيق هذا النمط على مراجع المفاتيح الخارجية (روابط). وستتم إضافته آليًا بواسطة "مخطط واجهة المستخدم"، ولكن أيضًا يمكن استخدامه يدويًا حسب الحاجة.	`... <td class="oraLabel"> <a href="www.google.com" class="oraLink">Google</a></td> ...`
oraNormal	يتم تطبيق هذا النمط على حقول البيانات القياسية (للعرض فقط) التي تتم محاذاتها لليسار. ملاحظة: عادة ما يمكن حذف هذا النمط حيث يتم تطبيقه بالفعل بواسطة العلامة <col>.	`... <td class="oraNormal" oraField="address"></td> ...`
oraNormalAlt	لا يتم تطبيق هذا النمط على حقول البيانات القياسية (للعرض فقط) إلا في حالة الرغبة في محاذاة البيانات إلى اليمين.	`... <td class=" oraNormalAlt" oraField="address"></td> ...`
oraNormalCenter	لا يتم تطبيق هذا النمط على حقول البيانات القياسية (للعرض فقط) إلا في حالة الرغبة في محاذاة البيانات في وسط الخلية.	`... <td class=" oraNormalCenter" oraField="address"></td> ...`
oraPageTitle	يتم تطبيق هذا النمط على العنصر الذي يحتوي على عنوان الصفحة. ملاحظة: عادة لا يتم تطبيق هذا النمط مباشرة في HTML لمخطط واجهة المستخدم. يتم إنشاء العلامة <span> بواسطة إطار عمل "مخطط واجهة المستخدم" عند عرض "مخطط واجهة المستخدم" في منطقة الصفحة.	`... <span class=" oraPageTitle" oraMdField="PAGE_TITLE_LBL"></span> ...`
oraSectionEnd	يتم تطبيق هذا النمط على علامات <td> في نهاية "القسم" (مجموعة من العناصر). ويوفر هذا القسم بعض المسافة لفصل القسم عن المعلومات التالية. ملاحظة: يجب تطبيق النمط على علامات <td>، وإلا من الممكن أن تتم محاذاة التسمية مع البيانات/المدخلات بشكل خاطئ.	`... <tr> <td class="oraSectionEnd" oraLabel="zip"> </td> <td class="oraSectionEnd" oraField="zip"> </td> </tr> ...`
oraSectionHeader	يتم تطبيق هذا النمط على علامة <td> المستخدمة لإدخال عنوان للقسم ضمن المعلومات التي يتم عرضها. ولكن لا تتوفر مسافة قبله أو بعده. للحصول على مسافة يتم استخدام فئتي oraSectionStart وoraSectionEnd. ملاحظة: يجب أن يغطي عنوان القسم كلاً من عمود التسمية وعمود البيانات.	`... <tr> <td class="oraSectionHeader" colspan="2" oraMdField="DATA_SECTION_LBL"></td> </tr> ...`
oraSectionStart	يتم تطبيق هذا النمط على علامات <td> في بداية "القسم" (مجموعة من العناصر). ويوفر النمط بعض المسافة لفصل القسم عن المعلومات السابقة (عادة ما تكون عنوان قسم). ملاحظة: يجب تطبيق النمط على علامات <td>، وإلا من الممكن أن تتم محاذاة التسمية مع البيانات/المدخلات بشكل خاطئ.	`... <tr> <td class="oraSectionStart" oraLabel="zip"></td> <td class="oraSectionStart" oraField="zip"></td> </tr> ...`
oraTableData	يتم تطبيق هذا النمط على علامة <col> الخاصة بعمود البيانات في الجدول الرئيسي (العمود الثاني). ويتم استخدامه لإدخال عرض نسبي للمسافة الأفقية المراد استخدامها مع المعلومات.	`... <colgroup> <col class="oraLabel oraTableLabel"/> <col class="oraNormal oraTableData"/> </colgroup> ...`
oraTableLabel	يتم تطبيق هذا النمط على علامة <col> الخاصة بعمود التسمية في الجدول الرئيسي (العمود الأول). ويتم استخدامه لإدخال عرض نسبي للمسافة الأفقية المراد استخدامها مع البيانات.	`... <colgroup> <col class="oraLabel oraTableLabel" /> <col class="oraNormal oraTableData"/> </colgroup> ...`
oraTinyText	عادة ما يتم تطبيق هذا النمط مباشرة أسفل علامة <input> لإدخال معلومات أو تلميح للمستخدم حول معلومات تتعلق بالمدخلات. على سبيل المثال، تنسيق الاسم أو العنوان.	`... <tr> <td oraLabel="address"></td> <td> <input type="text" oraField="address"/> <div class="oraTinyText" oraField="addressFormatHint"></div> </td> </tr> ...`
oraZoneMap	يتم تطبيق هذا النمط عند عرض "مخطط واجهة المستخدم" باعتباره منطقة أو بوابة.	`... <body class="oraZoneMap"> ...`

استخدام OJET

توجد بعض مخططات واجهة المستخدم التي يقدمها المنتج والتي تستخدم عناصر واجهة المستخدم التي تقدمها Oracle JavaScript Extension Toolkit (OJET). لا تتوافق إصدارات OJET دائمًا مع إصدارات إطار العمل. بالإضافة إلى ذلك، يقوم OJET في بعض الأوقات بتعديل واجهات برمجة التطبيقات التي يستخدمها المنتج. سيحاول إطار العمل التأكد من أن كل إصدار للمنتج يحتوي على أحدث نسخة وأعلى رقم لنسخة مكتبات OJET. لا يتم تشجيع النسخ المعدلة على محاولة استخدام الميزات الموجودة في OJET والتي لا يستخدمها المنتج لأن المنتج لا يقوم بالضرورة باختبار تلك الميزات ولا يتأكد من أن الترقيات الخاصة بواجهات برمجة التطبيقات لتلك الميزات متوافقة مع الإصدارات الأقدم.

لاحظ أن المنتج يعزل المراجع التي تشير إلى OJET في مقطع مخطط واجهة مستخدم يتم إدراجه في المخططات التي تستخدم عناصر واجهة مستخدم OJET. الغرض من عمل ذلك هو تقليل التغييرات التي تحدث على الإصدارات القادمة من OJET لتقتصر على مكان واحد. يتم إطلاق اسم F1–OJETLIBS على المخطط. إذا أرادت النسخة المعدلة الخاصة بك استخدام OJET، تكون التوصية هي استخدام مقطع مخطط واجهة المستخدم المذكور.