Jsf principais componentes

Jsf principais componentes. Neste post irei exemplificar pra você os principais e os mais básicos componentes do frameworks JavaServer Faces ou mais conhecido como JSF.

 

 

O que é o JSF?

JSF é uma tecnologia que nos permite criar aplicações Java para Web utilizando componentes visuais pré-prontos, de forma que o desenvolvedor não se preocupe com Javascript e HTML. Basta adicionarmos os componentes (calendários, tabelas, formulários) e eles serão renderizados e exibidos em formato html.

Form do JSF

O form do JSF se transforma em um formulário HTML que são usado para enviar dados para o servidor, comumente usados para criar cadastros e envolver elementos de entrada e saída de texto.

Exemplo:

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html">
<h:head />
<body>
<h:form>
    <h:outputLabel value="Enter your name: " />
    <h:inputText value="#{customerController.customer.firstName}" />
</h:form>
</body>
</html>

InputText do JSF

O inputText do JSF se torna um elemento de entrada html do tipo texto, onde por exemplo o usuário digita um valor para salvar no cadastro do sistema, geralmente usado com o outputLabel.

Exemplo:

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html">
<h:head />
<body>
<h:form>
    <h:panelGrid>
        <h:outputLabel value="Username: " style="font-weight:bold" />
        <h:inputText value="#{userController.user.username}" />
        <h:outputLabel value="Password: " style="font-weight:bold" />
        <h:inputSecret value="#{userController.user.password}" />
        <h:commandButton value="Login" />
    </h:panelGrid>
</h:form>
</body>
</html>

CommandButton do JSF

O commandButton do JSF processa um botão de envio html que é associado ao um managedBean invocando métodos de ação usando os atributos action e actionlistener.

Exemplo:

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html">
<h:head/>
<body>
<h:form>
    <h:commandButton value="#{messages.checkoutLabel}"
                     action="#{shoppingCartBean.checkout}" />
</h:form>
</body>
</html>

Messages do JSF

O messages do JSF exibe todas as mensagens para a tela atual em jsf. Você pode personalizar as mensagens geradas por este componente, aplicando diferentes estilos CSS, dependendo do nível de gravidade das mensagens (por exemplo, vermelho para erro, verde para informações), bem como alterar o nível de detalhe das mensagens.

Exemplo:

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html">
<h:head />
<body>
<h:form>
    <h:messages errorStyle="color:red" />
    <h:inputText required="true" label="My Input" />
    <h:commandButton value="Click" />
</h:form>
</body>
</html>

Ajax do JSF

O ajax do JSF facilita muito a renderização de blocos, lista de componentes ou até mesmo um componente na tela executando ações por debaixo dos panos na aplicação. Esse componente faz com que uma requisição, que antes realizava o carregamento de toda a página, torne-se assíncrono, passando a utilizar Ajax e carregar apenas o trecho do documento que realmente precisa ser atualizado.

Exemplo:

<h:commandButton value="Meu Botão"
                 actionListener="#{managedMB.metodo}">
    <f:ajax execute="@this" render="@form"/>
</h:commandButton>

 

Jsf principais componentes formulário completo

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core">

<h:head>
	<title>Olá jsf</title>
</h:head>

<h:body>
	
	<h:form id="formPessoa">
	    
	    <h1>Olá JSF</h1>
	   <h:panelGrid columns="2"> 
	     <f:facet name="header">
	     	<h:outputText value="Cadastro em jsf"/>
	     </f:facet>
	     
	    <h:outputLabel value="Id:"/>
	    <h:inputText value="#{pessoaBean.pessoa.id}" readonly="true"/>
	    
	    <h:outputLabel value="Nome:"/>
	    <h:inputText value="#{pessoaBean.pessoa.nome}"/>
	    
	    <h:outputLabel value="Sobrenome:"/>
	    <h:inputText value="#{pessoaBean.pessoa.sobrenome}"/>
	    
	    <h:outputLabel value="Idade:"/>
	    <h:inputText value="#{pessoaBean.pessoa.idade}"/>
	    
	    <h:outputLabel/>
	    <h:panelGroup>
	    		 <h:commandButton value="Novo" action="#{pessoaBean.novo}"/>
			    <h:commandButton value="Salvar" action="#{pessoaBean.salvar}"/>
			    <h:commandButton value="Remove" action="#{pessoaBean.remove}"/>
	    </h:panelGroup>
	    
	    </h:panelGrid> 
	    
	     
	     <h:dataTable value="#{pessoaBean.pessoas}" var="pessoa" border="3" cellpadding="6">
	     
	     	<f:facet name="header">
	     	   Lista de pessoas cadastradas
	     	</f:facet>
	     
	     	<h:column>
	     	    <f:facet name="header">ID</f:facet>
	     		<h:outputText value="#{pessoa.id}"/>
	     	</h:column>
	     	
	     	<h:column>
	     	  <f:facet name="header">Nome da pessoa</f:facet>
	     		<h:outputText value="#{pessoa.nome}"/>
	     	</h:column>
	     	
	     	<h:column>
	     		  <f:facet name="header">Sobrenome da pessoa</f:facet>
	     		<h:outputText value="#{pessoa.sobrenome}"/>
	     	</h:column>
	     	
	     	<h:column>
	     		<f:facet name="header">Editar</f:facet>
	     		<h:commandLink value="Editar">
	     			<f:setPropertyActionListener target="#{pessoaBean.pessoa}" value="#{pessoa}" />
	     		</h:commandLink>
	     	</h:column>
	     	
	     	
	     	<h:column>
	     		<f:facet name="header">Excluir</f:facet>
	     		<h:commandLink value="Excluir" action="#{pessoaBean.remove}">
	     			<f:setPropertyActionListener target="#{pessoaBean.pessoa}" value="#{pessoa}" />
	     		</h:commandLink>
	     	</h:column>
	     	
	     </h:dataTable>
	</h:form>

