>> Mais documentação do Visual Web Pack

Examinando componentes

Fevereiro de 2007 [Número da revisão: V1-2]

Os componentes são os blocos de construção das páginas da Web interativas. Este tutorial oferece o conhecimento básico necessário para tirar o máximo proveito dos componentes fornecidos com o Visual Web Pack. Após familiarizar-se com os princípios gerais, examine a fundo os tutoriais individuais de cada componente para adquirir conhecimentos mais específicos. Você também pode pressionar F1 sobre qualquer componente da Paleta para acessar informações fundamentais sobre tal componente. Este tutorial estende-se sobre os conceitos introduzidos em Guia de introdução do NetBeans Visual Web Pack 5.5 e Desenvolvendo um aplicativo da Web.

Conteúdo -  O que é um componente -  Informações gerais -  Componentes de saída -  Componentes de entrada -  Componentes de ação e de vinculação -  Componentes de layout -  Componentes não visuais -  Resumo

Este tutorial funciona com as tecnologias e os recursos seguintes

Componentes JavaServer Faces/ Plataforma Java EE	1.2 com Java EE 5* 1.1 com J2EE 1.4
Banco de dados Viagem	Não é necessário
Biblioteca de componentes BluePrints Ajax	Não é necessário

* Na data da publicação deste tutorial, somente o servidor de aplicativos Sun Java System oferecia suporte ao Java EE 5.

Este tutorial foi adaptado para ser usado com o Servidor de aplicativos Sun Java System PE 9.0, versão atualizada 1, e o Tomcat 5.5.17. Se você estiver usando um servidor diferente, consulte as Notas de versão e as Perguntas freqüentes para obter informações sobre problemas conhecidos e soluções sugeridas. Para obter informações detalhadas sobre os servidores suportados e a plataforma Java EE, consulte as Notas de versão.

O que é um componente

Para criar uma página HTML estática, não é necessário muito tempo nem um profundo conhecimento do assunto. Entretanto, ao começar a construir páginas dinâmicas e interativas, você entra em um terreno mais complexo. Você deve saber usar JavaScript para interações no lado do cliente e deve escrever o código Java e as marcas JavaServer Pages (JSP) para interações e validações no lado do servidor. Unido a isso se encontram as inconsistências no modo em que diferentes navegadores exibem as marcas, o que pode fazer diminuir a sua produtividade.

Os componentes baseados em JavaServer Faces que o Visual Web Pack oferece reduzem a complexidade da construção de páginas da Web interativas, bem como aceleram o ciclo de desenvolvimento. Além disso, o Visual Web Pack permite usar estes componentes sem que seja necessário um conhecimento mais complexo da tecnologia JavaServer Faces.

Os componentes são supermarcas. Isto é, você não obtém apenas a marca processada, como uma Lista suspensa, mas sim uma marca bem-feita, fácil de decorar e que gera eventos, que podem ser manipulados com o simples código Java. O componente Campo de texto, por exemplo, funciona com a estrutura JavaServer Faces para converter e validar a entrada, bem como para transmitir eventos de alteração e validação.

Além disso, com apenas dois cliques, você pode vincular uma propriedade do componente a uma propriedade do Bean ou a um empacotador de provedor de dados de uma fonte de dados, independentemente de a fonte de dados ser um banco de dados, um serviço da Web, uma matriz ou uma lista. Usando os recursos de vinculação, você não precisa escrever o código para preencher os valores do componente ou para salvar os valores do componente nos objetos vinculados.

O componentes incorporados oferecem elementos interessantes que não podem ser obtidos com marcas HTML comuns. Por exemplo, o componente Tabela, mostrado na figura abaixo, vem com colunas classificáveis e paginação automatizada.

Figura 1: Componente Tabela

 

O Visual Web Pack oferece dois conjuntos de componentes incorporados. Um conjunto está construído sobre a tecnologia JavaServer Faces 1.1 e o outro sobre a tecnologia JavaServer Faces 1.2. A Paleta oferece os componentes compatíveis com a versão do Java EE definida para o projeto de aplicativo da Web. Quando a versão do Java EE é definida como Java EE 5, a Paleta fornece os componentes compatíveis com o JavaServer Faces 1.2. Quando a versão do Java EE é definida como J2EE 1.3 ou 1.4, a Paleta fornece os componentes compatíveis com o JavaServer Faces 1.1.

Este tutorial concentra-se principalmente nos componentes que se encontram nas seções Básico, Layout e Composto da Paleta, como mostrado na figura abaixo.

Figura 2: Seções Básico, Layout e Composto

Observação: A seção Padrão da Paleta contém os componentes de implementação de referência do JavaServer Faces. Pelo fato de os componentes padrão oferecerem menos funcionalidade e exigirem mais programação, você deve usar os componentes visuais de outras seções da Paleta.

Observação: A Paleta oferece o componente Formulário. Este tutorial não trata do componente Formulário. Na maioria dos casos, o mecanismo de formulário virtual é a melhor maneira de lidar com múltiplos formulários em uma página.

Informações gerais

Esta seção oferece informações que se aplicam à maioria dos componentes ou a todos eles. O restante do tutorial está dividido em cinco seções (saída, entrada, ação e vinculação, layout e não visual), como mostrado na figura abaixo.

Figura 3: Cinco tipos de componentes

Propriedades do componente

A janela Propriedades é usada para especificar o comportamento e a aparência de um componente. Por exemplo, a propriedade rows do componente Caixa de listagem é usada para especificar o tamanho da caixa de listagem processada e a propriedade multiple para especificar se o visitante da página pode selecionar mais de um item da lista.

O Visual Web Pack oferece também ações de menu para as tarefas comuns de cada componente. Por exemplo, o componente Imagem possui um item de menu Definir imagem, o componente Texto estático possui um item de menu Editar texto e o componente Lista suspensa possui um item de menu Editar rótulo.

A tabela seguinte descreve as propriedades comuns para o controle do comportamento e da aparência do componente. As seções seguintes tratam de temas específicos dos diferentes tipos de componentes.

