Você pode utilizar os elementos HTML e Core disponibilizados pelos JSF para criar uma interface gráfica poderosa e completa sem precisar escrever códigos Java. O JSF suporta todos os componentes de IU entretanto pode ser turbinado utilizando frameworks adicionais como o PrimeFaces, RichFaces e BootsFaces, para que você utilize a ultima palavra em componentes ricos para suas interfaces de usuário Java EE.
JSF Elementos HTML – h
- <h:outputText> Processa um texto HTML.
- <h:inputText> Processa uma entrada HTML do tipo = “text“, caixa de texto.
- <h:commandButton> Processa um input type = HTML do botão “enviar”.
- <h:selectOneMenu> Processa uma caixa de combinação HTML (ComboBox).
- <h:selectOneRadio> Processa um único botão de opção HTML.
- <h:selectBooleanCheckbox> Processa uma caixa única de seleção HTML.
- <h:inputTextarea> Processa um campo de área para texto HTML.
- <h:panelGrid> Processa uma tabela HTML em forma de grade.
- <h:message> Processa mensagem para um componente de interface JSF.
JSF – Elementos – Core – f
- <f:loadBundle> Carrega um pacote de recursos para a localidade da visão atual e armazena-o como um Mapa no escopo de solicitação
- <f:validateRegex> Valida componente JSF com uma expressão regular.
- <f:validateDoubleRange> Valida gama de valor flutuante.
- <f:selectItem> Adiciona item selecionável em um campo de seleção.
- <f:convertDateTime> Converte uma string em uma data de formato desejado.
- <f:convertNumber> Converte uma string em um número de formato desejado.
Criando um Formulário JSF
1 – Crie uma aplicação web dinâmica JSF e utilize o código abaixo para rodar sua aplicação no servidor de aplicação de sua preferencia:
JSF – HTML e Core
2- Preencha os dados no formulário e os envie para ver o resultado.
JSF – Resultado
Exemplo:
Neste exemplo criamos um formulário e exibimos seu resultado através do elementos do framework JSF.
Managed JavaBean – Participante
package org.desenvolvimento.aberto;
import java.util.Date;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
// Define decoradores
@ManagedBean(name = "Participante")
@RequestScoped
public class Participante {
// Define atributos privados
private long id;
private String nome;
private String sobrenome;
private String cargo;
private Date data;
private double salario;
private String genero;
private boolean ativo;
private String observacao;
// Metodos Getter e Setter
public long getId() {
return id;
}
public void setId(long id) {
this.id = id;
}
public String getNome() {
return nome;
}
public void setNome(String nome) {
this.nome = nome;
}
public String getSobrenome() {
return sobrenome;
}
public void setSobrenome(String sobrenome) {
this.sobrenome = sobrenome;
}
public String getCargo() {
return cargo;
}
public void setCargo(String cargo) {
this.cargo = cargo;
}
public Date getData() {
return data;
}
public void setData(Date data) {
this.data = data;
}
public double getSalario() {
return salario;
}
public void setSalario(double salario) {
this.salario = salario;
}
public String getGenero() {
return genero;
}
public void setGenero(String genero) {
this.genero = genero;
}
public boolean isAtivo() {
return ativo;
}
public void setAtivo(boolean ativo) {
this.ativo = ativo;
}
public String getObservacao() {
return observacao;
}
public void setObservacao(String observacao) {
this.observacao = observacao;
}
}
Index.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">
<f:loadBundle basename="resources.application" var="msg" />
<head>
<title><h:outputText value="#{msg.welcomeTitle}" /></title>
</head>
<h:body>
<h2>JSF - Desenvolvimento Aberto - Managed Beans -</h2>
<h3>
<h:outputText id="lnome"
value="Java Server Faces- Elementos de Formulário - Cadastros:" />
</h3>
<h:form>
<fieldset style="padding: 10px">
<legend style="padding: 5px">Cadastro:</legend>
<h:panelGrid columns="3" cellpadding="2px">
<h:outputText id="lnome" value="Nome:" />
<h:inputText id="tnome" value="#{Participante.nome}" size="30"
required="true" label="Nome"
requiredMessage="#{msg['requerido.nome']}">
<f:validateRegex pattern="[a-zA-Z]+" />
</h:inputText>
<h:message for="tnome" style="color:red" />
<h:outputText id="lsobrenome" value="Sobrenome:" />
<h:inputText id="tsobrenome" value="#{Participante.sobrenome}"
size="40" required="true" label="Sobrenome"
requiredMessage="#{msg['requerido.sobrenome']}">
<f:validateRegex pattern="[a-zA-Z]+" />
</h:inputText>
<h:message for="tsobrenome" style="color:red" />
<h:outputText id="lcargo" value="Cargo" />
<h:selectOneMenu id="tcargo" style="width:210px"
value="#{Participante.cargo}" required="true"
requiredMessage="#{msg['requerido.cargo']}">
<f:selectItem itemValue="Vocalista" itemLabel="Vocalista" />
<f:selectItem itemValue="Guitarrista" itemLabel="Guitarrista" />
<f:selectItem itemValue="Baixista" itemLabel="Baixista" />
<f:selectItem itemValue="Baterista" itemLabel="Baterista" />
<f:selectItem itemValue="" itemLabel="" />
<f:validateRegex pattern="[a-zA-Z]+" />
</h:selectOneMenu>
<h:message for="tcargo" style="color:red" />
<h:outputText id="ldata" value="Data de Admissão" />
<h:inputText value="#{Participante.data}" required="true"
requiredMessage="#{msg['requerido.data']}">
<f:convertDateTime pattern="dd/mm/yyyy" />
</h:inputText>
<h:message for="tdata" style="color:red" />
<h:outputText id="lsalario" value="Salário" />
<h:inputText id="tsalario" value="#{Participante.salario}"
required="true" label="Salário"
requiredMessage="#{msg['requerido.salario']}"
validatorMessage="#{msg['validar.salario']}">
<f:convertNumber currencySymbol="$" type="currency" />
<f:validateDoubleRange minimum="788.00" maximum="9999.99" />
</h:inputText>
<h:message for="tsalario" style="color:red" />
<h:outputText id="lgenero" value="Sexo" />
<h:selectOneRadio id="tgenero" value="#{Participante.genero}"
required="true" requiredMessage="#{msg['requerido.genero']}">
<f:selectItem itemValue="Masculino" itemLabel="Masculino" />
<f:selectItem itemValue="Feminino" itemLabel="Feminino" />
</h:selectOneRadio>
<h:message for="tgenero" style="color:red" />
<h:outputText id="lativo" value="Ativo" />
<h:selectBooleanCheckbox value="#{Participante.ativo}"></h:selectBooleanCheckbox>
<br />
<h:outputText id="lobservacao" value="Observação" />
<h:inputTextarea value="#{Participante.observacao}" rows="5"
cols="30" />
</h:panelGrid>
</fieldset>
<br />
<h:commandButton id="submit" action="resultado.xhtml"
value="Enviar Dados" />
</h:form>
</h:body>
</html>
Resultado.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">
<f:loadBundle basename="resources.application" var="msg" />
<head>
<title><h:outputText value="#{msg.welcomeTitle}" /></title>
</head>
<h:body>
<h2>JSF - Desenvolvimento Aberto - Managed Beans -</h2>
<h3>
<h:outputText id="lnome"
value="Java Server Faces- Elementos de Formulário - Resultado" />
</h3>
<h:panelGrid columns="2">
<h:outputLabel value="Nome:" />
<h:outputText value="#{Participante.nome}" />
<h:outputLabel value="Sobrenome:" />
<h:outputText value="#{Participante.sobrenome}" />
<h:outputLabel value="Cargo:" />
<h:outputText value="#{Participante.cargo}" />
<h:outputLabel value="Data de Admissão:" />
<h:outputText value="#{Participante.data}">
<f:convertDateTime pattern="dd/mm/yyyy" />
</h:outputText>
<h:outputLabel value="Salário" />
<h:outputText value="#{Participante.salario}">
<f:convertNumber currencySymbol="$" type="currency" />
</h:outputText>
<h:outputLabel value="Sexo:" />
<h:outputText value="#{Participante.genero}" />
<h:outputLabel value="Ativo:" />
<h:outputText value="#{Participante.ativo}" />
<h:outputLabel value="Observacao" />
<h:outputText value="#{Participante.observacao}" />
</h:panelGrid>
</h:body>
</html>
Application.properties
# -- welcome -- welcomeTitle=Desenvolvimento Aberto requerido.nome=O campo nome é obrigátorio. requerido.sobrenome=O campo sobrenome é obrigátorio. requerido.cargo=O campo cargo é obrigátorio. requerido.data=O campo data de admissão é obrigátorio. requerido.genero=O campo genero é obrigátorio. requerido.salario =O campo salário é obrigatório. validar.salario =O salário não pode ser menor que o valor minimo atual.
Ricardo Mantovani
Desenvolvimento Código Aberto 