javaone brazil 2015: java e html5

Java e HTML5 combinação explosiva para aplicativos corporativos

Loiane Groner @loiane

http://loiane.com

• 9+ XP TI

• Java, Sencha, Phonegap (mobile híbrido)

• http://loiane.com

• Livros:

Loiane Groner

Evolução Java e HTML/JS

<% String usuario = request.getParameter("usuario"); if ( usuario != null && usuario.length() > 0 ) { %> <%@include file="response.jsp" %> <% } %>

<c:forEach var="contato" items="${dao.lista}"> ${contato.nome}, ${contato.email}, ${contato.endereco}, ${contato.dataNascimento} </c:forEach>

http://d25ds5di20s2np.cloudfront.net/wp-content/uploads/2013/11/struts-hibernate-velocity-multi-customer.png

Header - MENU

Footer

Redireciona para: listarCliente.jsp editarCliente.jsp excluirCliente.jsp criarCliente.jsp

index.jsp

View

Controller

Model

DOMBrowser

App Server

HTML

Header - MENU

Footer

Mostra/Esconde: <div>listarCliente.jsp</div> <div>editarCliente.jsp</div> <div>excluirCliente.jsp</div> <div>criarCliente.jsp</div>

index.jsp +

templates

http://plugins.netbeans.org/data/images/1397832199_nbpfcrudgen-edit-dialog-full.png

Desacoplamento: o início

http://webdevbros.net.www144.your-server.de/wp-content/uploads/2009/10/SiamExplorer.png

http://aprendizweb.com.br/wp-content/uploads/2015/03/frontend-e-back-end.jpg

http://diy-visualpedia.s3.amazonaws.com/request-reponse-comic-03.png

http://www-scf.usc.edu/~chenemil/itp104/images/html5features.jpg

View

Controller

Model

DOMBrowser

App Server

HTML

Aplicação tradicional

View

Controller

Model

APIs REST

JSON

Aplicação moderna

DOM

App Server

Browser

http://www.the4cast.com/wp-content/uploads/2014/06/web-starterkit.jpg

APIs REST

Banco de Dados

JSON JSON

View

Controller

Model

APIs REST

JSON

WEB

DOM

App Server

Browser

View

Controller

Model

APIs REST

JSON

MOBILE

App Server

Dispositivo Móvel

WebView Nativa

• Nativo• Responsivo• Web App• App Híbrida

View

Controller

Model

APIs REST

JSON

DESKTOP

App Server

App Desktop

Wrapper

Demo

Troca de Dados

http://2.bp.blogspot.com/-jESwFrkSxMY/TbmvunKRhsI/AAAAAAAAAIo/luBQB38_kTo/s1600/xml-vs-json.jpg

<nome>Cliente 01</nome> <endereco>Rua Inventada 41</endereco> <cidade>São Paulo</cidade> <cnpj>66.260.339/0001-35</cnpj>

DocumentBuilderFactory docFactory = DocumentBuilderFactory.newInstance(); DocumentBuilder docBuilder = docFactory.newDocumentBuilder();

Document doc = docBuilder.newDocument(); Element rootElement = doc.createElement("cliente"); doc.appendChild(rootElement);

Element name = doc.createElement("nome"); name.appendChild(doc.createTextNode("Cliente 01")); rootElement.appendChild(name);

var xml = "<rss version='2.0'><channel><title>RSS Title</title></channel></rss>", xmlDoc = $.parseXML( xml ), $xml = $( xmlDoc ), $title = $xml.find( "title" );

https://github.com/johngeorgewright/angular-xml

{ "nome":"Cliente 01", "endereco":"Rua Inventada 41", "cidade":"São Paulo", "cnpj":"66.260.339/0001-35" }

JSONObject obj=new JSONObject(); obj.put("name","foo"); obj.put("num",new Integer(100)); obj.put("balance",new Double(1000.21)); obj.put("is_vip",new Boolean(true)); obj.put("nickname",null);

@RequestMapping(value="/contact/create.action") public @ResponseBody Map<String,? extends Object> create(@RequestBody ContactWrapper data) throws Exception {

try{

List<Contact> contacts = contactService.create(data.getData());

return ExtJSReturn.mapOK(contacts);

} catch (Exception e) {

return ExtJSReturn.mapError("Error trying to create contact."); } }

http://wiki.fasterxml.com/JacksonHome

@POST @Produces("application/json") @Consumes({"application/xml", "application/json"}) public ExtJSContactReturn create(String json) throws IOException, JSONException { ContactWrapper wrapper = new ContactWrapper(json); Contact entity = wrapper.getContact(); super.create(entity); List<Contact> contacts = new ArrayList<Contact>(); contacts.add(entity); ExtJSContactReturn extReturn = new ExtJSContactReturn(String.valueOf(contacts.size()), contacts, true); return extReturn; }

JsonBuilderFactory factory = Json.createBuilderFactory(config); JsonObject value = factory.createObjectBuilder() .add("firstName", "John") .add("lastName", "Smith") .add("age", 25) .add("address", factory.createObjectBuilder() .add("streetAddress", "21 2nd Street") .add("city", "New York") .add("state", "NY") .add("postalCode", "10021")) .add("phoneNumber", factory.createArrayBuilder() .add(factory.createObjectBuilder() .add("type", "home") .add("number", "212 555-1234")) .add(factory.createObjectBuilder() .add("type", "fax") .add("number", "646 555-4567"))) .build();

JSON JavaScript Object Notation

@ServerEndpoint("/chat") public class ChatBean {

Set<Session> peers = Collections.synchronizedSet(...); @OnOpen public void onOpen(Session peer) { peers.add(peer); }

@OnClose public void onClose(Session peer) { peers.remove(peer); }

@OnMessage public void message(String message, Session client) { for (Session peer : peers) { peer.getRemote().sendObject(message); } } }

http://async-io.org/

import org.atmosphere.config.service.ManagedService; import org.atmosphere.cpr.AtmosphereResponse; import org.atmosphere.handler.OnMessage;

@ManagedService(path = "/echo") public class Echo { @Message public void onMessage(AtmosphereResponse res, String m) { res.write("Echo: " + m); } }

$(function () { var request = { url: document.location.toString() + 'echo', transport : "websocket" , fallbackTransport: 'long-polling'};

request.onMessage = function (response) { console.log(response.responseBody) }; $.atmosphere.subscribe(request).push("Hello"); }

Demo

https://www.owasp.org

desabilitar código HTML desabilitar editar código fonte

http://jhipster.github.io/

http://loiane.com

fb.com/loianegroner

@loiane

https://github.com/loiane

youtube.com/user/Loianeg

Obrigada!