Propriedade	Descrição
id	Cada componente deve ter um id único para a página. O IDE cria um id quando você adiciona o componente à página. Você pode querer alterar o id de um componente nos seguintes casos: O componente é um componente de entrada. Dê ao componente um id que corresponda à propriedade ou à coluna à qual ele está vinculado, como personIdDropDown. O componente, tal como um botão, gera eventos de ação. Defina o id com um nome de verbo que corresponda ao rótulo do componente, como submitButton. Você tem muitos componentes do mesmo tipo na página e precisa escrever o código-fonte Java para definir ou acessar os valores da propriedade de alguns componentes. Por exemplo, é mais fácil entender o código se você usar como referência nameTF e addressTF em vez de textField1 e textField2.
toolTip	Use esta propriedade para especificar o texto que será exibido quando o visitante da página passar o cursor sobre o componente.
style	Use a propriedade style para alterar as seguintes configurações: Fonte Plano de fundo Bloco de texto Borda Margem Posição O botão de reticências (...) da propriedade style abre um editor de estilo, que facilita a alteração de configurações e a visualização dos resultados. Para exibir uma descrição de como usar este editor, clique no botão Ajuda na parte inferior do editor. Em geral, o IDE define a altura, a largura, ou ambos, quando você redimensiona o componente. Se a página estiver no modo Layout de grade, o IDE define os valores da posição quando você solta e reposiciona o componente na página. Às vezes, são vistas propriedades reais semelhantes às configurações de estilo, como bgcolor ou border. Estes atributos são atributos de estilo padrão do HTML 4. A propriedade style é uma melhora destes atributos padrão e oferece um mecanismo mais adequado para configurar a aparência do componente. O conjunto de componentes implementa o Tema padrão de UI da Web, que é um conjunto coordenado de folhas de estilo em cascata (CSS). Você pode substituir muitos dos recursos de estilo do tema, porém não todos, fazendo configurações de estilo. Por exemplo, a propriedade style pode ser usada para definir a cor de plano de fundo de uma tabela ou definir a cor da fonte da propriedade label. Esta afirmação é verdadeira especialmente quando as configurações entram em conflito com o tema do componente. Também, em alguns casos, a área específica é oculta por outros componentes filhos que podem ter configurações de estilo diferentes.
styleClass	Cada projeto tem um tema, que é um conjunto de folhas de estilo em cascata (CSS), de arquivos JavaScript e de imagens de ícones. O Visual Web Pack oferece o Tema padrão de UI da Web. Para adicionar seu próprio estilo ao tema, use o editor de folha de estilo ou coloque folhas de estilo na pasta resources do projeto. A lista suspensa da propriedade styleClass mostra todas as classes de estilo de todas as folhas de estilo usadas pelo aplicativo. Normalmente, esta propriedade não é usada a não ser que você queira selecionar uma classe de estilo da sua própria folha de estilo. As configurações de styleClass são aplicadas como complemento às classes de estilo do tema do componente.
visible	A propriedade visible especifica se um componente processado está visível na página. Quando a propriedade visible está definida como falsa (false), ela não aparece na página processada, mas continua aparecendo na HTML produzida (a fonte da página), seu valor é enviado e todas as conversões, validações e gerações de eventos continuam ocorrendo.
rendered	Se a propriedade rendered do componente for definida como falsa (false), o componente será removido da HTML produzida e o componente não estará disponível para o cliente. Você não pode fazer referência ao componente a partir do JavaScript e não há conversões, validações e gerações de eventos quando a página é enviada.

Definindo os valores do componente

Todos os componentes de entrada e saída são componentes que retêm os valores. Por exemplo, o componente Campo de texto retém o texto e uma Caixa de listagem retém os valores selecionados. Há várias formas de definir os valores dos componentes de entrada e saída:

• Definir a propriedade de retenção de valor do componente. Na janela Propriedades, clique no botão de reticências (...) da propriedade de retenção de valor para abrir o editor de texto. Em muitos componentes de entrada e saída, você também pode selecionar o componente no Visual Designer e digitar o valor do componente. O menu pop-up da propriedade de retenção de valor contém itens do menu Editar para textos editáveis do componente.
• Chamar o método setter do componente a partir do código-fonte do Bean de página. Por exemplo, você chama o método setText para definir o valor de um componente Campo de texto e o método setSelected para definir os valores de um componente Caixa de listagem. Algumas ocasiões comuns para chamar o método setter são no pré-processo, na pré-renderização, na alteração de valor e nos métodos de ação.
• Vincular o componente a um provedor de dados ou a uma propriedade de Bean. Consulte a próxima subseção para obter mais informações sobre a vinculação de componentes a dados.

Observação: Assim como na implementação do JavaServer Pages, quando o servidor constrói uma página da fonte JSP, as configurações do atributo de marca na fonte JSP têm prioridade sobre as configurações do tempo de execução. Por exemplo, se você definir a propriedade text de um componente Texto estático como "lua", o IDE adiciona text="lua" à marca do componente Texto estático no arquivo JSP. Mesmo se o método prerender da página tiver uma instrução staticText1.setText("sol"), o componente Texto estático mostra "lua" quando o aplicativo processa a página. Se a página está processada, a instrução staticText1.setText("sol") faz efeito e o componente Texto estático exibe "sol". Se você visitar outra página e voltar, o servidor constrói a página outra vez a partir da fonte JSP, os valores definidos nos atributos de marca JSP têm prioridade e a página exibe "lua".

Dica: Para garantir que o código de configuração da propriedade sempre faça efeito, não defina esta propriedade como valor estático na janela Propriedades.

Vinculando a dados

Você pode vincular muitos componentes de entrada e saída a objetos de dados. A vinculação de componentes a dados permite que o aplicativo da Web sincronize automaticamente o valor do componente com o valor do destino de vinculação. Por exemplo, se você vincular um componente a uma propriedade de Bean, o aplicativo da Web define o valor do componente como o valor da propriedade de Bean quando o aplicativo processa a página e, quando a página é enviada, o aplicativo da Web altera o valor da propriedade de Bean para que coincida com as alterações feitas no valor do componente.

O Visual Web Pack inclui empacotadores de provedor de dados em tabelas de banco de dados, serviços da Web, objetos Enterprise JavaBeans, mapas, matrizes e listas. Você associa um provedor de banco de dados a um objeto de dados e vincula os componentes ao provedor de banco de dados. Uma das vantagens no uso de provedores de dados é que eles oferecem uma interface comum para acessar todos os tipos de dados.

Para criar um provedor de dados para uma tabela de banco de dados, arraste a tabela de banco de dados da seção Banco de dados da janela Tempo de execução e solte-a na página ou sobre um componente da página. O IDE cria um provedor de dados de tabela com conjuntos de linhas em cache para a tabela de banco de dados.

Para obter mais informações sobre a vinculação e os provedores de dados, consulte o tutorial Usando componentes de vinculação de dados para acessar um banco de dados.

Convertendo valores

O Visual Web Pack oferece vários conversores que podem ser aplicados na maioria dos componentes de entrada e saída. Um conversor transforma o valor do objeto em uma String para que o valor possa ser escrito em uma resposta HTML. Inversamente, um conversor reconverte valores da String da solicitação HTML no tipo de dados especificado, como Booleano ou Flutuante.

Observação: O aplicativo da Web realiza automaticamente a conversão apropriada para qualquer componente vinculado aos dados. Por exemplo, se um componente Campo de texto está vinculado a um objeto Inteiro, o aplicativo da Web converte automaticamente o valor de entrada (uma String) em um Inteiro.

