JavaFX - Sketch Board to Production

JavaFX From Sketch Board to Production Yoav Aharoni, Web Consultant

Introduction Agenda » JavaFX - In a Nutshell. » 7 Steps to creating your JavaFX application: For each step { • Covering tools and resources. • Getting just a bit technical. } » When you leave, you should know:  What you can do with JavaFX  What is available for you when developing with JavaFX.

Java Is a Great Language But Not For UI

Introduction So, What’s JavaFX? » Sun’s Answer to RIA, Rich Internet Application. (Because Swing sucks...) » It’s a platform for developing applications. » Meaning, it has a whole set of tools for that. » Including a verrry cooool scripting language. Stage { scene: Scene { content: Label {text:"Don't Make a Scene"} } }

Introduction Where Does It Run? » Runs on the JVM (+ Java Browser Plug-in). » The famous “Write once, Run anywhere.”  Common API + APIs for Applets, Web Starts, Mobile and TV. » Supported by device manufacturers and content developers (LG, Ericsson, MobiTV, ...)

Introduction What Can I Do With It? This And More...

Introduction Cool... So How Do I Get Started? » Great! » Sounds really cool! » I want one! » ... How do I get started?

Creating Your First JavaFX Application Going From Sketch Board to Production

Steps For Creating JavaFX Application 7 Steps TODO List Things You Gotta Do: 1. Sketch 2. Setup DevEnv 3. Draw UI 4. Develop 5. Build 6. Test 7. Deploy

Sketch DevEnv Draw Develop Build Test Deploy Finish Sketch Step 1

Step 1: Sketch Explanation » This is the step in which you come up with an idea for an application and sketch it... Ingredients » Alcohol or Jelly Beans » Paper and Pencil » Friends and Colleagues » Sketch Board

Sketch DevEnv Draw Develop Build Test Deploy Finish Setup Development Environment Step 2

Step 2: Setup Dev. Environment Ingredients » JavaFX SDK (currently SDK 1.2.1) » JDK , at least 6u10 (currently 6u17) » IDE Of Choice » Maven (Optional) What We’ll Do » Download JavaFX SDK & JDK » Choose IDE » Create Project

Step 2: Setup Dev. Environment Choose Your IDE » You got 3 options: 1. IntelliJ – Great Java IDE. Not yet for JavaFX. 2. Eclipse – Good Java IDE. Two plug-ins are available: • Sun’s JavaFX Studio Plug-in – Better, still not so good. • Exadel JavaFX Eclipse Plug-in – Better, still not so good. 3. NetBeans - Good Java IDE (although I rather use Eclipse); » So - NetBeans is best for JavaFX so far.

Step 2: Setup Dev. Environment Choose Your IDE » You got 3 options: 1. IntelliJ – Great Java IDE. Not yet for JavaFX. 2. Eclipse – Good Java IDE. Two plug-ins are available: • Sun’s JavaFX Studio Plug-in – Better, still not so good. • Exadel JavaFX Eclipse Plug-in – Better, still not so good. 3. NetBeans - Good Java IDE (although I rather use Eclipse); » So (unfortunately for me) - NetBeans is best for JavaFX so far.

Run, Debug JavaFX Step 2: Setup Dev. Environment Projects Auto Complete, Syntax Highlighting Choose Your IDE No Auto Import Occasionally Null-Pointer Exception » You got 3 options: 1. IntelliJ – Great Java IDE. Not yet for JavaFX. 2. Eclipse – Good Java IDE. Two plug-ins are available: • Sun’s JavaFX Studio Plug-in – Better, still not so good. • Exadel JavaFX Eclipse Plug-in – Better, still not so good. 3. NetBeans - Good Java IDE (although I rather use Eclipse); » So - NetBeans is best for JavaFX so far.

Run, Debug JavaFX Projects Step 2: Setup Dev. Environment Auto Complete, Syntax Highlighting Auto Import Choose Your IDE Auto Import Comment Bug » You got 3 options: Auto Complete Is Missing Options 1. IntelliJ – Great Java IDE. Not yet for JavaFX. 2. Eclipse – Good Java IDE. Two plug-ins are available: • Sun’s JavaFX Studio Plug-in – Better, still not so good. • Exadel JavaFX Eclipse Plug-in – Better, still not so good. 3. NetBeans - Good Java IDE (although I rather use Eclipse); » So - NetBeans is best for JavaFX so far.

