Standards de matrice IU

Modèles de matrice IU de base

Toutes les matrices IU partagent la même structure de base, où qu'elles soient placées (zone de page, zone, fenêtre contextuelle) et quel que soit leur usage (affichage uniquement, entrée).

Exemple de XML

Toutes les informations de ce document se basent sur la structure XML ci-dessous.

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

Matrice IU d'affichage uniquement

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

Matrice IU d'entrée

<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 et styles de base

Les modèles de base introduisent le HTML et les styles standard utilisés pour les matrices IU. Ils sont décrits individuellement dans les sections qui suivent.

Feuilles de styles

Les styles permettant d'appliquer une présentation standard aux matrices figurent tous dans des feuilles de styles. Ces feuilles de styles doivent être incluses dans toutes les matrices IU.

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

Titre

Chaque matrice IU doit comporter une balise <title>.

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

Elle permet d'affecter à la matrice IU un titre descriptif.

  • Si la matrice IU est présentée dans une fenêtre contextuelle, le titre figure dans la barre de titre de la fenêtre.
  • Si la matrice IU est présentée dans la zone de page, le titre lui est ajouté en tant que balise <span> et apparaît en haut de la matrice.
  • Si la matrice est présentée en tant que matrice de zone, le titre est ignoré. La balise <title> doit être incluse en standard dans le HTML.

Matrices de zone

Lorsque la matrice est présentée dans une zone dans le cadre d'un portail, elle doit avoir une bordure afin que les informations soient "contenues" dans la zone.

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

Matrices présentées dans une zone de page/dans une fenêtre contextuelle

La présentation des matrices IU peut varier d'une conception à l'autre. Les principes suivants ont été appliqués pour décider des cas où une matrice IU doit être présentée dans une zone de page et des cas où elle doit l'être dans une fenêtre contextuelle :

  • Si la séquence comporte plusieurs matrices IU, toujours utiliser une zone de page.
  • Si la matrice IU comporte de nombreux champs d'entrée, toujours utiliser une zone de page.
  • Si la matrice IU est une boîte de dialogue de type "confirmation" ou qu'elle ne comporte qu'un ou deux champs d'entrée, utiliser une fenêtre contextuelle.
Remarque :
La différence entre "seulement quelques champs d'entrée" et "de nombreux champs d'entrée" est discrétionnaire. La décision finale appartient au concepteur.

Messages d'erreur

Les matrices d'entrée peuvent présenter des messages d'erreur à l'utilisateur.

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

Cette structure HTML contient les éléments et fonctions nécessaires pour présenter des erreurs à l'utilisateur. Elle doit figurer immédiatement après la balise <body>. En l'absence d'erreur, rien n'est visible dans la matrice IU. Quelque chose n'est visible que si une erreur se produit et que la matrice IU est présentée à nouveau à l'utilisateur. Cliquer sur le lien (lorsqu'il est visible) fait alors apparaître une alerte contextuelle avec le texte long du message d'erreur.

Présentation et styles standard

Une balise <table> est utilisée dans la matrice IU pour organiser les informations en lignes et colonnes.

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

Les balises <colgroup> et <col> permettent d'appliquer des classes aux colonnes (l'étiquette figure dans la première colonne et les données dans la seconde). L'utilisation de ces balises évite d'avoir à définir l'attribut de classe (pour l'application de styles) dans chaque <td>.

Grilles (tables de données)

Une matrice IU peut contenir des informations pour lesquelles la présentation sous forme de grille est préférable. On parle alors de "tables incorporées". La table incorporée peut être utilisée pour l'affichage d'informations ou l'entrée d'informations.

Exemple de HTML de table incorporée

La table incorporée est incluse dans une ligne (<tr>) de la présentation de base :

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

Incorporer la table

La table incorporée est incluse dans la structure de table globale. L'attribut "colspan" permet de s'assurer que la table incorporée peut couvrir les deux colonnes de la table de présentation globale.


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

Structure de la table incorporée

La table incorporée ressemble beaucoup à la table de présentation de base.

...
<table oraList="contactInformation" cellspacing="2">
<thead>
          ...
          ...
