HOME / Docs & Support / NetBeans 6.1 / Web Application Documentation

Introdução ao JSF Framework

Este documento é o primeiro de uma série que o orienta nos fundamentos do uso do framework JavaServer Faces (JSF) para codificar aplicações Web no NetBeans IDE. Após a série de tutoriais, você cria uma aplicação Web chamada jAstrologer que pega o nome e a data de aniversário do usuário e retorna informações como o signo do zodíaco, a pedra e o horóscopo do usuário.

O framework JavaServer Faces é o padrão para a construção de componentes para a interface de usuário em aplicações Web. Pense no framework JSF como uma caixa de ferramentas cheia de componentes prontos para serem usados que você pode reutilizar de forma rápida e fácil em sua aplicação Web. Esses componentes podem ser simples, desde campos de entrada de texto que obtêm e armazenam dados do usuário, a componentes mais complexos, como um campo de data formatado com um calendário pop-up. Você incorpora os componentes em páginas JSP e usa o framework para manipular a navegação entre páginas JSP diferentes.

Conteúdo

O conteúdo desta página se aplica ao IDE NetBeans 6.0/6.1

Criando uma aplicação Web com o framework JSF
Criando as páginas JSP
Definindo a navegação de página
Configurando e executando o aplicativo
Enganchando um bean de apoio
Consulte também

Para seguir este tutorial, você precisa dos seguintes recursos e softwares.

Software ou recurso	Versão necessária
NetBeans IDE	Instalação do Web e Java EE versão 6.1 ou 6.0
Java Development Kit (JDK)	versão 6 ou 5
GlassFish	V2

Observação: O servidor da aplicação GlassFish versão V2 Update Release 1 é incluído opcionalmente na instalação Web e Java EE do NetBeans IDE.

Criando uma aplicação Web com o framework JSF

O NetBeans IDE permite que você adicione suporte a JSF em uma aplicação Web quando cria um novo projeto, assim como a qualquer projeto de aplicação Web existente aberto no IDE. O servidor GlassFish já inclui as bibliotecas JSF, portanto, você não precisa baixar ou instalar as mesmas no servidor da aplicação. Neste exemplo, você adiciona o suporte a JSF enquanto cria um novo projeto de aplicação Web.

Escolha Arquivo > Novo projeto (Ctrl-Shift-N) para abrir o assistente para Novo projeto. Em Categorias, selecione Web; em Projetos, selecione Aplicação Web. Clique em Próximo.
Chame o projeto de jAstrologer, especifique uma localização para o projeto em seu computador e clique em Próximo.
Na terceira etapa do assistente, Servidor e configurações, defina o servidor como GlassFish V2, defina a versão de Java EE como Java EE 5, e clique em Próximo.
Selecione a opção JavaServer Faces e clique em Terminar.

O IDE cria um modelo de projeto para o aplicativo inteiro, e abre uma página JSP vazia (welcomeJSF.jsp) no editor de código-fonte. Você pode ver a nova estrutura lógica do projeto na janela Projetos (Ctrl-1). Expanda o nó Bibliotecas > GlassFish V2 do projeto. Observe que as bibliotecas JSF, tal como jsf-impl.jar, são adicionadas ao classpath. Expanda Arquivos de configuração e observe que o IDE criou um arquivo faces-config.xml, que controla o comportamento dos componentes JSF na aplicação Web. O IDE também registrou o servlet do Faces no descritor de deployment web.xml. O servlet do Faces manipula a navegação entre páginas JSP que são controladas pelo framework JSF .

Novo projeto jAstrologer exibido na janela Projetos

Criando as páginas JSP

Crie uma nova página JSP chamada greeting.jsp que dá boas-vindas ao usuário e coleta suas informações. Em seguida, crie uma página success.jsp que parabeniza o usuário em resposta ao recebimento de dados do formulário.

Criando a página de saudação

