Coding for Desktop and Mobile with HTML5 and Java EE 7
2 likes2,372 views
The document discusses coding for desktop and mobile applications using HTML5 and Java EE 7. It outlines the architecture of such applications, including thin server patterns using JSON over HTTP and WebSocket for bidirectional communication. It also describes features of Java EE 7 and HTML5 trends that support developing hybrid mobile apps using HTML5 and Cordova, and how NetBeans IDE supports both Java EE 7 and HTML5 development.
Coding for Desktop and Mobile with HTML5 and Java EE 7
- 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