Java e HTML5 combinação explosiva para aplicativos corporativos. Loiane

Transcription

1 Java e HTML5 combinação explosiva para aplicativos corporativos Loiane

2 Loiane Groner 9+ XP TI Java, Sencha, Phonegap (mobile híbrido) Livros:

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. }, ${contato.endereco}, ${contato.datanascimento} </c:foreach>

6

7

8 Header - MENU index.jsp Redireciona para: listarcliente.jsp editarcliente.jsp excluircliente.jsp criarcliente.jsp Footer

9 Browser DOM HTML View App Server Controller Model

10

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

12

13

14 Desacoplamento: o início

15

16

17

18

19

20

21

22

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

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

25

26

27 JSON JSON APIs REST Banco de Dados

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

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

30 Nativo Responsivo Web App App Híbrida

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

32 Demo

33 Troca de Dados

34

35

36 <nome>cliente 01</nome> <endereco>rua Inventada 41</endereco> <cidade>são Paulo</cidade> <cnpj> / </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" );

39

40 { } "nome":"cliente 01", "endereco":"rua Inventada 41", "cidade":"são Paulo", "cnpj":" / "

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

42 @RequestMapping(value="/contact/create.action") Map<String,? extends Object> 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.");

43 @POST "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", " ")).add(factory.createObjectBuilder().add("type", "fax").add("number", " "))).build();

45 JSON JavaScript Object Notation

46

47

48 @ServerEndpoint("/chat") public class ChatBean { Set<Session> peers = public void onopen(session peer) { peers.add(peer); public void onclose(session peer) { peers.remove(peer); } public void message(string message, Session client) { for (Session peer : peers) { peer.getremote().sendobject(message); } }

49

50 import org.atmosphere.config.service.managedservice; import org.atmosphere.cpr.atmosphereresponse; import = "/echo") public class Echo 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

52

53

54

55

56

57

58

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

60

61 youtube.com/user/loianeg

62 Obrigada!