1. Coding for Desktop and Mobile
with HTML5 and Java EE 7
Petr Jiricka
SW Development Manager, Oracle

2. Copyright © 2012, Oracle and/or its affiliates. All rights reserved.2
The following is intended to outline our general product direction. It is intended
for information purposes only, and may not be incorporated into any contract.
It is not a commitment to deliver any material, code, or functionality, and should
not be relied upon in making purchasing decisions. The development, release,
and timing of any features or functionality described for Oracle’s products
remains at the sole discretion of Oracle.

3. Copyright © 2012, Oracle and/or its affiliates. All rights reserved.3
Program Agenda
 Architecture of Java EE 7/HTML5 apps
 Desktop and Mobile
 Hybrid applications with Cordova

4. Copyright © 2012, Oracle and/or its affiliates. All rights reserved.4
Let’s look at a sample app

5. Copyright © 2012, Oracle and/or its affiliates. All rights reserved.5
Architecture patterns
■ “Thin server” - JSON over HTTP
■ WebSocket - bidirectional client/server communication
– Extension of HTTP, HTTP communication can be upgraded to WebSocket
■ Client-side MVVM frameworks
■ Responsive web design

6. Copyright © 2012, Oracle and/or its affiliates. All rights reserved.6
Java EE 7 features for HTML5 frontends
■ JAX-RS 2.0
– Standard API for Filters and Interceptors, Asynchronous processing,
Hypermedia, Jersey implementation has API for Server-Sent Events
■ WebSocket 1.0
– Server-side implementation of the WebSocket standard
■ JSON API 1.0
– Standard API for JSON, fine-grained control over JSON output
■ Servlet 3.1
– Protocol upgrade to WebSocket, NIO (new/non-blocking IO)

7. Copyright © 2012, Oracle and/or its affiliates. All rights reserved.7
HTML5 trends and techniques
■ MVVM frameworks, Single-page apps
– Data binding, controller architecture, templating
■ JavaScript WebSocket API
– Supported by modern browsers (WARNING:
not the Android browser)
■ Responsive web design
– Device-specific styling based on device
parameters (e.g. width) using media queries
■ Hybrid applications
– Installable apps on mobile devices using
HTML5, tight integration with the device
–

8. Copyright © 2012, Oracle and/or its affiliates. All rights reserved.8
Hybrid mobile applications with Cordova
■ Installed from the App store
■ Implemented using HTML5
■ Cross-platform
■ JavaScript APIs for device
features
■ http://cordova.apache.org/

9. Copyright © 2012, Oracle and/or its affiliates. All rights reserved.9
Extending the sample app
■ Push notifications
– So the device gets an alert about the opponent’s move even if the app is
not running
■ Client-side
– Cordova plugin: https://github.com/phonegap-build/PushPlugin
– Send and receive JSON data
■ Server-side
– Send and receive JSON data

10. Copyright © 2012, Oracle and/or its affiliates. All rights reserved.10
Extending the Chess app with push notifications
■ Cordova plugin: https://github.com/phonegap-build/PushPlugin
■ How it works
1. Client app registers with the Android/iOS notification service to obtain “id”
2. Client app sends its “id” to the server (JSON)
3. Server receives this id (JAX-RS) and stores it
4. When the server has an update, it sends it to Android/iOS notification
service (HTTP, JSON)
5. Device receives notification from the Android/iOS notification service
6. The notification is routed to the Cordova Push plugin
7. Your client application code is called to handle the notification

11. Copyright © 2012, Oracle and/or its affiliates. All rights reserved.11
NetBeans 7.4 Features for Java EE 7
■ GlassFish 4
■ WebSocket
■ JAX-RS 2.0
■ JSON API
■ ...and many more

12. Copyright © 2012, Oracle and/or its affiliates. All rights reserved.12
NetBeans 7.4 Features for HTML5
■ JavaScript, HTML, CSS editing, including jQuery, AngularJS, Knockout
■ DOM inspector and Visual CSS editor
■ JavaScript debugging
■ iOS and Android devices and emulators
■ Cordova application development (with iOS and Android)
■ Tight Chrome integration, embedded WebKit browser
■ SASS/LESS editing and on-the-fly compilation
■ Network Monitor
■ All this with HTML5 project type, or with Java Web apps (Maven or Ant)
■ ...and more

13. Copyright © 2012, Oracle and/or its affiliates. All rights reserved.13
About NetBeans 7.4
■ Advanced HTML5 support first introduced in NetBeans 7.3
■ Java EE 7 support introduced in NetBeans 7.3.1
■ NetBeans 7.4 brings it all together
– Release Candidate 1 available now
– Final release expected in October 2013
– https://netbeans.org/community/releases/74/

14. Copyright © 2012, Oracle and/or its affiliates. All rights reserved.14
Summary
■ Java EE 7 was made for HTML5 frontends
■ NetBeans IDE supports both Java EE 7 and HTML5
– with desktop browsers and mobile devices
– including hybrid apps with Cordova
– Release Candidate available now, final release in October

15. Copyright © 2012, Oracle and/or its affiliates. All rights reserved.15
Graphic Section Divider

16. Copyright © 2012, Oracle and/or its affiliates. All rights reserved.16