Na janela Projetos, clique com o botão direito do mouse no nó do projeto e escolha Novo > JSP. Chame o arquivo de greeting. Certifique-se de que a opção Arquivo JSP (sintaxe padrão) esteja selecionada e clique em Terminar. O IDE cria o novo arquivo JSP e o abre no editor de código-fonte. Além disso, observe que o arquivo é adicionado ao nó Páginas da Web na janela Projetos.
No editor de código-fonte, declare as bibliotecas da marca JSF em greeting.jsp. Faça isso adicionando o código seguinte no início do arquivo:
```
<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@taglib prefix="h" uri="http://java.sun.com/jsf/html" %>
```
Observe que você pode usar o suporte interno do IDE para auto-completar de código. Conforme você digita, pressione Ctrl-Espaço para listar as sugestões baseadas no contexto. Dessa forma, o auto-completar de código pode ajudá-lo a adicionar nomes e atributos de marca, tais como as URIs das bibliotecas de marcas.
Altere o conteúdo das marcas title e h2 para Bem-vindo ao jAstrologer.
Agora adicione um formulário JSF ao arquivo. Na Paleta (Ctrl-Shift-8), expanda a categoria JSF. Você pode arrastar e soltar itens da paleta diretamente no editor de código-fonte. Clique no botão Formulário JSF, arraste o item para um ponto abaixo das marcas h2, e libere o botão do mouse. Na caixa de diálogo que é exibida, deixe Formulário vazio selecionado e clique em OK. O IDE preenche o código seguinte (mostrado em negrito):
```
<h2>Welcome to jAstrologer</h2>

<f:view>
    <h:form>
    </h:form>
</f:view>
```
Você pode usar componentes inputText para obter entrada do usuário e um componente commandButton para enviar o formulário. No editor de código-fonte, altere o conteúdo das marcas <h:form> para o seguinte (alterações em negrito):
```
<f:view>
    <h:form>
        <p>Indique seu nome: <h:inputText value="name" /></p>
        <p>Indique sua data de aniversário: <h:inputText value="birthday" /></p>
        <h:commandButton value="Submit" action="submit" />
    </h:form>
</f:view>
```
Para formatar seu código, clique com o botão direito do mouse no editor de código-fonte e escolha Formatar (Alt-Shift-F).

Criando a página de sucesso

Agora crie uma página JSP que simplesmente diga 'Parabéns'.

Crie um novo arquivo JSP como descrito acima. Chame o arquivo de success.

Altere o conteúdo do arquivo para o seguinte:

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Congratulations</title>
</head>
<body>
    <h2>Congratulations</h2>

    <p>You've successfully registered with jAstrologer.</p>
</body>

Observe que o arquivo até o momento contém HTML sem formatação, portanto, ainda não é preciso declarar as bibliotecas da marca JSF.

Definindo a navegação de página

A navegação de página no framework JSF é controlada por faces-config.xml. Para cada página JSP no projeto, você configura uma regra de navegação em faces-config.xml que contém um ou mais casos de navegação. Aqui, você pode simplesmente mapear a ação de envio do commandButton para success.jsp, de forma que o usuário veja uma mensagem de sucesso independentemente do que é indicado nos campos.

Na janela Projetos, clique duas vezes em faces-config.xml para abrir o arquivo no editor de código-fonte. Na barra de ferramentas acima do arquivo, clique em XML para exibir o arquivo em XML sem formatação.
Clique com o botão direito do mouse em qualquer lugar no arquivo e escolha Java ServerFaces > Adicionar regra de navegação. Digite /greeting.jsp no campo Regra da visualização e opcionalmente indique uma descrição da regra.

Clique em Adicionar. O código seguinte é indicado no faces-config.xml:
```
<navigation-rule>
    <description>
        handle user input
    </description>
    <from-view-id>/greeting.jsp</from-view-id>
</navigation-rule>
```
Novamente, clique com o botão direito do mouse dentro de faces-config.xml e escolha Java ServerFaces > Adicionar caso de navegação. Na caixa de diálogo que é exibida, defina o seguinte:
- Da visualização: /greeting.jsp
- Do resultado: submit
- Para visualização: /success.jsp
Clique em Adicionar. O IDE indica o código seguinte no faces-config.xml (alterações em negrito):
```
<navigation-rule>
    <description>
        handle user input
    </description>
    <from-view-id>/greeting.jsp</from-view-id>
    <navigation-case>
        <from-outcome>submit</from-outcome>
        <to-view-id>/success.jsp</to-view-id>
    </navigation-case>
</navigation-rule>
```

Configurando e executando o aplicativo

Configure o IDE para exibir greeting.jsp quando ele executa o aplicativo e, finalmente, teste o aplicativo.

Na janela Projetos, clique com o botão direito do mouse no nó do projeto e escolha Propriedades.
Clique no nó Executar e digite /faces/greeting.jsp no campo URL relativa. Isso permite que você especifique o ponto de entrada do aplicativo no IDE. Clique em OK.
Clique com o botão direito do mouse no nó do projeto e escolha Executar (F6). O IDE constrói o projeto, inicia o servidor da aplicação, implanta a aplicação e mostra a página seguinte no navegador externo padrão:

