Standardy mapowania interfejsu użytkownika

Omawiane tematy

Podstawowe szablony odwzorowania interfejsu użytkownika

We wszystkich odwzorowaniach interfejsu użytkownika niezależnie od położenia (obszar strony, strefa, okno podręczne) i użycia (tylko do odczytu, z możliwością wprowadzania danych) stosowana jest taka sama struktura podstawowa.

Przykładowy element XML

Wszystkie informacje w tym dokumencie są oparte na następującej strukturze 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>

Odwzorowania interfejsu użytkownika tylko do odczytu

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

Odwzorowanie interfejsu użytkownika z możliwością wprowadzania danych

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

Podstawowe elementy HTML i style

W szablonach podstawowych wprowadzono standardowe elementy HTML i style stosowane w odwzorowaniach interfejsu użytkownika. Standardy te są opisane indywidualnie w kolejnych sekcjach.

Arkusze stylów

Arkusze stylów zawierają wszystkie style umożliwiające zastosowanie w interfejsach standardowego wyglądu. Te arkusze stylów powinny być uwzględnione we wszystkich odwzorowaniach interfejsu użytkownika.

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

Tytuł

Każde odwzorowanie interfejsu użytkownika powinny zawierać znacznik <title>.

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

Spowoduje to nadanie opisowego tytułu do odwzorowania interfejsu użytkownika.

Jeśli odwzorowanie interfejsu użytkownika jest przedstawione w oknie podręcznym, tytuł będzie znajdować się na pasku tytułu okna.
Jeśli odwzorowanie interfejsu użytkownika jest przedstawione w obszarze strony, tytuł będzie dodany jako znacznik <span> do odwzorowania interfejsu użytkownika i będzie wyświetlany na górze odwzorowania interfejsu użytkownika.
Jeśli odwzorowanie interfejsu użytkownika jest przedstawione jako odwzorowanie strefy, zostanie zignorowane. Mimo to w elemencie HTML znacznik <title> będzie standardowo uwzględniony.

Odwzorowania stref

Gdy odwzorowanie jest przedstawione w strefie jako część portalu, odwzorowanie interfejsu użytkownika będzie otoczone ramką, przez co informacje będą "zawarte" w strefie.

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

Odwzorowania w obszarze strony a odwzorowania w oknach podręcznych

Przedstawienie odwzorowania interfejsu użytkownika może różnić się w zależności od projektu. Celem określenia, kiedy użyć odwzorowania w obszarze strony, a kiedy odwzorowania w oknie podręcznym, zastosowano następujące standardy:

W przypadku wielu odwzorowań interfejsu użytkownika należy zawsze użyć obszaru strony.
Jeśli odwzorowanie interfejsu użytkownika zawiera wiele pól wprowadzania danych, należy zawsze użyć obszaru strony.
Jeśli odwzorowanie interfejsu użytkownika zawiera okno dialogowe typu "Potwierdzenie" albo zawiera tylko jedno lub dwa pola wprowadzania danych, należy użyć okna podręcznego.

Uwaga: Różnica między określeniami "tylko kilka pól wprowadzania danych" i "wiele pól wprowadzania danych" może mieć charakter uznaniowy. Ostateczną decyzję powinien podjąć projektant okna dialogowego.

Komunikaty o błędach

W interfejsach wejściowych mogą być prezentowane komunikaty o błędach przeznaczone dla użytkowników.

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

Ta struktura HTML zawiera niezbędne elementy i funkcje umożliwiające wyświetlanie użytkownikom błędów. Powinna ona znajdować się bezpośrednio po znaczniku <body>. W przypadku braku błędu w odwzorowaniu interfejsu użytkownika nic nie będzie widoczne. Będzie ona widoczna po wystąpieniu błędu, gdy odwzorowanie interfejsu użytkownika zostanie wyświetlone ponownie. Kliknięcie łącza (jeśli jest widoczne) spowoduje wyświetlenie okna podręcznego z ostrzeżeniem zawierającego długi tekst komunikatu o błędzie.

Standardowy układ i style

Znacznik <table> w odwzorowaniu interfejsu użytkownika umożliwia porządkowanie przedstawianych informacji w wierszach i kolumnach.

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

Znaczniki <colgroup> i <col> pozwalają na zastosowanie klas do kolumn (etykieta znajduje się w pierwszej kolumnie, a dane w drugiej). Dzięki zastosowaniu tych znaczników nie trzeba definiować atrybutu klasy (do zastosowania stylów) w każdym elemencie <td>.

Siatki (tabele danych)

Odwzorowanie interfejsu użytkownika może zawierać informacje, które najlepiej przedstawić w siatce. Określa się je jako "tabele osadzone". Tabeli osadzonej można użyć do wyświetlania lub wprowadzania informacji.

