Tags e Componentes JSF nativos

A forma mais comum de definir a View das aplicações JavaServer Faces é a utilização de ficheiros XHTML com tags próprias dos componentes JSF.

Este ficheiros são processados pela engine do Facelets, que fazem parte do Framework javaServer Faces, e os componentes são convertidos em código HTML que é enviado ao browser para mostrar o resultado ao utilizador.

JavaServer Faces na construção das páginas Web

As páginas Web construídas com Facelets, representam a camada de apresentação da aplicação.

O processo de criação das páginas de uma aplicação com JavaServer Faces compreende e implica a utilização das tags dos componentes. Através das tags os componentes são adicionados às páginas e são ligados aos backing beans, validadores, listeners, conversores, e outros objetos server-side associados e/ou relacionados com a página.

Nesta parte do ebook será apresentada a forma padrão para a criação das páginas Web usando vários tipos de componentes e as principais tags JSF. A seguir serão expostos os procedimentos para adicionar conversores, validadores, e listeners às tags dos componentes de modo a dar-lhes funcionalidades adicionais.

Configuração da página

Uma página JavaServer Faces padrão inclui os seguintes elementos:

. Declarações de namespaces que habilitam as bibliotecas de tags do framework JavaServer Faces

. Opcionalmente, a tag HTML de cabeçalho (h:head) e a tag do corpo da página (h:body)

. Uma tag de formulário (h:form) que representa os componentes de entrada de dados.

O desenvolvimento de aplicações com JavaServer Faces implica um bom conhecimento e domínio das bibliotecas de tags. Com o JSF 1.2 existiam duas bibliotecas padrão: a biblioteca de tags HTML e a biblioteca Core. Com o JSF 2.0 o número de bibliotecas foi incrementado para seis(6), com mais de 100 tags.

Namespaces

Para adicionar componentes JavaServer Faces às páginas web é necessário definir o acesso das páginas à pelo menos às duas bibliotecas de tags do JavaServer Faces.O JavaServer Faces tem seis(6) bibliotecas, sendo duas delas, bibliotecas padrão.A biblioteca com o kite para a renderização de HTML e a biblioteca de tags core.

A biblioteca de tags HTML contém a tags que representam os componentes HTML mais comuns para a definição da interface gráfica da aplicação.

A biblioteca de tags core contém as tags que executam ações core e são independentes de qualquer kit de renderização.

Para utilizar qualquer tag de um componente JavaServer Faces é necessário incluir as diretivas apropriadas na parte superior de cada página, especificando as bibliotecas de tag a utilizar.

Para as aplicações JavaServer Faces construídas com Facelets as diretivas dos namespaces XML identificam de forma unívoca a URI (Uniform Resource Identifier - Identificador Uniforme de Recurso) e a tag de prefixo.

Quando se cria uma página XHTML com facelets os namespaces a inserir são os seguintes:

Numa página:

<html xmlns="http://www.w3.org/1999/xhtml"
   xmlns:h="http://xmlns.jcp.org/jsf/html"
     xmlns:f="http://xmlns.jcp.org/jsf/core">

Num template:
<html xmlns="http://www.w3.org/1999/xhtml"
   xmlns:h="http://xmlns.jcp.org/jsf/html"
 xmlns:ui="http://xmlns.jcp.org/jsf/facelets">

Esqueleto de uma página JSF com as duas bibliotecas padrão do JSF

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:h="http://xmlns.jcp.org/jsf/html"
   xmlns:f="http://xmlns.jcp.org/jsf/core">
    <h:head>
        <title>Facelet Title</title>
    </h:head>
    <h:body>
        Hello from Facelets
    </h:body>
</html>

Quando se declara um namespace também é necessário especificar o prefixo que as tags do namespace vão utilizar. No caso dos três namespaces apresentados anteriormente, os prefixos são:

h - para a biblioteca de Tags HTML do JSF. Exemplo : <h:outputText/>

f - para a biblioteca de tags core do JSF. Exemplo: <f:convertDateTime pattern="MM/dd/yyyy" />

ui - para biblioteca de tags dos facelets para templating. Exemplo:<ui:composition/>

A URI XML do namespace identifica de forma unívoca a biblioteca de tags e o valor do prefixo é usado para distinguir as tags que pertencem a uma determinada biblioteca.

