1. LAB S313389 – v0.13 – mpf – 23 juin Build a Mobile Rich Internet Application with JavaFX and RESTful services Didier Burkhalter, Mark Foster, Patrice Goutin Sun Microsystems France SAS (before LEC)

2. 2 JavaONE 2010 | sun.com/javaone Agenda > Lab Introduction > Exercise 0 (15 minutes) IDE setup plus ReST test (cloud) > Exercise 1 (15 minutes) JavaFX simple UI > Exercise 2 (15 minutes) Integrate UI with ReST service > Exercise 3 (10 minutes) JavaFX multimedia

3. 3 JavaONE 2010 | sun.com/javaone Why JavaFX? > & specifically for mobile development

4. 4 JavaONE 2010 | sun.com/javaone Why NetBeans & GlassFish?

5. 5 JavaONE 2010 | sun.com/javaone Exercise 0 - IDE setup plus ReST test > Goal – Check NetBeans installed & check external ReST service (Amazon Cloud)

6. 6 JavaONE 2010 | sun.com/javaone Exercise 1 – JavaFX Simple UI > Goal – First JavaFX project and JavaFX project using “states”

7. 7 JavaONE 2010 | sun.com/javaone Housekeeping > Before you leave, please fill out a survey and hand it to someone We really want to know what you think! > Please log out of your machine when done > Please look around to make sure you have all of your belongings > The hard copies of the lab guides are yours to keep

8. 8 JavaONE 2010 | sun.com/javaone Architecture Overview RIA Leveraging existing backend services GlassFish v3 REST Web Service HTTP/XML

9. 9 JavaONE 2010 | sun.com/javaone Client Architecture Overview JavaFX leverages the MVC pattern, allowing clean client application design source:http://javafx.com/docs/articles/midlet/

10. 10 JavaONE 2010 | sun.com/javaone UI Overview JavaFX leverages the MVC pattern, allowing clean client application design

11. 11 JavaONE 2010 | sun.com/javaone JavaFX Mobile packaging

12. 12 JavaONE 2010 | sun.com/javaone JavaFX in a nutshell > Scripting, declarative, object oriented language & API for Graphical Applications Cool Language w/ data binding and triggers Rich Graphics API Multimedia ready > Tools for developers and designers JavaFX SDK NetBeans Samples Adobe Illustrator & Photoshop plugins > Built on top of Java™ platform

13. 13 JavaONE 2010 | sun.com/javaone REST Architecture > REST Architecture Principles Representational State Transfer Everything is a resource Resources are addressable Resources have an interface (operations and data types) Protocol is client-server, stateless, cacheable, layered

14. 14 JavaONE 2010 | sun.com/javaone RESTful Web Services > JSR 311, aka aka JAX-RS Part of Java EE 6 specification > RESTful web service is A Java class A set of methods > Use Java annotations to represent The resources (the URI) The Operations The Data Types (as MIME types) > Jersey is JAX-RS Reference Implementation

15. 15 JavaONE 2010 | sun.com/javaone JSON, JavaScript Object Notation > A data format to exchange data structures > Language independent > Mainly used for object serialization and AJAX { "firstName": "John", "lastName": "Smith", "address": { "streetAddress": "21 2nd Street", "city": "New York", "state": "NY", "postalCode": 10021 }, "phoneNumbers": [ "212 555-1234", "646 555-4567" ] }

16. 16 JavaONE 2010 | sun.com/javaone Exercises > Exercise 1: Create a Simple JavaFX Application ● Expected duration: 20 minutes > Exercise 2: Create the JavaFX UI ● Expected duration: 30 minutes > Exercise 3: Add Photos with JavaFX ● Expected duration: 30 minutes > Exercise 4:... ● Expected duration: 20 minutes > Lab built on JavaFX 1.3

17. 17 JavaONE 2010 | sun.com/javaone Scenario overview > Copies d'ecran de l'appli a trois stades

18. 18 JavaONE 2010 | sun.com/javaone Getting Started > If you have not logged in, log in with username: x password: y > Online lab guide will open in a browser window > All necessary software and lab files are already installed on your lab machine Start from exercise 1

19. 19 JavaONE 2010 | sun.com/javaone Exercise 1 > Create your first JavaFX application Create the project Build, Run and Test > Add a Label > Modify the backgroundwall paper, using the CSS

20. 20 JavaONE 2010 | sun.com/javaone Exercise 1... > Change the UI theme Change the back groundwall paper Background fill: select linearGradient Change the Component style using Stylesheets: apply your style sheet: {__DIR__}javafx.css

21. 21 JavaONE 2010 | sun.com/javaone Missing casapiun.css filein javafxapi- cldc.jar( dib)

22. 22 JavaONE 2010 | sun.com/javaone Exercise 2 > Create a Web Application Create, Build, Run and Test > Add a RESTful web service Will return text/plain data type Build, Run and Test > Add a method that will return JSON data Will return application/json data type Build, Run and Test

23. 23 JavaONE 2010 | sun.com/javaone Exercise 3 > Return to the JavaFX Application > Add an asynchronous call to the RESTful web service > Use Java based JSON parser to parse the result var request : RemoteTextDocument = RemoteTextDocument { url: "http://host/MyWebService/resources/values"; } var value: String = bind request.document on replace { if (request.done) { //do something with value }

24. 24 JavaONE 2010 | sun.com/javaone Exercise 4 > Add polling capabilities to JavaFX Reuse existing java.util.Timer class Poll every 5000 ms class PieChartTask extends TimerTask { override function run() { //wrap existing connection and parsing code } }; def timer : Timer = new Timer("TimerThread"); def task : PieChartTask = new PieChartTask(); timer.schedule(task, 0, 5000);

25. 25 JavaONE 2010 | sun.com/javaone Bibliography > Applying CSS to UI Controls http://javafx.com/docs/articles/UIControls/theming.jsp http://javafx.com/docs/articles/UIControls/theming.jsp

26. 26 JavaONE 2010 | sun.com/javaone Congratulations! > You should now have completed this lab > If you would like more time to continue working, please consider taking the lab exercises with you Discs containing all of the labs offered this year are available for you to take home The lab guide will tell you where to get help with this lab after JavaOne > Thank you for attending this hands-on lab!

27. 27 JavaONE 2010 | sun.com/javaone David Delabassée david.delabassee@sun.com Sébastien Stormacq sebastien.stormacq@sun.com Sun Microsystems, Northen Europe