javaone brazil 2015: java e html5
TRANSCRIPT
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
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!