JSF 2.0: Uma Evolução nas Interfaces Web com Java

JSF 2.0: Uma Evolução nas
Interfaces Web com Java
Vinicius Senger Alberto J Lemos
(Dr. Spock)
Sócio Diretor e Fundador Senior Software Architect
Globalcode Instrutor Globalcode

Globalcode – Open4Education

Objetivo

“O apresentar na teoria e prática as
principais características do JSF 2.0 e os
conceitos de computação física com
Program-ME”


Agenda

> Sobre o JavaServer Faces
> Benefícios da tecnologia
> Deficiências na versão atual
> Principais Novidades do JSF 2.0
> Demonstração do ScrumToys
> Sobre o Arduino/Program-ME
> Demonstração do Program-ME
> Perguntas & Respostas


O que é JavaServer Faces
> Do mesmo criador do Struts;
> Paradigma de programação visual de User-
interfaces aplicado à web;
> É um framework que permite a criação de
aplicações Web com semântica de Swing
implementando MVC;
> “Toolability = Ferramentabilidade”;
> É uma especificação Java EE;
> Faces é mais fácil de aprender que outros
frameworks;
> Faces é mais componentizado;

Benefícios da Tecnologia
> Diversas bibliotecas de componentes disponíveis;
> Suporte nas principais IDEs;
> Ampla literatura, treinamentos e foruns de
discussão;
> Integração com outras tecnologias e frameworks:
Spring, JPA, EJB, JBoss Seam
> Encapsula a complexidade do HTML, CSS e
JavaScript
> Oferece servicos fundamentais como
conversores e validadores;


JavaServer Faces
Página
JSF

Managed Bean
config.xml
faces-


Demonstração


Deficiências no JSF 1.2 (anterior)
> Não oferece Templates de tela “built in”
> Complexidade para criar componentes visuais
> Não permite criar Bookmarkble URLs
> Não suporta AJAX nativamente
> Incompatibilidade entre bibliotecas de
componentes
> Uso de JSP: Scriptlets, CustomTags, etc
> Muitas configurações em XML


Principais Novidades do JSF 2.0
> Suporte a anotações para configuração

> Suporte a AJAX

> PDL baseado em XHTML (Facelets) e JSP

> PDL extensível

> Novo escopo para MBs: ViewScoped e
CustomScoped

> Bookmarkable URLs


Principais Novidades do JSF 2.0
> Suporte a definição de estágio do projeto

> Mecanismo de Eventos

> Gerenciamento de Recursos

> Suporte a criação de componentes via XHTML

> Navegação implícita e condicional


ScrumToys = JSF 2.0 Demo
> Aplicação para gestão de projetos, sprints,
estórias e tarefas
> Implementa o conceito de skins permitindo ao
usuário trocar as cores da tela
> JSF 2, JPA, Maven, Glassfish, JavaDB
> Implementa Bookmarkble URL
> Implementação de componentes compostos
> Open Source, parte do projeto Glassfish e agora
NetBeans
> Usa Beans Validation


Siga o mestre!


Novas Anotações Suportadas
> @ManagedBean(name=”dashBoardBean”)
> @ManagedProperty(“#{taskManager}”)
> @RequestScoped
> @ViewScoped
> @SessionScoped
> @ApplicationScoped
> @CustomScoped
> @FacesConverter(forClass=Project.class)
> @FacesValidator


Suporte a AJAX

<h:commandButton id="btnDeleteSprint"
styleClass="botaoPostIt"
action="#{sprintManager.remove}"
value="#{i18n['sprint.show.button.delete']} AJAX"
onclick="jsf.ajax.request(this, event, {execute:
'frmListSprints', render: 'frmListSprints'});
return false;" />

Também suporta uma tag: <f:ajax>


PDL baseado em XHTML

<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">

Incorpora o Facelets.

Não são necessárias configurações extras no
web.xml.


Novo escopo: ViewScoped

No faces-config.xml:
<managed-bean>
<managed-bean-name>dashboardMB</managed-bean-name>
<managed-bean-class>jsf.mb.DashboardMB</managed-bean-class>
<managed-bean-scope>view</managed-bean-scope>
</managed-bean>

