Palestra apresentada no JavaOne Brasil 2015 em São Paulo, 23 de Junho de 2015.

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

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

3. Evolução Java e HTML/JS

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

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

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

8. Header - MENU
Footer
Redireciona para:
listarCliente.jsp
editarCliente.jsp
excluirCliente.jsp
criarCliente.jsp
index.jsp

9. View
Controller
Model
DOMBrowser
App Server
HTML

11. Header - MENU
Footer
Mostra/Esconde:
<div>listarCliente.jsp</div>
<div>editarCliente.jsp</div>
<div>excluirCliente.jsp</div>
<div>criarCliente.jsp</div>
index.jsp
+
templates

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

14. Desacoplamento: o início

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

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

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

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

23. View
Controller
Model
DOMBrowser
App Server
HTML
Aplicação tradicional

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

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

27. APIs REST
Banco de Dados
JSON JSON

28. View
Controller
Model
APIs REST
JSON
WEB
DOM
App Server
Browser

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

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

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

32. Demo

33. Troca de Dados

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

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

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

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

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

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

42. @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

43. @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;
}

44. 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();

45. JSON
JavaScript Object Notation

48. @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);
}
}
}

49. http://async-io.org/

50. 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");
}

51. Demo

58. https://www.owasp.org

59. desabilitar código HTML
desabilitar editar código fonte

60. http://jhipster.github.io/

61. http://loiane.com
fb.com/loianegroner
@loiane
https://github.com/loiane
youtube.com/user/Loianeg

62. Obrigada!