</h:body>

</html>

ManagedBean do formulário de cadastro

package br.com.cursojsf;

import java.util.ArrayList;
import java.util.List;

import javax.annotation.PostConstruct;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;

import br.com.dao.DaoGeneric;
import br.com.entidades.Pessoa;

@ViewScoped
@ManagedBean(name = "pessoaBean")
public class PessoaBean {

	private Pessoa pessoa = new Pessoa();
	private DaoGeneric<Pessoa> daoGeneric = new DaoGeneric<Pessoa>();
	private List<Pessoa> pessoas = new ArrayList<Pessoa>();

	public String salvar() {
		pessoa = daoGeneric.merge(pessoa);
		carregarPessoas();
		return "";
	}
	
	public String novo(){
		pessoa = new Pessoa();
		return "";
	}
	
	public String remove(){
		daoGeneric.deletePorId(pessoa);
		pessoa = new Pessoa();
		carregarPessoas();
		return "";
	}
	
	@PostConstruct
	public void carregarPessoas(){
		pessoas = daoGeneric.getListEntity(Pessoa.class);
	}
	
	public Pessoa getPessoa() {
		return pessoa;
	}

	public void setPessoa(Pessoa pessoa) {
		this.pessoa = pessoa;
	}

	public DaoGeneric<Pessoa> getDaoGeneric() {
		return daoGeneric;
	}

	public void setDaoGeneric(DaoGeneric<Pessoa> daoGeneric) {
		this.daoGeneric = daoGeneric;
	}
	
	public List<Pessoa> getPessoas() {
		return pessoas;
	}

}

 

Baixe o ebook de API RESTful em Spring Boot

 
Encapsulando o Response da API RESTful
 

Curso que recomendo para você

Selecionamos uma série de cursos on-line para você se preparar e abrir as portas para as vagas de programação. Conheça cada um dos cursos nos links oficiais abaixo.

Construa e plublique APIs com Spring Boot
RESTful Spring Boot
No curso você será capaz de criar APIs RESTful com elementos altamente escaláveis e publicar em cloud.
593 alunosHoras do curso 40h Horas do curso certificado
Promoção R$ 147
12x de R$ 14,32
O curso API RESTful com Spring Boot e Java 8 – Guia de Referência, é um curso que visa apresentar os principais componentes de uma API RESTful eficiente e escalável no formato de problemas e soluções.
Mais de 200 aulas curso completo em JSF 2.2
JSF 2.2 e PrimeFaces
Curso completo em JSF 2.2 com PrimeFaces, Spring, Hibernate, JPA, Ireport e CDI. Iremos do básico ao avançado em JSF.
2.985 alunosHoras do curso 100h Horas do curso certificado
Promoção R$ 189
12x de R$ 18,41
A melhor forma de aprender a desenvolver sistemas em Java é tendo como exemplo um projeto e curso completo onde possa observar o código para melhor entendimento do funcionamento das rotinas a acompanhar as vídeos aulas de desenvolvimento. Esse curso contém tudo que um desenvolvedor precisa saber para entrar no mercado de trabalho.

 

 

 


Acesse
Cursos e Projetos
Java
Acesse
Outros Cursos
PHP MySQL Android
Acesse
Encomende um Projeto
Feito pra Você
Acesse
Tire as Dúvidas On-line
Consultor
Acesse
Aulas de Java só suas
Encomende Agora
Acesse
Dividindo Conhecimento
Posts e Tutoriais
Acesse
Sites e Parceiros
Associados
Acesse
Conheça os curso gratuitos
Grátis

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Instrutor Java Quer se tornar aluno VIP? CLIQUE AQUI!
Instrutor Java

Alex Fernando Egidio
Autor, criador e fundador do Java Avançado Cursos TI. Atua no mercado como desenvolvedor e engenheiro de sistemas em Java é apaixonado por desenvolvimento web em Java e pela “mágica” que seus frameworks trazem para o dia a dia de nós desenvolvedores.
Com mais de 10 anos de experiência ajuda programadores do Brasil todo a se tornarem profissionais.