Criação da tela e dos inputs básicos de dados

Figura 3.1: Formulário que vamos construir

Para criarmos essa tela, o primeiro passo é termos um arquivo XHTML, no qual escreveremos o código necessário para mostrar o formulário de cadastro de auto- móveis. Podemos chamar esse arquivo de cadastraAutomoveis.xhtml_.

Quando desenvolvemos um projeto usando o JSF, a construção da tela se torna um pouco diferente de outros frameworks, como o Struts, VRaptor e SpringMVC, nos quais costumamos usar apenas elementos HTML para criar os formulários, ta- belas e demais características da visualização das informações. No JSF, praticamente toda a tela é criada a partir de Taglibs próprias dele, que possuem o papel de ren- derizar o HTML adequado para o funcionamento do framework. Por esse motivo, no começo do nosso documento XHTML, precisamos importar essas Taglibs com o seguinte código:

Note que na abertura da Tag html_{indicamos alguns namespaces. O primeiro é o} namespace padrão para XHTMLs, enquanto o outro é específico para conseguirmos usar as Tags do JSF em nosso XHTML.

O xmlns:h="http://java.sun.com/jsf/html” _{indica que estamos habilitando} através do prefixo h_{as Tags do JSF que renderizam HTML.}

3.2 Criação da tela e dos inputs básicos de dados

Com as Tags habilitadas pelo namespace h_{, podemos agora construir o conteúdo} da página, contendo o formulário e os campos para que os usuários possam co-

Casa do Código Capítulo 3. Primeiros passos com o JSF locar os dados do automóvel a ser cadastrado. Dentro da Tag html_{, podemos} definir o corpo da página e um campo de texto para a marca do automóvel. Va- mos fazer isso utilizando as Tags do JSF. Para isso, vamos escrever no arquivo cadastraAutomoveis.xhtml_: <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html"> <h:body> <h:form> Marca: <h:inputText /> </h:form> </h:body> </html>

Esse XHTML mínimo gera a tela da figura3.2.

Figura 3.2: Formulário JSF com um único campo

Repare que usamos a Tag h:body _{em vez da} body_{do HTML, a} h:form no lugar de form_e h:inputText_{em vez de} input type="text"_{. Estamos} usando os componentes do JSF para gerar o HTML para nós. Se acessarmos esse cadastraAutomoveis.xhtml_{no navegador e pedirmos para ver o código fonte} gerado, ele será similar ao código a seguir:

<form id="j_idt4" name="j_idt4" method="post"

action="/faces-motors/automovel/editar.jsf" enctype="application/x-www-form-urlencoded"> <input type="hidden" name="j_idt4" value="j_idt4" /> Marca: <input type="text" name="j_idt4:j_idt25" /> <input type="hidden" name="javax.faces.ViewState"

id="javax.faces.ViewState"

3.2. Criação da tela e dos inputs básicos de dados Casa do Código value="-2173774569225484208:-2914758950899476002" autocomplete="off" /> </form> </body> </html>

O código fonte é gerado pelo próprio JSF. Repare no name_do input_{: é um} código também gerado pelo JSF. Esses códigos que a princípio parecem malucos são primordiais para o bom funcionamento do JSF. Com o passar do tempo nos acos- tumaremos com eles e vamos entender por completo o motivo de eles serem tão importantes para o JSF.

Esse formulário pode ser expandido para abranger todos os campos que pre- cisaremos para o automóvel, como o modelo, ano de fabricação, ano do modelo e observações. <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html"> <h:body> <h:form> Marca: <h:inputText /><br/> Modelo: <h:inputText /><br/>

Ano de Fabricação: <h:inputText /><br/> Ano do Modelo: <h:inputText /><br/> Observações: <h:inputTextarea /><br/> </h:form>

</h:body> </html>

Ao abrirmos essa página no navegador, teremos uma tela parecida com a da fi- gura3.3.

Casa do Código Capítulo 3. Primeiros passos com o JSF

Figura 3.3: Formulário com layout desorganizado

Note como o conteúdo ficou todo desalinhado. As descrições dos campos em- purram os inputs_{para a direita e isso faz com que a tela pareça torta e estranha.} Pensando em HTML, podemos contornar esse problema de pelo menos duas ma- neiras: a primeira, criando uma tabela para o formulário e dividindo a descrição e o campo em colunas diferentes, e a segunda seria fazendo esse trabalho de alinhamento com CSS.

Com o JSF, podemos fazer esse alinhamento de uma maneira bem simples. Basta envolver o conteúdo do formulário na Tag h:panelGrid_{, que divide o conteúdo} que estiver dentro dela em colunas. Podemos indicar quantas colunas queremos pelo atributo columns_. <h:body> <h:form> <h:panelGrid columns="2"> Marca: <h:inputText /> Modelo: <h:inputText />

Ano de Fabricação: <h:inputText /> Ano do Modelo: <h:inputText /> Observações: <h:inputTextarea /> </h:panelGrid>

</h:form> </h:body>

O h:panelGrid_{quebra as linhas e colunas a partir dos elementos existentes} dentro dele. Dessa forma, o texto Marca:_{fica em uma coluna e o} h:inputText dele fica em outra coluna. Como já se completaram duas colunas, os próximos con- teúdos virão na linha seguinte. E assim sucessivamente, até fazer a organização de todo o formulário.

No documento Casa do Código. Agradecimentos (páginas 52-56)