</thead>
<tbody>
          ...
          ...
</tbody>
</table>
...
  • La balise <table> indique un espacement des cellules légèrement plus petit et définit l'élément "list" du XML qui fournira les données.
  • L'élément <thead> est utilisé pour définir des en-têtes de colonne pour la table incorporée.
  • L'élément <tbody> est l'élément qui sera répété pour chaque élément "list" du XML référencé. Dans l'exemple précédent, il existe deux éléments de liste "contactInformation" ; la table incorporée affichée contiendra donc deux lignes.

En-têtes de colonne

Les tables incorporées doivent comporter des en-têtes pour les colonnes affichées. Ceux-ci sont définis à l'aide de la balise <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>
...

L'attribut "nowrap" évite les sauts de ligne dans l'en-tête de colonne. Si l'en-tête doit être affiché sur plusieurs lignes, l'attribut "nowrap" doit être supprimé.

Champs d'entrée

Les tables incorporées peuvent être utilisées pour l'entrée ou uniquement pour l'affichage. Framework fournit une commande très pratique pour aider à créer des tables incorporées modifiables.

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

Deux nouvelles colonnes sont ajoutées à la table incorporée d'entrée.

  • oraType="addGridRow" ajoute un bouton "+" à la ligne. Il permet à l'utilisateur d'ajouter une ligne supplémentaire à la grille existante.
  • oraType="deleteGridRow" ajoute un bouton "-" à la ligne. Il permet à l'utilisateur de supprimer une ligne existante dans la grille.
Remarque :
Ces deux nouvelles colonnes doivent également être ajoutées pour la balise <thead>.

En standard, ces commandes sont placées au début de la ligne, dans l'ordre indiqué. L'une ou l'autre peut être omise, si nécessaire (par exemple si l'utilisateur n'est pas autorisé à supprimer des informations).

La présence de l'une ou l'autre de ces commandes active le processus de "liste vide". Si le XML ne comporte pas de données pour la liste indiquée, la grille d'entrée s'affiche avec une ligne vide prête pour l'entrée de nouvelles informations.

Boutons d'action

Exemple de HTML de bouton d'action

Les boutons d'action sont utilisés pour exécuter une fonction spécifique à partir de la matrice IU. Les actions sont aussi variées que les informations affichées/mises à jour. Ci-dessous figurent deux exemples courants.

  • Enregistrer. Action généralement utilisée dans une matrice IU d'entrée pour permettre à l'utilisateur d'enregistrer les modifications qu'il a effectuées.
  • Annuler. Action généralement utilisée dans une matrice IU d'entrée pour permettre à l'utilisateur d'annuler les modifications en cours.

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

Standards pour les boutons

Les points ci-dessous présentent certains standards liés aux boutons.

  • Les boutons sont inclus en tant que table incorporée.
  • Les boutons doivent être groupés. Ils ne doivent pas être placés dans des zones différentes de la matrice IU.
  • L'emplacement des boutons dépend essentiellement du type de matrice IU.
    • Les matrices IU d'affichage uniquement doivent comporter une section d'actions sur enregistrement en haut à droite.
    • Dans les matrices IU d'entrée, les boutons doivent se trouver en bas (après tous les champs d'entrée).

Styles disponibles

Les styles se trouvent tous dans les feuilles de styles CSS référencées. Ils sont appliqués par l'attribut HTML "class". Les paramètres de style effectivement utilisés ne sont pas documentés ici car ils peuvent être ajustés. Cette section indique seulement les cas où un style particulier doit être utilisé.

Remarque :
L'attribut "class" peut faire référence à plusieurs styles (class="oraLabel oraSectionEnd").
Style Commentaires

Exemple

oraButton Appliqué aux éléments <input> dont le type est "button".
...
 <input class="oraButton" 
  oraMdLabel="CANCEL_LBL" 
  type="button" 
  onClick="oraSubmitMap('CANCEL',false);"/>
