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”




                                   Globalcode – Open4Education
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



                                       Globalcode – Open4Education
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;
                                     Globalcode – Open4Education
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;

                                      Globalcode – Open4Education
JavaServer Faces
Página
 JSF




                   Managed Bean
config.xml
  faces-




                                  Globalcode – Open4Education
Demonstração




               Globalcode – Open4Education
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


                                        Globalcode – Open4Education
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

                                     Globalcode – Open4Education
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




                                       Globalcode – Open4Education
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

                                      Globalcode – Open4Education
Siga o mestre!




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

                                      Globalcode – Open4Education
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>



                                        Globalcode – Open4Education
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.

                                      Globalcode – Open4Education
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 {
     ...
 }


                                             Globalcode – Open4Education
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>




                                             Globalcode – Open4Education
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=”...” />


                                         Globalcode – Open4Education
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"/>
    ...

                                               Globalcode – Open4Education
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




                                    Globalcode – Open4Education
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>


                                              Globalcode – Open4Education
Globalcode – Open4Education
O que é Arduino?




                   Globalcode – Open4Education
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
                                      Globalcode – Open4Education
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
                                         Globalcode – Open4Education
O que é Program-ME?




                      Globalcode – Open4Education
Projeto Globalcode: Tomad@




                             Globalcode – Open4Education
Projeto Globalcode: Tomad@




                             Globalcode – Open4Education
Projeto Globalcode: Tomad@




                             Globalcode – Open4Education
Programando para o Arduino




                             Globalcode – Open4Education
Programando para o Arduino




                             Globalcode – Open4Education
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
                                         Globalcode – Open4Education
Ciclo de desenvolvimento
 > Selecionar um porta serial

 > Upload do programa para o Arduino




                                       Globalcode – Open4Education
Ciclo de desenvolvimento
 > Selecionar um porta serial

 > Upload do programa para o Arduino




                                       Globalcode – Open4Education
Ciclo de desenvolvimento
 > Selecionar um porta serial

 > Upload do programa para o Arduino




                                       Globalcode – Open4Education
Siga o mestre!




                 Globalcode – Open4Education
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/
                                                    Globalcode – Open4Education
Perguntas & Respostas




                        Globalcode – Open4Education

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

  • 1.
    JSF 2.0: UmaEvoluçã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
  • 2.
    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” Globalcode – Open4Education
  • 3.
    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 Globalcode – Open4Education
  • 4.
    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; Globalcode – Open4Education
  • 5.
    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; Globalcode – Open4Education
  • 6.
    JavaServer Faces Página JSF Managed Bean config.xml faces- Globalcode – Open4Education
  • 7.
    Demonstração Globalcode – Open4Education
  • 8.
    Deficiências no JSF1.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 Globalcode – Open4Education
  • 9.
    Principais Novidades doJSF 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 Globalcode – Open4Education
  • 10.
    Principais Novidades doJSF 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 Globalcode – Open4Education
  • 11.
    ScrumToys = JSF2.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 Globalcode – Open4Education
  • 12.
    Siga o mestre! Globalcode – Open4Education
  • 13.
    Novas Anotações Suportadas > @ManagedBean(name=”dashBoardBean”) > @ManagedProperty(“#{taskManager}”) > @RequestScoped > @ViewScoped > @SessionScoped > @ApplicationScoped > @CustomScoped > @FacesConverter(forClass=Project.class) > @FacesValidator Globalcode – Open4Education
  • 14.
    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> Globalcode – Open4Education
  • 15.
    PDL baseado emXHTML <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. Globalcode – Open4Education
  • 16.
    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 { ... } Globalcode – Open4Education
  • 17.
    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> Globalcode – Open4Education
  • 18.
    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=”...” /> Globalcode – Open4Education
  • 19.
    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"/> ... Globalcode – Open4Education
  • 20.
    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 Globalcode – Open4Education
  • 21.
    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> Globalcode – Open4Education
  • 22.
  • 23.
    O que éArduino? Globalcode – Open4Education
  • 24.
    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 Globalcode – Open4Education
  • 25.
    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 Globalcode – Open4Education
  • 26.
    O que éProgram-ME? Globalcode – Open4Education
  • 27.
    Projeto Globalcode: Tomad@ Globalcode – Open4Education
  • 28.
    Projeto Globalcode: Tomad@ Globalcode – Open4Education
  • 29.
    Projeto Globalcode: Tomad@ Globalcode – Open4Education
  • 30.
    Programando para oArduino Globalcode – Open4Education
  • 31.
    Programando para oArduino Globalcode – Open4Education
  • 32.
    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 Globalcode – Open4Education
  • 33.
    Ciclo de desenvolvimento > Selecionar um porta serial > Upload do programa para o Arduino Globalcode – Open4Education
  • 34.
    Ciclo de desenvolvimento > Selecionar um porta serial > Upload do programa para o Arduino Globalcode – Open4Education
  • 35.
    Ciclo de desenvolvimento > Selecionar um porta serial > Upload do programa para o Arduino Globalcode – Open4Education
  • 36.
    Siga o mestre! Globalcode – Open4Education
  • 37.
    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/ Globalcode – Open4Education
  • 38.
    Perguntas & Respostas Globalcode – Open4Education