Upload
others
View
5
Download
0
Embed Size (px)
Citation preview
1
2
Unlocking the Java EE Platform with HTML 5
3
Unlocking the Java EE Platform with HTML 5
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!
Overview
4
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?
5
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
6
What's HTML5?
● Web pages no longer need to look like web pages
● Web pages no longer need to represent singlebusiness content
Web pages no longer need to be provided on a single device
7
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
8
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);
9
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)
10
And What About CSS? And JavaScript?● 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)
11
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
12
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
13
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
14
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
15
JavaScript Debugger
● HTML5 applications are automaticallyin 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 monitorwatches, threads, and breakpoints
16
CSS3 Editors
● Inspect and edit CSS from CSS Styles window
Inspect styles applied to HTML elementsin Navigator window
Change in CSS Editor is immediatelyreflected in the browser
17
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
18
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
19
Best of both worlds
● Java EE Platform
● JPA: standardized mechanism for accessing data● EJB: standardized mechanism for coding business logic● JAX-RS: standardized mechanism for exposing data
● HTML5 Platform
● HTML/JavaScript/CSS: front-end that connects to Java EE via JAX-RS
20
What tools are out there to help Java developers with HTML5?
● Create or open an HTML5 application
Create a Backbone.js frontendfrom RESTful web services
JavaScript filewith HTML file is generatedand can immediatelybe opened in the browser
In summary: You can exposea database inan HTML5 applicationwithin 5 minutes
21
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
22