Przykład kodu HTML tabeli osadzonej

Tabela osadzona zostanie umieszczona w wierszu (<tr>) układu podstawowego:

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

Osadzanie tabeli

Tabela osadzona jest umieszczona w ogólnej strukturze tabeli. Dzięki atrybutowi colspan tabela osadzona może obejmować dwie standardowe kolumny ogólnego układu tabeli.


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

Struktura tabeli osadzonej

Tabela osadzona jest bardzo podobna do tabeli układu podstawowego.

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

Znacznik <table> ma nieco mniejsze odstępy między komórkami i służy do określenia elementu "lista" zawartego w elemencie XML, który będzie użyty do dostarczenia danych.
Element <thead> służy do umieszczenia w tabeli osadzonej nagłówków kolumn.
<tbody> to element, który będzie powtórzony dla wszystkich elementów "lista", do których istnieje odwołanie, w elemencie XML. W poprzednim przykładzie istnieją dwa elementy listy "informacje kontaktowe", a zatem wyświetlana tabela osadzona będzie zawierać dwa wiersze.

Nagłówki kolumn

Tabele osadzone powinny zawierać nagłówki wyświetlanych kolumn. Do ich definiowania służy znacznik <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>
...

Atrybut "nowrap" zapobiega zajmowaniu przez nagłówek kolumny kilku linii. Jeśli wymagane jest wiele linii, znacznik "nowrap" można usunąć.

Pola wejściowe

Tabele osadzone mogą być używane zarówno do wprowadzania danych, jak i tylko do odczytu. Na platformie Framework udostępnono wygodną kontrolkę pomocną w tworzeniu edytowalnych tabel osadzonych.

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

Do wejściowej tabeli osadzonej dodano dwie nowe kolumny.

oraType="addGridRow" spowoduje dodanie do wiersza przycisku "+". Dzięki temu użytkownik będzie mógł dodać do istniejącej siatki kolejny wiersz.
oraType="deleteGridRow" spowoduje dodanie do wiersza przycisku "-". Dzięki temu użytkownik będzie mógł usunąć z siatki istniejący wiersz.

Uwaga: Znacznik <thead> także wymaga dodania tych dwóch kolumn.

Kontrolki te są standardowo umieszczane na początku wiersza w wyświetlonej kolejności. Jedną z nich można pominąć w razie potrzeby (jeśli na przykład użytkownikom nie wolno kasować informacji).

Obecność dowolnej z tych kontrolek spowoduje aktywację procesu "opróżnianie listy". Oznacza to, że jeśli element XML nie zawiera danych określonej "listy", w siatce wejściowej będzie wyświetlany pusty wiersz gotowy do wprowadzania nowych informacji.

Przyciski czynności

Przykład kodu HTML przycisku czynności

Przyciski czynności służą do wykonywania określonej funkcji w odwzorowaniu interfejsu użytkownika. Czynności są tak różne jak wyświetlane/aktualizowane informacje. Poniżej zamieszczono dwa często spotykane przykłady:

"Save" (Zapisz). Używane zazwyczaj w wejściowym odwzorowaniu interfejsu użytkownika, aby umożliwić użytkownikowi zapisanie wszystkich wprowadzonych zmian.
Anulowanie. Używane zazwyczaj w wejściowym odwzorowaniu interfejsu użytkownika, aby umożliwić użytkownikowi anulowanie zmian w toku.

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

Standardy przycisków

W poniższych punktach wyszczególniono niektóre standardy związane z przyciskami.

Przyciski są uwzględnione jako tabela osadzona.
Przyciski powiny być zgrupowane razem. Nie należy umieszczać ich w różnych obszarach odwzorowania interfejsu użytkownika.
Lokalizacja przycisków zależy głównie od typu odwzorowania interfejsu użytkownika.
- Odwzorowania interfejsu użytkownika tylko do odczytu powinny zawierać sekcję "Czynności rekordu" w prawym górnym rogu odwzorowania interfejsu użytkownika.
- Wejściowe odwzorowania interfejsu użytkownika powinny zawierać przyciski w stopce odwzorowania interfejsu użytkownika (po wszystkich polach wejściowych).

Dostępne style

Wszystkie style są zawarte w arkuszach stylów CSS, do których istnieje odwołanie. Są one stosowane przy użyciu atrybutu HTML "class". Użyte rzeczywiste ustawienia stylów nie są dokumentowane w tym miejscu, ponieważ mogą być korygowane. W tej sekcji określa się tylko, kiedy należy użyć danego stylu.

Uwaga: Atrybut "class" może odwoływać się do więcej niż jednego stylu (class="oraLabel oraSectionEnd")


