Coding for Desktop and Mobile with HTML5 and Java EE 7Petr JirickaSW Development Manager, Oracle

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.

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

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

Let’s look at a sample app

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

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)

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 –

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/

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

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 it4. 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 service6. The notification is routed to the Cordova Push plugin7. Your client application code is called to handle the notification

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

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

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/

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

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

Graphic Section Divider

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