Step 2: Setup Dev. Environment Run, Debug JavaFX Projects Choose Your IDE Auto Complete, Syntax Highlighting Auto » You got 3 options: Import No Exceptions 1. IntelliJ – Great Java IDE. Not yet for JavaFX. 2. Eclipse – Good Java IDE. Two plug-ins are available: • Sun’s JavaFX Studio Plug-in – Better, still not so good. • Exadel JavaFX Eclipse Plug-in – Better, still not so good. 3. NetBeans - Good Java IDE (although I rather use Eclipse); » So - NetBeans is best for JavaFX so far.

Step 2: Setup Dev. Environment Create a JavaFX Project » Focus on two options: (1) (2) IDE

Step 2: Setup Dev. Environment *Maven* You said? » I Don’t speak Yiddish... » Go ask Baruch, he’s giving a lecture on build systems. » Maven is a build util and much more...

Step 2: Setup Dev. Environment Why I Choose Maven » It’s a good way to describe your project. » You can easily find and get 3rd-party dependencies. (No need to add them jars to source control). » You can easily move between IDEs. » Fellow Java developers won’t need JavaFX SDK. » Will be used in later steps (build, test, deploy)...

Step 2: Setup Dev. Environment Setting Up a Maven JavaFX Project » Create a POM describing your project. » Add dependencies for JavaFX artifacts. » Add and configure jfrog-javafx-plugin.

Step 2: Setup Dev. Environment POM Code Snippet <dependency> <groupId>javafx</groupId> <artifactId>javafx-common</artifactId> </dependency> ... <plugin> <groupId>org.jfrog.maven.plugins</groupId> <artifactId>jfrog-javafx-plugin</artifactId> <executions> ... </executions> <configuration> ... </configuration> </plugin>

Step 2: Setup Dev. Environment Oh oh... » Problem: in NetBeans, JavaFX and Maven don’t mix... » Solution: There’s half a solution » Other Solutions:  Fallback to Eclipse. @#@!% &**!!!

Sketch DevEnv Draw Develop Build Test Deploy Finish Draw UI Step 3

Step 3: Draw UI Ingredients » JavaFX Production Suite » JFX Builder (Web Start) » Adobe Illustrator / Photoshop » Inkscape Snapshot (Devel) » Any Other SVG Editor (Sketsa, Sodipodi, Amaya,...) What We’ll Do » Literally draw your application UI. » A developer? Better have a graphic designer for this...

Step 3: Draw UI Drawing Process... Developer Designer Drawing Tool JavaFX Production Suite

Step 3: Draw UI Designer’s Options Adobe Illustrator Inkscape + Adobe Photoshop JavaFX Module + JavaFX Plug-in Pros: Powerful, Well-Known Pros: Easy, Open-Source Cons: $$$ Cons: No Animations, Forms JavaFX Builder Other SVG Editor (Web Start App) + SVG to JavaFX Converter Pros: Animations, Forms Pros: Free Choice Cons: Poor UI (Relatively) Cons: One More Step

Step 3: Draw UI Getting The JavaFX Code » JavaFX Production Suite will generate a *.fxz file.  It’s a zip containing *.fxd source code.  Either extract and edit it.  Or use FXDLoader.load(“url”). » Notes: Give  Give good Ids to elements you’ll use in code. Ids  Give “JFX:” prefix to Ids.

Step 3: Draw UI Quick Demo

Sketch DevEnv Draw Develop Build Test Deploy Finish Develop JavaFX Step 4

Step 4: Develop JavaFX Ingredients » Wikis, Examples and Blogs » 3rd Party Libs: WidgetFX, JFXtras, Nelson, ... What We’ll Do » Learn JavaFX » Use JavaFX SDK APIs » Use 3rd-Party Libs

Step 4: Develop JavaFX Time Limit » Frankly, this stuff can be covered in dozens of presentations. » But we only have ½ hour. » So, lets just review some pointers.

Step 4: Develop JavaFX First Things First - Learning JavaFX » Relevent Sites: About JavaFX,  JavaFX Official Site Quick Starts  Planet JFX Wiki Demos, ...  Free JavaFX Lessons  James Weaver’s Blog  Chris Oliver’s Blog  Steve on Java Blog  Sun’s JavaFX Blog » Resources are at end of this presentation.

Step 4: Develop JavaFX Know Thy Language Features » Get familiar with JavaFX script features like:  Array-like “Sequences” with cool built-in queries.  Out-of-the-box Data Binding  Triggers  String Expressions  Closures  Pseudo-Variables like __DIR__ (for images/other resources). Small Demo