...
oraDisplayCell Appliqué à la balise <td> d'une table incorporée. Il définit l'apparence de la cellule de la table (et non des données qu'elle contient).
...
  <td class="oraDisplayCell">
    <span oraField="type"></span>
  </td>
...
oraEmbeddedTable Appliqué à la balise <td> qui contiendra la table incorporée.
...
<tr>
  <td colspan="2" class=" oraEmbeddedTable">
     <table cellspacing="2">
          ...
          ...
          ...
        </table>
    </td>
</tr>
...
oraError Ce style est appliqué aux éléments identifiés en tant qu'éléments en erreur. Pour plus d'informations, voir Afficher les erreurs.
Remarque :
En principe, ce style n'est pas appliqué directement dans le HTML de la matrice IU.
oraErrorText Ce style est appliqué aux éléments concernés par des messages d'erreur.
...
<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 Ce style est appliqué aux balises <td> qui définissent les en-têtes de colonne dans une table incorporée.
...
<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 Ce style est appliqué aux balises <td> qui définissent les en-têtes de colonne pour les boutons "+" et "-" utilisés dans les tables incorporées modifiables.
...
<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 Ce style est appliqué aux champs d'entrée :
  • <input type="text">
  • <input type="checkbox">
  • <select>
  • <textarea>
Remarque :
En principe, il peut être omis car les styles d'entrée sont appliqués automatiquement lorsque oraSchemaDataTypes="true".
...
<input type="text" class="oraInput" 
  oraField="address"/>
...
oraInputMoney Ce style est appliqué aux champs d'entrée :
  • <input type="text">
  • <select> (rare)
  • <textarea> (non recommandé)
Remarque :
En principe, il peut être omis car les styles d'entrée sont appliqués automatiquement lorsque oraSchemaDataTypes="true".
...
<input type="text" class="oraInputMoney" 
   oraField="amount"/>
...
oraInputNumber Ce style est appliqué aux champs d'entrée :
  • <input type="text">
  • <select> (rare)
  • <textarea> (non recommandé)
Remarque :
En principe, il peut être omis car les styles d'entrée sont appliqués automatiquement lorsque oraSchemaDataTypes="true".
...
<input type="text" class="oraInputNumber" 
  oraField="count"/>
...
oraLabel Ce style est appliqué aux champs d'étiquette standard alignés à droite.
Remarque :
En principe, il peut être omis car il est appliqué par la balise <col>.
...
<td class="oraLabel" 
  oraLabel="address"></td>
...
oraLabelAlt Ce style est appliqué aux champs d'étiquette standard uniquement lorsque l'étiquette doit être alignée à gauche.
...
<td class="oraLabelAlt" 
  oraLabel="address"></td>
...
oraLabelCenter Ce style est appliqué aux champs d'étiquette standard uniquement lorsque l'étiquette doit être centrée dans la cellule.
...
<td class="oraLabelCenter" 
  oraLabel="address"></td>
...
oraLink Ce style est appliqué aux références de clé étrangère (liens). Il est ajouté automatiquement par le framework de matrice IU mais peut également être utilisé manuellement si nécessaire.
...
<td class="oraLabel">
  <a href="www.google.com" 
  class="oraLink">Google</a></td>
...
oraNormal Ce style est appliqué aux champs de données standard (affichage uniquement) alignés à gauche.
Remarque :
En principe, il peut être omis car il est appliqué par la balise <col>.
...
<td class="oraNormal" 
  oraField="address"></td>
...
oraNormalAlt Ce style est appliqué aux champs de données standard (affichage uniquement) seulement lorsque les données doivent être alignées à droite.
...
<td class=" oraNormalAlt" 
  oraField="address"></td>
...
oraNormalCenter Ce style est appliqué aux champs de données standard (affichage uniquement) seulement lorsque les données doivent être centrées dans la cellule.
...
<td class=" oraNormalCenter" 
  oraField="address"></td>
...
oraPageTitle Ce style est appliqué à l'élément qui contient le titre de la page.
Remarque :
En principe, ce style n'est pas appliqué directement dans le HTML de la matrice IU. L'élément <span> est créé par le framework de matrice IU lorsque la matrice IU est affichée dans la zone de page.
...
<span class=" oraPageTitle" 
  oraMdField="PAGE_TITLE_LBL"></span>
...
oraSectionEnd Ce style est appliqué aux balises <td> à la fin d'une "section" (groupe d'éléments). Il introduit de l'espace pour séparer la section des informations qui suivent.
Remarque :
Le style doit être appliqué aux deux balises <td> ; sinon, l'étiquette risque d'être mal alignée par rapport aux données/à l'entrée.
...
<tr>
  <td class="oraSectionEnd" 
  oraLabel="zip">
  </td>
  <td class="oraSectionEnd" 
  oraField="zip">
  </td>
