JSF – Elementos – HTML e Core – Java

Publicado: 2 de fevereiro de 2015 em Java
0

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

JSF – HTML e Core

2- Preencha os dados no formulário e os envie para ver o resultado.

JSF - 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.

Deixe um comentário