Using Java with HTML5 and CSS3 (+ the whole HTML5 world: WebSockets, SVG, etc...)

Transcription

1 Using Java with HTML5 and CSS3 (+ the whole HTML5 world: WebSockets, SVG, etc...) Helder da Rocha Independent Java & Web professional Argo Navis Informatica Ltda. São Paulo, Brazil

2 Agenda A short introduction to some cool HTML5 features Some ideas about how to explore the power of HTML5 in Java Web apps

3 Who am I? h"p:// Java, Web, ios programmer, consultant, instructor Java enthusiast since 1995 (also actor, musician and visual arlst :) From Brazil

4 Java & HTML: old friends 1995: Applets running inside HotJava & Netscape browsers Client-side Java First attempt at rich interactive interfaces Before applets there was no such thing as animation and interactivity on the Web Scripting and Netscape extensions allowed Java-HTML communication

5 Today Proprietary solutions like Flash became de facto standards for interactive client-side apps Java became popular for server-side apps Many tasks that would fit better on the clientside are still done on the server-side because of inconsistent browser support

6 HTML5 Still a versioned spec under W3C, but a versionless dynamic spec under WHAT-WG (Web Hypertext Application Technology Working Group) Has among its goals to simplify HTML code and drastically reduce the need for scripting and plugins Deals not only with graphical aspects and structure, but also with networking, multithreading, storage, etc. (which are no longer part of the official spec)

7 HTML5 is not just HTML The HTML5 solution includes CSS, JavaScript, audio & video, vector graphics But also Web sockets, geolocation, offline cache, Web workers, client-side database, local storage, etc. More than just graphical technologies

8 JSF support? There is not yet any official support for HTML5 from HTML-generating frameworks such as JSF HTML5 support is expected for JSF 2.2 (Java EE 7) But any server-side Java apps can use data sent by HTML5 client-side apps

9 Some cool graphical features HTML5 Canvas WebGL CSS3 animations and transitions SVG Audio and video control

