Construindo uma arquitetura com REST, HTML 5 e JSF 2

9.524 visualizações

Publicada em

Como você pode utilizar o JSF 2

Publicada em: Tecnologia
0 comentários
2 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
9.524
No SlideShare
0
A partir de incorporações
0
Número de incorporações
7
Ações
Compartilhamentos
0
Downloads
202
Comentários
0
Gostaram
2
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • 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

    ×