Definições da Biblioteca de Faces para Controles JavaServer Faces de Terceiros.

Opções de documento Opções de documento que necessitam de JavaScript não são exibidas Classificar esta página Ajude-nos a melhorar este conteúdo

Nível: Introdutório

Scott Paxton, Software Engineer, IBM Corporation

18/Jun/2009

Este artigo descreve o novo recurso Definição da Biblioteca de Faces no IBM Rational Application Developer Versão 7.5. Com esse recurso, é possível importar uma biblioteca de componentes JSF (JavaServer Faces) arbitrários, de terceiros, e fazer o ajuste fino do comportamento das ferramentas JSF ao trabalhar com os componentes da UI de tal biblioteca.

Apresentação

A tecnologia Java™Server Faces (JSF) é uma estrutura Java™ popular para componentes da interface com o usuário da Web. O IBM® Rational® Application Developer, nos últimos releases, tem agregado ferramentas robustas para desenvolvimento de aplicativos da Web JSF. A versão 7.5 o introduz (como desenvolvedor) à funcionalidade de importação e uso de componentes JSF arbitrários, de terceiros, com o mínimo esforço. Este artigo aborda o processo de consumo de uma biblioteca de componentes de terceiro, configurando os metadados da biblioteca e compartilhando a configuração resultante para reutilização em uma equipe de desenvolvimento.

Antes de iniciar, vale a pena se aprofundar sobre o que significa dar suporte a componentes de terceiros no ambiente de desenvolvimento. Quando se há controles JSF novos de terceiros (quer criados a partir do zero, quer transferidos por download da Web), o que é razoável esperar fazer?

• Os novos componentes devem estar disponíveis na paleta, de modo que possam ser arrastados para uma página no editor Java™ Server Pages (JSP™).
• Ao incluir uma biblioteca de componentes no projeto da Web pela primeira vez, não se esqueça de acrescentar os recursos obrigatórios, apropriados, e de executar quaisquer outros passos de configuração necessários para tornar a biblioteca utilizável.
• Deve ser possível visualizar e configurar os componentes da UI depois de incluídos nas páginas da Web.
• Além disso, talvez você queira ter controle sobre outros detalhes da aparência e comportamento da UI.

Toda essa funcionalidade mencionada a pouco já é diretamente fornecida para os controles JSF padrão e as bibliotecas de componentes JavaServer Faces widget library (JWL) fornecidas pela IBM. Agora, você verá como expandir esse suporte para outras bibliotecas de componentes JSF. Este artigo demonstra a nova funcionalidade usando como exemplo componentes da biblioteca MyFaces Tomahawk de software livre, contudo, o mesmo processo se aplica a qualquer biblioteca de componentes JSF válida.

Voltar para parte superior

Criando uma Definição da Biblioteca de Faces

O Rational Application Developer V7.5 apresenta o conceito de configuração compartilhável para bibliotecas de componentes de terceiros. Você criará uma Faces Library Definition (JLD), que é, basicamente, um arquivo de configuração que englobará quaisquer outros recursos de que a biblioteca necessite. Esses arquivos são todos armazenados em um tipo especial de projeto de área de trabalho, denominado Projeto de Definições de Faces.