Componentes de saída

O Visual Web Pack oferece vários componentes de saída, como mostrado na figura abaixo. Estes componentes estão classificados em três grupos: texto, mensagem e imagem. Os componentes de saída de texto são usados normalmente para aplicar textos em uma página. Os componentes de saída de mensagem são usados para responder a entrada do usuário ou para outros tipos de ações dinâmicas. O componente Imagem é usado para exibir um repositório de valores de pixel, como um arquivo jpg ou um arquivo gif.

Figura 4: Componentes de saída

Componentes de saída de texto

O Visual Web Pack fornece três componentes de saída de texto.

Componente de saída Texto	Uso
Texto estático	O componente Texto estático é usado quando se quer simplesmente exibir um texto na página.
Rótulo	O componente Rótulo é usado para associar o texto a um componente de saída. Você associa um componente Rótulo a um componente de entrada definindo a propriedade for do componente Rótulo. Ao associar um componente Rótulo a um componente de entrada, o componente Rótulo fica "mais inteligente". Especificamente, se a propriedade required do componente for true, o componente Rótulo exibe um asterisco. Se o servidor recusar o registro da página devido à entrada ser inválida, a página irá realçar o componente Rótulo do texto. Embora os componentes de entrada apresentem as propriedades label, é melhor você não usar o componente Rótulo porque, quando definir a propriedade label do componente de entrada, você não poderá redimensionar ou corrigir o alinhamento de tal componente. Além disso, há mais opções de estilo nos componentes Rótulo.
Ajuda in-line	O componente Ajuda in-line é usado para exibir informações curtas do tipo ajuda em uma página.

Componentes de saída de mensagem

O Visual Web Pack fornece os componentes de saída abaixo para a exibição de vários tipos de mensagens. Com exceção do componente Alerta de página, estes componentes aparecem somente na página processada quando seus valores não forem nulos.

Componente de saída de mensagem	Uso
Alerta	O componente Alerta é usado para exibir informações dinâmicas, como avisos, erros, status de êxito ou informacional sobre a conclusão de algum evento. Você pode exibir um ícone de erro, de informação, de aviso ou de êxito no texto resumido. Você também pode exibir opcionalmente texto detalhado e um hyperlink. As propriedades summary e detail são usadas para definir o texto do componente e a propriedade type, para especificar que ícone será exibido. O componente aparece na página somente quando a propriedade summary tiver um valor. Você pode adicionar um hyperlink opcional especificando os valores linkText e linkURL. O valor linkText não aparece no componente a menos que a propriedade detail apresente um valor. Para especificar a navegação dinâmica de página de um link, siga as etapas seguintes: Defina a propriedade linkText. Use o editor de Navegação de página para criar um conector entre a porta do conector da página e a página de destino. Dê um nome ao conector, como alertOutcome. Passe para o Visual Designer e clique duas vezes no componente Alerta. O IDE cria um método manipulador de eventos de ação e coloca o editor de Java no método. Altere a instrução de retorno do método para retornar o nome que você atribuiu à linha de conexão, como alertOutcome. Observe como este procedimento é um pouco diferente das etapas dos outros componentes de ação conforme o descrito em Componentes de ação e de vinculação. Isso porque o Navegador de página admite somente conectores de páginas e dos componentes que estendem UICommand. O componente Alerta não estende UICommand.
Alerta da página	O componente Alerta da página é semelhante ao componente Alerta e destina-se à exibição de mensagens dinâmicas em uma página à parte. O Alerta da página possibilita escolher os ícones de erro, aviso, informação e pergunta. As propriedades title, summary e detail são usadas para definir o texto do componente e a propriedade type, para especificar que ícone será exibido.
Mensagem	O componente Mensagem é usado para exibir mensagens de erro de um componente de entrada. Para associar um componente Mensagem a um componente de entrada, defina a propriedade for do componente Mensagem. O aplicativo envia mensagens sobre erros de conversão e validação ao componente Mensagem. Para enviar sua mensagem de validação a um componente, lance uma das seguintes exceções: ValidatorException(new FacesMessage(summary)). ValidatorException(new FacesMessage(summary, detail)). ValidatorException(new FacesMessage(severity, summary, detail)). Para o argumento de gravidade, você pode passar FacesMessage.SEVERITY_INFO, FacesMessage.SEVERITY_WARN, FacesMessage.SEVERITY_ERROR ou FacesMessage.SEVERITY_FATAL. Com o conjunto de componentes JavaServer Faces 1.2, você pode substituir as mensagens de erro padrão chamando os métodos requiredMessage, converterMessage e validatorMessage do componente para especificar as mensagens personalizadas.
Grupo de mensagens	O componente Grupo de mensagens é usado para exibir erros no tempo de execução. Também é possível exibir erros individuais do componente, como erros de conversão e validação, desmarcando a caixa de seleção da propriedade showGlobalOnly. Os componentes Grupo de mensagens são úteis também para diagnosticar erros de programação. Para escrever o seu texto neste componente, chame info(String summary), warn(String summary), error(String summary) ou fatal(String summary). O aplicativo da Web aplica diferentes estilos ao texto, dependendo do grau de seriedade do método. Para escrever uma mensagem resumida e uma detalhada, use FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(summary, detail)) ou ValidatorException(new FacesMessage(severity, summary, detail)). Você deve marcar a caixa de seleção showDetail do componente para que as mensagens detalhadas sejam exibidas.

Assim como os componentes de saída de texto, você pode definir programaticamente os valores de saída dos componentes Alerta da página e Alerta chamando o setter da propriedade adequada. Por exemplo, para definir o texto resumido do componente Alerta da página, chame setSummary(String). Você também pode vincular estas propriedades às propriedades do Bean gerenciado e aos campos do provedor de dados.

Componente Imagem

O componente Imagem é usado tanto para exibir uma imagem gráfica especificada pela propriedade url quanto para exibir um dos ícones fornecidos, como ALARM_CRITICAL_MEDIUM ou ALERT_OK_SMALL, que você pode escolher na lista suspensa da propriedade icon.

Figura 5: Exemplos do componente Imagem

A propriedade url pode conter o URL para uma imagem na Internet ou pode levar a um arquivo de imagem na pasta resources do projeto, como /resources/images/duke.gif. Você também pode vincular a propriedade url à propriedade do Bean gerenciado ou ao campo do provedor de dados que retorna o caminho para o URL no formato String. Ao clicar no botão de reticências (...) para obter a propriedade url, você pode selecionar o botão de opção Usar vinculação para vincular a propriedade a um objeto de dados ou selecionar o botão de opção Usar valor para especificar um arquivo de imagem. Se a imagem ainda não estiver na pasta de recursos, clique em Adicionar arquivo para determinar o local do arquivo e copiá-lo na pasta. Como alternativa, você pode digitar um URL válido na caixa de texto da propriedade.

