Java e HTML5 combinação explosiva para aplicativos corporativos. Loiane Groner @loiane http://loiane.com

Java e HTML5 combinação explosiva para aplicativos corporativos Loiane Groner @loiane http://loiane.com

Loiane Groner 9+ XP TI Java, Sencha, Phonegap (mobile híbrido) http://loiane.com Livros:

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 index.jsp Redireciona para: listarcliente.jsp editarcliente.jsp excluircliente.jsp criarcliente.jsp Footer

Browser DOM HTML View App Server Controller Model

Header - MENU index.jsp + templates Mostra/Esconde: <div>listarcliente.jsp</div> <div>editarcliente.jsp</div> <div>excluircliente.jsp</div> <div>criarcliente.jsp</div> Footer

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

Aplicação tradicional Browser DOM HTML View App Server Controller Model

Aplicação moderna DOM Browser View Controller Model JSON App Server APIs REST

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

JSON JSON APIs REST Banco de Dados

WEB DOM Browser View Controller Model JSON App Server APIs REST

MOBILE View Dispositivo Móvel Controller Model WebView Nativa JSON App Server APIs REST

Nativo Responsivo Web App App Híbrida

DESKTOP View App Desktop Controller Model Wrapper JSON App Server APIs REST

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!