Step 4: Develop JavaFX And Thy SDK API » You can do lots of stuff just out-of-the-box, Learn the classes and utilities involved for doing:  Visual Effects (Shadow, Glow, Mask,...)  Interactive Forms, Components and Widgets  Animation  Charts Small Demo  Swing Integration  CSS Skinning  Drag n’ Drop  Audio, Video

Step 4: Develop JavaFX Know Thy Other APIs » You also have device specific APIs:  Applet? • Interact with containing page. • Execute JavaScript (Live Connect/AppletStageExtension). • Drag applet drop out of the browser.  Desktop? • Make Transparent or Always On Top desktop application.  Mobile? • MSA (JSRs 248 and 249)

StepSecurity & 4: Develop JavaFX Comms Graphics Personal Application Commerce Information Connectivity JSR 226 JSR 180 SVG SIP Know Thy Other APIs JSR 184 JSR 205 JSR 238 3D Graphics MMS Mobile I18n » You also have device specific APIs: JSR 229 JSR 135 JSR 82 JSR 179 JSR 172  Applet? Payments Mobile Media Bluetooth Location Web Services • Interact with containing page. JSR 177 JSR 234 JSR 120 JSR 75 JSR 211 Security & Multimedia Content • services Supplements Trust Execute JavaScript (Live Connect/AppletStageExtension). SMS PIM & File Handler • Drag applet drop out ofJSR 248 the browser. Environment JSR 118, 271 JSR 139 JSR 218 MSA  Desktop? MIDP clarifications CLDC CDC • Make Transparent or Always On Top desktop application.  Mobile? • MSA (JSRs 248 and 249)

Step 4: Develop JavaFX 3rd-Party Projects and Libs Small Demo » Can’t have it all in the SDK... » JFXtras have some nice utils and components:  SceneToJComponent - Embedding JavaFX in Swing.  JSONHandler, XMLHandler - Stream --> JavaFX objects.  “Debugging” - SideHatch  Layouts, Borders, Menu, Grid, Shapes,... » If you’re creating a desktop widget you might want to check out WidgetFX SDK and widget library.

Step 4: Develop JavaFX 3rd-Party Projects and Libs » The Nelson Framework also has some widgets, utils and a grid. » Accessibility? – FXAccessible! » If you need Inverse Kinematics (simulate body motion), FXUtil is a nice library. Small Demo

Step 4: Develop JavaFX JavaFX <--> Java » Need Java Objects in JavaFX? » Just import them, it’s as simple as that. » Use JavaFX Binder for binding to Java beans. » Need JavaFX objects in Java?  Use Java interfaces.  Use JSR 223 (Scripting for the Java).  Or FXBean.

Step 4: Develop JavaFX Development Tips » Use modules. » Use Java for back-end / model.  JavaFX has no annotations, collections or generics.  Use JavaFX Binder for binding. » Do quick code-test cycles with Lobo Browser. » Write JavaFXdoc.  XML instead of HTML  A nice @example feature.

Step 4: Develop JavaFX @example Development Tips » Use modules. » Use Java for back-end / model.  JavaFX has no annotations, collections or generics.  Use JavaFX Binder for binding. Syntax Highlighting » Do quick code-test cycles withScreenshot + Lobo Browser. » Write JavaFXdoc.  XML instead of HTML  A nice @example feature.

Nice Effects App

Sketch DevEnv Draw Develop Build Test Deploy Finish Build Step 5

Step 5: Build Ingredients A Different Build » IDE » Maven  Maven JavaFX Plug-in » Ant What Are We Doing » Creating JARs for deployment...

Step 5: Build Bob, Choose a Build Tool JavaFXPackager Chosen IDE Found in SDK Maven Ant (+ Ivy) Using JavaFxAntTask

Step 5: Build What Are We Getting » You can build using Desktop or Mobile profile. » For desktop you’ll get a jar file, 2 *.jnlp files and html file for running as an Applet or a Web Start. » For mobile you’ll get a jar file and a jad file. JNLP = Java Network Launch Protocol

Step 5: Build Security » Sign your jars  Using JavaFXPackager do javafxpackager -sign  In Eclipse/NetBeans there’s a checkbox you can check.  Using maven jar:sign.

Break... A Quick Demo 30 Lines / 3000 Characters - Contest Winner Matthew Hegarty’s Video Poker

Sketch DevEnv Draw Develop Build Test Deploy Finish Test Application Step 6

Step 6: Test Ingredients » Maven / Ant (Optional) » JFXtras What Are We Doing? » Unit Testing out application

