Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Construindo uma arquitetura com REST, HTML 5 e JSF 2

9,635 views

Published on

Como você pode utilizar o JSF 2

Published in: Technology
  • Be the first to comment

Construindo uma arquitetura com REST, HTML 5 e JSF 2

  1. 1. Construindo uma arquitetura RESTful para aplicações ricascom HTML 5 e JSF 2.0 Raphael Adrien /raphaeladrien
  2. 2. 2000 - dias atuais
  3. 3. O que é arquitetur
  4. 4. O que é arquitetur
  5. 5. O que é arquitetur Uma arquitetura de software para um sistema é a estrutura ou estruturas do sistema, que consiste de elementos, suas propriedades visíveis exteriormente, e as relações entre elas. Bass, Clements, Kazman - 1998
  6. 6. O que é arquitetur Ralph Johnson - GoF - “arquitetura é tudo aquilo que importa” Uma arquitetura de software para um sistema é a estrutura ou estruturas do sistema, que consiste de elementos, suas propriedades visíveis exteriormente, e as relações entre elas. Bass, Clements, Kazman - 1998
  7. 7. O que é arquitetur Ralph Johnson - GoF - “arquitetura é tudo aquilo que importa”“as peças que aspessoasacham que édifícil de mudar” Uma arquitetura de software para um sistema é a estrutura ou estruturas do sistema, que consiste de elementos, suas propriedades visíveis exteriormente, e as relações entre elas. Bass, Clements, Kazman - 1998
  8. 8. O que é O que édesign? arquitetura?
  9. 9. Requisitos funcionais O que é O que é design? arquitetura?
  10. 10. Requisitos funcionais Requisitos não funcionais O que é O que é design? arquitetura?
  11. 11. Requisitos funcionais Requisitos não funcionais “Ações que um sistema deve ser capaz de executar, sem levar em consideração restrições físicas.” O que é O que é design? arquitetura?
  12. 12. Requisitos funcionais Requisitos não funcionais “Ações que um escalabilidade sistema deve ser performace alta capaz de executar, sem alta disponibilidade levar em segurança consideração permitir evolução restrições físicas.” do sistema O que é O que é design? arquitetura?
  13. 13. Requisitos funcionais Requisitos não funcionais escalabilidade performace alta alta disponibilidade segurança permitir evolução do sistema O que é O que é design? arquitetura?
  14. 14. Requisitos funcionais Requisitos não funcionais O que é O que é design? arquitetura?
  15. 15. Requisitos não funcionaisO que é O que édesign? arquitetura?
  16. 16. O que é O que édesign? arquitetura?
  17. 17. O que é O que édesign? arquitetura?
  18. 18. O que é O que édesign? arquitetura?
  19. 19. Integração
  20. 20. IntegraçãoBanco de dados
  21. 21. IntegraçãoTransferencia de arquivos
  22. 22. WebService
  23. 23. WebService WS-ReliableMessaging WS-Addressing WS-Security WSDLWS-Transaction WS-Resource SOAP
  24. 24. Integração
  25. 25. Integração
  26. 26. Representational StateTransfer (REST)Roy Fielding
  27. 27. Representational StateTransfer (REST)Roy Fielding
  28. 28. Representational StateTransfer (REST)
  29. 29. Representational StateTransfer (REST) Agora todo o foco está todo no recurso
  30. 30. Representational StateTransfer (REST)
  31. 31. JSF 2 + REST• JSR 311(JAX-RS) • Get • Post
  32. 32. Não é uma grande coisa.
  33. 33. HTML 5
  34. 34. HTML5 ~= HTML + CSS + JS
  35. 35. Suporte dos browsers
  36. 36. <HTML 5> estruturaElementos para <header>, <nav>, <article>, <section>, <aside>,<footer>
  37. 37. <HTML 5> estruturaElementos para <header>, <nav>, <article>, <section>, <aside>,<footer> Tornou o código HTML mais limpo.
  38. 38. <HTML 5> para mídiaElementos* Maioria dos vídeos utilizam plugin do flash* Nem todos os browser possuem os mesmo plugins <video> * Padrão para incluir vídeo em nossas páginas. * 2 formatos são suportados: Ogg Vorbis, MPEG 4 <video controls=”controls”> <src=”javaone.ogg” type=”video/ogg”> <src=”javaone.mp4” type=”video/mpeg”> Seu browser não possui suporte ao elemento video. </video>
  39. 39. <HTML 5> gráficos Elementos<canvas> * O futuro dos gráficas na internet; * Plataforma para desenhar em browser com 2D; * Extensível através de Javascript; * Criado pela Apple; * Agora abertamente desenvolvido pelo W3C. <canvas id=”aCanvas” heigth=”80” width=”100”></canvas> Sintaxe simples
  40. 40. <HTML 5> simples Formas* fillRect( x, y, w, h )* strokeRect( x, y, w,h )* clearRect( x, y, w,h ) context.fillStyle = ‘#00f’; context.strokeStyle = ‘#f00’ //Vamos desenhar :-) context.fillRect( 0, 0,150, 150 ); context.strokeRect( 0, 60, 150, 50 ); context.clearRect(30, 25, 90, 60 ); context.strokeRect(30, 25, 90, 60 );
  41. 41. <HTML 5> adicionados no Javascript Novos eventos* Mouse events * ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onmousewheel, onscroll* Windows events( x, y, w,h ) * onafterprint, onbeforeprint, onbeforeonload, onerror, onhaschanged, onmessage, onoffline, ononline...* Form events * onformhange, onforminput, oninput, oninvalid* Media events * Aplicável a elementos de media.
  42. 42. Composite Components
  43. 43. Composite Components• Possibilita a verdadeira abstração;• Agora você pode realmente criar componentes reutilizáveis, você não precisa mais de JSF Guru.
  44. 44. Composite Components Crio o arquivo /recursos/simples/saida.xhtml<composite:interface> <composite:atribute name=”value” required=”true” /></composite:interface><composite:implementation> <h:outputText value=”#{cc.atrs.value}” /></composite:implementation>
  45. 45. Composite Components<html xmlns=”http://www.w3.org/1999/xhtml” xmlns:h=”http://java.sun.com/jsf/html” xmlns:f=”http://java.sun.com/jsf/core” xmlns:ez=”http://java.sun.com/jsf/composite/simples”>....<composite:implementation> <ez:out value=”JavaOne Brasil” /></composite:implementation>....
  46. 46. Composite Components• web root ou JAR• .properties• Listeners, Converters,Validadors
  47. 47. Composite Components com HTML 5• JSF 2 introduziu para promover o Ajax;• Composite Components trabalha com Javascript;• Composite Components pode ser influenciado por HTML 5 e Javascript API.
  48. 48. Composite Components com HTML 5<cc:interface> <cc:atribute name=”src” required=”true” /> <cc:atribute name=”controls” required=”true” /></cc:interface><cc:implementation> <h:outputScript libary=”js” name=”audio.js target=”head/> <audio src=”#{cc.attrs.src}” controls=”#{cc.attrs.controls}”/> <input type=”button” value=”Tocar” onclick=”tocarReStart()” /> <input type=”button” value=”Parar” onclick=”pararReStartParaSempre()” /></cc:implementation>
  49. 49. Composite Components com HTML 5audio.jsfunction tocarReStart(){ var audio = document.getElementByTagName(“audio”)[0]; audio.play(); var display = document.getElementByTagName(“input”)[0];}function pause(){ var audio = document.getElementByTagName(“audio”)[0]; audio.pause();}
  50. 50. Composite Components com HTML 5<html xmlns=”http://www.w3.org/1999/xhtml” xmlns:h=”http://java.sun.com/jsf/html” xmlns:f=”http://java.sun.com/jsf/core” xmlns:h5=”http://java.sun.com/jsf/composite/media”>....<h:body> <h5:audiobox src=”recursos/media/restart.ogg”controls=”controls”/></h:body>....
  51. 51. ScrumToys
  52. 52. http://netbeans.org/kb/samples/scrum-toys.html
  53. 53. Obrigado..../raphaeladrienraphael.adrien@gmail.com

×