Desenvolvimento de Interfaces

RicasAndré Luiz Forchesatto

Conteúdos

● Introdução ao Desenvolvimento RAD para WEB● Desenvolvimento Action Based e Component Based● Introdução a framework Component-Based JSF 2.2● Managed Bean● Escopo Managed Bean● Ciclo de vida● Converter● Integração com Spring-boot

Conteúdos

● Validation● Framework de componentes ricos● Facelets● Templates● Aumentando a produtividade com a criação de

componentes em JSF

Programação WEB???

JAVA + WEB

JEE - Java Enterprise Edition

JEEWeb

Container

JEEEJB

Container

JEEClient

Container

Arquitetura JEE

Evolução Java para web

● Servlet○ 2.X e 3.X

● JSP – Java Server Pages○ 1.X e 2.X

● JSTL – JSP Standard Tag Library● Frameworks

○ Component Based○ Action Based

Frameworks - web● Surgiram para trazer produtividade no

desenvolvimento de software web● Component Based

○ Simplicidade no desenvolvimento e aprendizado;○ Conjunto de componentes visuais. Semelhante ao

que acontece no desktop;○ Diminui as preocupações com a parte visual;○ Exige pouco conhecimento de html+css+javascript

inicialmente

Servidor de Aplicação JEE● Download do JEE ????● Precisamos de uma implementação JEE

○ Glassfish○ Jboss○ Apache Geronimo○ IBM Websphere Application Server○ WebLogic Application Server

Servidor de Aplicação

Servlet Container● Precisamos de um servidor de aplicativo

grande e pesado?● Um Servlet Container suporta quase tudo

que precisamos para o desenvolvimento web, mas não o JEE completo;○ JSP○ Servlets○ JSTL○ JSF

Servlet Container● Apache Tomcat Versão

○ http://tomcat.apache.org/● Jetty

○ http://jetty.codehaus.org/jetty/

Tratamento de Requisições Java EE

Introdução a JSF

JSF● API Java Server Faces;● Interface padrão de desenvolvimento web Java;● Modelo de interfaces baseada em eventos e

componentes;● Framework MVC (Model-View-Controller);

Estrutura JSF

Conceitos Principais JSF

● Componentes● Renderers● Managed-Beans● Ciclo de vida (Request Lifecycle)● Converter/Validators● Navegação● Eventos

Componentes

● Separa lógica de negócio da apresentação;● Toda view possui uma hierarquia de

componentes;

Client Side h:form

h:input h:input h:input

Server Side

Componentes● Os componentes são expressos em tags e uma pagina

JSP e em sua maioria são de interface com o usuário;● Os componentes padrões são divididos em dois grupos:● Faces Core: <f:view>, <f:loadBundle>, <f:param>● HTML wrappers: <h:dataTabe>, <h:inputText>● Componente = class + renderer + tag handler (JSP)

Primeiros passos

● Criar um projeto web que seja um .war

● Adicionar a lib para jsf● Configurar o web.xml● Criar um arquivo faces-config.xml● Criar uma página de index

Criar projeto web● Criar projeto web utilizando maven e eclipse:

○ File->new->maven project

Criar projeto web

Configurar o

nome do projeto

e o tipo

Criar projeto web

1 - Código Fonte Java

2 - Recursos web: html, css, js e imagens

Configurando maven

● Arquivo pom.xml responsável por toda configuração de bibliotecas e build

<dependencies><dependency>

<groupId>javax</groupId><artifactId>javaee-web-api</artifactId><version>7.0</version><scope>provided</scope>

</dependency></dependencies>

Configurando maven<build>

<finalName>introducaoJsf</finalName><plugins>

<plugin><groupId>org.apache.maven.plugins</groupId><artifactId>maven-compiler-plugin</artifactId><version>3.1</version><configuration>

<compilerVersion>1.8</compilerVersion><source>1.8</source><target>1.8</target>

</configuration></plugin>

</plugins></build>

Configurar web.xml

Criar arquivo web.xml