Dica: Quando você especificar um URL para uma imagem empacotada com o aplicativo da Web, use um URL relacionado ao contexto. Isto é, inicie o URL com uma barra inclinada (/), como /resources/images/dot.gif. Ao usar um URL relacionado ao contexto, você faz o servidor converter o URL em um URL completo antes que a página seja processada e enviada ao cliente. Se você não iniciar com a barra inclinada, a interpretação é realizada no lado do cliente e o cliente coloca o URL do local da página atual para o URL da imagem. Se a página estiver em uma subpasta, o URL pode não ser separado corretamente quando as solicitações forem encaminhadas (o mecanismo de envio padrão).

Componentes de entrada

Como mostrado na figura abaixo, o Visual Web Pack oferece diferentes formas de obter a entrada do usuário. Esta seção descreve os componentes de entrada, trata dos recursos comuns destes componentes e explica como obter e processar os valores de entrada.

Figura 6: Componentes de entrada

O Visual Web Pack fornece os seguintes componentes de entrada.

Componente de entrada	Uso
Componentes de entrada de texto	O componente Campo de texto é usado para inserir uma única linha de texto e o componente Área de texto, para entrada de várias linhas. Use o componente Campo de senha para um campo de entrada que devolve os caracteres de entrada com um caractere de substituição para mascarar a entrada.
Componentes de seleção	Os componentes Grupo de botões de opção, Grupo de caixas de seleção, Lista suspensa, Caixa de listagem e Lista de adicionar/remover são muito parecidos. Todos oferecem uma lista de itens (valores de exibição) na qual o visitante da página pode realizar uma ou mais seleções. Cada item de um componente de seleção possui um valor de retorno subjacente, que é retornado pelo valor da propriedade selected se o visitante da página selecionar tal opção. Há várias formas de iniciar a lista de itens: Usar um componente Opções padrão. Quando você adiciona um componente de seleção na página, o IDE cria um componente Opções padrão e o vincula ao componente de seleção. Os componentes Opções padrão são exibidos na janela Esboço. Você pode ver a vinculação na propriedade items do componente. Para adicionar opções na lista, clique com o botão direito do mouse no componente e escolha Configurar opções padrão no menu pop-up. Como alternativa, você pode adicionar o código ao método init(), como mostrado abaixo: Amostra de código 1: Iniciando opções da lista dropDown1DefaultOptions.setOptions(new Option[] { new Option("item1", "Item 1"), new Option("item2", "Item 2"), new Option("item3", "Item 3")} ); Vincular a propriedade items a um provedor de dados. Solte uma tabela de banco de dados da janela Servidores na página a fim de criar um provedor de dados para a tabela. A seguir, clique com o botão direito do mouse no componente, escolha Vincular aos dados no menu pop-up, clique na guia Vincular ao provedor de dados e faça a seleção na lista de provedores de dados existentes. Escolha uma coluna para o valor de retorno e uma coluna para o valor de exibição. Vincular a propriedade items a uma matriz de com.sun.webui.jsf.model.Option. (Use com.sun.rave.web.ui.model.Option para os componentes fornecidos com o JavaServer Faces 1.1.). Normalmente, esta matriz é criada como uma propriedade de Bean de sessão. Você também pode vincular a propriedade a um objeto que implementa java.util.Map, se os valores do mapa forem instâncias de Option. Entretanto, as teclas são ignoradas e você não tem controle sobre a ordem na qual os valores são exibidos. Isto é, o aplicativo da Web exibe os valores aleatoriamente. Uma forma de pré-selecionar os itens é chamar setSelected(Object[]) ou setSelected(Object) do método prerender(). Você transmite os valores de retorno dos itens que deseja pré-selecionar. Certifique-se de que getSelected() retorne nulo antes de definir as opções padrão ou você irá sobrescrever as seleções do usuário em um postback. Se o componente de seleção estiver vinculado a um componente Opções padrão, você pode pré-selecionar os itens escolhendo Configurar opções padrão no menu pop-up do componente de seleção. Marque a caixa de seleção Selecionar itens e selecione as opções padrão que deseja pré-selecionar. Aviso: O Javadoc e a conclusão de código do componente Lista de adicionar/remover mostra o método getSelectedItems(), que retorna um Repetidor. Não use este método, já que está designado somente para renderizações internas e não reflete os itens realmente selecionados.
Caixa de seleção e Botão de opção	Os componentes simples Caixa de seleção e Botão de opção estão disponíveis para adições em colunas do componente Tabela. Você também pode adicionar os componentes Caixa de seleção e Botão de opção como componentes independentes em uma página. No entanto, estes componentes são mais utilizados para apresentar uma lista de opções selecionáveis.
Calendário	O componente Calendário permite que o visitante da página insira uma data, tanto digitando-a quanto selecionando-a no calendário pop-up. O valor da propriedade selectedDate contém a data inserida como um objeto java.util.Date. Para definir o intervalo de datas do calendário pop-up, vincule as propriedades minDate e maxDate às propriedades do Bean de tipo java.util.Date, que possui valores para as datas iniciais e finais. A amostra abaixo ilustra o código para a definição da data mínima como a data atual. Observe que para a data mínima, você deve definir a hora como 0. Amostra de código 2: Propriedade de data mínima private Date minCalDate; public Date getMinCalDate() { java.util.Calendar date = java.util.Calendar.getInstance( FacesContext.getCurrentInstance(). getViewRoot().getLocale()); // Deve-se zerar a hora porque // a comparação de datas faz distinção das horas date.set(java.util.Calendar.HOUR_OF_DAY, 0); date.set(java.util.Calendar.MINUTE, 0); date.set(java.util.Calendar.SECOND, 0); date.set(java.util.Calendar.MILLISECOND, 0); return date.getTime(); } Nesta versão do Visual Web Pack, se a propriedade minimumDate não estiver definida, a data mínima adota 100 anos atrás como padrão e a propriedade maximumDate adota 100 anos a partir de hoje. O formato de data adota o formato padrão da localidade. Você pode usar o editor de propriedade dateFormatPattern para selecionar o formato em uma lista de padrões de formato de data. Para alterar o padrão do formato de data exibido abaixo do campo de entrada do componente, edite a propriedade dateFormatPatternHelp. Dica: Você pode substituir as mensagens de erro de data mínima e máxima passando a mensagem de erro personalizada como uma Seqüência para o método validatorMessage.
Transferência de arquivos	O componente Transferência de arquivos permite que o visitante da página coloque um arquivo no seu sistema e o transfira para o servidor. A propriedade uploadedFile do componente retorna um valor do tipo com.sun.webui.model.UploadedFile para os componentes JavaServer Faces 1.2 e com.sun.rave.web.ui.model.UploadedFile para os componentes JavaServer Faces 1.1. A interface do UploadedFile possui métodos para obter o nome e o tamanho do arquivo, determinar seu tipo MIME (como texto/simples ou imagem/jpeg), obter seu conteúdo como bytes ou como uma String e gravar o conteúdo no disco. Para saber mais, clique com o botão direito do mouse em UploadedFile em uma instrução de declaração na fonte Java e escolha Mostrar Javadoc no menu pop-up. Por padrão, o aplicativo limita o tamanho de um arquivo transferido a 1 megabyte. Para alterar o limite de tamanho, modifique o parâmetro maxSize do filtro UploadFilter no arquivo web.xml do aplicativo.

Personalizando o comportamento e a aparência de um componente de entrada

O Visual Web Pack oferece os seguintes recursos para a personalização do comportamento e da aparência de um componente de entrada.

• Rotulando campos. Há duas formas de rotular os componentes de entrada:

  • Usar uma propriedade label. Você pode adicionar um rótulo rapidamente definindo as propriedades label e labelLevel do componente de entrada. Ao definir a propriedade label, o componente usa o valor Rótulo em vez do id do componente nas mensagens de erro padrão do validador, do conversor e obrigatórias.
  • Usar um componente Rótulo. Os componentes Rótulo oferecem mais controle de estilo que as propriedades label. Além disso, você pode alinhar os rótulos separadamente do alinhamento dos componentes de entrada e ter mais controle sobre o tamanho do rótulo e do componente de entrada associado a ele. Uma desvantagem no uso do componente Rótulo em relação à propriedade label é que as mensagens de erro exibem o id interno do componente na mensagem de erro se a propriedade label não estiver definida. Você pode substituir as mensagens de erro padrão chamando os métodos converterMessage, requiredMessage e validatorMessage do componente com as mensagens personalizadas ou adicionando um conjunto de recursos que substitua as mensagens padrão no aplicativo.

• Exibindo mensagens de erro. Como mencionado anteriormente, você pode adicionar componentes Mensagem ou Grupo de mensagens para relatar erros de validação e conversão. Para associar um componente Mensagem a um componente de entrada, defina a propriedade for do componente Mensagem como o id do componente de entrada. O componente Grupo de mensagens mostra todas as mensagens de erro de validação e de conversão da entrada, a não ser que você defina como verdadeira a propriedade showGlobalOnly deste componente.

  Dica: A adição do componente Grupo de mensagens a todas as páginas é um bom método para diagnosticar erros de programação.
• Desativando entradas e tornando os componentes de entrada somente leitura. Todos os componentes de entrada apresentam as propriedades disabled e readOnly. Defina disabled como verdadeiro para impedir que o usuário controle o componente e que o aplicativo converta, valide ou envie o valor. Defina readOnly como verdadeiro quando quiser impedir que o usuário insira ou altere o valor, mas quiser que o aplicativo converta, valide e envie o valor.
• Definindo a ordem das guias. A propriedade tabIndex é usada para especificar a ordem na qual o usuário vê as guias nos componentes de entrada em uma página.
• Eliminando caracteres em branco. Quando a propriedade trim for verdadeira, o aplicativo remove todos os espaços em branco do início e do final da entrada. Esta remoção é feita antes da conversão e da validação. Alguns componentes de entrada, como os componentes Calendário e Transferência de arquivos, não apresentam a propriedade trim. O aplicativo elimina automaticamente as entradas destes componentes.
• Limitando o número de caracteres que pode ser inserido. Você pode usar a propriedade maxLength para definir o número máximo de caracteres que o visitante da página pode digitar em um campo de entrada. O aplicativo ignora os caracteres de entrada subseqüentes. Por exemplo, se o valor de maxLength for 5 e o visitante da página digitar bicicleta, no campo será exibido apenas bicic.

• Usando componentes de entrada para enviar páginas. Na maioria dos componentes de entrada, você pode selecionar Enviar automaticamente ao alterar no menu pop-up para fazer com que o navegador envie a página sempre que o valor de entrada for alterado. Este recurso é usado normalmente para fazer com que a página seja enviada sempre que o visitante da página selecionar um novo item na lista suspensa de dados principais para que os dados detalhados possam ser sincronizados a fim de coincidirem com a nova seleção de dados principais. Por exemplo, quando o visitante da página seleciona um novo produto em uma lista suspensa, a página é reexibida com dados detalhados de tal produto.

  Se você não quiser que o navegador envie todos os valores de entrada quando o valor do componente for alterado, use um formulário virtual para indicar quais valores serão enviados.

Obtendo e definindo valores de entrada

O quadro abaixo mostra a propriedade de retenção de valor de cada componente de entrada. Os métodos getter e setter da propriedade de retenção de valor são usados para acessar o valor de entrada. Por exemplo, você usa getSelected e setSelected para obter e definir o valor de entrada de qualquer componente que apresente selected como propriedade de retenção de valor. Você também pode vincular estas propriedades de retenção de valor aos dados, conforme descrito na seção Informações gerais.

Componente	Propriedade de retenção de valor	Digite	Observações
Campo de texto, Área de texto, Campo de senha	text	String ou, se vinculado, o tipo do objeto ao qual o campo está vinculado.
Lista suspensa	selected	Para a propriedade items, você especifica um rótulo de exibição e um valor de retorno para cada item da lista suspensa. A propriedade selected retorna um objeto do mesmo tipo dos valores de retorno. Se você usar um componente Opções padrão para especificar os itens e os valores de retorno, selected retorna uma String.	Quando o visitante da página seleciona um item da lista suspensa, o aplicativo define a propriedade selected do componente como o valor de retorno do item selecionado na lista.
Caixa de listagem	selected	Para a propriedade items, você especifica um rótulo de exibição e um valor de retorno para cada item da lista. A propriedade selected retorna um objeto ou, se a propriedade multiple estiver selecionada, uma matriz de objetos, do mesmo tipo dos valores de retorno. Se você usar o componente Opções padrão para especificar os itens e os valores de retorno, selected retorna uma String ou, se multiple for verdadeiro, uma matriz de objetos String.	Se a propriedade multiple for false, o valor da propriedade selected do componente coincide com o valor de retorno do item selecionado na lista. Se a propriedade multiple estiver definida como true (para permitir que o usuário selecione mais de um item), você deve vincular selected a uma matriz de objetos, a uma matriz de primitivos ou a java.util.List. Se usar java.util.List, você deve especificar um conversor para o tipo dos membros da lista, a menos que sejam objetos String. A matriz contém valores que coincidem com os valores de retorno dos itens selecionados.
Botão de opção (não em um grupo)	selected	Por padrão, booleano. No entanto, você pode vincular a um tipo de empacotador, como Booleano, Byte, Caractere, Duplo, Flutuante, Inteiro, Longo, Curto, String, o formulário original de um desses tipos de empacotadores ou um valor de objeto definido pelo aplicativo.	O componente é considerado selecionado quando o valor da propriedade selected coincide com o valor da propriedade selectedValue. Por padrão, selectedValue é definida como true. Se houver vários componentes Botão de opção com o mesmo valor para a propriedade name, somente um botão de opção poderá ser selecionado de cada vez no conjunto. Você usa a propriedade name normalmente quando tem um componente Botão de opção em uma coluna de componente Tabela.
Grupo de botões de opção	selected	Para a propriedade items, você especifica um rótulo de exibição e um valor de retorno para cada botão de opção. A propriedade selected retorna um objeto do mesmo tipo dos valores de retorno. Se você usar um componente Opções padrão para especificar os itens e os valores de retorno, selected retorna uma String.	Quando o visitante da página seleciona um botão de opção, o aplicativo define a propriedade selected do grupo de botões de opção como o valor de retorno do botão de opção selecionado.
Caixa de seleção (não em um grupo)	selected	Por padrão, booleano. No entanto, você pode vincular a um tipo de empacotador, como Booleano, Byte, Caractere, Duplo, Flutuante, Inteiro, Longo, Curto, String, o formulário original de um desses tipos de empacotador ou um valor de objeto definido pelo aplicativo.	O componente é considerado selecionado quando o valor da propriedade selected coincide com o valor da propriedade selectedValue. Por padrão, selectedValue é definida como true. Para a versão JavaServer Faces 1.2, se a Caixa de seleção estiver em um componente Tabela, defina a propriedade name e vincule selectedValue a uma propriedade para a qual getter retorne um valor que identifique a caixa de seleção. Por exemplo, possuir o getter retorna tableRowGroup1.getRowKey().toString(). Para determinar quais caixas de seleção foram marcadas, chame o método getSelected do componente Caixa de seleção, que retorna ArrayList.
Grupo de caixas de seleção	selected	Para a propriedade items, você especifica um rótulo de exibição e um valor de retorno. A propriedade selected retorna uma matriz de objetos do mesmo tipo dos valores de retorno. Se você usar um componente Opções padrão para especificar os itens e os valores de retorno, selected retorna uma matriz de objetos de String.	Os valores na matriz selected coincidem com os valores de retorno das caixas de seleção marcadas.
Calendário	selectedDate	java.util.Date
Transferência de arquivos	uploadedFile	com.sun.rave.web.ui.model.UploadedFile	Por razões de segurança, a propriedade uploadedFile é somente leitura. A interface de UploadedFile possui métodos para obter o nome e o tamanho do arquivo, para obter seu conteúdo como uma String e para gravar o conteúdo no disco. Para saber mais, clique com o botão direito do mouse em UploadedFile em uma instrução de declaração na fonte Java e escolha Mostrar Javadoc no menu pop-up. O método UploadedFile.getOriginalName() retorna o nome original do arquivo no sistema de arquivos do cliente, de acordo com o fornecido pelo navegador. Na maioria dos casos, consiste no nome base do arquivo, sem informações de caminho. No entanto, alguns navegadores incluem informações de caminho. Observação: Os diversos navegadores processam de forma diferente o componente Transferência de arquivos. Em geral, o componente aparece menor em um navegador que no Visual Designer.
Lista de adicionar/remover	selected	Uma matriz de Object	Para a propriedade items, você especifica um rótulo de exibição e um valor de retorno. Os valores na matriz selected coincidem com os valores de retorno dos itens selecionados.

Verificando entradas do usuário

• Entrada obrigatória. Todos os componentes de entrada oferecem uma propriedade required. Quando a propriedade estiver definida como true, o aplicativo da Web verifica automaticamente se a entrada tem um valor.
• Conversão de valor. Conforme analisado na seção Informações gerais, o Visual Web Pack oferece vários conversores, que podem ser aplicados a um componente de entrada. As conversões são realizadas antes do início do processo de validação. Se o visitante da página fornecer um valor que o aplicativo não pode converter no tipo de dados especificado, o aplicativo da Web não aceita a entrada e envia uma mensagem de erro. Esta mensagem de erro aparece no componente Grupo de mensagens e no componente Mensagem associado, se existirem na página. O Conversor de número é útil porque pode ser usado para especificar os padrões com os quais a entrada deve coincidir.

• Validação da entrada. O Visual Web Pack oferece três componentes de validação, que podem ser aplicados a qualquer componente de entrada:

  • Validador de intervalo duplo. Verifica se o valor convertido está dentro de um determinado intervalo. O valor deve ser de ponto flutuante ou convertível a ponto flutuante.
  • Validador de tamanho. Verifica se o tamanho do valor local de um componente está dentro de um determinado intervalo. O valor deve ser uma String.
  • Validador de intervalo longo. Verifica se valor local de um componente está dentro de um determinado intervalo. O valor deve ser de tipo numérico ou uma String que possa ser convertida em long.

  Como alternativa, você pode adicionar seu próprio método de validação clicando com o botão direito do mouse no componente e escolhendo Editar manipulador de eventos > Validar. Este item do menu cria um método de validação e registra o método como um ouvinte do evento de validação. O método de validação aceita um FacesContext, um UIComponent e um Object (o valor) e o método lança um ValidatorException.

  Como nos erros de conversão, o aplicativo envia mensagens de erro de validação para o componente Grupo de mensagens e os componentes Mensagem associados, se existirem na página.

  Observação: Você pode aplicar um validador a um componente ou registrar um manipulador de eventos de validação no componente, mas não ambos.

  O aplicativo da Web realiza todas as validações antes de chamar os ouvintes de alteração de valor e os ouvintes de ação. Se um ou mais erros de validação ocorrerem, os ouvintes de alteração de valor e os ouvintes de ação não serão chamados e o aplicativo da Web processará a página novamente para que o visitante da página possa corrigir os problemas.
• Processamento imediato ao alterar. Se você quiser que o navegador envie a página assim que o visitante da página alterar o valor do componente, clique com o botão direito do mouse no componente e escolha Enviar automaticamente ao alterar no menu pop-up.

• Desativando a conversão e a validação. Às vezes, você pode querer desativar o processamento, incluindo a conversão e a validação, em alguns dos componentes de entrada em uma página. Você pode usar as configurações do formulário virtual do IDE para especificar que campos processar em uma dada ação. Por exemplo, quando alguém clica no botão Cancelar, você pode querer evitar o processamento de todos os campos de entrada. Ou talvez você tenha dois botões em uma página e quer enviar somente um subconjunto dos campos dependendo do botão que for clicado.

  Observe que você também pode usar a propriedade immediate para limitar o processamento de valores de entrada. Entretanto, o recurso do formulário virtual é muito mais fácil de usar. O aplicativo da Web, por exemplo, chama a conversão, a validação e os ouvintes de alteração de valor (e os ouvintes de ação se houver um componente de ação) dos componentes que têm a propriedade immediate definida como true em uma fase anterior do ciclo de vida do JavaServer Faces em relação à de outros componentes. Isto é, estas etapas de processamento dos componentes imediatos são chamadas durante a fase Aplicar valores de solicitação antes dos processos normais de conversão e antes das validações na fase subseqüente Processar validações. Em contraposição, os formulários virtuais são muito mais simples, pois não alteram o ciclo de vida do JavaServer Faces.

1. Conversões
2. Entrada obrigatória
3. Validações

Observação: Os eventos de alteração de valor ocorrem somente quando o valor é realmente alterado e todas as validações são bem-sucedidas.

Manipulando eventos de alteração de valor

Um aplicativo da Web compilado com o Visual Web Pack envia um evento de alteração de valor de um componente de entrada quando a validação do componente de entrada tiver sido bem-sucedida e o valor enviado for diferente daquele que foi exibido. Você pode registrar um método como um manipulador de evento de alteração de valor para responder a tal evento. Por exemplo, você pode escrever um método para alterar os dados detalhados sempre que o usuário alterar o valor principal e, em seguida, registrar este método como um ouvinte de alteração de valor. Quando o visitante da página alterar o valor principal e enviar a página, o aplicativo da Web chama este método e atualiza, assim, os dados detalhados para que coincidam.

1. Os eventos dos componentes imediatos são disparados primeiro, com base em uma primeira análise profunda da árvore de componentes.
2. Os eventos de alteração de valor dos componentes de entrada não-imediatos são disparados a seguir, com base em uma primeira análise profunda da árvore de componentes.
3. Os eventos de ativação dos componentes de comando não-imediatos são disparados por último, com base em uma primeira análise profunda da árvore de componentes.

Um forma rápida de criar e registrar um manipulador de eventos de alteração de valor é clicar duas vezes no componente de entrada no Visual Designer. Quando você realiza essa ação, o IDE cria um método e o registra como ouvinte dos eventos de alteração de valor do componente. A propriedade valueChange do componente exibe o nome do manipulador de eventos registrado, se houver.

Componentes de ação e de vinculação

Os componentes de ação e vinculação são usados para permitir que o visitante da página se desloque de uma página à página seguinte e envie a entrada. A figura abaixo ilustra os componentes de ação e vinculação oferecidos pela Paleta.

Figure 7: Componentes de ação e de vinculação

Navegação de página simples

Se quiser que o usuário clique em um componente para ir a uma página específica, mas não quiser que o navegador envie a entrada do usuário, você pode usar o componente Hyperlink, Hyperlink da imagem, Guia ou Nó de árvore e digitar o caminho da página de destino na propriedade url do componente, como /faces/Page1.jsp.

Navegação de página dinâmica

O editor de Navegação de página permite especificar as regras de navegação que mapeia as ações e o resultado lógico da decisão do usuário para as páginas de destino. Você especifica o mapeamento arrastando um conector nomeado do componente de ação e vinculação para a página de destino. Você também deve criar, para o componente, um manipulador de ações que retorne o resultado, que consiste em um valor de String igual ao nome do conector. A propriedade action do componente pode ser usada para criar o manipulador de ações.

Quando o visitante da página clica no componente, o navegador envia a entrada, se houver, e o manipulador de ações retorna um resultado. O servidor procura o resultado no mapeamento de regras de navegação para determinar com que página responder. Se não houver nenhuma regra de navegação para este resultado, o servidor reexibe a página atual. Você pode escrever o manipulador de ações para que retorne resultados diferentes baseados na lógica empresarial.

Observação: Quando você define as propriedades url e action, o manipulador de url tem prioridade. O manipulador de ações não será chamado.

Para obter mais informações sobre a navegação de página, consulte o tutorial Definindo a navegação de páginas.

Componentes de layout

A Paleta inclui vários componentes de layout para ajudar a organizar os componentes em uma página e apresentá-los de forma útil, como mostrado na figura abaixo.

Figura 8: Componentes de layout

A tabela a seguir explica a finalidade de cada componente de layout e descreve como usá-los.

Componente	Uso
Trilha	O componente Trilha permite fazer o layout de uma série de componentes de vinculação separados por colchetes angulares para a direita (>). O componente Trilha é usado normalmente para exibir ao visitante da página a hierarquia da seção ou a ramificação da qual faz parte. Quando você adiciona um componente Trilha, o IDE adiciona automaticamente um componente Hyperlink aninhado em cada página do aplicativo. Você pode usar a janela Esboço para excluir, adicionar e reorganizar os componentes Hyperlink aninhados. Como alternativa, você pode vincular a propriedade pages a uma matriz de objetos Hyperlink, em que cada hyperlink representa uma página. Para que seja exibido corretamente, cada componente Hyperlink deve ter, como mínimo, um valor para a propriedade text e um valor para a propriedade url ou para a propriedade action.
Caixa de fragmento de página	O componente Caixa de fragmento de página permite reutilizar o mesmo conteúdo em várias páginas. Ao alterar o conteúdo do fragmento de uma página, as alterações aparecem em todas as páginas que apresentam este fragmento de página.
Separador de página	Use o componente Separador de página para criar uma linha horizontal que separa os itens da página. O componente Separador de página também pode ser usado para separar itens em uma célula do Painel de grade ou em um componente Agrupar painel.
Árvore e nó de árvore	O componente Árvore e os componentes Nó de árvore aninhados são usados para renderizar uma lista expansível em uma estrutura em árvore. As árvores são usadas freqüentemente para a navegação em um aplicativo da Web e para navegar por dados aninhados, como uma estrutura de sistema de arquivos. Para adicionar outro nó, clique com o botão direito do mouse em um componente Árvore ou Nó de árvore na janela Esboço e escolha Adicionar nó de árvore. A imagem padrão de um nó é o ícone de uma pasta ou de uma página, dependendo se o nó tem filhos (nós aninhados). Use a propriedade action a fim de especificar um manipulador de ações para quando o visitante da página selecionar um nó de árvore. Use a propriedade actionListener a fim de especificar um manipulador para quando o visitante da página abrir ou fechar um nó. Dica: Por padrão, o navegador faz uma solicitação ao servidor cada vez que o visitante da página expande ou recolhe um nó. Em vez disso, para que a ação de expandir e recolher ocorra no lado do cliente, defina clientSide como verdadeiro.
Conjunto de guias e Guia	O componente Conjunto de guias pode ser usado como uma ferramenta de navegação ou para exibir layouts diferentes na mesma página. Para adicionar guias, clique com o botão direito do mouse no nó Conjunto de guias na janela Esboço e escolha Adicionar guia. Para usar o Conjunto de guias como uma ferramenta de navegação, adicione uma guia em cada caminho de navegação e use o editor de navegação de página para especificar a página de destino de cada guia. Para usar o Conjunto de guias para exibir layouts diferentes na mesma página, adicione o número de guias desejado. A seguir, selecione cada guia no Visual Designer e adicione os componentes da guia. A propriedade selected do componente Conjunto de guias exibe o id da seleção de guia atual. O componente Guia contém um componente aninhado Fazer layout do painel. Para adicionar componentes a uma guia, solte-os no componente Fazer layout do painel.
Painel do layout	Este componente é semelhante a uma página na qual você pode especificar um layout de grade ou um layout de fluxo definindo o valor de layoutPanel do componente Fazer layout do painel. No modo de fluxo, os componentes se enfileiram, da esquerda para a direita. No modo de grade, os componentes se posicionam onde você os coloca.
Folha de propriedades e Propriedade	O componente Folha de propriedades permite fazer rapidamente o layout de um conjunto de componentes rotulados. A Folha de componentes oferece e faz o layout dos rótulos e seções, e você adiciona os componentes. Para adicionar seções, clique com o botão direito do mouse no nó Folha de propriedades e escolha Adicionar seção de folha de propriedades. Para adicionar propriedades, clique com o botão direito do mouse no nó Seção e escolha Adicionar propriedade. Para adicionar um componente a uma propriedade, arraste o componente da Paleta e solte-o no nó Propriedade na janela Esboço. Para exibir os vínculos de cada seção na parte superior da folha de propriedades, defina jumpLinks da Folha de propriedades como true. Você pode usar a propriedade labelAlign do componente Propriedade para alinhar os rótulos à direita ou à esquerda. Defina noWrap como true se não quiser quebra de linha automático do texto do rótulo.
Painel de grade	O componente Painel de grade é usado para organizar os componentes em linhas e colunas. Depois de adicionar o Painel de grade à página, defina a propriedade columns com o número de colunas por linha. À medida que você adiciona componentes ao Painel de grade, o IDE adiciona os componentes na linha até preenchê-la. O IDE adiciona linha se for necessário.
Agrupar painel	O componente Agrupar painel os componentes aninhados em modo de layout de fluxo. O navegador posiciona os componentes um do lado do outro, colocando os componentes na linha seguinte se for necessário. Os componentes passam para a linha anterior ou para a linha seguinte conforme o visitante da página redimensiona a página. O componente Agrupar painel é útil ao aninhar componentes, como aninhar botões dentro de um componente Alerta de página ou aninhar componentes dentro de uma célula em um componente Painel de grade. Por padrão, a propriedade block está definida como falsa, o que significa que o componente é renderizado com a marca <span> e que as configurações de altura e largura são ignoradas. Se precisar definir uma altura ou largura específicas para o componente, defina a propriedade block como verdadeira. Se a página estiver no modo de layout de fluxo, a definição da propriedade block como verdadeira obriga o navegador a renderizar o componente na sua própria linha. Os componentes antes e depois dele aparecem linhas diferentes.
Tabela	O componente Tabela torna fácil exibir dados tabulares como os dados de uma tabela de banco de dados ou as informações de uma matriz ou lista. A forma mais fácil de preencher um componente Tabela é criar um provedor de dados para os dados tabulares e vincular o componente ao provedor de dados, conforme mostrado no tutorial Usando componentes de vinculação de dados para acessar um banco de dados. Clique com o botão direito do mouse no componente e escolha Layout da tabela para exibir uma caixa de diálogo que permite realizar as seguintes ações: Definir o título da tabela Adicionar e remover colunas Definir o cabeçalho, o rodapé e o tipo de componente (como Texto estático, Campo de texto ou Botão) de cada coluna Ativar classificação e adicionar vários botões de classificação Ativar paginação Especificar o texto que deve aparecer se uma célula estiver vazia O componente aninhado TableRowGroup da tabela é usado para trabalhar com os valores de dados da tabela. Por exemplo, se uma coluna possui um botão, você usa getRowKey() do componente TableRowGroup para determinar a linha subjacente de dados conforme no exemplo de código abaixo. Amostra de código 3: Processando um botão em uma tabela public String submitTableButton_action() { RowKey rowkey = tableRowGroup1.getRowKey(); getSessionBean1().setSelectedPersonId( travelDataProvider.getValue("PERSON.PERSONID", rowkey).toString()); return "showDetail"; } Dica: Ao trabalhar com componentes aninhados no Visual Designer, pressione Escape para selecionar o componente (pai) de fechamento. Você também pode usar a janela Esboço para selecionar o pai de fechamento, bem como para reorganizar a ordem dos componentes aninhados.

Componentes não visuais

O Visual Web Pack fornece dois componentes não visuais.

Componente	Uso
Campo oculto	O componente Campo oculto é um campo de formulário invisível. O componente Campo oculto é usado normalmente para armazenar valores que serão usados pelo JavaScript. Por obterem o código enviado do lado do servidor, os valores dos componentes Campo oculto, como o Bean de página, podem examinar as alterações feitas pelo código JavaScript. Você também pode usar o componente Campo oculto para passar os valores para a página renderizada.
Âncora	Os componentes Âncora são usados para posicionar os destinos de um vínculo dentro de uma página. A HTML equivalente do componente Âncora é <a name=nomededestino>. O id do componente é o nome de destino. Por exemplo, se o id do componente for âncora1, você pode definir uma propriedade url do hyperlink como #âncora1 para ir até a posição do componente Âncora.

Resumo

• A Paleta oferece componentes para exibir informações, aceitar a entrada do usuário, ativar inscrições a formulários e navegação de página e configurar os layouts da página .
• A janela Propriedades é usada para configurar o comportamento e a aparência de um componente. Você também pode usar os métodos get e set da propriedade para definir programaticamente o valor da propriedade.
• Você pode vincular a maioria das propriedades aos dados.
• O IDE cuida das conversões dos dados vinculados. Você também pode usar conversores para converter os valores do componente.
• As ferramentas de validação de entrada incluem a propriedade required, os validadores e a manipulação de eventos de validação.
• Os formulários virtuais ativam um breve controle no qual os componentes são processados quando um formulário é enviado.
• Os métodos de ação e URLs são usados para definir a navegação da página.
• A manipulação de eventos de alteração de valor é usada para processar a entrada.

---

Envie-nos seus comentários