Using Java with HTML5 and CSS3

(+ the whole HTML5 world: WebSockets, SVG, etc...)

Helder da RochaIndependent Java & Web professional

Argo Navis Informatica Ltda. São Paulo, Brazilhelder@argonavis.com.br

Agenda

• A short introduction to some cool HTML5 features

• Some ideas about how to explore the power of HTML5 in Java Web apps

Who am I?

h"p://www.youtube.com/watch?v=jHteVqfKhNo  

Java,  Web,  iOS  programmer,  consultant,  instructor  Java  enthusiast  since  1995  (also  actor,  musician  and  visual  arLst  :)  From  Brazil

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

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 client-side are still done on the server-side because of inconsistent browser support

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)

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

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

Some cool graphical features

• HTML5 Canvas

• WebGL

• CSS3 animations and transitions

• SVG

• Audio and video control

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

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

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.

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

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

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: preserve-3d;}

@-webkit-keyframes flip { from { -webkit-transform: rotateY(0deg);} to {-webkit-transform: rotateY(-360deg);}}

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="http://www.w3.org/2000/svg"            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>

Saving SVG

• It is not as easy as saving Canvas, since it requires serializing by third-party client-side XML processors which are browser-dependent (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

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

Generating SVG through XSLT and Java

SVG template

XSLT

Java component

javax.xml APIs

SVG for embedding

Parameters

PNG, PDF

Servlet-generated SVG

Other features

• Web database

• Local storage

• Web workers

• Web sockets

• Geolocation

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)

Client-side database

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

);

• For applications which require a lot of structured offline data (ex: animations)

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 messageworker.postMessage(“data”);

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.

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

Protocol• Starts with an HTTP handshake via headers

• After communication is established, data packets can be exchanged

• Packet format is defined by the protocol spec

GET /mychat HTTP/1.1Host: server.example.comUpgrade: websocketConnection: UpgradeSec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==Sec-WebSocket-Protocol: chatSec-WebSocket-Version: 13Origin: http://example.com

HTTP/1.1 101 Switching ProtocolsUpgrade: websocketConnection: UpgradeSec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=Sec-WebSocket-Protocol: chat

WebSocket API• Interface

WebSocket(url, [protocols])

• Eventsonopenonerroroncloseonmessage

• States0 – CONNECTING 1 – OPEN 2 – CLOSING 3 - CLOSED

• Methodssend(String | blob | arraybuffer )close()

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

ws.send("Hello  World!");

send()  method

Event  handlers

WebSocket  object

What about the server side?

• Still no standard. But there should be one soon (JSR 356 + 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

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! } }

WebSockets  app  using  Grizzly• Write the component & socket

• Register the component using a servletpublic class MyServlet extends HttpServlet {

public void init(ServletConfig config) throws ServletException { WebSocketEngine.getEngine().register(new BattleShipComponent());

}}

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

} }

WebSockets: battleship

WS Component

WebSocket

WebSocket

Servlet WebSocket Engine

1:a2

Text

Grizzly 1.9 + Glassfish 3.1.2

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

Thank youHelder da Rocha

Twitter @helderdarochawww.argonavis.com.br