É possível usar outros prefixos, em vez do padrão h ou f. No entanto, ao incluir a tag na página é necessário usar o prefixo escolhido para a biblioteca de tags.

Por exemplo, no pequeno extrato de código de uma página Web JSF que pode ser visto a seguir, a tag form é referenciada usando o prefixo h porque na definição da diretiva do namespace foi usado o prefixo h, para distinguir as tags disponíveis na biblioteca de tags HTML do JSF.

Exemplo:

<h:body>
<h:form>
 <h:outputLabel value="Nome:" for="nome" />
 <h:inputText id="nome" value="#"/>
</h:form>
</h:body>

Adição de componentes da biblioteca de tags HTML à página

As tags definidas na biblioteca HTML do JavaServer Faces, representam componentes HTML de formulário e outros elementos básicos que constituem uma página web.

Estes componentes podem visualizar dados ou aceitar dados de entrada do usuário. Os dados são recebidos como parte do formulário e são enviados ao servidor quando o usuário faz clique num botão do tipo submit.

Nesta parte do manual serão apresentados os componentes de tags mostrados na tabela a seguir e será explicado o uso e especificidade de cada um.

As tags JSF HTML podem ser agrupadas em categorias como pode ser visto na tabela a seguir:

Categoria Tags
Entrada de dados inputText, inputTextArea, inputSecret, inputHidden, inputFile
Saída de dados outputText, outputLabel, outputLink, outputFormat
Comandos commadButton, commandLink
Seleções selectOneListBox, selectOneMenu, selectOneRadio, selectBooleanCheckbox, selectManyCheckbox, selectManyListbox, selectManyMenu
Layout panelGrid, panelGroup
Tabela de dados dataTable, column

O desenvolvimento de aplicações com JavaServer Faces requer um bom domínio das bibliotecas de tags. No JSF 1.2 existiam duas bibliotecas padrão: HTML e Core. Com o JSF 2.0 o número de bibliotecas foi incrementado para seis (6), com mais de 100 tags. De lembrar que actual versão do JSF é a 2.2 e já está a vista a 2.3.

Componentes HTML

A biblioteca HTML do JavaServer Faces, importada através do namespace xmlns:h="http://xmlns.jcp.org/jsf/html" , contem tags que representam componentes de interface correspondentes à tags da linguagem de marcação tradicional HTML, tais como formulários, caixas de texto, botões de opção, caixas de combinação, etc.

Tags head e body

As tags head (h:head) e body (h:body) definem a estrutura HTML da página JavaServer Faces.

  • a tag h:head representa o cabeçalho da página HTML e

  • a tag h.body o corpo onde vai o conteúdo da página.

A seguir é apresentado o extracto de uma página com as tags h:head e h:body

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html">
    <h:head>
        <title>Tags head e body</title>
    </h:head>
    <h:body>       
    <!-- conteúdo da página-->        
    </h:body>
</html>

As secções definidas pelas tags head e body são geralmente utilizadas para definir o acesso a recursos como ficheiros CSS e/ou JavaScript.

Formulários

Os formulários são definidos, numa página JSF através da tag h:form e incluem componentes-filho que podem conter dados que tanto podem ser apresentados ao usuário ou submetidos e enviados ao servidor com o formulário.

A tag h.form representa o formulário numa página e encerra dentro de si todos os componentes para a visualização ou colecta de dados do usuário.

A tag h:form, por si só não define um layout. O Seu propósito é fazer a colecta de dados e declarar atributos que podem ser usados por outros componentes no formulário.

Uma página JSF pode ter vários formulários, no entanto apenas os valores do formulário submetido serão incluídos na requisição enviada ao servidor.

Na figura a seguir pode-se ver um formulário de login onde o usuário pode escrever o seu nome de usuário do sistema e a sua password e a seguir enviar o formulário numa requisição através do clique no botão login.

Código
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html">
    <h:head>
        <title>Login - Mirangol</title>
    </h:head>
    <h:body>
        <h:form>
            <h:panelGrid columns="2">
                <h:outputLabel value="User Name:"/>
                <h:inputText value="#{usuarioMBean.usuario.nomeUsurario}"/>                
                 <h:outputLabel value="Password:"/>
                 <h:inputSecret value="#{usuarioMBean.usuario.passwordUsuario}" />
            </h:panelGrid>
            <h:commandButton value="Login" action="#{usuarioMBean.login()}"/>
        </h:form>
    </h:body>
