1

Unlocking the Java

EE Platform with
HTML 5

Unlocking the Java EE Platform with HTML 5

Overview
HTML5 has suddenly become a hot item, even in the Java ecosystem.
How do the 'old' technologies of HTML, JavaScript, and CSS relate to Java
developers and can Java developers really be productive in this new/old world?
In this session, you'll learn everything you need to know and see demos
illustrating the relevance of HTML5 in the Java world, using simple and intuitive
tools that have been especially created for this purpose!

Agenda

What's HTML5?

How to be productive with HTML5?

What tools are out there?
How does this relate to me as a Java developer?
What tools are out there to help Java developers with HTML5?

What's HTML5?

Buzz word

Buzz word for rich client-side development

Real pure next generation HTML

JavaScript and/or CSS mashed together with HTML

What's HTML5?

Web pages no longer need to look like web pages

Web pages no longer need to represent single
business content

Web pages no longer need to be provided on

a single device

What's New in HTML5?

New parsing rules: oriented towards flexible parsing and compatibility; not
based on SGML
Ability to use inline SVG and MathML in text/html
New elements: article, aside, audio, bdi, canvas, command, data, datalist,
details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, meter,
nav, output, progress, rp, rt, ruby, section, source, summary, time, track, video,
wbr
New types of form controls: dates and times, email, url, search, number, range,
tel, color[56]
New attributes: charset (on meta), async (on script)
Global attributes (that can be applied for every element): id, tabindex, hidden,
data-* (custom data attributes)
Deprecated elements will be dropped altogether: acronym, applet, basefont, big,
center, dir, font, frame, frameset, isindex, noframes, strike, tt

What's New in HTML5?

<video src="movie.webm" poster="movie.jpg" controls>

This is fallback content to display if the browser
does not support the video element.
</video>

<canvas id="example" width="200" height="200">

This text is displayed if your browser does not
support HTML5 Canvas.
</canvas>
var example = document.getElementById('example');
var context = example.getContext('2d');
context.fillStyle = 'red';
context.fillRect(30, 30, 50, 50);
8

How to be Productive with HTML5?

Browser-based editors
Aloha Editor (http://www.aloha-editor.org)
Teamlab Document Editor (http://html5.teamlab.com)
Maqetta (http://maqetta.org)
Raptor Editor (http://www.raptor-editor.com)
Desktop editors
DreamWeaver (http://www.adobe.com/products/dreamweaver.html)
Blue Griffon (http://bluegriffon.org)
MacFlux (http://www.macwareinc.com/products/MacFlux/overview.html)
Code Lobster (http://www.codelobster.com)

And What About CSS? And JavaScript?

10

Stylizer
(http://www.stylizerapp.com)
Rapid CSS
(http://www.rapidcsseditor.com)
Style Master
(http://westciv.com/style_master/index.html)
Xyle Scope
(http://culturedcode.com/xyle/index.html)
Top Style
(http://svanas.dynip.com/topstyle/index.html)

What About Integrated Tools?

Edit HTML, CSS, and JavaScript in a single environment

Interact easily and intuitive between different languages and files

Interact with the browser

click in browser and see where and how DOM nodes are defined
click in elements, tags, and CSS, and see where rendered in browser

11

HTML5 Rich Client Development

Accelerated HTML5 Development

Live Web Preview and Responsive Web Design

Rewritten JavaScript Editor on Nashorn
JavaScript Debugger
CSS3 Editor, Style Editor, and Rule Editor
Backbone.js Client Generation from

Existing RESTful Web Service Project

12

Accelerated HTML5 Development

Create applications from popular templates

Open existing HTML5 applications

Open applications from ZIP file
Use popular tutorial samples
New JavaScript Library Manager

13

Live Preview & Responsive Design

Deep integration with WebKit API

Integration with embedded browser

Instant feedback from page design
Select in browser, see related code in IDE,

and reverse without needing to save

Multiple form factors, e.g., desktop or mobile,

in browser

14

JavaScript Debugger

HTML5 applications are automatically

in debug mode

Set breakpoints in JavaScript file,

on Line, DOM, Event,

or XMLHTTPRequest
Refresh the browser and

immediately you can step through code

Use Debugger windows to monitor

watches, threads, and breakpoints

15

CSS3 Editors

Inspect and edit CSS from CSS Styles window

Inspect styles applied to HTML elements

in Navigator window
Change in CSS Editor is immediately

reflected in the browser

16

JavaScript Editor on Nashorn

Early build of Nashorn used for parsing

Syntax coloring, code completion,

pattern recognition, jQuery, and JSON

JavaScript refactoring
Many customization settings

in Options window

17

How does this relate to me as a Java developer?

Now you have choice either use Java EE or other Java-oriented frontends
or HTML

But how to integrate HTML frontends with Java backends?

RESTful Java web services provide entry points into Java backends

18

Best of both worlds

Java EE Platform

HTML5 Platform

19

JPA: standardized mechanism for accessing data

EJB: standardized mechanism for coding business logic
JAX-RS: standardized mechanism for exposing data

HTML/JavaScript/CSS: front-end that connects to Java EE via JAX-RS

What tools are out there to help Java developers

with HTML5?

Create or open an HTML5 application

Create a Backbone.js frontend

from RESTful web services

JavaScript file

with HTML file is generated

and can immediately
be opened in the browser
In summary: You can expose

a database in
an HTML5 application
within 5 minutes
20

Conclusion

HTML5 is out there and growing in popularity

Figuring out how to be productive is a key concern to success

Tools exist, make sure to choose tools with the right integration

HTML5 can even integrate with Java backends via RESTful web services

21

22