Standards de Mapa de Interface de Usuario
Contenido
Plantillas Básicas de Mapa de Interface de Usuario
Todos los Mapas de Interface de Usuario comparten la misma estructura básica, independientemente de la ubicación (área de la página, zona, ventana desplegable) o del uso (solo visualización, entrada).
XML de Muestra
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 Interface de Usuario de Solo Despliegue
<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 Interface de Usuario 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>HTML y Estilos Básicos
Las plantillas básicas introducen los estilos y el HTML standard utilizados para Mapas de Interface de Usuario. Estos standards se describen individualmente en las siguientes secciones.
Hojas de estilo
Los estilos que se usan para aplicar el aspecto standard a los mapas se encuentran en hojas de estilo. Estas hojas de estilo se deben incluir en todos los Mapas de Interface de Usuario.
...
<link rel="stylesheet" type="text/css" href="cisDisabled.css"/>
<link rel="stylesheet" type="text/css" href="cisEnabled.css"/>
...Título
Cada Mapa de Interface de Usuario debe tener una etiqueta <title>.
...
<title oraMdLabel="ADDRESS_LBL"></title>
...Esto asigna al Mapa de Interface de Usuario un título descriptivo.
- Si el Mapa de Interface de Usuario se presenta en una ventana desplegable, el título se aparece en la barra de título de la ventana.
- Si el Mapa de Interface de Usuario se presenta en el área de página, el título se agrega como etiqueta <span> al Mapa de Interface de Usuario y aparece en la parte superior del Mapa de Interface de Usuario.
- Si el Mapa de Interface de Usuario se presenta como mapa de zona, se lo ignora. La etiqueta <title> igual se debe incluir en el HTML como standard.
Mapas de Zona
Si el mapa se presenta en una zona como parte de un portal, el Mapa de Interface de Usuario debe tener un borde para que la información quede "contenida" dentro de la zona.
...
<body class="oraZoneMap">
...Mapas de Área de Página contra Mapas Desplegables
La presentación de los Mapas de Interface de Usuario puede variar de un diseño a otro. Se aplicaron los siguientes standards para decidir cuándo usar un Mapa de Interface de Usuario de Área de Página y cuándo usar un Mapa Desplegable:
- Si hay múltiples Mapas de Interface de Usuario en la secuencia, usar siempre el Área de Página.
- Si el Mapa de Interface de Usuario tiene muchos campos de entrada, usar siempre un Área de Página.
- Si el Mapa de Interface de Usuario es un cuadro de diálogo de "confirmación" o tiene solo uno o dos campos de entrada, usar una Ventana 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 las funciones necesarios para desplegar errores al Usuario. Debe estar directamente después de la etiqueta <body>. Si no hay errores, no hay nada visible en el Mapa de Interface de Usuario. Aparece cuando se produce un error y se vuelve a presentar el Mapa de Interface de Usuario al Usuario. Al hacer click en el enlace (si está visible), aparece una alerta desplegable con el texto largo del mensaje de error.
Estilos y Diseño Standard
La información se presenta en el Mapa de Interface de Usuario usando <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 columna). El uso de estas etiquetas hace que no sea necesario definir el atributo de clase (para aplicar estilos) en cada <td>.
Grillas (Tablas de Datos)
Un Mapa de Interface de Usuario puede incluir información que se visualice mejor en forma de grilla. Es lo que se conoce como "Tablas Embebidas". Las tablas embebidas se pueden usar para desplegar o ingresar información.
Ejemplo de HTML de Tabla Embebida
La tabla embebida se incluye 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>Cómo Embeber Tablas
La tabla embebida se incluye en la estructura general de la tabla. El atributo colspan garantiza que la tabla embebida abarque las dos columnas standard de la tabla de diseño general.
...
<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 espacio de celdas levemente menor y define el elemento "list" en el XML que se usa para proporcionar los datos.
- El elemento <thead> se usa para dar a la tabla embebida encabezados para las columnas.
- El elemento <tbody> es el que se repite 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 que se despliega tiene dos filas.
Encabezados de Columna
Las tablas embebidas deben tener encabezados para las columnas desplegadas. La etiqueta <thead> los 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 el encabezado de columna ocupe múltiples líneas. Si se necesitan múltiples líneas, se puede remover el atributo "nowrap".
Campos de Entrada
Las tablas embebidas se pueden usar tanto para entrada como solo para despliegue. El marco proporciona un control conveniente 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 agregan dos columnas nuevas a la tabla embebida de entrada.
- oraType="addGridRow" agrega el botón "+" a la fila. Esto permite al Usuario agregar una fila adicional a la grilla existente.
- oraType="deleteGridRow" agrega un botón "-" a la fila. Esto permite al Usuario suprimir una fila existente de la grilla.
Estos controles se colocan, de manera standard, al comienzo de la fila en el orden que se muestra. Cualquiera de los controles se puede omitir si es necesario (por ejemplo, si no se permite a los Usuarios suprimir información).
La presencia de cualquiera de estos controles activa el proceso de "lista vacía". Esto significa que, si el XML no tiene datos para el elemento "list" especificado, la grilla de entrada despliega una fila vacía lista para ingresar nueva información.
Botones de Acción
Ejemplo de HTML de Botón de Acción
Los botones de acción se usan para realizar alguna función especificada desde el Mapa de Interface de Usuario. Las acciones son tan variadas como la información que se despliega o actualiza. A continuación se muestran dos ejemplos comunes:
- Grabar. Normalmente se usa en un Mapa de Interface de Usuario de Entrada para permitir a un Usuario grabar los cambios que realizó.
-
Anular. Normalmente se usa en un Mapa de Interface de Usuario de Entrada para permitir a un Usuario anular cambios en progreso.
...
<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 de Botones
En los siguientes puntos, se realzan algunos standards relacionados con los botones.
- Los botones se incluyen como una tabla embebida.
- Los botones se deben agrupar. No se deben colocar en áreas diferentes del Mapa de Interface de Usuario.
- La ubicación de los botones depende principalmente del tipo de Mapa de Interface de Usuario.
- Los Mapas de Interface de Usuario de Solo Despliegue deben tener una sección Acciones de Registro en la sección superior derecha del Mapa de Interface de Usuario.
- Los Mapas de Interface de Usuario de Entrada deben tener los botones al pie del Mapa de Interface de Usuario (después de todos los campos de entrada).
Estilos Disponibles
Todos los estilos se incluyen en las hojas de estilo CSS a las que se hace referencia. Son aplicados por el atributo HTML "class". La configuración de estilo real utilizada no se documenta aquí porque se la puede ajustar. En esta sección, solo se especifica cuándo se debe usar un estilo en particular.
| Estilo | Comentarios |
Ejemplo |
|---|---|---|
| oraButton | Se aplica a elementos <input> donde el tipo es botón. |
|
| oraDisplayCell | Se aplica a la etiqueta <td> de una tabla embebida. Define el aspecto de la celda de tabla (no de los datos incluidos en la celda). |
|
| oraEmbeddedTable | Se aplica a la etiqueta <td> que incluirá la tabla embebida. |
|
| oraError | Este estilo se aplica a elementos que se identifican como "elementos de error". Para obtener más información, consulte Errores de Despliegue.
Nota: Este estilo no se suele aplicar directamente al HTML del Mapa de Interface de Usuario.
|
|
| oraErrorText | Este estilo se aplica a los elementos relacionados con mensajes de error. |
|
| oraGridColumnHeader | Este estilo se aplica a las etiquetas <td> que definen los encabezados de columna de la tabla embebida. |
|
| oraGridColumnHeaderButton | Este estilo se aplica a las etiquetas <td> que definen los encabezados de columna para los botones "+" y "-" que se usan en tablas embebidas editables. |
|
| oraInput | Este estilo se aplica a los campos de entrada:
Nota: Por lo general, se puede omitir porque los estilos de entrada se aplican automáticamente cuando oraSchemaDataTypes="true".
|
|
| oraInputMoney | Este estilo se aplica a los campos de entrada:
Nota: Por lo general, se puede omitir porque los estilos de entrada se aplican automáticamente cuando oraSchemaDataTypes="true".
|
|
| oraInputNumber | Este estilo se aplica a los campos de entrada:
Nota: Por lo general, se puede omitir porque los estilos de entrada se aplican automáticamente cuando oraSchemaDataTypes="true".
|
|
| oraLabel | Este estilo se aplica a campos de etiquetas standard que están alineados a la derecha. Nota: Por lo general, se puede omitir porque se aplica mediante la etiqueta <col>.
|
|
| oraLabelAlt | Este estilo se aplica a campos de etiqueta standard solo si se desea que la etiqueta esté alineada a la izquierda. |
|
| oraLabelCenter | Este estilo se aplica a campos de etiqueta standard solo si se desea que la etiqueta esté alineada en el centro de la celda. |
|
| oraLink | Este estilo se aplica a referencias de clave foránea (enlaces). El marco de Mapa de Interface de Usuario lo agrega automáticamente, pero también se puede usar de manera manual si se lo desea. |
|
| oraNormal | Este estilo se aplica a campos de datos standard (solo despliegue) que están alineados a la izquierda. Nota: Por lo general, se puede omitir porque se aplica mediante la etiqueta <col>.
|
|
| oraNormalAlt | Este estilo se aplica a campos de datos standard (solo despliegue) únicamente si se desea que los datos estén alineados a la derecha. |
|
| oraNormalCenter | Este estilo se aplica a campos de datos standard (solo despliegue) únicamente si se desea que los datos estén alineados en el centro de la celda. |
|
| oraPageTitle | Este estilo se aplica al elemento que contiene el título de página. Nota: Este estilo no se suele aplicar directamente al HTML del Mapa de Interface de Usuario. El marco de Mapa de Interface de Usuario crea la etiqueta <span> cuando el Mapa de Interface de Usuario se despliega en el área de página.
|
|
| oraSectionEnd | Este estilo se aplica a las etiquetas <td> al final de una "sección" (grupo de elementos). Proporciona algo de espacio para separar la sección de la información siguiente. Nota: El estilo se debe aplicar a ambas etiquetas <td>. De lo contrario, la etiqueta puede quedar mal alineada con los datos o la entrada.
|
|
| oraSectionHeader | Este estilo se aplica a la etiqueta <td> que se usa para proporcionar un encabezado para una sección dentro de la información que se despliega. No proporciona espacios antes ni después. Para ello, se usan las clases oraSectionStart y oraSectionEnd. Nota: El encabezado de la sección debe abarcar tanto la columna de etiqueta como la columna de datos.
|
|
| oraSectionStart | Este estilo se aplica a las etiquetas <td> al comienzo de una "sección" (grupo de elementos). Proporciona algo de espacio para separar la sección de la información previa (con frecuencia, un encabezado de sección). Nota: El estilo se debe aplicar a ambas etiquetas <td>. De lo contrario, la etiqueta puede quedar mal alineada 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 usa para proporcionar un ancho porcentual para el espacio horizontal que se utiliza 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 usa para proporcionar un ancho porcentual para el espacio horizontal que se utiliza para las etiquetas. |
|
| oraTinyText | Este estilo se suele aplicar directamente debajo de una etiqueta <input> para proporcionar información o una indicación al usuario en relación con la información pertinente para la entrada. Por ejemplo, nombre o formato de dirección. |
|
| oraZoneMap | Este estilo se aplica cuando el Mapa de Interface de Usuario se debe desplegar como zona en un portal. |
|
Uso de OJET
Hay algunos mapas de interface de usuario entregados por el producto que utilizan widgets de interface de usuario proporcionados por Oracle JavaScript Extension Toolkit (OJET). Las versiones de OJET no siempre están alineadas con las versiones del marco. Además, hay momentos en los que OJET ajusta las APIs que usa el producto. El marco intentará garantizar que cada versión del producto tenga la versión más reciente y la mejor versión de las bibliotecas OJET. Se desaconseja que en las implementaciones se intenten utilizar características en OJET que no sean utilizadas por el producto, ya que el producto no necesariamente probará esas características y no se garantiza que las actualizaciones de las APIs para esas características sean compatibles con versiones anteriores.
Tenga en cuenta que el producto aísla las referencias a OJET en un fragmento de mapa de interface de usuario que se incluye en los mapas que usan widgets OJET. Esto es así para que los cambios en las versiones futuras de OJET se minimicen a un único lugar. El mapa se denomina F1–OJETLIBS. Si la implementación desea usar OJET, la recomendación es usar este fragmento de mapa de interface de usuario.