Styl	Komentarze	Przykład
oraButton	Zastosowany do elementów <input> typu przycisk.	`... <input class="oraButton" oraMdLabel="CANCEL_LBL" type="button" onClick="oraSubmitMap('CANCEL',false);"/> ...`
oraDisplayCell	Zastosowany do znacznika <td> tabeli osadzonej. Służy do określenia wyglądu komórki tabeli (nie danych wewnątrz komórki).	`... <td class="oraDisplayCell"> <span oraField="type"></span> </td> ...`
oraEmbeddedTable	Zastosowany do znacznika <td>, który będzie zawierać tabelę osadzoną.	`... <tr> <td colspan="2" class=" oraEmbeddedTable"> <table cellspacing="2"> ... ... ... </table> </td> </tr> ...`
oraError	Ten styl jest stosowany do elementów określanych jako "elementy błędu". Więcej informacji można znaleźć w sekcji Wyświetlanie błędów. Uwaga: Ten styl nie jest normalnie stosowany bezpośrednio w kodzie HTML odwzorowania interfejsu użytkownika
oraErrorText	Ten styl jest stosowany do elementów związanych z komunikatami o błędzie.	`... <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	Ten styl jest stosowany do znaczników <td> służących do określania nagłówków kolumn w tabeli osadzonej.	`... <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	Ten styl jest stosowany do znaczników <td> służących do określania nagłówków kolumn dla przycisków "+" i "-" używanych w tabelach osadzonych dostępnych do edycji.	`... <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	Ten styl jest stosowany do pól wejściowych: <input type="text"> <input type="checkbox"> <select> <textarea> Uwaga: Zazwyczaj można to pominąć, ponieważ style wejściowe są stosowane automatycznie, gdy oraSchemaDataTypes="true".	`... <input type="text" class="oraInput" oraField="address"/> ...`
oraInputMoney	Ten styl jest stosowany do pól wejściowych: <input type="text"> <select> (rzadko) <textarea> (niezalecane) Uwaga: Zazwyczaj można to pominąć, ponieważ style wejściowe są stosowane automatycznie, gdy oraSchemaDataTypes="true".	`... <input type="text" class="oraInputMoney" oraField="amount"/> ...`
oraInputNumber	Ten styl jest stosowany do pól wejściowych: <input type="text"> <select> (rzadko) <textarea> (niezalecane) Uwaga: Zazwyczaj można to pominąć, ponieważ style wejściowe są stosowane automatycznie, gdy oraSchemaDataTypes="true".	`... <input type="text" class="oraInputNumber" oraField="count"/> ...`
oraLabel	Ten styl jest stosowany do standardowych pól etykiet wyrównanych do prawej. Uwaga: Zazwyczaj można to pominąć, ponieważ zostaje zastosowane przez znacznik <col>.	`... <td class="oraLabel" oraLabel="address"></td> ...`
oraLabelAlt	Ten styl jest stosowany do standardowych pól etykiet tylko wówczas, jeśli etykieta powinna być wyrównana do lewej.	`... <td class="oraLabelAlt" oraLabel="address"></td> ...`
oraLabelCenter	Ten styl jest stosowany do standardowych pól etykiet tylko wówczas, jeśli etykieta powinna być wyrównana do środka komórki.	`... <td class="oraLabelCenter" oraLabel="address"></td> ...`
oraLink	Ten styl jest stosowany do odwołań do klucza obcego (łączy). Jest to dodawane automatycznie przez platformę Framework odwzorowania interfejsu użytkownika, ale w razie potrzeby może być także użyte ręcznie.	`... <td class="oraLabel"> <a href="www.google.com" class="oraLink">Google</a></td> ...`
oraNormal	Ten styl jest stosowany do standardowych pól danych (tylko do odczytu) wyrównanych do lewej. Uwaga: Zazwyczaj można to pominąć, ponieważ zostaje zastosowane przez znacznik <col>.	`... <td class="oraNormal" oraField="address"></td> ...`
oraNormalAlt	Ten styl jest stosowany do standardowych pól danych (tylko do odczytu) tylko wówczas, jeśli dane powinny być wyrównane do prawej.	`... <td class=" oraNormalAlt" oraField="address"></td> ...`
oraNormalCenter	Ten styl jest stosowany do standardowych pól danych (tylko do odczytu) tylko wówczas, jeśli dane powinny być wyrównane do środka komórki.	`... <td class=" oraNormalCenter" oraField="address"></td> ...`
oraPageTitle	Ten styl jest stosowany do elementu zawierającego tytuł strony. Uwaga: Ten styl nie jest normalnie stosowany bezpośrednio w kodzie HTML odwzorowania interfejsu użytkownika. Znacznik <span> jest tworzony przez platformę Framework odwzorowania interfejsu użytkownika, gdy odwzorowanie interfejsu użytkownika jest wyświetlane w obszarze strony.	`... <span class=" oraPageTitle" oraMdField="PAGE_TITLE_LBL"></span> ...`
oraSectionEnd	Ten styl jest stosowany do znaczników <td> na końcu "sekcji" (grupy elementów). Zapewnia on miejsce oddzielające sekcję od następnych informacji. Uwaga: Styl ten należy zastosować do obu znaczników <td>, w przeciwnym razie etykieta może nie być wyrównana z danymi/danymi wejściowymi.	`... <tr> <td class="oraSectionEnd" oraLabel="zip"> </td> <td class="oraSectionEnd" oraField="zip"> </td> </tr> ...`
oraSectionHeader	Ten styl jest stosowany do znacznika <td> służącego do nadawania nagłówków sekcji w obrębie wyświetlanych informacji. Nie zapewnia on miejsca przed lub po znaczniku. Należy w tym celu użyć klas oraSectionStart i oraSectionEnd. Uwaga: Nagłówek sekcji powinien obejmować zarówno kolumnę etykiety, jak i kolumnę danych.	`... <tr> <td class="oraSectionHeader" colspan="2" oraMdField="DATA_SECTION_LBL"></td> </tr> ...`
oraSectionStart	Ten styl jest stosowany do znaczników <td> na początku "sekcji" (grupy elementów). Zapewnia on miejsce oddzielające sekcję od poprzednich informacji (często nagłówka sekcji). Uwaga: Styl ten należy zastosować do obu znaczników <td>, w przeciwnym razie etykieta może nie być wyrównana z danymi/danymi wejściowymi.	`... <tr> <td class="oraSectionStart" oraLabel="zip"></td> <td class="oraSectionStart" oraField="zip"></td> </tr> ...`
oraTableData	Ten styl jest stosowany do znacznika <col> dotyczącego kolumny danych tabeli głównej (druga kolumna). Służy on do zapewnienia procentowej szerokości poziomego miejsca, w którym są umieszczane informacje.	`... <colgroup> <col class="oraLabel oraTableLabel"/> <col class="oraNormal oraTableData"/> </colgroup> ...`
oraTableLabel	Ten styl jest stosowany do znacznika <col> dotyczącego kolumny etykiety tabeli głównej (pierwsza kolumna). Służy on do zapewnienia procentowej szerokości poziomego miejsca, w którym są umieszczane etykiety.	`... <colgroup> <col class="oraLabel oraTableLabel" /> <col class="oraNormal oraTableData"/> </colgroup> ...`
oraTinyText	Ten styl jest zazwyczaj stosowany bezpośrednio pod znacznikiem <input>, aby udostępniać użytkownikowi informacje lub podpowiedź na temat informacji dotyczących danych wejściowych. Na przykład nazwę lub format adresu.	`... <tr> <td oraLabel="address"></td> <td> <input type="text" oraField="address"/> <div class="oraTinyText" oraField="addressFormatHint"></div> </td> </tr> ...`
oraZoneMap	Ten styl jest stosowany w sytuacji, gdy odwzorowanie interfejsu użytkownika ma być wyświetlane w portalu jako strefa.	`... <body class="oraZoneMap"> ...`

Korzystanie z OJET

W produkcie istnieje kilka map interfejsu użytkownika, które korzystają z widżetów interfejsu użytkownika udostępnianych przez Oracle JavaScript Extension Toolkit (OJET). Wersje OJET nie zawsze są zgodne z wersjami frameworku. Ponadto czasami w OJET korygowane są interfejsy API wykorzystywane w produkcie. Framework podejmie próbę zapewnienia, by każda wersja produktu zawierała najnowszą i najszerszą wersję bibliotek OJET. W ramach wdrożenia nie zaleca się podejmowania prób korzystania z funkcji OJET, które nie są używane w produkcie, ponieważ produkt nie zawsze testuje te cechy i nie zapewnia, że uaktualnienia interfejsów API tych cech są zgodne z wcześniejszymi wersjami.

Należy pamiętać, że produkt izoluje odwołania do OJET we fragmencie odwzorowania interfejsu użytkownika, który jest uwzględniony w odwzorowaniach korzystających z widżetów OJET. Ma to na celu ograniczenie zmian w przyszłych wersjach OJET do jednego miejsca. To odwzorowanie nosi nazwę F1–OJETLIBS. Jeśli dane wdrożenie ma korzystać z OJET, zaleca się używanie tego fragmentu odwzorowania interfejsu użytkownika.