Step 6: Test Test JavaFX with JavaFX » You can write JUnit tests with JavaFX. » You’ll be running into trouble, so:  Use the JUnit 3.x approach (extend TestCase).  Execute it using TestRunner.  Or by patching JUnit. » When using robots, there are hacks for getting JFrame. » Write JavaFX tests using JFXtras Test base class.  To be replaced with FEST-JavaFX.

Step 6: Test JFXtras Test Example Test { say: "factorialGood should return 24." do: function () { factorialGood (4) } expect: Expect.equalTo (24) }.perform (); » Will Give test: factorialGood should return 24. Test Results: 1 passed, 0 failed, 0 skipped. Test run was successful!

Step 6: Test Emulate Mobile Devices » (Lucky) Windows Users  Using Mobile Emulator found in JavaFX SDK.  Or using Java ME SDK 3.0. » Mac Users  There’s an Java ME SDK early access on MacOS. » Linux Users  Sorry, not yet.  But working on it...  You always can use VirtualBox ...

3D Maze

Sketch DevEnv Draw Develop Build Test Deploy Finish Deploy Step 7

Step 7: Deploy Ingredients » Web Server » Artifactory Maven Repository What We’ll do » Put our built app on the web as an Applet or Web Start.

Step 7: Deploy Deploy Web Start Deploy Applet 1. Edit JNLP jar references 1. Add dtfx.js to page. and codebase. 2. Use javafx(). 2. <a>link</a> to the JNLP. 3. Or use Deployment 3. Or better, add Toolkit JavaScript. Deployment Toolkit JavaScript. * Prefer JNLP configuration. This is Where Maven is handy - You Don’t re-edit the JNLP.

Step 7: Deploy A New Way to Deploy JavaFX » Here’s a twist, deploy to a Maven Repository – Artifactory.  Artifactory has an addons package for doing just that. » Pros:  Automatic jar signing at deployment.  Easily re-deploy modules of your application.  Client cache and reuse common modules/jars.  Get usage statistics.

Break! – Bon Appétit

Resources Links to what we talked about

Step 1: Sketch Step 1 Resources » See What JavaFX Can Do » Dublin Pubs » Jelly Beans Stores

Step 2: Setup Dev. Environment Step 2 Resources » Download JDK 6u16 + JavaFX 1.2.1 SDK » Download Netbeans + JavaFX Plug-in. » Download Eclipse » Sun’s JavaFX Feature Eclipse Plug-in » Exadel JavaFX Studio Eclipse Plug-in » Download Maven » JavaFX Maven Plugin

Step 3: Draw UI Step 3 Resources » Download Inkscape Snapshot (Devel) » Download Adobe CS4 » Download JavaFX Production Suite » Download Sketsa SVG Editor » Sodipodi Project » Launch JFXBuilder » Images and Other Resources

Step 4: Develop JavaFX Step 4 Resources » Learn JavaFX » Blogs  JavaFX Official Site  James Weaver’s Blog  JavaFX at Sun  Learning JavaFX  Free JavaFX Training  The Java FX Journey  Planet JFX Wiki  Sun’s JavaFX Blog  JFXStudio  Chris Oliver’s Blog  Steve on Java Blog

Step 4: Develop JavaFX More Step 4 Resources » 3rd Party Libs » Tools  JFXtras  JavaFX Pad  WidgetFX  Lobo Project  FXUtil  JavaFX Binder  Nelson Framework  FXAccessible

Step 5: Build Step 5 Resources » JavaFX SDK » Maven » JavaFX Maven Plugin » About JavaFxAntTask » Executing JavaFXPackager from Ant » Baruch’s JavaEdge 2009 Presentation on Build

Step 6: Test Step 6 Resources » JFXtras Test Class API » Download Java ME SDK 3.0 » Steve on Java Blog

Step 7: Deploy Step 7 Resources » JavaFX Deployment Tutorial » Java Rich Internet Applications Deployment Advice » JavaOne: Distributing JavaFX Applications » Using Java Deployment Toolkit with JavaFX Applets » Java Web Start » Frogs JavaEdge 2009 Presentation on Artifactory

Step 8: Final Touches Step 8 Resources » Java Web Start » Java Deployment Toolkit

Thank You Questions?

JavaFX - Sketch Board to Production

by Yoav Aharoni

Accessibility

Categories

Upload Details

Usage Rights

Statistics

JavaFX - Sketch Board to Production Presentation Transcript