Estándares de mapas de UI
Contenido
Plantillas de mapas de UI básicos
Todos los mapas de UI comparten la misma estructura básica, independientemente de su ubicación (área de página, zona, desplegable) o uso (solo visualización, entrada).
Ejemplo de XML
Toda la información de este documento se basa en la siguiente estructura 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>Mapa de UI de solo visualización
<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>Mapa de UI de entrada
<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>Estilos y HTML básicos
Las plantillas básicas introdujeron el HTML y los estilos estándar usados por los mapas de UI. Estos estándares se describen de forma individual en las secciones siguientes.
Hojas de estilo
Los estilos para aplicar el aspecto estándar a los mapas se incluyen en las hojas de estilo. Estas hojas de estilo suelen incluirse en todos los mapas de UI.
...
<link rel="stylesheet" type="text/css" href="cisDisabled.css"/>
<link rel="stylesheet" type="text/css" href="cisEnabled.css"/>
...Título
Cada mapa de UI debe tener una etiqueta <title>.
...
<title oraMdLabel="ADDRESS_LBL"></title>
...Esto proporcionará un título descriptivo al mapa de UI.
- Si el mapa de UI se presenta en un "desplegable", el título estará en la barra de título de la ventana.
- Si el mapa de UI se presenta en un área de página, el título se añadirá como una etiqueta <span> al mapa de UI, y aparecerá en la parte superior de dicho mapa.
- Si el mapa de UI se presenta como un mapa de zona, se ignorará. La etiqueta <title> aún necesitará estar incluida en el HTML como estándar.
Mapas de zona
Cuando el mapa se presenta en una zona como parte de un portal, el mapa de UI deberá tener un borde para que la información esté "contenida" en la zona.
...
<body class="oraZoneMap">
...Mapas de área de página frente a mapas desplegables
La presentación de los mapas de UI puede variar de diseño a diseño. Se han aplicado los estándares siguientes para decidir cuándo usar un mapa de UI del área de página y cuándo usar un mapa emergente:
- Si hay múltiples mapas de UI en la secuencia, utilice siempre el área de página.
- Si el mapa de UI tiene muchos campos de entrada, utilice siempre un área de página.
- Si el mapa de UI es un cuadro de diálogo de tipo "confirmación" o solo tiene uno o dos campos de entrada, utilice un desplegable.
Mensajes de error
Los mapas de entrada tienen la capacidad de presentar mensajes de error al usuario.
...
<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>
...Esta estructura HTML proporciona los elementos y funciones necesarios para mostrar errores al usuario. Debe estar justo después de la etiqueta <body>. Cuando no hay ningún error, no habrá nada visible en el mapa de UI. Estará visible si se produce un error y el mapa de UI se ha representado al usuario. Al pulsar en el enlace (si está visible) aparecerá una alerta desplegable con el texto del mensaje de error largo.
Estilos y diseño estándar
La información se presenta en el mapa de UI mediante un elemento <table> para organizar la información en filas y columnas.
...
<table cellspacing="4" width="100%">
<colgroup>
<col class="oraLabel oraTableLabel" />
<col class="oraNormal oraTableData" />
</colgroup>
...Las etiquetas <colgroup> y <col> permiten la aplicación de clases a las columnas (la etiqueta está en la primera columna y los datos en la segunda). El uso de estas etiquetas significa que no es necesario definir el atributo de clase (para aplicar estilos) en cada <td>.
Cuadrículas (tablas de datos)
Un mapa de UI podría contener información que se presenta mejor como una cuadrícula. Se conocen como "tablas embebidas". Una tabla embebida se puede usar para mostrar o introducir información.
Ejemplo de HTML de tabla embebida
La tabla embebida se incluirá en una fila (<tr>) del diseño básico:
...
<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>Embeber la tabla
La tabla embebida se incluye en la estructura de la tabla global. El atributo colspan asegura que la tabla embebida pueda ocupar las dos columnas estándar de la tabla de diseño global.
...
<tr>
<td colspan="2" class="oraEmbeddedTable">
...
...
...
</td>
</tr>
...Estructura de tabla embebida
La tabla embebida es muy similar a la tabla de diseño básico.
...
<table oraList="contactInformation" cellspacing="2">
<thead>
...
...
</thead>
<tbody>
...
...
</tbody>
</table>
...- La etiqueta <table> tiene un cellspacing ligeramente inferior y define el elemento "list" contenido en el XML que se usará para proporcionar los datos.
- El elemento <thead> se utiliza para proporcionar las cabeceras de la tabla embebida para las columnas.
- El elemento <tbody> es el elemento que se repetirá para cada elemento "list" al que se hace referencia en el XML. En el ejemplo anterior, hay dos elementos de lista "contactInformation", por lo que la tabla embebida mostrada tendrá dos filas.
Cabeceras de columna
Las tablas embebidas deben tener cabeceras para las columnas mostradas. La etiqueta <thead> las define.
...
<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>
...El atributo "nowrap" impide que la cabecera de la columna tenga varias líneas. Si son necesarias varias líneas, es necesario eliminar "nowrap".
Campos de entrada
Las tablas embebidas pueden usarse para introducir datos o solo para visualización. El marco proporciona un control cómodo para ayudar a crear tablas embebidas editables.
...
<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>
...Se han añadido dos nuevas columnas a la tabla embebida de entrada.
- oraType="addGridRow" añadirá un botón "+" a la fila. Esto permitirá al usuario añadir una fila adicional a la cuadrícula existente.
- oraType="deleteGridRow" añadirá un botón "-" a la fila. Esto permitirá al usuario suprimir una fila existente de la cuadrícula.
De forma estándar, estos controles se colocan al principio de la fila, en el orden mostrado. Si es necesario, se puede omitir cualquiera de estos controles (por ejemplo, si los usuarios no pueden suprimir información).
La presencia de cualquiera de estos controles activará el proceso de lista vacía. Esto significa que si el XML no tiene ningún dato para el elemento "list" especificado, la cuadrícula de entrada aparecerá con una fila vacía preparada para introducir nueva información.
Botones de acción
Ejemplo de HTML de botones de acción
Los botones de acción se utilizan para realizar alguna función especificada del mapa de UI. Las acciones son tan variadas como la información que se muestra o actualiza. A continuación hay dos ejemplos habituales:
- Guardar. Normalmente se utiliza en un mapa de UI de entrada para que un usuario pueda guardar cualquier cambio que haya realizado.
-
Cancelar. Normalmente se utiliza en un mapa de UI de entrada para que un usuario pueda cancelar cualquier cambio en curso.
...
<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>
...Estándares de los botones
Los puntos siguientes resaltan algunos estándares relacionados con los botones.
- Los botones se incluyen como una tabla embebida.
- Los botones deben agruparse. No se deben colocar en otras áreas del mapa de UI.
- La ubicación de los botones depende sobre todo del tipo de mapa de UI.
- Mapa de UI de solo visualización debe tener una sección Acciones de registro, en la sección superior derecha del mapa de UI.
- Mapa de UI de entrada debe tener los botones en el pie del mapa de UI (después de todos los campos de entrada).
Estilos disponibles
Todos los estilos se incluyen en las hojas de estilo CSS referenciadas. Se aplican mediante el atributo HTML "class". Las opciones de estilo reales no se documentan aquí, ya que pueden ajustarse. En esta sección solo se especifica cuándo debe usarse un determinado estilo.
| Estilo | Comentarios |
Ejemplo |
|---|---|---|
| oraButton | Se aplica a los elementos <input> cuando el tipo es un botón. |
|
| oraDisplayCell | Se aplica a la etiqueta <td> de una tabla embebida. Define el aspecto de las celdas de la tabla (no los datos contenidos en la celda). |
|
| oraEmbeddedTable | Se aplica a la etiqueta <td> que contendrá la tabla embebida. |
|
| oraError | Este estilo se aplica a los elementos que se identifican como elementos de error. Para obtener más información, consulte Visualización de errores.
Nota: en general, este estilo no se aplica de forma directa en el HTML del mapa de UI
|
|
| oraErrorText | Este estilo se aplica a los elementos relativos a los mensajes de error. |
|
| oraGridColumnHeader | Este estilo se aplica a las etiquetas <td> que definen las cabeceras de columna de la tabla embebida. |
|
| oraGridColumnHeaderButton | Este estilo se aplica a las etiquetas <td> que definen las cabeceras de columna para los botones "+" y "-" usados en las tablas embebidas editables. |
|
| oraInput | Este estilo se aplica a los campos de entrada:
Nota: en general, esto puede omitirse, ya que los estilos de entrada se aplican de modo automático cuando oraSchemaDataTypes="true".
|
|
| oraInputMoney | Este estilo se aplica a los campos de entrada:
Nota: en general, esto puede omitirse, ya que los estilos de entrada se aplican de modo automático cuando oraSchemaDataTypes="true".
|
|
| oraInputNumber | Este estilo se aplica a los campos de entrada:
Nota: en general, esto puede omitirse, ya que los estilos de entrada se aplican de modo automático cuando oraSchemaDataTypes="true".
|
|
| oraLabel | Este estilo se aplica a los campos de etiqueta estándar que no están alineados a la derecha. Nota: en general, esto puede omitirse, ya que la etiqueta <col> lo aplica.
|
|
| oraLabelAlt | Este estilo solo se aplica a los campos de etiqueta estándar si se desea que tengan la etiqueta alineada a la derecha. |
|
| oraLabelCenter | Este estilo solo se aplica a los campos de etiqueta estándar si se desea que tengan la etiqueta alineada en el centro de la celda. |
|
| oraLink | Este estilo se aplica a las referencias de clave externa ( enlaces). Se añade de modo automático al marco del mapa de UI, pero también puede usarse de forma manual, si se desea. |
|
| oraNormal | Este estilo se aplica a los campos de datos estándar (solo visualización) que no están alineados a la izquierda. Nota: en general, esto puede omitirse, ya que la etiqueta <col> lo aplica.
|
|
| oraNormalAlt | Este estilo solo se aplica a los campos de datos estándar (solo visualización) si se desea que tengan los datos alineados a la derecha. |
|
| oraNormalCenter | Este estilo solo se aplica a los campos de datos estándar (solo visualización) si se desea que tengan los datos alineados en el centro de la celda. |
|
| oraPageTitle | Este estilo se aplica al elemento que contiene el título de página. Nota: en general, este estilo no se aplica de forma directa en el HTML del mapa de UI. El marco del mapa de UI crea el elemento <span> cuando dicho mapa se muestra en el área de página.
|
|
| oraSectionEnd | Este estilo se aplica a las etiquetas <td> situadas al final de una "sección" (grupo de elementos). Proporciona cierto espacio para separar la sección de la siguiente información. Nota: el estilo debe aplicarse a las etiquetas <td> o la etiqueta puede tener una alineación incorrecta con los datos o la entrada.
|
|
| oraSectionHeader | Este estilo se aplica a la etiqueta <td> usada para proporcionar una cabecera para una sección dentro de la información que se muestra. No proporciona ningún espacio antes ni después. Las clases oraSectionStart y oraSectionEnd E se utilizan para ello. Nota: el encabezado de la sección debe extenderse a las columnas de etiqueta y de datos.
|
|
| oraSectionStart | Este estilo se aplica a las etiquetas <td> situadas al principio de una "sección" (grupo de elementos). Proporciona cierto espacio para separar la sección de la información anterior, a menudo una cabecera de sección. Nota: el estilo debe aplicarse a las etiquetas <td> o la etiqueta puede tener una alineación incorrecta con los datos o la entrada.
|
|
| oraTableData | Este estilo se aplica a la etiqueta <col> para la columna de datos de la tabla principal (segunda columna). Se utiliza para proporcionar un ancho en porcentaje para el espacio horizontal que se usará para la información. |
|
| oraTableLabel | Este estilo se aplica a la etiqueta <col> para la columna de etiqueta de la tabla principal (primera columna). Se utiliza para proporcionar un ancho en porcentaje para el espacio horizontal que se usará para las etiquetas. |
|
| oraTinyText | En general, este estilo se aplica justo debajo de una etiqueta <input> para proporcionar información o una sugerencia al usuario relativa a información relevante para la entrada. Por ejemplo, formato de dirección o nombre. |
|
| oraZoneMap | Este estilo se aplica cuando el mapa de UI se va a mostrar como una zona en un portal. |
|
Uso de OJET
Algunos de los mapas de UI incluidos con el producto utilizan widgets de UI que ofrece Oracle JavaScript Extension Toolkit (OJET). Las versiones de OJET no siempre se alinean con las del marco. Además, en ocasiones, OJET ajusta las API que utiliza el producto. El marco intentará garantizar que cada versión del producto disponga de la versión más reciente y completa de las bibliotecas de OJET. No se recomienda a las implantaciones intentar utilizar funciones de OJET que no se utilicen en el producto, ya que este no efectúa pruebas en las funciones y no garantiza que las actualizaciones de las API para ellas sean compatibles con versiones anteriores.
Debe tenerse en cuenta que el producto aísla las referencias a OJET en un fragmento de mapa de UI que se incluye en los mapas que utilizan widgets de OJET. Por ello, los cambios en versiones futuras de OJET se minimizan en un único punto. El mapa se llama F1–OJETLIBS. Si la implantación desea utilizar OJET, es recomendable utilizar este fragmento de mapa de UI.