Resumo
Neste guia de iniciação iremos construir e executar uma aplicação web JSF 2.0 e realçar as funcionalidades fornecidas pelo projecto das Ferramentas JSF.
O projecto das Ferramentas JSF facultar ferramentas que simplificam a construção de aplicações web JSF 2.0. Estas incluem um Editor de Origem HTML melhorado que faculta assistência a conteúdos e validação para identificadores JSF. Neste guia de iniciação iremos criar e executar uma aplicação web JSF 2.0. A página Novidades dignas de nota lista todas as funcionalidades das ferramentas disponíveis para suportar a programação de uma aplicação web JSF 2.0.
Criar uma nova aplicação web dinâmica com o nome de JSFFaceletsTutorial.
Defina o tempo de execução de destino para Apache Tomcat 6.0
Na secção Configuração, clique no botão Modificar
e seleccionar a faceta “JavaServer Faces 2.0”. Ignorar o painel
seguinte para ir para a página Capacidades de JSF.
Na página Capacidades de JSF, no menu pendente para o Tipo de Biblioteca JSF, seleccione Biblioteca de Utilizador.
Clique no ícone Descarregar biblioteca. É apresentado o diálogo Descarregar Biblioteca com a lista de fornecedores de ficheiros JAR de implementação JSF. Seleccionar a biblioteca de JSF 2.0 (Mojarra). Fazer clique em Seguinte.
Aceite a licença e prima Terminar
A aplicação de JSF foi criada.
Agora irá criar uma página de modelo de Facelets. Criar uma pasta designada modelos sob a pasta WEB-INF. Utilize o assistente HTML para criar uma página de modelo designada BasicTemplate.xhtml sob esta pasta. Faça clique com o botão direito do rato na pasta modelo, seleccione Nova > HTML para iniciar o assistente HTML. Na página Seleccionar modelos do assistente, seleccione o modelo Novo modelo de Facelet. Clique em Terminar.
Edite o ficheiro de modelo seguindo as instruções no modelo. Irá criar e incluir os modelos de cabeçalho e rodapé. O ficheiro de modelo final será apresentado conforme se mostra a seguir:
<!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:ui="http://java.sun.com/jsf/facelets">
<head>
<title><ui:insert name="title">Facelets Tutorial</ui:insert></title>
</head>
<body>
<div id="header">
<ui:insert name="header">
<ui:include src="/WEB-INF/templates/header.xhtml"/>
</ui:insert>
</div>
<div id="content">
<ui:insert name="content">
</ui:insert>
</div>
<div id="footer">
<ui:insert name="footer">
<ui:include src="/WEB-INF/templates/footer.xhtml"/>
</ui:insert>
</div>
</body>
</html>
Crie os modelos de cabeçalho e rodapé sob a pasta modelo utilizando o Novo Assistente HTML conforme se descreve anteriormente. Na página Seleccionar Modelo, seleccionar os ficheiros de modelo correspondentes, Novo Cabeçalho Facelet e Novo Rodapé Facelet. Efectue as alterações ao modelo conforme se mostra a seguir.
Crie uma página de JSF com identificadores Facelets que irá utilizar o modelo
criado no passo anterior. Utilize o assistente Página HMTL para criar uma página
denominada login.xhtml na pasta Conteúdo Web da nova
aplicação. Na página Seleccionar Modelos do assistente, seleccionar o modelo Página
Nova Composição de Facelet. Faça clique em Terminar.
login.xhtml
<!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:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<ui:composition template="">
<ui:define name="header">
Adicionar aqui o cabeçalho ou eliminar para utilizar a predefinição
</ui:define>
<ui:define name="content">
Adicionar aqui o conteúdo ou eliminar para utilizar a predefinição
</ui:define>
<ui:define name="footer">
Adicionar aqui o rodapé ou eliminar para utilizar a predefinição
</ui:define>
</ui:composition>
</html>
O projecto Ferramentas JSF adiciona suporte para validar atributos de identificadores de Facelets e também fornece Assistências a conteúdos. Tenha em atenção o aviso no atributo modelo de <ui:composition> tag.
Posicione o cursor entre as aspas duplas do atributo modelo e prima Ctrl + barra de espaços para obter a Assistência a Conteúdos. Deverá ver uma listagem emergente que lista os directórios sob a pasta WebContent. Seleccione /WEB-INF/templates/BasicTemplate.xhtml
Elimine os identificadores <ui:define> para o cabeçalho e para o rodapé. A página irá obter o cabeçalho e o rodapé do modelo. Adicione os identificadores para o início de sessão na secção Conteúdo conforme se mostra a seguir. Tenha em atenção que a edição actual do projecto Ferramentas JSF não suportam a representação visual de uma página XHTML no Editor de Páginas Web de JSF. No entanto, todas as funcionalidades de produtividade na Página de Origem do Editor de Páginas Web para editar uma página de JSF estão disponíveis no Editor de Origem HTML para construir uma página Facelets de JSF em XHTML.
<!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:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<ui:composition template="/WEB-INF/templates/BasicTemplate.xhtml">
<ui:define name="content">
<h:form>
<h:panelGrid columns="2">
<h:outputText value="Name"></h:outputText>
<h:inputText value="#{loginBean.name}"></h:inputText>
<h:outputText value="Password"></h:outputText>
<h:inputSecret value="#{loginBean.password}"></h:inputSecret>
</h:panelGrid>
<h:commandButton value="Login" action="login"></h:commandButton>
</h:form>
</ui:define>
</ui:composition>
</html>
/**
* LoginBean.java
*
*/
package com.tutorial;
public class LoginBean
{
private String name;
private String password;
public String getName() {
return name;
}
public void setName (final String name)
{
this.name = name;
}
public String getPassword ()
{
return password;
}
public void setPassword (final String password)
{
this.password = password;
}
}
Criar uma nova página HTML welcome.xhtml no WebContent com o seguinte conteúdo:
<!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:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<ui:composition template="/WEB-INF/templates/BasicTemplate.xhtml">
<ui:define name="content">
<h:outputLabel value="Welcome #{loginBean.name}"></h:outputLabel>
</ui:define>
</ui:composition>
</html>
Faça duplo clique em faces-config.xml para abrir o Editor de Configuração de Faces. Faça clique no separador Regra de Navegação. Agora arraste os ficheiros login.xhtml e welcome.xhtml do Explorador de Projectos na grelha da Regra de Navegação conforme se mostra.
Faça clique na ferramenta Ligar na paleta à direita. Agora arraste uma seta de login.xhtml para welcome.xhtml conforme se mostra.
Agora, faça clique na seta e abra a vista Propriedades. Faça clique no botão com elipses ao lado do campo “De Resultado”
Seleccionar “Início de Sessão” nesta caixa de diálogo. Faça clique OK.
A nossa regra está agora configurada.
Irá agora executar a página login.xhtml contra o servidor
Apache Tomcat. Seleccionar Executar no Servidor utilizando o menu de contexto
ao seleccionar a página login.xhtml no navegador. Seleccione
o servidor Apache Tomcat e configure-o conforme necessário se ainda
não o fez. Faça clique em Terminar. Deverá ver na vista Consola que o servidor Tomcat
é iniciado e deverá ver aparecer a página de início de sessão de execução
no navegador da Web, conforme se mostra a seguir.
Parabéns! Criou e executou a primeira aplicação Facelets de JSF.