Construindo uma arquitetura RESTful para aplicações ricascom HTML 5 e JSF 2.0      Raphael Adrien         /raphaeladrien
2000 - dias atuais
O que é arquitetur
O que é arquitetur
O que é arquitetur    Uma arquitetura de software para um sistema é a    estrutura ou estruturas do sistema, que consiste ...
O que é arquitetur                           Ralph Johnson - GoF -                           “arquitetura é tudo          ...
O que é arquitetur                                       Ralph Johnson - GoF -                                       “arqu...
O que é     O que édesign?   arquitetura?
Requisitos funcionais   O que é                O que é   design?              arquitetura?
Requisitos funcionais   Requisitos não funcionais   O que é                 O que é   design?               arquitetura?
Requisitos funcionais    Requisitos não funcionais    “Ações que um   sistema deve ser        capaz de     executar, sem  ...
Requisitos funcionais    Requisitos não funcionais    “Ações que um              escalabilidade   sistema deve ser        ...
Requisitos funcionais   Requisitos não funcionais                              escalabilidade                             ...
Requisitos funcionais   Requisitos não funcionais   O que é                 O que é   design?               arquitetura?
Requisitos não funcionaisO que é      O que édesign?    arquitetura?
O que é     O que édesign?   arquitetura?
O que é     O que édesign?   arquitetura?
O que é     O que édesign?   arquitetura?
Integração
IntegraçãoBanco de dados
IntegraçãoTransferencia de    arquivos
WebService
WebService           WS-ReliableMessaging WS-Addressing                        WS-Security  WSDLWS-Transaction          WS...
Integração
Integração
Representational StateTransfer (REST)Roy Fielding
Representational StateTransfer (REST)Roy Fielding
Representational StateTransfer (REST)
Representational StateTransfer (REST)  Agora todo o foco está todo          no recurso
Representational StateTransfer (REST)
JSF 2 + REST• JSR 311(JAX-RS) • Get • Post
Não é uma grande coisa.
HTML 5
HTML5 ~= HTML + CSS + JS
Suporte dos browsers
<HTML     5> estruturaElementos para  <header>, <nav>, <article>, <section>, <aside>,<footer>
<HTML     5> estruturaElementos para  <header>, <nav>, <article>, <section>, <aside>,<footer>      Tornou o código HTML ma...
<HTML   5> para mídiaElementos* Maioria dos vídeos utilizam plugin do flash* Nem todos os browser possuem os mesmo plugins ...
<HTML    5> gráficos Elementos<canvas>   * O futuro dos gráficas na internet;   * Plataforma para desenhar em browser com 2D...
<HTML   5> simples  Formas* fillRect( x, y, w, h )* strokeRect( x, y, w,h )* clearRect( x, y, w,h )        context.fillStyle...
<HTML     5> adicionados no Javascript Novos eventos* Mouse events * ondrag, ondragend, ondragenter, ondragleave, ondragov...
Composite Components
Composite Components• Possibilita a verdadeira abstração;• Agora você pode realmente criar  componentes reutilizáveis, voc...
Composite Components      Crio o arquivo /recursos/simples/saida.xhtml<composite:interface> <composite:atribute name=”valu...
Composite Components<html xmlns=”http://www.w3.org/1999/xhtml”    xmlns:h=”http://java.sun.com/jsf/html”    xmlns:f=”http:...
Composite Components• web root ou JAR• .properties• Listeners, Converters,Validadors
Composite Components com HTML 5• JSF 2 introduziu para promover o Ajax;• Composite Components trabalha com  Javascript;• C...
Composite Components com HTML 5<cc:interface> <cc:atribute name=”src” required=”true” /> <cc:atribute name=”controls” requ...
Composite Components com HTML 5audio.jsfunction tocarReStart(){ var audio = document.getElementByTagName(“audio”)[0]; audi...
Composite Components com HTML 5<html xmlns=”http://www.w3.org/1999/xhtml”    xmlns:h=”http://java.sun.com/jsf/html”    xml...
ScrumToys
http://netbeans.org/kb/samples/scrum-toys.html
Obrigado..../raphaeladrienraphael.adrien@gmail.com
Construindo uma arquitetura com REST, HTML 5 e JSF 2
Construindo uma arquitetura com REST, HTML 5 e JSF 2
Construindo uma arquitetura com REST, HTML 5 e JSF 2
Construindo uma arquitetura com REST, HTML 5 e JSF 2
Próximos SlideShares
Carregando em…5
×

Construindo uma arquitetura com REST, HTML 5 e JSF 2

9.459 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.459
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

    ×