Configurar web.xml<?xml version="1.0" encoding="UTF-8"?><web-app version="3.1" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"> <context-param> <param-name>javax.faces.PROJECT_STAGE</param-name> <param-value>Development</param-value> </context-param> <servlet> <servlet-name>Faces Servlet</servlet-name> <servlet-class>javax.faces.webapp.FacesServlet</servlet-class> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>Faces Servlet</servlet-name> <url-pattern>*.xhtml</url-pattern> </servlet-mapping></web-app>

Configurar faces-config.xml

Criar arquivo faces-config.xml

Configurar faces-config.xml<?xml version="1.0" encoding="UTF-8"?><faces-config xmlns="http://xmlns.jcp.org/xml/ns/javaee"

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee

http://xmlns.jcp.org/xml/ns/javaee/web-facesconfig_2_2.xsd"version="2.2">

</faces-config>

Página index

Executando a aplicação

● Aplicação será executada no wildfly 10○ Prática: Configurar e executar

HTML wrappers - JSF

● Comando○ h:commandButton: Botão de submissão

de formulário○ h:commandLink: Link com ação

● Dados○ h:dataTable: Tabela associada a dados

● Imagens○ h:graphicImage: Uma imagem

HTML wrappers - JSF● Mensagens

○ h:message: mensagens para um componente especifico

○ h:messages: mensagens globais da página● Entrada de dados

○ h:inputHidden: Campo oculto○ h:inputText: Campo simples para entrada de dados○ h:inputSecret: Campo para senha○ h:inputTextArea: Campo texto para entrada de

dados● Seleção verdadeiro ou falso

○ h:selectBooleanCheckbox: Campo de marcação verdadeiro ou falso

HTML wrappers - JSF

● Saída de dados○ h:outputFormat: Texto formatado○ h:outputLabel: Rotulo de campo○ h:outputLink: Link sem ação○ h:outputText: Texto simples

● Painel○ h:panelGrid: Tabela para campos○ h:panelGroup: Agrupador de

componentes para aplicar formatação ou alimentamento

HTML wrappers - JSF● Seleção única

○ h:SelectOneRadio: grupo de botões de radio○ h:SelectOneListbox: lista de seleção única○ h:SelectOneMenu: combobox de seleção única

● Seleção múltipla○ h:SelectManyCheckbox: checkboxes agrupados○ h:SelectManyListbox: lista de seleção múltipla○ h:SelectManyMenu: lista de seleção múltipla

Faces Core● f:view: Elemento raiz da árvore de

componentes● f:ajax: Injeta comportamento ajax em

qualquer componente html● f:selectItem: Representa um item de uma

lista ou combo● f:selectItems: Representa a coleção de itens

de uma lista ou combo● f:converter: Converto objeto java em texto e

vice-versa

Propriedades comunsPropriedade Tipo Valor Default Obrigatório

id String Não tem simvalue Object Não tem simrendered Boolean True nãoconverter Converter Não tem nãosytleClass String Não tem nãobinding String Não tem não

Todos componentes + exemplos

● Links com documentação para API Padrão JSF● http://docs.oracle.com/javaee/7/tutorial/doc/jsf-intro.htm#BNAPH● https://javaserverfaces.java.net/nonav/docs/2.2/javadocs/index.html● http://www.jsftoolbox.com/documentation/help/12-TagReference/core/inde

x.jsf

Renderers● Responsável por exibir o componente no

cliente● Efetua enconde de HTML e decode em

String do form enviado

Prática● Fazer o uso de alguns componentes

estudados

Managed Beans● POJO (Plain Old Java Objects)

Managed Beans● Classe POJO com uma anotação

@ManagedBean● Não esquecer dos get e set para os

atributos;

JSF Value Binding● Vincular valores do componente ao

Managed-bean;● A vinculação é feita através de

EL(Expression Language)● Sintaxe: #{ }● Pode executar métodos ou acessar

atributos;● Pode ser criado comandos condicionais;

JSF Value Binding

Prática● Integração página xhtml com ManagedBean

Managed Beans - Escopo● Request: @RequestScoped;

○ Novos dados a cada requisição;● Session: @SessionScoped;

○ Criada uma sessão para o usuário dados finalizados só quando a sessão for encerrada;

● Application: @ApplicationScoped;○ Dados compartilhados por todos os usuários;

● View: @ViewScoped;○ Dados presentes enquanto estiver na mesma

página● Flow: @FlowScoped

