JSF 2.0: Uma Evolução nas
      Interfaces Web com Java
   Vinicius Senger            Alberto J Lemos
                    ...
Objetivo




      “O apresentar na teoria e prática as
   principais características do JSF 2.0 e os
      conceitos de c...
Agenda

 >   Sobre o JavaServer Faces
 >   Benefícios da tecnologia
 >   Deficiências na versão atual
 >   Principais Novi...
O que é JavaServer Faces
 > Do mesmo criador do Struts;
 > Paradigma de programação visual de User-
   interfaces aplicado...
Benefícios da Tecnologia
 > Diversas bibliotecas de componentes disponíveis;
 > Suporte nas principais IDEs;
 > Ampla lite...
JavaServer Faces
Página
 JSF




                   Managed Bean
config.xml
  faces-




                                 ...
Demonstração




               Globalcode – Open4Education
Deficiências no JSF 1.2 (anterior)
 > Não oferece Templates de tela “built in”
 > Complexidade para criar componentes visu...
Principais Novidades do JSF 2.0
 > Suporte a anotações para configuração

 > Suporte a AJAX

 > PDL baseado em XHTML (Face...
Principais Novidades do JSF 2.0
 > Suporte a definição de estágio do projeto

 > Mecanismo de Eventos

 > Gerenciamento de...
ScrumToys = JSF 2.0 Demo
 > Aplicação para gestão de projetos, sprints,
   estórias e tarefas
 > Implementa o conceito de ...
Siga o mestre!




                 Globalcode – Open4Education
Novas Anotações Suportadas
 >   @ManagedBean(name=”dashBoardBean”)
 >   @ManagedProperty(“#{taskManager}”)
 >   @RequestSc...
Suporte a AJAX

 <h:commandButton id="btnDeleteSprint"
   styleClass="botaoPostIt"
   action="#{sprintManager.remove}"
   ...
PDL baseado em XHTML

 <html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      ...
Novo escopo: ViewScoped

 No faces-config.xml:
 <managed-bean>
  <managed-bean-name>dashboardMB</managed-bean-name>
  <man...
Estágios do Projeto

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

 No web.xml:
 <context-param...
Mecanismo de Eventos

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

 Novas tags: <h:head>, <h:body>, <h:outputScript> e
   <h:outputStyle>
 Acesso a recursos via E...
Criação de Componentes

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

 Exemplo...
Navegação

Implícita:
 <navigation-rule>
  <from-view-id>/page1.xhtml</from-view-id>
  <navigation-case>
    <from-outcome...
Globalcode – Open4Education
O que é Arduino?




                   Globalcode – Open4Education
Características do Arduino
 > Microcontrolador Atmega 168

 > Arquitetura RISC

 > 20 MIPS

 > 16KB flash / 512B EEPROM / ...
Características do Arduino
 > 6 canais PWM (saída analógica)

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

 > 1 se...
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 ...
Ciclo de desenvolvimento
 > Selecionar um porta serial

 > Upload do programa para o Arduino




                         ...
Ciclo de desenvolvimento
 > Selecionar um porta serial

 > Upload do programa para o Arduino




                         ...
Ciclo de desenvolvimento
 > Selecionar um porta serial

 > Upload do programa para o Arduino




                         ...
Siga o mestre!




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

 > Sobre o JSF no Blog da Global...
Perguntas & Respostas




                        Globalcode – Open4Education
Upcoming SlideShare
Loading in …5
×

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

8,069 views
7,908 views

Published on

Slides usados durante workshop realizado no evento anual da JBoss Brasil: JBossInBossa2010.

Published in: Technology
0 Comments
11 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
8,069
On SlideShare
0
From Embeds
0
Number of Embeds
1,688
Actions
Shares
0
Downloads
0
Comments
0
Likes
11
Embeds 0
No embeds

No notes for slide

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

  1. 1. 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
  2. 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. 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. 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. 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. 6. JavaServer Faces Página JSF Managed Bean config.xml faces- Globalcode – Open4Education
  7. 7. Demonstração Globalcode – Open4Education
  8. 8. 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
  9. 9. 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
  10. 10. 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
  11. 11. 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
  12. 12. Siga o mestre! Globalcode – Open4Education
  13. 13. Novas Anotações Suportadas > @ManagedBean(name=”dashBoardBean”) > @ManagedProperty(“#{taskManager}”) > @RequestScoped > @ViewScoped > @SessionScoped > @ApplicationScoped > @CustomScoped > @FacesConverter(forClass=Project.class) > @FacesValidator Globalcode – Open4Education
  14. 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. 15. 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
  16. 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. 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. 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. 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. 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. 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. 22. Globalcode – Open4Education
  23. 23. O que é Arduino? Globalcode – Open4Education
  24. 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. 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. 26. O que é Program-ME? Globalcode – Open4Education
  27. 27. Projeto Globalcode: Tomad@ Globalcode – Open4Education
  28. 28. Projeto Globalcode: Tomad@ Globalcode – Open4Education
  29. 29. Projeto Globalcode: Tomad@ Globalcode – Open4Education
  30. 30. Programando para o Arduino Globalcode – Open4Education
  31. 31. Programando para o Arduino Globalcode – Open4Education
  32. 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. 33. Ciclo de desenvolvimento > Selecionar um porta serial > Upload do programa para o Arduino Globalcode – Open4Education
  34. 34. Ciclo de desenvolvimento > Selecionar um porta serial > Upload do programa para o Arduino Globalcode – Open4Education
  35. 35. Ciclo de desenvolvimento > Selecionar um porta serial > Upload do programa para o Arduino Globalcode – Open4Education
  36. 36. Siga o mestre! Globalcode – Open4Education
  37. 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. 38. Perguntas & Respostas Globalcode – Open4Education

×