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

  • 7,524 views
Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
7,524
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
0
Comments
0
Likes
11

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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. 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 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. 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. 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. 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. 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 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. 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. Globalcode – Open4Education
  • 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 o Arduino Globalcode – Open4Education
  • 31. Programando para o Arduino 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