Construindo RESTful com HTML5 e JSF

Construindo uma
arquitetura RESTful
para aplicações ricas
com HTML 5 e JSF 2.0

Raphael Adrien
/raphaeladrien

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

O que é arquitetur
Ralph Johnson - GoF -
“arquitetura é tudo
aquilo que importa”



O que é arquitetur
Ralph Johnson - GoF -
“arquitetura é tudo
aquilo que importa”

“as peças que as
pessoas
acham que é
difícil de mudar”



O que é O que é
design? arquitetura?

Requisitos funcionais

O que é O que é

Requisitos funcionais Requisitos não funcionais

O que é O que é


“Ações que um
sistema deve ser
capaz de
executar, sem
levar em
consideração
restrições físicas.”

O que é O que é


“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 é


escalabilidade
performace alta
alta disponibilidade
segurança
permitir evolução
do sistema

O que é O que é

Requisitos não funcionais

O que é O que é

Integração

Banco de dados

Integração

Transferencia de
arquivos

Web
Service WS-ReliableMessaging
WS-Addressing
WS-Security
WSDL

WS-Transaction WS-Resource

SOAP

Representational State
Transfer (REST)

Roy Fielding

Transfer (REST)

Transfer (REST)

Agora todo o foco está todo
no recurso

JSF 2 + REST

• JSR 311(JAX-RS)
• Get
• Post

<HTML
5> estrutura
Elementos para
<header>, <nav>, <article>, <section>, <aside>,<footer>

<HTML
5> estrutura
Elementos para
<header>, <nav>, <article>, <section>, <aside>,<footer>

Tornou o código HTML mais limpo.

<HTML
5> para mídia
Elementos
* Maioria dos vídeos utilizam plugin do ﬂash
* 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>

<HTML
5> gráﬁcos
Elementos
<canvas>
* O futuro dos gráﬁcas 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

<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 );

<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, onofﬂine, ononline...

* Form events
* onformhange, onforminput, oninput, oninvalid

* Media events
* Aplicável a elementos de media.

Composite Components

• Possibilita a verdadeira abstração;
• Agora você pode realmente criar
componentes reutilizáveis, você não precisa
mais de JSF Guru.

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>


<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>

....


• 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;
• Composite Components pode ser
inﬂuenciado por HTML 5 e Javascript API.


<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>


audio.js

function 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();
}


<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>

....

http://netbeans.org/kb/samples/scrum-toys.html

Obrigado....

/raphaeladrien

raphael.adrien@gmail.com

Construindo RESTful com HTML5 e JSF

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Construindo RESTful com HTML5 e JSF

Semelhante a Construindo RESTful com HTML5 e JSF (20)

Construindo RESTful com HTML5 e JSF

Notas do Editor