</tr>
...
oraSectionHeader Ce style est appliqué à la balise <td> utilisée pour donner un en-tête à une section au sein des informations affichées. Il n'introduit pas d'espace avant et après lui-même. Ce sont les classes oraSectionStart and oraSectionEnd qui le font.
Remarque :
L'en-tête de section doit couvrir à la fois la colonne d'étiquette et la colonne de données.
...
<tr>
  <td class="oraSectionHeader"
    colspan="2" 
    oraMdField="DATA_SECTION_LBL"></td>
</tr>
...
oraSectionStart Ce style est appliqué aux balises <td> au début d'une "section" (groupe d'éléments). Il introduit de l'espace pour séparer la section des informations qui précèdent (généralement un en-tête de section).
Remarque :
Le style doit être appliqué aux deux balises <td> ; sinon, l'étiquette risque d'être mal alignée par rapport aux données/à l'entrée.
...
<tr>
  <td class="oraSectionStart"
   oraLabel="zip"></td>
  <td class="oraSectionStart"
   oraField="zip"></td>
</tr>
...
oraTableData Ce style est appliqué à la balise <col> pour la colonne de données de la table principale (seconde colonne). Il est utilisé pour indiquer la largeur en pourcentage de l'espace horizontal à utiliser pour les informations.
...
<colgroup>
  <col class="oraLabel
   oraTableLabel"/>
  <col class="oraNormal
   oraTableData"/>
</colgroup>
...
oraTableLabel Ce style est appliqué à la balise <col> pour la colonne d'étiquette de la table principale (première colonne). Il est utilisé pour indiquer la largeur en pourcentage de l'espace horizontal à utiliser pour les étiquettes.
...
<colgroup>
  <col class="oraLabel 
   oraTableLabel" />
  <col class="oraNormal oraTableData"/>
</colgroup>
...
oraTinyText Ce style est généralement appliqué juste après une balise <input> pour fournir à l'utilisateur des informations ou un conseil à propos de l'entrée. Par exemple, le format du nom ou de l'adresse.
...
<tr>
  <td oraLabel="address"></td>
  <td>
    <input type="text" oraField="address"/>
       <div class="oraTinyText" 
      oraField="addressFormatHint"></div>
  </td>
</tr>
...
oraZoneMap Ce style est appliqué lorsque la matrice IU doit être affichée en tant que zone dans un portail.
...
<body class="oraZoneMap">
...

Utiliser OJET

Certaines matrices IU fournies avec l'installation standard utilisent les widgets IU fournis par Oracle JavaScript Extension Toolkit (OJET). Les versions d'OJET ne sont pas toujours en adéquation avec les versions de Framework. Par ailleurs, il arrive qu'OJET ajuste les API utilisées par le produit. Framework tente de garantir que chaque version bénéficie des versions des bibliothèques OJET les plus récentes et les plus étendues. Il est déconseillé aux équipes d'implémentation d'essayer d'utiliser des fonctionnalités d'OJET qui ne sont pas utilisées par le produit, car ce dernier ne les a pas nécessairement testées et de garantit pas que les mises à niveau des API de ces fonctionnalités présentent une compatibilité descendante.

Notez que le produit isole les références à OJET dans un fragment de matrice IU inclus dans les matrices qui utilisent des widgets OJET. De cette manière, les modifications apportées aux versions ultérieures d'OJET restent limitées à un emplacement unique. La matrice est appelée F1–OJETLIBS. Si votre équipe d'implémentation souhaite utiliser OJET, il est recommandé d'utiliser ce fragment de matrice IU.