No Managed Bean:
@ManagedBean(name="dashboardManager")
@ViewScoped
public class DashboardMB implements Serializable {
...
}


Estágios do Projeto

Estágios suportados: Production, Development,
UnitTest e SystemTest

No web.xml:
<context-param>
<param-name>javax.faces.PROJECT_STAGE</param-name>
<param-value>Development</param-value>
</context-param>


Mecanismo de Eventos

Exemplos de código no ScrumToys:
jsf2.demo.scrum.web.event.*
jsf2.demo.scrum.web.controller.AbstractManager

Alguns eventos suportados:
AfterAddToParentEvent
BeforeRenderEvent
ViewMapCreatedEvent
ViewMapDestroyEvent

Suporte a tag: <f:event type=”...” listener=”...” />


Gerenciamento de Recursos

Novas tags: <h:head>, <h:body>, <h:outputScript> e
<h:outputStyle>
Acesso a recursos via EL: #{resouce[...]}
...
<h:head>
<title>#{dashboard2MB.name}</title>
<h:outputStylesheet library="css/1_1" name="app.css"/>
<h:outputScript library="javax.faces" name="ajax.js"
target="head"/>
</h:head>
<h:body>
...
<h:form id="frmDashboard">
<img src="#{resource['images/exemplo.jpg']}"
width="50px"/>
...


Criação de Componentes

Exemplo de definição de Composite Component
em:
/resources/components/postit.xhtml

Exemplo de uso do componente em:
/dashboard/show.xhtml


Navegação

Implícita:
<navigation-rule>
<from-view-id>/page1.xhtml</from-view-id>
<navigation-case>
<from-outcome>success</from-outcome>
<to-view-id>/page2.xhtml</to-view-id>
</navigation-case>
</navigation-rule>

Não é necessário! Bastar no MB retornar: “page2”.
Condicional:
<navigation-case>
<from-outcome>success</from-outcome>
<to-view-id>/page2.xhtml</to-view-id>
<if>#{foo.someCondition}</if>
</navigation-case>


O que é Arduino?


Características do Arduino
> Microcontrolador Atmega 168

> Arquitetura RISC

> 20 MIPS

> 16KB flash / 512B EEPROM / 1KB RAM estática

> 10.000 ciclos na flash / 100.000 na EEPROM

> 2 contadores / temporizador de 16bits

> 1 temporizador de tempo real com clock externo

Características do Arduino
> 6 canais PWM (saída analógica)

> 6 conversores A/D de 10 bits (entrada analógica)

> 1 serial programável (USART)

> 1 interface SPI (Serial Peripheral Interface)

> 1 interface serial a 2 fios (I2C)

> 1 watch dog timer programável

> Interrupção / wake-up numa entrada digital

O que é Program-ME?


Projeto Globalcode: Tomad@


Programando para o Arduino


Ciclo de desenvolvimento
> Obter uma placa Arduino e um cabo USB

> Download da IDE Arduino

> Instalação da IDE e dos drivers USB

> Conectar a placa

> Executar a IDE Arduino

> Escrever um programa ou exemplo

> Selecionar o modelo da placa

Ciclo de desenvolvimento
> Selecionar um porta serial

> Upload do programa para o Arduino


Mais informações
> Globalcode – The Developers Company
http://www.globalcode.com.br/

> Sobre o JSF no Blog da Globalcode
http://blog.globalcode.com.br/search/label/JSF

> Sobre o ScrumToys
http://blog.globalcode.com.br/search/label/SCrumToys

> JavaServer Faces Technology
http://java.sun.com/javaee/javaserverfaces/

> Program-ME: O Arduino da Globalcode
http://www.globalcode.com.br/noticias/entrevistaProgramMe

> Blog do Elétron Livre
http://www.eletronlivre.com.br/

Perguntas & Respostas


JSF 2.0: Uma Evolução nas Interfaces Web com Java

Mais conteúdo relacionado

Mais procurados

Semelhante a JSF 2.0: Uma Evolução nas Interfaces Web com Java

Mais de Dr. Spock

JSF 2.0: Uma Evolução nas Interfaces Web com Java