Quando clica no botão Enviar, você vê o seguinte:

Enganchando um bean de apoio

Na seção anterior, você criou uma aplicação Web simples com componentes. Entretanto, a aplicação Web não faz nada interessante - ainda. Para adicionar funcionalidade rich às suas aplicações Web JSF, você pode associar seus componentes UI a beans de apoio. Um bean de apoio, também chamado de bean gerenciado JSF, é um componente JavaBeans regular cujos métodos e propriedades de bean estão disponíveis para os componentes JSF.

Nesta seção, você cria um bean gerenciado UserBean que exporá duas propriedades de bean p: name e birthday.

Na janela Projetos, clique com o botão direito do mouse no nó do projeto e escolha Novo > Outro (Ctrl-N). Na categoria JavaServer Faces, selecione o modelo Bean gerenciado JSF e clique em Próximo.
Chame o bean de UserBean e crie um novo pacote chamado astrologer.user para colocá-lo. Deixe o resto das configurações como valores padrão e clique em Terminar.

O IDE abre UserBean.java no editor de código-fonte e adiciona a declaração de bean seguinte a faces-config.xml:
```
<managed-bean>
    <managed-bean-name>UserBean</managed-bean-name>
    <managed-bean-class>astrologer.user.UserBean</managed-bean-class>
    <managed-bean-scope>request</managed-bean-scope>
</managed-bean>
```
Adicione as declarações de campo seguintes (mostradas em negrito) a UserBean.java:
```
public class UserBean {

    String name;
    String birthday;
```
Gere os getters e setters dos campos: clique com o botão direito do mouse em qualquer lugar no arquivo e escolha Refatorar > Encapsular campos. Na caixa de diálogo que é exibida, selecione as opções getter e setter de name e birthday, em seguida, clique em Refatorar.

O IDE alterna o nível de acesso dos campos para private e cria métodos getter e setter diretamente no arquivo.
Em greeting.jsp, faça as seguintes alterações (mostradas em negrito).
```
<f:view>
    <h:form>
        <p>Enter your name: <h:inputText value="#{UserBean.name}" /></p>
        <p>Enter your birthday: <h:inputText value="#{UserBean.birthday}" /></p>
        <h:commandButton value="Submit" action="submit" />
    </h:form>
</f:view>
```
Conforme você indica as alterações, use o suporte a auto-completar de código do IDE para UserBeans.java e suas propriedades, pressionando Ctrl-Espaço e escolhendo as opções disponíveis.
Adicione as declarações taglib JSF a success.jsp. Você pode copiá-las e colá-las de greeting.jsp.
Adicione um formulário JSF vazio a success.jsp, clicando no botão Formulário do JSF na janela Paleta (Ctrl-Shift-8) e arrastando-o para um ponto abaixo das marcas <h2> no editor de código-fonte.

Faça as alterações seguintes no success.jsp (alterações em negrito):

<h2>Congratulations</h2>

    <f:view>
        <h:form>
            <p>You've successfully registered with jAstrologer.</p>
            <p>Your name is <h:outputText value="#{UserBean.name}" /></p>
            <p>Your birthday is <h:outputText value="#{UserBean.birthday}" /></p>
        </h:form>
    </f:view>

Na janela Projetos, clique com o botão direito do mouse no nó do projeto e escolha Executar. A mesma página greeting.jsp é exibida em um navegador quando o aplicativo é reimplantado e executado. Quando você indica valores e clica em Enviar, success.jsp agora exibe os valores indicados, como mostrado abaixo:

Envie-nos seus comentários

Consulte também

Este documento descreveu como criar uma aplicação Web usando o framework JSF no NetBeans IDE. Ele demonstrou como criar uma página JSP simples que usa componentes JSF para obter entrada do usuário, e como configurar a navegação de página. Ele também mostrou como criar um bean gerenciado JSF e ler e gravar a entrada do usuário nas propriedades do bean.

Para obter mais informações sobre o uso de outros frameworks da Web no NetBeans IDE, consulte os seguintes recursos:

Introdução ao JSF Framework

Criando uma aplicação Web com o framework JSF

Criando as páginas JSP

Criando a página de saudação

Criando a página de sucesso

Definindo a navegação de página

Configurando e executando o aplicativo

Enganchando um bean de apoio

Consulte também

Training

Support

Documentation

More