Antes de continuar com este exemplo, faça download do arquivo Java™ archive (JAR) do Web site do Apache MyFaces (http://myfaces.apache.org/download.html), que será utilizado como uma representação de biblioteca de componentes de terceiros.

Comece criando um Projeto de Definição de Faces que contenha os metadados de configuração da biblioteca.

1. Ative o assistente selecionando Arquivo > Novo > Projeto (isso pode ser encontrado sob a categoria Web).
2. A única coisa a fazer no assistente é atribuir um nome ao projeto (neste caso, MyFaces Components), conforme ilustrado na Figura 1.

Em seguida, crie uma definição para a biblioteca do Tomahawk e examine seus elementos.

3. Clique com o botão direito do mouse no novo projeto recém-criado e selecione Nova > Definição da Biblioteca de Faces.
4. Atribua um nome à nova definição (por exemplo, tomahawk).
5. Clique no botão Procurar ao lado do campo Arquivo Jar. Selecione o local do arquivo JAR que você transferiu por download do site do Apache, conforme mostrado na Figura 2.
6. Clique em Concluir.

Depois de gastar um pouco de tempo na análise do arquivo JAR do Tomahawk e gerar os arquivos, o assistente será concluído e abrirá o novo arquivo de configuração JLD (tomahawk.jld). Você ficará mais familiarizado com esse editor nas próximas seções, no entanto, agora, basta observar que o arquivo contém informações para configuração de um aplicativo da Web e um item para cada tag na biblioteca de tags.

A mera presença na sua área de trabalho dessa definição de biblioteca e do projeto que a contém, já indica que você obteve êxito ao fazer com que as ferramentas reconhecessem os componentes do Tomahawk. Em seguida, examine como a ferramenta usa essa configuração e observe os meios pelos quais isso pode ser ajustado.

Voltar para parte superior

Configurando um projeto da Web JSF

Agora, você criará um projeto da Web JSF para ver como a nova biblioteca de componentes se integra às ferramentas JSF.

1. Ative o assistente de projetos selecionando Arquivo > Novo > Projeto > Projeto Dinâmico da Web.
2. Atribua um nome ao projeto.
3. Na lista suspensa Configuração, escolha Projeto do JavaServer Faces v1.1.
4. Clique em Concluir.

É digno de nota que você selecionou a configuração JavaServer Faces, um subconjunto da configuração mais comum do Projeto Faces. Isso se dá porque a pré-configuração Projeto Faces também inclui a biblioteca de componentes IBM JWL, que você provavelmente não usaria em conjunto com bibliotecas de terceiros. No geral, use a configuração de JSF mais básica ao incluir componentes de terceiros em seu projeto.

Em seguida, crie uma página JSP nesse projeto de teste.

5. Clique com o botão direito do mouse no Enterprise Explorer.
6. Selecione Nova > Página da Web.
7. Insira um nome para a JSP no assistente, conforme mostrado na Figura 4.
8. Clique em Concluir.

Voltar para parte superior

Explorando uma integração de componente de terceiros básica

1. Quando a página de teste recém-criada abrir no editor, olhe para a exibição da paleta e observe a nova gaveta tomahawk, como mostrado na Figura 5. Normalmente, as bibliotecas de componentes de terceiros figurarão na parte de baixo da paleta.

A gaveta com os componentes do Tomahawk é exibida porque a Definição da Biblioteca de Faces que você criou anteriormente está presente na área de trabalho.

2. Tente fechar o projeto que contém tal definição (MyFaces Components) e observe que a gaveta da paleta desaparecerá imediatamente. Em seguida, reabra o projeto para trazer a gaveta de volta.
3. Agora, arraste o componente commandButton do Tomahawk, da paleta para a JSP de teste. Um prompt será exibido solicitando que você copie os recursos do novo projeto.
4. Clique em OK para permitir que a ferramenta inclua o Tomahawk no projeto de teste (observe que a tag button também foi incluída na página).
5. Com o Enterprise Explorer, navegue até o projeto de teste sob o caminho /Web Content/WEB-INF/lib e localize o arquivo JAR do tomahawk. Como há uma referência para tal arquivo na definição da biblioteca, ele será automaticamente copiado pela ferramenta para o projeto da Web na primeira vez que os componentes do Tomahawk forem utilizados. Você verá como definir outros passos de configuração de projeto na próxima seção.
6. Volte à página de teste (testPage.jsp) e observe que a tag t:commandButton apresenta automaticamente uma tag de formulário JSF. Observe ainda que na visualização Design do Page Designer, a tag é exibida apropriadamente como um botão. Isso se dá porque a ferramenta reconheceu que a nova tag representa um componente da UI da JSF.
7. Clique no botão na página para selecioná-lo. Na visualização Propriedades, você pode modificar qualquer atributo da tag button usando as ferramentas JSF normais. Por exemplo, localize o atributo value do botão, na visualização Propriedades e clique no ícone ao lado dele para ativar o respectivo diálogo de ligação e gerar uma expressão de ligação JSF.

Voltar para parte superior

Determinando configuração adicional do projeto

Agora, você retornará à Definição da Biblioteca de Faces para incluir metadados adicionais que se destinam à configuração de projetos da Web. Caso tenha fechado o editor de definição da biblioteca, vá para o Projeto de Definições da Biblioteca criado anteriormente (MyFaces Components) e abra o arquivo de definição tomahawk.jld.

Observe rapidamente o editor de definição da biblioteca (mostrado na Figura 6). Você perceberá que, à esquerda, o editor está dividido em seções de configuração. À direita, ele apresenta os campos correspondentes à seção selecionada à esquerda.

Na Figura 6, a primeira seção na Definição da Biblioteca de Faces está selecionada, o que permite que você configure, à direita, informações bem gerais da biblioteca. Os próximos passos se resumirão à seção Configuração do Aplicativo, que corresponderá a quaisquer alterações que devam ser feitas em um projeto da Web quando uma biblioteca de terceiros for usada pela primeira vez (você definirá as ações que se seguirão ao acionamento do botão OK, no diálogo do prompt, depois da liberação da primeira paleta).

Voltar para parte superior

Incluindo mais arquivos em um projeto

Você viu que, por padrão, o Rational Application Developer incluirá automaticamente o arquivo JAR para uma biblioteca de terceiros (por exemplo, tomahawk.jar) em um projeto da Web. No entanto, na maioria da vezes, há substancialmente mais configuração a ser feita para que uma biblioteca de componentes se torne totalmente funcional no tempo de execução. Por exemplo, alguns componentes do Tomahawk necessitam de código Apache Commons adicional para funcionarem corretamente, assim inclua esses recursos adicionais na configuração.

1. Vá para http://commons.apache.org/downloads/index.html e faça download dos seguintes pacotes:
   1. commons-fileupload
   2. commons-lang
2. Descompacte o arquivo ZIP dos downloads e copie o arquivo JAR para cada pacote na pasta da área de trabalho que contenha o JAR de componentes do tomahawk (por exemplo, /MyFaces Components/tomahawk).
3. Atualize a área de trabalho, se necessário, de modo que seja possível ver os novos arquivos JAR commons-* no Enterprise Explorer.

Em seguida, execute os passos a seguir no editor de definição da biblioteca para incluir os arquivos JAR na configuração.

4. Selecione a seção Recursos, no editor, e clique no botão Incluir (à direita). Como a única opção dessa seção é Arquivo, clique em OK. (Como alternativa, você pode clicar com o botão direito do mouse na seção Recursos e selecionar Incluir > Arquivo.)
5. No lado direito do editor, clique no botão Procurar ou nas reticências (...) ao lado do campo Caminho de Origem.
6. Localize o arquivo JAR commons-fileupload recém-incluído, como mostrado na Figura 7, e clique em Concluir. Observe que, por padrão, os arquivos JAR serão incluídos em /WEB-INF/lib em um projeto da Web.
7. Repita esse processo para criar outra entrada Recursos para o arquivo JAR commons-lang.

Voltar para parte superior

Configuração adicional de aplicativo da Web

Alguns componentes na biblioteca Tomahawk também necessitam de um filtro para manipularem os pedidos de recursos no tempo de execução. Para configurar automaticamente o Filtro de Extensões MyFaces nos projetos da Web, você incluirá mais elementos de configuração no editor de definição da biblioteca.

1. Selecione a seção Atualizações do web.xml, em Configuração de Aplicativo, no editor de Definição de Biblioteca.
2. Clique em Incluir e selecione Filtro. Clique em OK.
3. Uma configuração de filtro vazia será exibida à direita. Preencha os seguintes valores, conforme mostrado na Figura 8:
   1. Nome: MyFacesExtensionsFilter
   2. Classe: org.apache.myfaces.webapp.filter.ExtensionsFilter
   3. Selecione e edite o valor padrão em Mapeamentos de URL e altere para: /faces/myFacesExtensionResource/*
   4. Clique em Incluir, ao lado de Mapeamentos do Servlet, e digite: Faces Servlet
4. O filtro de extensões também necessita de um parâmetro de inicialização. A fim de incluir esse parâmetro, selecione o novo filtro, no lado esquerdo do editor, e clique em Incluir para criar um arquivo Init Param em branco. Em seguida, preencha os seguintes valores:
   1. Nome: maxFileSize
   2. Valor: 20m
   3. Descrição: Defina o limite de tamanho máximo para arquivos transferidos por upload.

Além da definição de novos filtros, descrita a pouco, a seção Atualizações do web.xml também permite que você registre novos servlets e inclua parâmetros de contexto adicionais em um aplicativo da Web quando uma biblioteca de componentes do JSF é utilizada.

Em alguns casos, uma biblioteca requer elementos de configuração extra em faces-config.xml para funcionar devidamente. A seção Arquivo de Configuração de Faces, sob Configuração do Aplicativo, também é usada para especificar um arquivo faces-config adicional a ser incluído na configuração do tempo de execução de um aplicativo da Web.

O arquivo deve estar localizado no mesmo diretório que o arquivo de Definição da Biblioteca de Faces. Ele será copiado para a pasta /WebContent/WEB-INF do projeto da Web e haverá uma referência para ele no web.xml que será utilizado no tempo de execução. A única restrição é que o nome do novo arquivo não pode ser faces-config.xml, visto que isso criaria um conflito com o arquivo de configuração padrão já existente no projeto da Web JSF.

Voltar para parte superior

Testando alterações na configuração do aplicativo

Com as alterações que você acabou de fazer, os projetos da Web que usam componentes do Tomahawk agora conterão arquivos JAR do Commons adicionais e o Filtro de Extensões será registrado automaticamente no web.xml. Para confirmar isso, basta criar outro projeto de teste e página da Web. No entanto, em vez disso, você demonstrará a atualização da configuração do projeto de teste criado anteriormente.

Sempre que uma biblioteca de tags JSF é instalada em um projeto da Web, a ferramenta mantém o rastreamento da versão de configuração da biblioteca. Isso é verdade para ambas as bibliotecas suportadas diretamente no Rational Application Developer e para definições de biblioteca de terceiros como a que você construiu para o Tomahawk. Quando apropriado, a ferramenta verifica os projetos da Web existentes para ver se há alguma atualização disponível para a biblioteca de tags, e fornece um prompt para atualizar a configuração do projeto concordemente. Você utilizará esse mecanismo para atualizar a biblioteca de tags do Tomahawk no projeto de teste.

1. Selecione a primeira seção Definição da Biblioteca de Faces, à esquerda do editor de definição de biblioteca.
2. À direita, localize o campo Versão e aumente o valor para um número maior (por exemplo, altere de 1.0 para 1.0.1), como mostrado na Figura 9.

3. Salve a definição da biblioteca.
4. Alterne para (ou abra) a visualização Problemas. Após um pequeno intervalo de tempo, um novo Erro aparecerá referente ao seu projeto de teste indicando que os Recursos de Faces necessitam de atualização.
5. Selecione o Erro na visualização Problemas, clique com o botão direito do mouse e escolha Correção Rápida.
6. Clique em Concluir no diálogo Correção Rápida.
7. Será exibido um prompt para atualização do projeto da Web. Você deverá ver a URI do tomahawk listada como a biblioteca disponível com configuração mais recente. Clique em Sim no diálogo, conforme mostrado na Figura 10.

Responder Sim nesse diálogo fará com que os passos de configuração do projeto do Tomahawk sejam executados novamente. Examine o projeto de teste para confirmar a inclusão de arquivos JAR do Commons adicionais e a definição do Filtro de Extensões no web.xml.

Os passos que você acaba de executar para atualizar o projeto da Web existente constituem o processo típico quando ocorrem alterações na configuração de uma biblioteca de componentes JSF. Na verdade, qualquer alteração sob a seção Configuração do Aplicativo, no editor de definição de biblioteca, exigirá o incremento do número de versão antes de propagar suas alterações para os projetos existentes.

Se a biblioteca de componentes ainda não foi utilizada em nenhum projeto da Web, não é necessária nenhuma alteração na versão. Além disso, como você verá na próxima seção, outras alterações na definição de uma biblioteca, fora da área Configuração do Aplicativo, serão selecionadas intuitivamente pelas ferramentas e não exigirão a mudança no número da versão ou que os recursos do projeto sejam atualizados.

Voltar para parte superior

Configuração da Biblioteca de Tags

Agora, você explorará outras modificações na definição da biblioteca Tomahawk que afetarão o comportamento da ferramenta em uma base tag a tag. Algumas configurações têm efeito sobre todas as tags na biblioteca, mas a maior parte da configuração deste ponto em diante se concentrará em tags individuais.

1. Abra o editor de definição de biblioteca e selecione a seção Biblioteca de Tags. Observe que a maior parte dos campos à direita do editor refere-se à aparência geral (rótulos, ícones, o estado aberto/fechado) da gaveta de paleta da biblioteca. As listas de links CSS e JavaScript são a exceção, visto que elas indicam referências que devem ser incluídas em uma página JSP sempre que uma tag na biblioteca for inserida na página.
2. Para examinar as configurações específicas da biblioteca, abra o nó Biblioteca de Tags, no editor, e localize a entrada commandButton. Selecione a entrada e examine os campos nessa seção. À direita do editor, execute estas alterações:
   1. Como rótulo, insira Tomahawk's Command Button
   2. Clique em Procurar ou no ícone reticências (...) ao lado do Ícone Pequeno.
   3. No diálogo exibido, selecione o ícone Comando – Botão sob Componentes de Faces Padrão. Esse reutilizará um dos ícones de componente JSF interno do Rational Application Developer. Marque a caixa de opção selecionada para definir automaticamente também o ícone grande associado.
   4. Clique em OK. A sua configuração deve ser semelhante à apresentada na Figura 11.

3. Realce a tag commandButton, à esquerda do editor, e clique no botão Para Cima para movê-la até o alto da lista de tags. A ordem de tags no editor será refletida na paleta.
4. Salve o arquivo de definição de biblioteca.
5. Em seguida, abra a JSP de teste criada anteriormente. Localize a gaveta da biblioteca Tomahawk na paleta. Você notará que o botão aparece agora em primeiro lugar na gaveta, exibindo o ícone selecionado a pouco e o novo rótulo de texto em vez do nome da tag.

Voltar para parte superior

Configuração específica da tag

Para examinar outras áreas de configuração além da aparência da paleta, abra o nó commandButton no editor de definição de biblioteca e examine as seções relacionadas abaixo. O restante deste artigo detalhará cada uma dessas áreas e utilizará várias tags diferentes do Tomahawk para demonstrar algumas das opções de configuração diferentes.

A seção Propriedades da Ação Soltar

A seção Propriedades da Ação Soltar debaixo de cada tag se refere à definição do comportamento do recurso arrastar e soltar. Esses elementos de configuração se aplicam quando você arrasta tags da paleta ou da Visualização dos Dados da Página, e em alguns outros cenários de inserção de tag.

A primeira caixa de verificação na seção indica se, ao soltar, a tag terá um formulário JSF circundante. A caixa de opção Permite filhos indica se uma tag JSF específica deve aceitar que outros componentes da UI JSF sejam soltos em seu interior. Essa seleção não se aplica a tags que não pertencem a UI, por exemplo, conversores, validadores ou facetas JSF, assim você deve deixá-la desmarcada para a maioria dos controles e selecioná-la apenas para controles do tipo painel que admitam filhos.

Assim como diversos outros elementos de configuração na definição da biblioteca, os valores dessas caixas de opção são definidos quando o assistente inspeciona pela primeira vez uma biblioteca de tags. Normalmente, a maioria deles assumirá valores padrão adequados, mas pode haver situações ambíguas em que seja necessário um ajuste fino em tais configurações. Para examinar um exemplo, execute as etapas a seguir.

1. Abra a página da Web de teste criada anteriormente (testPage.jsp).
2. Da gaveta da paleta Tomahawk, arraste uma tag dataTable para a página. Ela aparecerá simplesmente como uma caixa cinza exibindo o nome da tag t:dataTable.
3. Agora, arraste a tag column do Tomahawk para a tag dataTable. Você observará que a tag t:column será automaticamente incluída na dataTable. Isso se dá porque o valor padrão da caixa de opção Permite criança da tag dataTable foi definida corretamente.
4. Arraste a tag Tomahawk Command Button da paleta e tente soltá-la diretamente na tag da coluna, conforme mostrado na Figura 12.

5. Observe que o botão não vai para o interior da coluna como pretendido. Em vez disso, ela pousa na dataTable, ao lado da tag da coluna, o que é válido, conforme mostrado na Listagem 1. Isso se dá porque o assistente que criou a definição da biblioteca não pode informar o que a tag da coluna representa, assim ele adotou a postura padrão de evitar tags-filhas em uma coluna.

<t:dataTable styleClass="dataTable" id="table1">
    <t:commandButton styleClass="commandButton"id="button1"></t:commandButton>
    <t:column styleClass="column" id="column1"></t:column>
</t:dataTable>

6. Desfaça a operação soltar botão inválida (digite Ctrl-Z ou vá para Editar > Desfazer inserção de tag).
7. Vá para o editor de definição da biblioteca do Tomahawk e localize a tag column.
8. Na seção Propriedades da Ação Soltar, selecione Permite filhos, como mostrado na Figura 13. Salve suas alterações.

9. Retorne para a página de teste e tente soltar novamente o botão dentro da tag da coluna. Desta vez, o botão será devidamente inserido na coluna, como mostrado na Listagem 2. Se você tiver problemas quanto a soltar no local correto, isso também poderá ser feito da visualização de origem do editor, em qualquer parte da tag t:column. Por ora, desconsidere a aparência estranha da página de design, visto que isso será corrigido em breve.

<t:dataTable styleClass="dataTable" id="table1">
	<t:column styleClass="column" id="column1">
		<t:commandButton styleClass="commandButton" id="button1">
                  </t:commandButton>
	</t:column>
</t:dataTable>

Os outros campos na seção Propriedades da Ação Soltar do editor de definição de biblioteca definem a lista de cadeias de caracteres usadas pelas ferramentas. Os dois primeiros indicam quaisquer links CSS ou JavaScript que precisem ser incluídos em uma página JSP para que um componente seja funcional. Esses se aplicarão exclusivamente a uma tag específica. Prefira a seção Biblioteca de Tags para especificar links para toda a biblioteca.

O último campo nessa seção especifica os nomes de quaisquer facetas JSF que possam ser usadas com um componente. O exemplo a seguir mostra como os nomes das facetas são usadas na ferramenta.

1. Abra a definição da biblioteca Tomahawk e vá para a seção Propriedades da Ação Soltar da tag column.
2. Clique em Incluir um novo item ao lado da área Facetas Permitidas.
3. Altere o nome do item para header.
4. Salve a definição da biblioteca.
5. Agora, volte à página de teste e localize a tag t:column adicionada nos passos anteriores. Clique para selecioná-la.
6. Localize ou abra a visualização Propriedades. Normalmente, a visualização fica abaixo do editor de página na perspectiva da Web. É possível, a qualquer momento, trazê-la para cima selecionando Janela > Mostrar Visualização > Propriedades.
7. Na visualização Propriedades da tag da coluna, clique no botão no alto da visualização para incluir uma tag-filha, conforme mostrado na Figura 14. Observe que a opção nome da faceta do cabeçalho está disponível (já que a definição da biblioteca foi previamente alterada).

8. Seleciona a opção Faceta de Cabeçalho e observe que uma tag f:facet correspondente será incluída sob a coluna.

A seção Visualização

Como já visto com a tag commandButton do Tomahawk, as ferramentas JSF no Rational Application Developer podem, muitas vezes, visualizar componentes de terceiros corretamente no editor de página, sem a necessidade de nenhuma configuração. Isso é conseguido pela execução de parte da lógica de renderização JSF a fim de emitir uma representação em HTML do componente.

Algumas vezes, no entanto, esse falso processo de renderização falha, ou porque a lógica de renderização do componente é muito complexa, ou porque alguns elementos do tempo de execução de um servidor real não estão presentes no ambiente de desenvolvimento. Quando isso ocorre, um ícone cinza genérico é normalmente exibido, como você viu anteriormente com as tags dataTable e column.

A fim de melhorar sua experiência em desenvolvimento para componentes que não podem ser automaticamente visualizados, a definição da biblioteca fornece uma abordagem baseada em modelos capaz de gerar uma representação visual de determinada tag. Se for fornecido um padrão de visualização em uma definição de biblioteca, o processo de renderização automático será ignorado e o padrão HTML será avaliado e usado diretamente pelo editor de página.

Há várias variáveis aplicáveis a um padrão de visualização. O melhor modo de explorar essas opções é examinar os modelos de amostra fornecidos na ferramenta. Esses modelos representam alguns dos tipos de controle JSF mais comuns. Você criará agora visualizações definidas pelo usuário para os componentes dataTable e column do Tomahawk, que oferecerão uma melhoria substantiva em relação à experiência do usuário observada até o momento.

Siga estes passos:

1. Localize a tag dataTable, na definição da biblioteca, e selecione a seção Visualização abaixo dela.
2. Clique no botão Editar, à direita (a área de texto do padrão é somente leitura).
3. No diálogo Modificar Visualização exibido, clique em Inserir a Partir de Modelo.
4. Selecione a opção Data table e clique em OK. Você verá agora algum texto de marcação na seção de visualização.
5. Repita esses passos para a tag column, escolhendo o modelo Coluna em uma tabela de dados desta vez.
6. Salve a definição da biblioteca.
7. Localize e feche a página JSP de teste se ela estiver atualmente aberta em um editor. As alterações na visualização terão efeito somente depois que uma página for reaberta.
8. Abra a página de teste novamente no editor e observe que, agora, a aparência de dataTable e column é muito mais atraente. A ação de arrastar novos componentes também é muito mais simples com a nova visualização, conforme mostrado na Figura 15.

Na Figura 15, a tag commandButton dentro da coluna agora aparece corretamente na página. Isso é o resultado da variável ${children} no modelo de amostra que você utilizou para a tag da coluna. Quando a visualização é calculada, essa variável é substituída com todas as tags-filhas da coluna de modo que elas apareçam nas posições corretas na página.

Além disso, observe que a faceta de cabeçalho incluída na coluna em uma etapa anterior é exibida com o texto Solte um componente aqui. Isso se dá devido à variável ${facet:header} no modelo de coluna. Essa variável procura uma tag de faceta JSF do nome especificado (header) e a substitui pela tag-filha encontrada abaixo da faceta ou, se nenhuma for encontrada, pelo texto explicativo exibido acima. Mesmo que você solte uma nova tag (por exemplo, outputText) na área de facetas e ela será exibida no local correto, acima do corpo da coluna.

Há diversos modelos de amostra para outros tipos de componentes. Você pode explorar cada um deles para ver mais exemplos de variáveis de substituição que podem ser usados em uma visualização customizada.

A seção Atributos da Tag

Localize a tag do botão de comando do Tomahawk, no editor de definição de biblioteca, e abra a seção Atributos da Tag para consulta a lista de nomes dos atributos. Essa lista foi gerada na criação da definição da biblioteca e é uma lista fixa. No entanto, você pode ajustar a ordem dos atributos na definição da biblioteca; a ordem tem um efeito sobre o comportamento da ferramenta. Para descobrir como, siga estes passos:

1. Abra a página JSP de teste no editor de página.
2. Se ainda não houver nenhum na página, arraste um botão de comando do Tomahawk a partir da paleta.
3. Mantendo o foco na tag do botão no editor de página, vá para a visualização Propriedades.
4. Observe que a lista de atributos está classificada em ordem alfabética. Essa ordem foi estabelecida na criação da definição da biblioteca.
5. Agora, abra o editor de definição de biblioteca para a biblioteca Tomahawk.
6. Localize a tag commandButton e abra a seção Atributos da Tag.
7. Selecione o atributo dir e clique no botão Para Cima várias vezes até que ele se torne o primeiro atributo da lista.
8. Salve a definição da biblioteca.
9. Volte à página JSP de teste. Selecione outro componente JSF que não seja o commandButton (arraste um da paleta, se necessário) e, em seguida, selecione a tag do botão novamente para atualizar as ferramentas.
10. Observe que o atributo dir agora é o primeiro da lista.

O mecanismo de ordenação pode ser usado para reordenar a exibição da visualização Propriedades, de modo que os atributos mais importantes e comuns sejam listados primeiro. Por exemplo, os atributos value e styleClass podem ser frequentemente modificados para vários componentes.

Outro aspecto da configuração dos atributos da tag é especificar o tipo que o atributo representa. Por exemplo, em muitos casos, onclick representa um evento JavaScript, readonly é um operador booleano e styleClass especifica o nome de uma classe CSS. Os atributos que seguem as convenções de nomenclatura JSF padrão (como nos exemplos precedentes) estão todos predefinidos com os valores apropriados.

Os tipos de atributos são refletidos no comportamento da visualização Propriedades. Por exemplo, em uma das tags do Tomahawk, se você clicar na área de edição ao lado de readonly, ela mostrará uma caixa de combinação com as opções true, false ou uma expressão de valores que pode ser vinculada aos dados do aplicativo.

Algumas tags de terceiros terão atributos exclusivos e específicos e valores possíveis, que podem ser configurados usando a definição de biblioteca. Por exemplo:

1. Vá para a tag dataTable no editor de definição de biblioteca e localize o atributo newspaperOrientation.
2. Clique no botão de edição ao lado do elemento Tipo.
3. No diálogo que aparecer, escolha o tipo Enum. Esse representa uma enumeração dos valores válidos possíveis.
4. Clique no botão Incluir para adicionar os valores horizontal e vertical, que o texto da descrição do atributo indicará como valores permitidos.
5. Clique em OK para definir o novo tipo, conforme mostrado na Figura 16.

6. Volte à página JSP de teste. Selecione uma tag dataTable do Tomahawk (arraste uma nova da paleta, se necessário) e vá para a visualização Propriedades.
7. Localize o atributo newspaperOrientation e observe que, quando você clica no campo de edição, os valores especificados a pouco são mostrados como opções.

A seção Ligação de Dados

A seção Ligação de Dados no editor de definição da biblioteca permite que você altere alguns detalhes de como as ferramentas ligam dados a componentes JSF específicos. Normalmente, a definição da biblioteca é criada com os valores padrão apropriados para a maioria dos casos; mas pode haver alguns casos especiais ou nomes de atributos não-padrão que exijam mudanças.

Localize a tag commandButton na definição da biblioteca e abra a seção Ligação de Dados para examinar os valores configuráveis. Você verá que, por padrão, o valor do atributo é usado para ligação. Essa opção especifica que atributos serão modificados quando você arrastar dados da visualização Dados da Página para uma tag JSF na página. Em alguns casos, um atributo diferente é usado para as ligações típicas e uma opção alternativa pode ser selecionada na lista suspensa.

Agora, observe a seção Ligação de Dados da tag dataTable do Tomahawk. Você observará, nesse caso, que a caixa de opções que especifica dados com diversos valores está selecionada. Isso indica que o componente dataTable espera iterar ciclicamente sobre uma coleta de dados durante a renderização da saída. Marcar essa caixa faz com que as expressões de valores sejam escritas de forma um pouco diferente (com a omissão de um [0] no final da cadeia de caracteres de ligação).

O último item na seção Ligação de Dados especifica um atributo utilizado na exibição de uma coleta de dados. Você verá que a tag dataTable do Tomahawk foi definida para o atributo var JSF padrão. Esse atributo será designado na ligação da tag dataTable e será usado para gerar expressões de ligação para outros componentes JSF aninhados na dataTable. Normalmente, ele é especificado em conjunto com a caixa de opção com diversos valores discutida anteriormente.

Na maioria dos casos, os componentes do Tomahawk já devem estar configurados corretamente, mas você pode explorar a funcionalidade Ligação de Dados alterando os valores nesta seção de uma tag. Observe que soltar dados da visualização Dados da Página resultará na alteração de atributos diferentes.

A seção Tags-Filhas

A seção Tags-Filhas é opcional e podem ser incluída em uma tag na definição da biblioteca. Ela contém um padrão para gerar novas tags, que são incluídas dentro da tag selecionada, e fornece um atalho útil para algumas operações comuns de edição de página. No exemplo a seguir, você simplificará a inclusão de novas colunas em uma tabela de dados do Tomahawk.

1. Selecione a tag dataTable na definição da biblioteca Tomahawk.
2. Clique no botão Adicionar no editor. Quando o diálogo aparecer, selecione Tags-Filhas (a única opção) e clique em OK.
3. Especifique Nova Coluna como o nome do padrão.
4. Digite uma descrição (opcional).
5. Inclua o texto mostrado na Listagem 3 no campo Padrão ilustrado na Figura 17. Observe que o padrão está definindo outras tags JSF para compor uma nova coluna e sua seção de cabeçalho dentro da dataTable. Todos os prefixos de tag e alguns valores de atributos devem usar variáveis computadas (as expressões ${}), que você pode incluir em um padrão usando o botão Inserir Variável.

<${t}:column styleClass=column id=${id}>
  <${f}:facet name=header>
    <${t}:outputText value=Column Name />
  </${f}:facet>
</${t}:column>

6. Clique em OK para salvar o novo padrão de Tags-Filhas.
7. Salve a definição da biblioteca.
8. Agora, volte à página JSP de teste e solte um novo componente dataTable desde gaveta Tomahawk na paleta.
9. Mantendo a tag dataTable selecionada, vá para a visualização Propriedades e clique no botão para adicionar novas tags-filhas. Selecione New Column na lista suspensa (esse é o nome que você acaba de especificar para o padrão acima).

10. Observe que uma tag de nova coluna foi adicionada à dataTable e os valores apropriados foram substituídos pelos prefixos da tag e o ID do componente.

A seção Modelos de Dados

Modelos de Dados é uma seção opcional, abaixo da seção Definição da Biblioteca de Faces, que pode ser usada melhorar o comportamento da visualização Dados da Página. Quando você arrasta alguns dados da exibição Dados da Página para uma página JSP, um assistente é exibido e permite que você escolha os tipos de controle a serem gerados. É possível aumentar o número de opções nesse assistente criando novos modelos de dados para as tags na biblioteca de componentes.

Há dois tipos de modelos de dados disponíveis no editor de definição de biblioteca. Os modelos Propriedade destinam-se aos tipos de controle mais básicos. Por exemplo, é possível criar um modelo para o componente inputDate do Tomahawk e associá-lo a um tipo java.util.Date. Use modelos Iterativos para gerar controles aninhados mais complexos associados com coletas de dados. Por exemplo, crie um modelo iterativo que gere as tags dataTable e column do Tomahawk durante uma operação soltar lista de dados.

O sistema de modelos usado nas definições da biblioteca é o mesmo usado para a configuração de todo o produto, e pode ser encontrado em Janela > Preferências > Web > Ferramentas JavaServer Faces > Modelos de Geração. A inserção de modelos de dados em uma definição de biblioteca simplesmente provê um meio consistente para compartilhar as opções de modelo dos componentes dessa biblioteca com todos os usuários da biblioteca.

Voltar para parte superior

Boas Práticas

Até agora, vimos como configurar diversos elementos comuns em uma definição de biblioteca a fim de melhorar a experiência de desenvolvimento usando componentes JSF de terceiros. Depois de configurar uma definição de biblioteca ao seu paladar, provavelmente, você desejará compartilhá-la com outros desenvolvedores. A melhor forma de fazer isso é efetuar o registro de entrada das definições da biblioteca em um sistema de controle de origem e permitir que outros desenvolvedores efetuem o registro de saída das definições para sua própria área de trabalho. Lembre-se de que a mera presença da definição de biblioteca em uma área de trabalho é suficiente para que as ferramentas se comportem como previsto.

Há diversos pontos adicionais que devem ser considerados ao se construir uma definição de biblioteca:

• Se uma biblioteca de componentes JSF necessitar de vários arquivos JAR, é melhor especificá-los diretamente no assistente Definição da Biblioteca de Faces. Neste exemplo do Tomahawk, você selecionou apenas o arquivo JAR do tomahawk no assistente e incluiu os arquivos JAR do Apache Commons posteriormente na configuração. Esse processo funciona bem para o Tomahawk, no entanto, em alguns casos, os arquivos JAR dependentes precisam estar, de fato, no caminho de classe para que os componentes JSF sejam devidamente analisados enquanto a ferramenta gera uma definição de biblioteca. Um exemplo disso, é a biblioteca de componentes MyFaces Trinidad, que permite que você aponte para o arquivo jar trinidad-impl, a fim de definir a biblioteca de componentes, mas exige a inclusão adicional do arquivo jar trinidad-api na segunda página do assistente de definições da biblioteca, com o intuito de prevenir erros.
• Como você viu na seção anterior, as ferramentas usam o número da versão de uma definição de biblioteca para gerenciar a atualização dos recursos do projeto sempre que uma nova definição torna-se disponível. Esse mecanismo resulta em várias convenções que é aconselhável que você adote:
  • Renomeie os arquivos JAR que compõem uma biblioteca de componentes para usar nomes genéricos. Por exemplo, tomahawk.jar em vez de tomahawk-1.1.8.jar. Isso simplificará bastante as futuras atualizações, uma vez que, quando o tomahawk-1.1.9.jar (por exemplo) for liberado no futuro, você poderá atualizar a definição da biblioteca e manter o mesmo nome de arquivo. Assim, quaisquer atualizações nos projetos da Web existentes simplesmente substituirão o tomahawk.jar existente e nenhuma etapa será necessária.
  • Se houver várias definições da mesma biblioteca de tags na sua área de trabalho, as ferramentas ignorarão todas exceto aquela com o número de versão mais elevado. Por questão de clareza, especialmente se você alterar os nomes dos arquivos JAR e remover informações específicas da versão, defina a cadeia de caracteres versão na definição da biblioteca com alguma informação útil. A versão é inicialmente definida como 1.0, mas pode ser qualquer número que corresponda ao formato a.b.c.d (o padrão segue as regras de controle de versão de plug-in do Eclipse). Assim, no exemplo dado, defina a versão da biblioteca como 1.1.8 para representar o arquivo JAR do Tomahawk utilizado.

Voltar para parte superior

Resumo

Este artigo abordou os novos recursos para utilização de componentes JSF de terceiros no Rational Application Developer. Criar uma definição de biblioteca é um modo fácil de fazer as ferramentas reconhecerem as novas bibliotecas de componentes. Existe uma abundância de parâmetros de configuração para ajudá-lo a ajustar devidamente os diversos comportamentos. Assim que estiver satisfeito com a configuração da definição da biblioteca, você pode facilmente compartilhá-la com outros desenvolvedores de modo que todos que trabalham com os componentes tenham a mesma experiência.

Recursos

• Explore o espaço Ferramentas JavaServer Faces (JSF) no developerWorks para obter mais informações.
  
  
• Leia O Que Há de Novo no Conjunto de Ferramentas JavaServer Faces no IBM Rational Application Developer Versão 7.5, de Yury Kats, para obter informações sobre recursos de desenvolvimento JSF, a partir deste release.
  
  
• Aprenda sobre outros aplicativos na IBM Rational Software Delivery Platform, incluindo ferramentas de colaboração para desenvolvimento paralelo e equipes geograficamente dispersas, além de software especializado para gerenciamento de arquitetura, gerenciamento de ativos, gerenciamento de mudança e release, gerenciamento de requisitos integrados, gerenciamento de processo e portfólio, e gerenciamento de qualidade.
  
  
• Visite a Área de software Rational em developerWorks para obter os recursos técnicos e melhores práticas para produtos Rational Software Delivery Platform.
  
  
• Explore Cursos on-line de Rational baseados em computador, baseados na Web e conduzidos por instrutor. Aprimore suas habilidades e aprenda mais sobre as ferramentas Rational com esses cursos, que vão de introdutório a avançado. Os cursos desse catálogo estão disponíveis para compra de treinamento baseado em computador ou baseado na Web. Além disso, alguns cursos de "Introdução" estão disponíveis sem custo.
  
  
• Assine a newsletter Rational Edge para receber artigos sobre os conceitos por trás do desenvolvimento eficiente de software.
  
  
• Assine a newsletter IBM developerWorks, atualizada semanalmente para receber os melhores tutoriais, artigos, downloads, atividades de comunidade, webcasts e eventos sobre developerWorks.
  
  
• Navegue até a livraria de tecnologia para ver livros sobre estes e outros tópicos técnicos.
  
  

• Faça download das versões de teste do software IBM Rational.
  
  
• Baixe essas versões de avaliação de produtos IBM e use as ferramentas de desenvolvimento de aplicativos e produtos middleware a partir do DB2®, Lotus®, Tivoli®, e WebSphere®.

• Associe-se aos fóruns do Rational Development Tools e Java Technology para trocar visualizações e informações com outros desenvolvedores.
  
  
• Verifique os blogs de developerWorks e faça parte da comunidade do developerWorks.
  
  

Sobre o autor

		Scott Paxton is a developer who works on JavaServer Faces tools as part of the IBM Rational Application Developer team.

Avalie esta página

Reserve um instante para completar este formulário para nos ajudar a servi-lo melhor. As informações o ajudaram a alcançar seu objetivo? Sim Não Não sei   Faça comentários para ajudar a melhorar esta página:   Quão úteis são as informações? 1 2 3 4 5 Não são úteis Extremamente úteis