</html>

Componentes de texto

Os componentes de texto permitem visualizar e editar texto nas aplicações JSF.

Os tipos mais comuns de componentes de texto são os seguintes:

  • Etiqueta (h:outputLabel) que exibe um texto de apenas leitura

  • Caixa ou campo de texto (h:inputText) que permite a entrada de texto, numa ou mais linhas, frequentemente para ser enviado como parte de um formulário.

Semelhante a tag h:inputText existe a tag h:outputText para a leitura e visualização de conteúdos em forma de texto.

  • Caixa ou campo de senha (h:inputSecret) que um tipo de campo que mostra um conjunto de caracteres, asteriscos, por exemplo, em vez de mostrar o texto para password inserida pelo usuário

Os componentes de texto podem ser categorizados como componentes de entrada (input) ou de saída (output). Um componente JavaServer Faces de saída, como por exemplo uma etiqueta (label), é renderizada como um campo de texto de apenas leitura. Um componente de entrada, como por exemplo uma caixa de texto, é renderizada como um campo editável.

Tanto os componentes de entrada como os de saída, podem ser renderizados de diversas formas de modo a visualizar o seu conteúdo de forma mais amigável ou como se deseja que seja exibido.

Componentes de entrada

A tabela a seguir mostra os componentes de entrada.

Tag Função Exemplo
h:inputHidden renderiza um campo oculto na página <h:inputHidden value="#{usuarioMBean.usuario.idUsurario}"/>
h:inputSecret Campo padrão para password: aceita apenas uma linha de texto sem espaços e mostra o conteúdo digitado como um conjunto de asteriscos. h:inputSecret value="#{usuarioMBean.usuario.passwordUsuario}" />
h:inputText Campo padrão para a entrada de text. Aceita uma linha de uma string de texto <h:inputText value="#{usuarioMBean.usuario.nomeUsurario}"/>
h:inputTextarea Campo padrão para a escrita de múltiplas linhas de texto. <h:inputTextarea id="observacao" label="Observação:" value="value="#{usuarioMBean.usuario.observacao}"" cols="30" rows="10" />
h:inputFile É usado para o upload de ficheiros. O ficheiro carregado é armazenado numa propriedade do Managed Bean do tipo javax.servlet.http.Part. Como pré-requisito o encoding do formulário deve ser multipart/form-data, definido no atributo enctype da tag de abertura h:form. Este componente já traz suporte nativo para o AJAX e integração com a API do Servlet 3 <h:inputFile id="imagem" value="#{tipoProjetoMBean.imagemTipoProjeto}" title="Foto" />

Atributos

Estes componentes partilham alguns atributos. A tabela a seguir mostra os atributos mais usados com os componentes de entrada.

Atributo Descrição
converter Identifica um converter que será usado para converter os dados associados ao componente. O JSF tem alguns converter padrão e o programador pode criar conversores personalizados
converterMessage Especifica uma mensagem de erro a mostrar quando o converter associado ao componente não tiver sucesso.
dir Especifica a direção do texto visualizado pelo componente. Os valores aceites são ltr, que significa da esquerda para a direita, e rtl, que significa da direita para a esquerda.
label Especifica um nome que pode ser usado para identificar o componente nas mensagens de erro.
lang Especifica o código da língua usado na renderização, como pode exemplo en, it, pt_Br ou pt_PT
required Recebe um valor booleano (false ou true) que indica se o usuário deve ou não inserir valor no componente.
requiredMessage Especifica uma mensagem de erro a mostrar quando o usuário não inserir um valor num componente com o valor true no atributo required.
validator Identifica uma expressão de um método do Managed Bean que faz a validação dos dados do componente.
validatorMessage Especifica uma mensagem de erro a mostrar quando o validador registado no componente não tiver sucesso na validação do valor associado ao componente.
valueChangeListener Identifica uma expressão de um método que faz referência a um método do Managed Bean que trata dos eventos de entrada de uma valor para um componente.

Continua... ultima atualização 21/18/2017

results matching ""

    No results matching ""