Padrões do Mapa da Interface do Usuário
Modelos Básicos do Mapa da Interface do Usuário
Todos os Mapas da IU compartilham a mesma estrutura básica, seja qual for o posicionamento (área de página, zona, janela pop-up) ou o uso (somente exibição, entrada).
Amostra XML
Todas as informações deste documento são baseadas na estrutura XML a seguir.
<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 da IU Somente Exibição
<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 da IU 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 e Estilos Básicos
Os modelos básicos apresentaram o HTML padrão e os estilos usados nos Mapas da IU. Esses padrões são descritos individualmente nas próximas seções.
Folhas de estilo
Os estilos a serem aplicados à aparência padrão dos mapas estão todos contidos em folhas de estilo. Essas folhas devem ser incluídas em todos os Mapas da IU.
...
<link rel="stylesheet" type="text/css" href="cisDisabled.css"/>
<link rel="stylesheet" type="text/css" href="cisEnabled.css"/>
...Título
Cada Mapa da IU deve ter uma tag <title>.
...
<title oraMdLabel="ADDRESS_LBL"></title>
...Ela dará ao Mapa da IU um título descritivo.
- Se o Mapa da IU for apresentado em uma janela "pop-up", o título estará na barra de título da janela.
- Se o Mapa da IU for apresentado na área da página, o título será adicionado como uma tag <span> ao Mapa da IU e exibido na parte superior do Mapa.
- Se o Mapa da IU for apresentado como mapa de zona, o título será ignorado. A tag <title> ainda deve ser incluída no HTML como padrão.
Mapas de Zona
Quando o mapa é apresentado em uma zona como parte de um portal, o Mapa da IU precisa ter borda para que as informações fiquem contidas dentro da zona.
...
<body class="oraZoneMap">
...Mapas de Área da Página versus Mapas em Janela Pop-Up
A apresentação dos Mapas da IU pode variar dependendo do design. Os padrões a seguir foram aplicados para decidir quando usar um Mapa da IU de Área da Página e quando usar um Mapa de Janela Pop-Up:
- Se houver vários Mapas da IU na sequência, use sempre a Área da Página.
- Se o Mapa da IU tiver muitos campos de entrada, use sempre a Área da Página.
- Se o Mapa da IU for uma caixa de diálogo de confirmação ou tiver apenas um ou dois campos de entrada, use uma Janela Pop-Up.
Mensagens de Erro
Os mapas de entrada têm a capacidade de apresentar mensagens de erro ao Usuário.
...
<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 estrutura HTML contém os elementos e as funções necessárias para exibir erros ao Usuário. Ela deve estar diretamente após a tag <body>. Quando não houver erros, nada ficará visível no Mapa da IU. Ficará visível se um erro ocorrer e o Mapa da IU for reapresentado ao Usuário. Se você clicar no link (quando visível), será exibido um alerta em uma janela pop-up com o texto detalhado da mensagem de erro.
Estilos e Layout Padrão
As informações são apresentadas no Mapa da IU com o uso de uma tag <table> para organizá-las em linhas e colunas.
...
<table cellspacing="4" width="100%">
<colgroup>
<col class="oraLabel oraTableLabel" />
<col class="oraNormal oraTableData" />
</colgroup>
...As tags <colgroup> e <col> permitem a aplicação de classes às colunas (o rótulo fica na primeira coluna, e os dados, na segunda). O uso dessas tags significa que o atributo de classe para a aplicação de estilos não precisa ser definido em cada <td>.
Grades (Tabelas de Dados)
O Mapa da IU pode conter informações que ficam melhor apresentadas em uma grade. Estas são chamadas de "Tabelas Incorporadas". A tabela incorporada pode ser usada para exibir informações ou para entrada.
Exemplo do HTML de Tabela Incorporada
A tabela incorporada será incluída em uma linha (<tr>) do layout 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>Incorporando a Tabela
A tabela incorporada é incluída na estrutura geral da tabela. O atributo colspan garante que a tabela incorporada possa ocupar o padrão de duas colunas da tabela de layout geral.
...
<tr>
<td colspan="2" class="oraEmbeddedTable">
...
...
...
</td>
</tr>
...Estrutura da Tabela Incorporada
A tabela incorporada é bastante semelhante à tabela básica de layout.
...
<table oraList="contactInformation" cellspacing="2">
<thead>
...
...
</thead>
<tbody>
...
...
</tbody>
</table>
...- A tag <table> tem um espaçamento entre células ligeiramente menor e define o elemento "list" contido no XML que será usado para fornecer os dados.
- O elemento <thead> é usado para dar à tabela incorporada cabeçalhos para as colunas.
- O elemento <tbody> é aquele que será repetido para cada elemento "list" referenciado no XML. No exemplo anterior, há dois elementos de lista "contactInformation", portanto, a tabela incorporada exibida terá duas linhas.
Cabeçalhos de Coluna
As tabelas incorporadas precisam de cabeçalhos para as colunas exibidas. A tag <thead> define esses cabeçalhos.
...
<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>
...O atributo "nowrap" impede que o cabeçalho da coluna ocupe várias linhas. Se for necessário usar várias linhas, o "nowrap" pode ser removido.
Campos de Entrada
As tabelas incorporadas podem ser usadas para entrada e somente para exibição. A estrutura contém um controle conveniente para ajudar na criação de tabelas incorporadas editáveis.
...
<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>
...Duas colunas são adicionadas à tabela incorporada de entrada.
- oraType="addGridRow" adiciona um botão "+" à linha. Assim, o Usuário poderá adicionar uma linha à grade existente.
- oraType="deleteGridRow" adiciona um botão "-" à linha. Assim, o Usuário poderá excluir uma linha existente da grade.
Esses controles são, por padrão, posicionados no início da linha na ordem mostrada. É possível omitir qualquer um dos controles, se necessário. Por exemplo, é possível não permitir que os Usuários excluam informações.
A presença de qualquer um desses controles ativa o processo de "lista vazia". Isso significa que, se o XML não tiver dados para a lista especificada, a grade de entrada exibirá uma linha vazia pronta para a entrada de informações.
Botões de Ação
Exemplo do HTML de Botão de Ação
Os botões de ação são usados para realizar algumas funções especificadas no Mapa da IU. As ações são tão variadas quanto as informações que estão sendo exibidas/atualizadas. Abaixo estão dois exemplos comuns:
- Salvar. Normalmente usada em um Mapa da IU de Entrada para permitir que o Usuário salve as alterações feitas por ele.
-
Cancelar. Normalmente usada em um Mapa da IU de Entrada para permitir que o Usuário cancele as alterações em andamento.
...
<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>
...Padrões do Botão
Os pontos a seguir destacam alguns padrões relacionados a botões.
- Os botões são incluídos como uma tabela incorporada.
- Eles devem ser agrupados. Os botões não devem ser colocados em áreas diferentes do Mapa da IU.
- O local dos botões depende principalmente do tipo de Mapa da IU.
- Os Mapas da IU Somente Exibição devem ter uma seção Ações do Registro na parte superior direita do mapa.
- Os Mapas da IU de Entrada devem exibir os botões no rodapé do mapa, após todos os campos de entrada.
Estilos Disponíveis
Os estilos estão todos contidos nas folhas de estilo CSS referenciadas. Eles são aplicados pelo atributo "class" do HTML. As definições de estilo reais usadas não estão documentadas aqui, pois podem ser ajustadas. Esta seção só especifica quando um estilo em particular deve ser usado.
| Estilo | Comentários |
Exemplo |
|---|---|---|
| oraButton | Aplicado a elementos <input> cujo tipo é botão. |
|
| oraDisplayCell | Aplicado à tag <td> de uma tabela incorporada. Define a aparência da célula da tabela, não os dados contidos na célula. |
|
| oraEmbeddedTable | Aplicado à tag <td> que conterá a tabela incorporada. |
|
| oraError | Este estilo é aplicado a elementos identificados como "elementos de erro". Para obter mais informações, consulte Exibir Erros.
Observação: Este estilo normalmente não é aplicado diretamente no HTML do Mapa da IU.
|
|
| oraErrorText | Este estilo é aplicado aos elementos envolvidos em mensagens de erro. |
|
| oraGridColumnHeader | Este estilo é aplicado às tags <td> que definem cabeçalhos de coluna dentro da tabela incorporada. |
|
| oraGridColumnHeaderButton | Este estilo é aplicado às tags <td> que definem cabeçalhos de coluna para os botões "+" e "-" usados em tabelas incorporadas editáveis. |
|
| oraInput | Este estilo é aplicado a campos de entrada:
Observação: Este estilo normalmente pode ser omitido, pois os estilos de entrada são aplicados automaticamente quando oraSchemaDataTypes="true".
|
|
| oraInputMoney | Este estilo é aplicado a campos de entrada:
Observação: Este estilo normalmente pode ser omitido, pois os estilos de entrada são aplicados automaticamente quando oraSchemaDataTypes="true".
|
|
| oraInputNumber | Este estilo é aplicado a campos de entrada:
Observação: Este estilo normalmente pode ser omitido, pois os estilos de entrada são aplicados automaticamente quando oraSchemaDataTypes="true".
|
|
| oraLabel | Este estilo é aplicado a campos de rótulo padrão alinhados à direita. Observação: Este estilo normalmente pode ser omitido, pois é aplicado pela tag <col>.
|
|
| oraLabelAlt | Este estilo é aplicado a campos de rótulo padrão apenas se for desejado que o rótulo seja alinhado à esquerda. |
|
| oraLabelCenter | Este estilo é aplicado a campos de rótulo padrão apenas se for desejado que o rótulo esteja alinhado no centro da célula. |
|
| oraLink | Este estilo é aplicado a referências de chave externa (links). Ele é adicionado automaticamente pela estrutura do Mapa da IU, mas também pode ser usado manualmente, se desejado. |
|
| oraNormal | Este estilo é aplicado a campos de dados padrão (somente exibição) alinhados à esquerda. Observação: Este estilo normalmente pode ser omitido, pois é aplicado pela tag <col>.
|
|
| oraNormalAlt | Este estilo é aplicado a campos de dados padrão (somente exibição) apenas se for desejado que os dados sejam alinhados à direita. |
|
| oraNormalCenter | Este estilo é aplicado a campos de dados padrão (somente exibição) apenas se for desejado que os dados estejam alinhados no centro da célula. |
|
| oraPageTitle | Este estilo é aplicado ao elemento que contém o título da página. Observação: Este estilo normalmente não é aplicado diretamente no HTML do Mapa da IU. O <span> é criado pela estrutura do Mapa da IU quando o Mapa é exibido na área da página.
|
|
| oraSectionEnd | Este estilo é aplicado às tags <td> no final de uma "seção" (grupo de elementos). Ele permite algum espaço para separar a seção das informações que a seguem. Observação: O estilo precisa ser aplicado a ambas as tags <td>, ou o rótulo pode ficar desalinhado com os dados/entrada.
|
|
| oraSectionHeader | Este estilo é aplicado à tag <td> usada para dar um cabeçalho a uma seção dentro das informações em exibição. Ele não contém espaçamento antes ou depois de si mesmo. As classes oraSectionStart e oraSectionEnd são usadas para esse fim. Observação: O cabeçalho da seção deverá ocupar tanto a coluna de rótulo quanto a coluna de dados.
|
|
| oraSectionStart | Este estilo é aplicado às tags <td> no início de uma "seção" (grupo de elementos). Ele permite algum espaço para separar a seção da informação anterior (que muitas vezes é um cabeçalho de seção). Observação: O estilo precisa ser aplicado a ambas as tags <td>, ou o rótulo pode ficar desalinhado com os dados/entrada.
|
|
| oraTableData | Este estilo é aplicado à tag <col> da coluna de dados da tabela principal (a segunda coluna). Ele é usado para informar uma largura percentual para o espaço horizontal a ser usado para as informações. |
|
| oraTableLabel | Este estilo é aplicado à tag <col> da coluna de rótulo da tabela principal (a primeira coluna). Ele é usado para informar uma largura percentual para o espaço horizontal a ser usado para os rótulos. |
|
| oraTinyText | Este estilo é geralmente aplicado abaixo de uma tag <input> para fornecer informações ou uma dica para o usuário a respeito de informações relevantes para a entrada. Por exemplo, nome ou formato de endereço. |
|
| oraZoneMap | Este estilo é usado quando o Mapa da IU é exibido como zona de um portal. |
|
Usando OJET
Há alguns mapas de IU entregues pelo produto que usam widgets de IU fornecidos pelo Oracle JavaScript Extension Toolkit (OJET). As versões do OJET nem sempre se alinham às versões da estrutura. Além disso, algumas vezes o OJET ajusta APIs que o produto usa. A estrutura tentará garantir que cada versão do produto tenha a versão mais recente e melhor das bibliotecas do OJET. Desencorajamos que implementações utilizem recursos no OJET que não sejam utilizados pelo produto, pois o produto não está necessariamente testando esses recursos e, portanto, não garante que as atualizações de APIs desses recursos serão compatíveis com versões anteriores.
Observe que o produto isola as referências ao OJET em um fragmento de mapa de IU que está incluído nos mapas que utilizam widgets OJET. O motivo disso é para que alterações em versões futuras do OJET sejam minimizadas para um local único. O mapa se chama F1–OJETLIBS. Caso sua implementação queira utilizar o OJET, recomenda-se utilizar o fragmento de mapa de IU.