○ Dados podem ser passado de página por página como um wizard

Managed Beans - Init, Destroy● Interagindo na construção e destruição dos

ManagedBeans● @PostConstruct

○ É executado logo após a construção do MB○ Sempre deve ser adicionado logo acima de

um método● @PreDestroy

○ É executado pouco antes do MB sair do contêiner

○ Sempre deve ser adicionado logo acima de um método

Face Messages● Classe do JSF responsável por enviar

mensagens ao componente <h:message> da página JSF.

1 - Contexto web;2 - Objeto de mensagem onde podemos indicar a Severidade da mensagem, o resumo e os detalhes;3 - Adiciona a mensagem no contexto, para um id especifico ou para null.

Prática

● Entendendo o comportamento dos escopos e mensagens

Referências

http://docs.oracle.com/javaee/

Configurar JSF + Spring-boot

● Criar arquivo faces-config.xml● Criar web.xml● Criar bean no Main para configurar

FacesServlet● Adicionar dependências do JSF

Configurar JSF + Spring-boot

● Configurar faces-config.xml

<application> <el-resolver>

org.springframework.web.jsf.el.SpringBeanFacesELResolver</el-resolver>

</application>

Configurar JSF + Spring-boot

● Criar web.xml<?xml version="1.0" encoding="UTF-8"?><web-app version="3.1" xmlns="http://xmlns.jcp.org/xml/ns/javaee"

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee

http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"><context-param>

<param-name>javax.faces.PROJECT_STAGE</param-name><param-value>Development</param-value>

</context-param><servlet>

<servlet-name>Faces Servlet</servlet-name><servlet-class>javax.faces.webapp.FacesServlet</servlet-class><load-on-startup>1</load-on-startup>

</servlet><servlet-mapping>

<servlet-name>Faces Servlet</servlet-name><url-pattern>*.jsf</url-pattern>

</servlet-mapping></web-app>

Configurar JSF + Spring-boot

● Configurar bean do Spring na classe Main

Configurar JSF + Spring-boot

● Adicionar dependências

https://github.com/forchesatto/estudo-spring/blob/master/spring-boot-jsf/pom.xml

JSF + Spring

● Trocar a anotação @ManagedBean por @Controller

● Trocar a anotação de escopo por da spring @Scope

Prática

● Entendendo o comportamento dos escopos e mensagens

Ciclo de vida JSF● Objeto Lifecycle contrala o ciclo de vida do JSF● 6 fases

http://www.edsongoncalves.com.br/2010/02/21/javaserver-faces-2-0-na-pratica-parte-3/

Ciclo de Vida

Restaura Visão (Restore View) restaura ou cria no servidor a árvore de

componentes em memória para representar a interface com o usuário.

Ciclo de Vida

Restore View

Aplica Valores da Requisição (Apply Request Values)

atualiza os componentes no servidor com os dados do usuário.

Ciclo de Vida

Apply Request Value

Processa Validações(Process Validations)

processa a validação e a conversão de tipos em um novo dado.

Ciclo de Vida

Process Validation

Atualiza o Modelo (Update Model Values)

atualiza os objetos no servidor com os novos dados.

Ciclo de Vida

Update Model Value

Chama Aplicação (Invoke Application)

invoca a lógica necessário para o pedido do usuário e navega

para uma nova página se necessário.

Ciclo de Vida

Invoke Application

Apresenta a Resposta (Render Response)

salva o estado atual e mostra a resposta para

o pedido do cliente.

Ciclo de Vida

Render Response

Ciclo de vida JSF

● Nem toda requisição passa por todas etapas;● Interceptamos uma das fase implementando a

interface javax.faces.event.PhaseListener● Os método afterPhase(), beforePhase() e

getPhaseId(), estão disponíveis para interceptar o ciclo de vida

● Deve ser registrado no faces-config.xml o Listener criado

Ciclo de vida JSF

Prática

Criar uma classe para interceptar o ciclo de vida JSF

Converters

● Tem por finalidade converter objetos Java em String e vice-versa;

● Converters são bidirecionais:○ Managed-bean faz: getAsObject()○ JSF faz: getAsString()

● Tipos padrões Java já possuem converters padrões;