10 HTML5 Canvas API-based vector graphics 1. Place the <canvas> element somewhere (or create it via scripting) <canvas id= mycanvas width= 200 height= 200 /> 2. Change its style if you wish <style> canvas {border: solid black 1px </style> 3. Get the 2D context var acanvas = document.getelementbyid("mycanvas"); var ctx = acanvas.getcontext("2d"); 4. Use the API to paint your canvas ctx.fillstyle = "rgb(255,0,0) ; ctx.fillrect(50, 50, 100, 100);

11 WebGL: 3D animations Not really HTML5, but built on Canvas

12 Saving and retrieving graphics Server-side applications can be used to save the state of HTML5 graphics Serializing Canvas or SVG to the server Saving parameters that were changed by the user Saved state may be recovered later and be used to restore page Ex: collaborative images, signatures, etc.

13 Saving the state of the canvas You can use a Java server-side app to save the state of a canvas drawn by the client Canvas can be converter to image via API methods (todataurl()) Canvas Servlet

14 CSS3 transforms 2D and 3D transforms on any element: scale, translate, rotate, etc. Can be combined with animations and transitions Sophisticated effects can be obtained with no scripting at all

15 CSS3 animations Declarative transitions, 3D animations and effects like shadows, reflections, etc. Reduces the need for scripting #frente { position:absolute; top: 0px; left: 0px; -webkit-transform: translatez(10px) scalez(1.2) scale(0.5); -webkit-transform-style: preserve-3d; #verso { position:absolute; top: 0px; left: 0px; -webkit-transform: translatez(-10px) scalez(1.2) scale(0.5); -webkit-transform-style: preserve-3d; #cena { -webkit-animation: flip 8s infinite linear; -webkit-transform-style: flip { from { -webkit-transform: rotatey(0deg); to {-webkit-transform: rotatey(-360deg);

16 SVG - Scalable Vector Graphics W3C XML standard initially based on Microsoft VML and Adobe PostScript Initially supported by Adobe and Microsoft Can be embedded in HTML or linked via the <img> element <?xml version="1.0" encoding="utf- 8"?> <svg xmlns=" width="100%" height="100%"> <circle r="50" cx="100" cy="100" fill="green"/> <circle r="50" cx="125" cy="125" fill="green" fill- opacity="0.5"/> <circle r="50" cx="150" cy="150" fill="green" fill- opacity="0.2"/> </svg>

17 Saving SVG It is not as easy as saving Canvas, since it requires serializing by third-party client-side XML processors which are browserdependent (need to save the DOM tree) But you can easily collect data from the client side and generate SVG on the server side Frameworks like Apache Batik can also convert SVG to images

18 SVG generation Since SVG is XML, it can be generated on the server-side using XML authoring APIs, Can also be generated a a template by vector software (like Illustrator) and later modified (inserting DOM nodes, removing, reordering, etc.)

19 Generating SVG through XSLT and Java SVG template XSLT Java component javax.xml APIs Parameters SVG for embedding PNG, PDF

20 Servlet-generated SVG

21 Other features Web database Local storage Web workers Web sockets Geolocation

22 Web storage Safer local and session storage objects Two objects which accept any properties: localstorage and sessionstorage Ex: localstorage.field = Hi! ; localstorage is not shared among tabs or windows. You can t insert data into them directly from the server (it has to be via scripting)

23 Client-side database For applications which require a lot of structured offline data (ex: animations) var db = opendatabase('mydb', '1.0', 'hellodb', 2 * 1024 * 1024); db.transaction( function (tx) { tx.executesql( 'CREATE TABLE IF NOT EXISTS mytable(id unique, name)'); tx.executesql( 'INSERT INTO mytable(id, name) VALUES (1, Jack")'); );

24 Web workers Threading API for JavaScript Create thread code in a JS file, and attach it to a Worker object var worker = new Worker( worker.js ); Attach a listener function worker.onmessage = function(evt) { alert(evt.data); ; Send an asynchronous message worker.postmessage( data );

25 Geolocation Uses the navigator object to store geolocation coordinates position.coords.latitude & longitude Once collected, you can send them anywhere Ex: if you send them to a Java server-side application, they can be used to generate an SVG map, for example.

26 Web Sockets A completely new protocol that uses HTTP as a bootstrap Also has an IETF spec: RFC 6455 Allows real-time bidirectional communication (like Comet) Requires support from both the server-side and the client-side

27 Protocol Starts with an HTTP handshake via headers GET /mychat HTTP/1.1 Host: server.example.com Upgrade: websocket Connection: Upgrade Sec-WebSocket-Key: x3jjhmbdl1ezlkh9gbhxdw== Sec-WebSocket-Protocol: chat Sec-WebSocket-Version: 13 Origin: HTTP/ Switching Protocols Upgrade: websocket Connection: Upgrade Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk= Sec-WebSocket-Protocol: chat After communication is established, data packets can be exchanged Packet format is defined by the protocol spec

28 WebSocket API Interface WebSocket(url, [protocols]) Events onopen onerror onclose onmessage States 0 CONNECTING 1 OPEN 2 CLOSING 3 - CLOSED Methods send(string blob arraybuffer ) close()

29 Client JavaScript API How to use it (client- side) var ws = new WebSocket("ws://localhost:8080/myapp"); ws.onopen = funclon(event) { alert("opened conneclon!"); ws.onmessage = funclon(event) { alert("message: " + event.data); ws.onclose = funclon(event) { alert("closed conneclon!"); WebSocket object Event handlers ws.send("hello World!"); send() method

30 What about the server side? Still no standard. But there should be one soon (JSR Java EE 7) You can write your own WebSocket server, of course (study the protocol and handle it with a java.net.serversocket or javax.servlet implementation) You can use Glassfish+Grizzly, Jetty, JBoss, or some other proprietary solution

31 Battleship Client-side var ws; function initws() { ws = new WebSocket("ws://localhost:8080/../WSBattleship"); ws.onmessage = function(event) { if (gamestarted) { var msg = event.data.split(":"); if (msg[0]!= playerid) { hitormiss(msg[1], msg[2]); alert(event.data); function hitormiss(coords, event) { if (event == 0) { markmiss(coords); else { markhit(coords); function shoot(ship) { if (gamestarted &&!gamefinished) { ws.send(playerid + ":" + shotposition); function addship(ship) { if (!gamestarted && totalships < maxships) { ships[totalships++] = ship.id; ship.style.fill = "red"; if (totalships == maxships) { ready = true; ws.send(playerid); // ready signal!

32 WebSockets app using Grizzly Write the component & socket public class BattleShipComponent extends WebSocketApplication { public WebSocket createsocket(websocketlistener... listeners) { return new BattleShipSocket(listeners); public void onmessage(websocket socket, String data) { String gamedata = data.split(":");... public class BattleShipSocket extends BaseServerWebSocket { public BattleShipSocket(WebSocketListener... listeners) { super(listeners); Register the component using a servlet public class MyServlet extends HttpServlet { public void init(servletconfig config) throws ServletException { WebSocketEngine.getEngine().register(new BattleShipComponent());

33 WebSockets: battleship 1:a2 Text Web Socket Web Socket Servlet WS Component WebSocket Engine Grizzly Glassfish 3.1.2

34 Summary Although there is no official support for HTML5 in Java Web technologies such as JSF (expected for Java EE 7), Java server-side apps can enhance client-side HTML5 apps Information collected by HTML5 can be used as parameters for server-side processing, where many Java APIs can be used SVG can be easily generated on the server-side and embedded into HTML pages Canvas (and SVG) can be serialized and stored on the server WebSocket applications require server-side support. Currently there are several Java-based proprietary solutions. JSR 356 aims to standardize this. Of course, browser support is still the main concern

35 Thank you Helder da Rocha