Recomendamos que você utilize as Configurações da Web com sua origem do DDS, para customizar seu aplicativo. Você pode utilizar a guia Configurações da Web do CODE Designer para customizar a aparência e o funcionamento dos programas, quando acessados por meio de um navegador da Web. Os programas que utilizam a origem DDS para descrever telas de vídeo 5250 podem ser acessados com um navegador da Web após a origem DDS ter sido convertida com a Webfacing Tool. Utilize as Configurações da Web quando desejar manipular a apresentação Web de telas individuais e campos individuais dentro das telas. Se você desejar alterar a apresentação Web de várias telas ou de um projeto WebFacing inteiro, utilize o assistente para Estilo. A instalação do CODE Designer é opcional com o WebSphere Development Studio Client para iSeries, V6.0.
Você pode acessar o CODE Designer a partir do menu Iniciar do Windows ou do IDE do Development Studio Client para iSeries. Para carregar a origem DDS no CODE Designer a partir do IDE do Development Studio Client para iSeries:
Depois que um membro de origem DDS tiver sido carregado no CODE Designer, as Configurações da Web poderão ser acessadas clicando nos ícones na Árvore DDS do CODE Designer. A Árvore DDS está localizada no lado esquerdo da janela do CODE Designer. As Configurações da Web também podem ser acessadas selecionando os objetos DDS a partir das guias Detalhes a TELA do CODE Designer.Se as Configurações da Web estiverem disponíveis para o objeto selecionado, a guia Configurações da Web será exibida na área de janela inferior do CODE Designer.
O CODE Designer permite projetar telas DDS graficamente. No CODE Designer, cada objeto DDS é representado por um ícone ou botão de comando. Por exemplo, há botões de comando para que você possa criar facilmente campos ou constantes de texto nomeadas para a sua tela DDS. As Configurações da Web disponíveis para cada objeto DDS variam dependendo do objeto com o qual você está trabalhando. A tabela a seguir lista as Configurações da Web disponíveis para cada objeto DDS. Consulte a seção deste documento Descrições de Configurações da Web para obter mais detalhes sobre cada definição.Quando você utiliza Configurações da Web para um objeto, comentários especiais são incluídos na origem DDS que, posteriormente, são processados pela conversão de WebFacing. Os comentários de Configurações da Web começam com os caracteres *%%WB.
Objeto DDS | Gráfico do CODE Designer | Configurações da Web Disponíveis |
---|---|---|
Registro Padrão | ![]() |
|
Registro de Controle de Subarquivo | ![]() |
|
Campo de Data | ![]() |
|
Campo de Hora | ![]() |
|
Campo de Data e Hora | ![]() |
|
Constante de Mensagem | ![]() |
|
Constante de Data | ![]() |
|
Constante de Hora | ![]() |
|
Constante de Usuário | ![]() |
|
Constante de Sistema | ![]() |
|
Campo Nomeado (capacidade para Entrada) | ![]() |
|
Campo de Continuação (capacidade para Entrada) | ![]() |
|
Campo de Referência de Origem (capacidade para Entrada) | ![]() |
|
Campo de Referência de Banco de Dados (capacidade para Entrada) | ![]() |
|
Campo de Referência de Banco de Dados por Seleção (capacidade para Entrada) | ![]() |
|
Campo Nomeado (Saída) | ![]() |
|
Campo de Continuação (Saída) | ![]() |
|
Campo de Referência de Origem (Saída) | ![]() |
|
Campo de Referência de Banco de Dados (Saída) | ![]() |
|
Campo de Referência de Banco de Dados por Seleção (Saída) | ![]() |
|
Constante de Texto | ![]() |
|
Campo da Data (Oculto) | ![]() |
|
Campo da Hora (Oculto) | ![]() |
|
Campo Denominado (Oculto) | ![]() |
|
Campo Continuado (Oculto) | ![]() |
|
Campo de Referência de Origem (Oculto) | ![]() |
|
Campo de Referência de Banco de Dados (Oculto) | ![]() |
|
Campo de Referência de Banco de Dados por Seleção (Oculto) | ![]() |
Para teclas de função ou de comando na origem DDS, você pode especificar os rótulos do texto para serem utilizados em suas páginas da Web para representar as teclas. Para alterar uma etiqueta, selecione uma etiqueta na lista Etiquetas já definidas, digite o texto preferencial para a tecla no campo Nova Etiqueta e clique em Alterar. Para remover uma etiqueta definida, selecione-a na lista Substituir Etiquetas na Configuração de Web e clique em Remover.
Para teclas de função ou comandos na origem DDS, você pode especificar se as teclas estarão visíveis nas páginas da Web, bem como a ordem em que elas serão exibidas. Para trabalhar com essa definição, marque a caixa de opções Pedido de mudanças e visibilidade das teclas de comando. Para tornar uma chave visível, selecione-a na lista Ocultar e clique no botão de seta para movê-la até a lista Exibir ordem. Para ocultar uma tecla, selecione-a na lista Exibir ordem e clique na seta para movê-la até a lista Ocultar. Se mais de uma tecla estiver disponível na lista Exibir Ordem, a ordem na qual ela será exibida poderá ser alterada selecionando essa tecla e clicando nos botões de Seta para Cima ou Seta para Baixo. Se a caixa de opções Pedido de mudanças e visibilidade das teclas de comando não estiver selecionada, as teclas definidas serão mostradas em ordem numérica.
A definição Tamanho da exibição estará disponível se
um tamanho de exibição secundário tiver sido selecionado para
seu arquivo de exibição. Tamanhos de exibição secundários podem ser configurados por meio do diálogo de propriedades do ícone de nó de arquivo na Árvore DDS. Utilize a configuração da Web
Tamanho da exibição para alterar o tamanho da tabela HTML
que será utilizada para exibir seu aplicativo
em um navegador.
As opções disponíveis para a definição de Disponibilidade são Ocultar Campo ou Mostrar Campo. Se a opção Mostrar Campo for escolhida, o campo será exibido nas páginas da Web.
As opções disponíveis para a Definição de local são Alterar extensão e Alterar posição. Depois que sua origem DDS tiver sido convertida com a Webfacing Tool, seu aplicativo será posicionado em uma página da Web utilizando a tabela HTML. Essa tabela tem o mesmo número de linhas e colunas que a sua tela DDS, ou seja, 24 por 80 ou 27 por 132. Com as definições de local, é possível alterar a maneira como os campos serão posicionados na tabela HTML após a conversão da origem.
A visualização da tela do CODE Designer mostra o layout de linha e coluna para a origem DDS. Utilize essa visualização para ter uma idéia de como os campos serão posicionados entre si se você fizer alterações com Alterar extensão e Alterar posição.
Com a definição HTML definido pelo programa, marque a opção Utilizar Valor do Campo como HTML se o valor retornado pelo campo for uma marcação HTML que você deseja utilizar na sua página.
A definição de HTML definida pelo usuário permite especificar texto ou tags HTML que podem ser exibidas com o valor do campo ou em substituição a esse valor. Para trabalhar com essa definição, marque a caixa de opções Especificar HTML. Na área de entrada, digite as marcações HTML que você gostaria de utilizar. Se você quiser utilizar o valor do campo como parte do HTML, clique no botão Inserir Valor do Campo. Um exemplo de como utilizar essa definição seria se você quisesse que o valor do campo fosse exibido com uma fonte em negrito. Para fazer isso, utilize a tag <BOLD> com o texto &{FIELD.value}. Com esse exemplo, edite a área de entrada para que ela exiba <BOLD>&{FIELD.value}</BOLD>. Se o código de &{FIELD.value} não estiver lá por padrão, ele poderá ser adicionado clicando-se no botão Inserir Valor do Campo.
As opções disponíveis para a definição de Aparência e Texto são Alterar Classe de Estilo, Substituir Valor de Campo, Substituir Texto da Constante e Ocultar Caracteres:
A definição de Inserir HTML fornece um meio de customizar campos com a inclusão de um HTML adicional. O HTML pode, opcionalmente, ser incluído Antes, Dentro e Depois da marcação HTML que é gerada automaticamente para o campo. Como exemplo, é possível ter um campo de entrada para números de funcionários e em sua empresa todos os números de funcionários têm o prefixo 64-. É possível ria tornar o campo mais fácil de ser utilizado incluindo algum HTML, como:
Nesse exemplo, o HTML Antes do campo fornece informações sobre o campo e utiliza a tag <strong>, para que as informações sejam enfatizadas com uma fonte em negrito. Como o HTML gerado por conversão utiliza a tag <input> para campos de entrada, Dentro da tag <input> podemos incluir o atributo HTML value="64-" para que o campo já tenha o prefixo do número do funcionário preenchido e os usuários não precisem inseri-lo. Depois do campo é o HTML para um link que os usuários podem clicar para obter mais informações sobre o campo.
Assegure-se de testar completamente as páginas que você alterando com a definição Inserir HTML.As alterações que você faz podem conflitar com o HTML que é gerado pela conversão de WebFacing. Uma maneira de solucionar isso seria converter o programa sem utilizar as Configurações da Web, consultar a origem do .html ou .jsp que é gerada para saber quais alterações podem ser feitas seguramente com as definições da Web, aplicar as definições da Web e, em seguida, convertê-las novamente.
A configuração de Opções para VALUES está disponível para campos de entrada que são especificados com a palavra-chave VALUES. Os campos que são especificados com a palavra-chave VALUES são exibidos em páginas da Web como uma única caixa de seleção de opções. As opções exibidas na caixa de seleção são os valores fornecidos como parâmetros para a palavra-chave VALUES em sua origem DDS.
A configuração da Web de Opções para VALUES permite alterar a etiqueta ou o texto que aparece ao usuário. Por exemplo, se um dos parâmetros VALUES que o programa está esperando for "item8", é possível alterar o texto exibido em um navegador para algo mais descritivo, como por exemplo "fio de calibre 8". Enquanto o texto exibido para o usuário seria "fio de calibre 8", o valor retornado para seu programa seria o mesmo "item8" que o programa esperava.
Para utilizar essa configuração da Web, marque a caixa de opções Opção de textos para a palavra-chave VALUES. Para configurar uma nova etiqueta para um parâmetro VALUES, selecione esse valor e digite o texto desejado para a etiqueta no campo Nova Etiqueta.
Utilize a definição de Criar gráfico se quiser exibir uma imagem no lugar do campo. Um exemplo de uso desta definição seria um banco de dados do produto que inclui imagens de itens inventariados.
Ocupe o campo Nome do arquivo com o caminho completo para um arquivo de imagem em sua estação de trabalho ou com a URL completa para um arquivo de imagem (por exemplo, http://www.ibm.com/image.gif). O campo Nome do arquivo pode ser ocupado digitando um valor diretamente ou utilizando o botão Procurar para localizar um arquivo local.As imagens locais especificadas serão copiadas para o diretório ..\Web Content\images\generated\ de seu projeto WebFacing durante a conversão de WebFacing. As imagens neste diretório são publicadas posteriormente no servidor WebSphere, quando você implementa seu projeto com o assistente para Exportar.
As definições Largura em Pixels e Altura em Pixels poderão ser utilizadas se você conhecer as dimensões de uma imagem. A inclusão de informações de largura e altura pode, às vezes, diminuir o tempo necessário para processar páginas da Web que contêm imagens.
Se houver campos no programa que retornam valores que podem ser utilizados como parte do nome do arquivo de imagem, ou a URL completa para um arquivo de imagem, esses valores poderão ser incluídos no campo Nome do Arquivo selecionando o campo na lista Escolher um Campo e clicando em Inserir Valor do Campo. Por exemplo, se você tivesse &{FIELD1.value} que retornasse o valor bicycle1, poderia facilmente fazer referência a um gráfico bicycle1.gif que estivesse sendo utilizado na estação de trabalho. Nesse exemplo, preencha o campo Nome do Arquivo a partir da lista Escolher um Campo e, em seguida, inclua a extensão .gif. Os arquivos identificados com o uso da lista Escolher um Campo devem ser manualmente copiados para o diretório ..\Web Content\images\generated\.
Utilize a definição de Criar hyperlink para que o campo seja exibido como um hyperlink. Existem três abordagens diferentes disponíveis para a criação de hyperlinks. Elas são: Especificar URL Estática, Hyperlink JavaScript e Hyperlink de Ação. Se você quiser substituir as definições do navegador para a aparência de hyperlinks, marque a caixa de opções Substituir aparência do hyperlink do navegador pela aparência DDS. Se você utilizar a definição de Criar hyperlink junto com a definição de Criar gráfico, o campo poderá ser exibido como um gráfico que também serve como um hyperlink.
A maioria dos navegadores segue uma convenção para a cor e aparência dos hyperlinks em páginas da Web ou tem definições para aparência de hyperlink que os usuários podem alterar. Por exemplo, links não visitados podem ser exibidos em texto azul e links visitados podem ser exibidos em texto púrpura. Se você quiser que o navegador exiba o hyperlink com a mesma aparência que a utilizada para o campo no DDS, marque a caixa de opções Substituir aparência do hyperlink do navegador pela aparência DDS.
Se houver uma URL específica que você deseja exibir para um campo, selecione a configuração de Especificar URL estática. O valor de saída do seu campo será o texto exibido como um hyperlink. O local carregada pelo navegador quando um usuário clica no link é o valor digitado no campo URL. Se desejar que o link lance uma janela de navegador separada quando for clicado, digite o nome da janela no campo Destino. Se você deixar o campo Destino vazio ou digitar *SAME, o link será aberto na janela do navegador atual.
Se você estiver trabalhando com um projeto de portlet do WebFacing utilizando o
WebSphere Development
Studio Client Advanced Edition para iSeries, V5.1.2, poderá especificar *PORTLET
no campo Destino para abrir o link dentro do portlet.
Digite o nome de uma função JavaScript que deseja que seja chamada quando o link for clicado. Por exemplo, digite myFunction(). A função pode ser uma função que você inseriu utilizando a configuração da Web Inserir no script, uma função definida em um arquivo JavaScript externo ou uma função incluída no WebFacing no arquivo webface.js. Se criar seus próprios arquivos JavaScript externos, coloque-os no diretório usr de seu projeto WebFacing. Esse diretório está localizado no caminho <project name>\WebContent\ClientScript\usr. Todos os scripts que você colocar nesse diretório estarão disponíveis para seu aplicativo do WebFacing no tempo de execução. Se você tiver uma função JavaScript pequena em linha, é possível digitar a função inteira no campo Hyperlink JavaScript.
As entradas em Posicionar o Cursor no Campo podem ter o seguinte formato:
As entradas no campo Digitar Dados podem ter o seguinte formato:
Você também pode digitar valores manualmente no campo Digitar Dados.
Se a caixa de opções Enviar estiver selecionada, você poderá escolher uma ação de envio Tecla de Função ou Chamada de Função JavaScript para o hyperlink. Por exemplo, na lista drop-down Tecla de Função, é possível escolher ENTER, LOGOFF ou uma tecla de função definida no DDS. Se houver uma tecla de função de outro registro DDS que você gostaria de utilizar, digite manualmente o valor para a tecla de função. Quando o usuário clicar em um link que você criou para uma tecla de função, o programa executará essa função. No campo Chamada de função JavaScript, você pode digitar o nome de uma função JavaScript que deseja que seja executada quando o link for clicado. A função pode ser uma função que você inseriu utilizando a configuração da Web Inserir no script, uma função definida em um arquivo JavaScript externo ou uma função incluída no WebFacing no arquivo webface.js. Se criar seus próprios arquivos JavaScript externos, coloque-os no diretório usr de seu projeto WebFacing. Esse diretório está localizado no caminho <project name>\WebContent\ClientScript\usr. Todos os scripts que você colocar nesse diretório estarão disponíveis para seu aplicativo do WebFacing no tempo de execução.
Você pode combinar a opção Posicionar o Cursor no Campo com a opção Enviar. Faça isso se desejar definir o valor para um campo específico e enviar este valor de volta ao seu programa. Para fazer isso, marque a caixa de opções Posicionar o Cursor no Campo, escolha um campo na lista drop-down (ou digite um campo); no campo Digitar Dados, escolha {FIELD.value} (ou digite um valor específico), marque a caixa de opções Enviar, selecione o botão de rádio Tecla de Função e escolha ENTER no menu drop-down Tecla de Função. Para obter informações sobre o formato de entrada a ser utilizado para os campos Posicionar o Cursor no Campo e Digitar Dados, consulte a seção deste documento Posicionar o Cursor no Campo.
if(&{CID}.value="") { &{CID}.value="0001"; }Neste exemplo, o código &{CID} faz referência a um CID de campo que foi selecionado com o botão Inserir Nome do Campo. Os campos no botão Inserir Nome do Campo são delimitados por um e comercial e dois parênteses, por exemplo: &{FIELDNAME}. Outros exemplos seriam um código JSP que determina o endereço IP de um usuário do WebFacing ou um javascript que exibe a hora do dia do sistema do usuário. Você pode utilizar Inserir no Script junto com a definição Enviar para Navegador. Por exemplo, é possível utilizar valores determinados por seus scripts para ocupar campos ocultos para os quais você utilizou a definição Enviar para navegador. Se houver um campo existente no DDS que você deseja utilizar como parte do seu script, inclua-o nesse script com o botão Inserir Nome do Campo. Por exemplo, é possível selecionar um campo oculto ou H e utilizá-lo no script para que um valor possa ser atribuído a ele.
A definição Enviar para o Navegador pode ser utilizada para campos DDs ocultos ou H. Essa definição modifica os arquivos JSP gerados para seu registro. Por exemplo, se você tiver um campo H em um registro denominado LISTCTL, quando essa definição for utilizada, um elemento de forma de entrada oculto HTML será gerado no arquivo JSP LISTCTL.jsp. Os elementos de forma de entrada ocultos começam com o código HTML <INPUT TYPE="hidden" . Utilizando Enviar para navegador permite que um campo H se torne parte do ambiente do navegador e que valores sejam atribuídos a ele com base nesse ambiente. Por exemplo, o endereço IP de um usuário determinado por um script que você incluiu utilizando a definição Inserir no script.
A definição Etiqueta de Tecla Dinâmica pode ser utilizada para determinar a etiqueta de texto de uma tecla de comando em tempo de execução. Essa definição só está disponível para campos de saída. Com essa definição, uma chave de comandos é associada ao campo de saída e o texto para a chave de comandos é determinado pelo valor do tempo de execução do campo. Um exemplo de utilização é se o seu aplicativo deve suportar mais de um idioma e você deseja que o texto da chave de comandos apareça no idioma nativo do usuário. Uma maneira de fazer isso é ter um MSGF por idioma que contenha as cadeias de texto utilizada pelo aplicativo e colocar cada MSGF em uma biblioteca específica do idioma. Se o valor do campo de saída for lido a partir do MSGF, é possível alterar o idioma do texto exibido no campo digitando a biblioteca que contém o MSFG para o idioma do seu usuário em um ponto mais alto da lista da biblioteca no perfil do usuário. Subseqüentemente, o rótulo da chave de comandos será exibido n idioma do usuário.
Prefixo | Separador |
---|---|
F | = |
FP | = |
CF | = |
CA | = |
PF | = |