● O converter pode ser implícito(class) ou explícito(id)

Converters

Explícito

Implícito pegou pela classe declarada no atributo

Meu Converter

Validatores

● Utilizados para validar o valor de um campo;

● Retornam um FacesMessage com o erro;● Existem 3 maneiras de fazer validação de

campo:○ Validadores padrões JSF○ Bean Validation○ Validadores personalizados do JSF

Validadores padrões JSF

● validateRequered● validateDoubleRange● validateFloatRange● validateRegex

Bean Validation

● Especificação definida pela JSR303● É necessária uma implementação para ser utilizada● Utiliza annotation para registrar as regras de validação● Possibilita fazer validações em qualquer camada da

aplicação● Deve ser escrita de preferência nas classes do modelo

Bean Validation

Usa annotations no model e não precisa registrar nada no JSF

Validadores personalizados do JSF

● Criar uma classe que implementa uma interface de validação

● Será utilizado somente no JSF e deve ser invocado explicitamente no arquivo .xhtml

Validadores personalizados do JSF

Prática

Criar Validatores utilizando Bean Validation e Validadores Personalizados JSF;Criar converter para as classes do nosso projeto;Criar algumas telas de cadastro;

Ajax● Asynchronous Javascript and XML● Um conjunto de tecnologias:

○ HTML○ DOM○ XHTML○ CSS○ XML○ XSLT○ XMLHttpRequest○ JavaScript

Ajax● Foi batizado em 2005 pela publicação do

artigo “Ajax: A New Approach to Web Application” Escrito por Jossé James Garret

● Ajax pode ser usado com Java, Php, Ruby, etc..

● Ajax = Javascript rodando no browse e se comunicando com o servidor

Como funciona o AJAX

Como funciona o AJAX

Por que usar AJAX● Respostas mais rápidas;● Economia na banda do servidor;● Maior interatividade;

Ajax no JSF 2.0

O que vai enviar ao servidor@form, @all, @this,

ou id de um componente

Id do componente a ser atualizado com o retorno do servidor.Pode ser usado @all, @this, @form

Evento a ser executado o

AJAX

PráticaTransformar os cadastros já feitos em cadastros com AJAX

Primefaces● Biblioteca de componentes ricos● Implementada para Mojora (JSF) 2.0● Mais de 100 componentes● http://www.primefaces.org/● http://www.primefaces.org/showcase

Primefaces - Download

<dependency> <groupId>org.primefaces</groupId> <artifactId>primefaces</artifactId> <version>5.0</version> </dependency>

Primefaces - XHTML

● Configurar as páginas xhtml para renderizer primefaces.

xmlns:p="http://primefaces.org/ui"

Dependências

Primefaces - TemasPara configurar um tema basta adicionar o jar do tema desejado e configurar o web.xml

http://www.primefaces.org/themes.html

<context-param><param-name>primefaces.THEME</param-name><param-value>cupertino</param-value></context-param>

Temas - Download<dependency> <groupId>org.primefaces.themes</groupId> <artifactId>cupertino</artifactId> <version>1.0.10</version> </dependency>

<repositories> <repository> <id>prime-repo</id> <name>PrimeFaces Maven Repository</name> <url>http://repository.primefaces.org</url> <layout>default</layout> </repository> </repositories>

Exemplo Dialog

Exemplo Mascaras

PráticaConstruir as telas de cadastro utilizando os componentes do primefaces;Criar alguns componentes autocomplete;

Internacionalização● JSF 2 fornece duas maneiras de

internacionalização○ faces-config.xml○ tag Core <f:loadBundle>

● Após configurado é possível pegar através de uma chave um valor adicionado em um arquivo texto de mensagens.

InternacionalizaçãoConfiguração arquivo faces-config.xml

Internacionalização● Componente Core <f:loadBundle>● É necessário configurar em cada página

Internacionalização● Padrão do arquivo de mensagens:

○ Respeitar o nome que foi adicionado na configuração;

○ O arquivo é composto por key=value

Internacionalização● Para utilizar a chave do arquivo basta,

chamar a variável(msg) configurada no XML (ponto) nome da chave;

<h:outputLabel value="#{msg.tituloUF}"/>

Prática● Internacionalizar a nossa aplicação