• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content


Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

JavaFX Training





This slide deck is from an Intertech Oxygen Blast on JavaFX.



Total Views
Views on SlideShare
Embed Views



2 Embeds 16

http://www.slideshare.net 15
file:// 1



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.


11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • How can I get this slide ?
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    JavaFX Training JavaFX Training Presentation Transcript

    • JavaFX – the face of future Java UIs
      Intertech’s Oxygen Blast Series
      April 2009
    • Welcome to Intertech
      How many people have been to Intertech before?
      We’ve been doing software developer training since 1991!
      Home of the Twin Cities Java Users Group.
      How many people are Java developers?
      How many people are doing Java thick client development (Swing)?
      How many people are doing Java Web development?
      How many people are doing Java ME development?
      How many people have heard of JavaFX?
      How many people have started looking at JavaFX development?
      How many people have started developing a JavaFX application?
      How many people came for the free food and a ½ day off work?
    • Who is this guy?
      Jim White – jwhite@intertech.com
      Intertech Instructor
      Author J2ME, Java in Small Things – 2002, Manning
      International Speaker
      Including JavaOne
      Contributor to many journals including:
      Consultant, engineer and architect with several companies
      Most recently - Senior Technical Architect at Target Corp.
    • Agenda
      What is JavaFX?
      What JavaFX is not and why use JavaFX
      A JavaFX application demo
      JavaFX Basics
      What you need to do JavaFX
      Code, compile and run JavaFX
      Running in many environments (desktop, browser, mobile)
      A look at current IDE support for JavaFX
      10 minute BREAK
      Examine the JavaFX Language Basics
      Explore some of the JavaFX GUI API (time permitting)
      Resource overview and question/answers
      Questions before we begin?????
    • What is JavaFX?
      A family of products
      JavaFX Script (usually just called JavaFX)
      A scripting language meant to provide rich user interfaces
      Uses a syntax that resembles Javascript and Scalar Vector Graphics
      JavaFX Mobile
      JavaFX used on mobile platforms
    • “All the screens of your life”
      Java has always espoused to the WORA mantra.
      This has been difficult given the diverse set of platforms Java finds itself on.
    • JavaFX to the rescue
      JavaFX is
      rich Internet application (RIA) technology
      provided through a single language that runs on any JVM
      for building “all the screens of your life”
      not just web-based
      Proof through Demonstration
    • What is an RIA technology
      RIA = rich Internet application
      RIA are Web-based applications
      Function as traditional desktop applications
      Typically delivered via the internet to the browser
      May require software in the browser (ActiveX, Java, Flash, etc.)
      “New and Cool” – Web 2.0
    • What JavaFX is not…
      Although sometimes rumored to be.
      a Swing replacement.
      Swing is extensible GUI components for desktop apps
      JavaFX is rich client platform for RIA across multiple screens/platforms.
      The two can be used together.
      a Java ME replacement.
      Java ME provides a host of API for building complete mobile apps
      JavaFX just augments the UI capability – across multiple screens/platforms
      a tool to add animation to Java web sites
      It can, but its much more
    • JavaFX competition (sort of)
      Asynchronous Javascript + CSS + XHTML + DOM
      Adobe AIR (Adobe Integrated Runtime)
      Flash + Flex + HTML + Ajax
      Microsoft Silverlight
      Miniaturized distribution of the .NET platform used to build media rich web plug-ins
      Still others
      OpenLaszlo - open source platform served as Java Servlets or a Flash file in a browser
      Curl – a programming language
      Cappuccino – Objective-J ++
    • Why pick JavaFX
      RIA for all platforms
      desktop, browser as well as mobile device
      Truly WORA
      Leverage Java
      Runs on the JVM
      JavaFX script can call Java classes
      Java classes can call JavaFX script
      A simple and easy language
      Allows content authors to write in a format that closely matches the layout of current graphical user interfaces
      As a fully object-oriented language allows expert programmers to build highly complex and robust interfaces.
    • The Basics: code, compile, run
    • What you need to do JavaFX
      JavaFX SDK (latest version is 1.1 – provides JavaFX Mobile)
      Java SDK 6 update 7 (Windows)
      Java SDK 5 update 13 (MacOS)
      A Linux version is sort of supported by group of open source developers
      A JavaFX aware IDE (optional but probably a good idea)
      NetBeans 6.5
      MacOS (but without mobile runtime/emulation)
      Eclipse 3.4 with JavaFX Plug-in
      JavaFX 1.1 Production Suite (optional)
      Provides a set of tools for graphics designers to create visual assets for JavaFX apps.
      Can even export JavaFX graphics from tools such as Adobe Illustrator or Adobe Photoshop
      Java ME SDK 3.0 will support JavaFX Mobile emulation/runtime (spring 2009)
    • Your first JavaFX application
      Stage {
      title: "Cool Running“
      width: 250
      height: 80
      scene: Scene {
      content: Text {
      font: Font {size: 20}
      x: 10
      y: 30
      fill: Color.GREEN
      content: "JavaFX is cool”}
    • Code
      Save the code you just saw in a file with a .fx suffix
      Name (in this case) doesn’t matter.
      For example sake, the code above is saved in Test.fx in c:jfx
    • Compiling and Running the Hard Way
      … with the Java SDK command line tools
      and no IDE
    • Compile
      Compile the code with the JavaFX SDK compiler
      javafxc.exe is provided in the /bin folder of the JavaFX SDK install
      Works like javac.exe – compiling JavaFX source code into byte code class files (Test.class).
      Many of the same command line options from javac.exe are available on javafxc.exe
    • Run
      Run the application on the desktop
      javafx.exe kicks of the JVM and JavaFX Script runtime.
      The javafx.exe is also in the /bin folder of the JavaFX SDK.
      Many of the same switches that java.exe uses are available for javafx.exe.
    • Package and Run
      Alternately, to Run the application on a browser or via Web Start, it must first be packaged.
      Package the application with javafxpackager.exe.
      The javafxpackager.exe is also provided in the /bin folder of the SDK.
      It produces files that can be used to display the app in a browser or via Web Start engine.
    • Package and Run for Mobile
      To run the application on a mobile device (or mobile emulator) it must also be packaged.
      The same packager utility can be used.
      A “-p mobile” switch must be provided (-p stands for profile)
      A “-p desktop” switch could be provided for the browser/Web Start packaging but is the default.
      This produces Java ME .JAD and .JAR files.
    • Run mobile emulation
      Provided with the JavaFX SDK is an emulator.
      The emulator is located in the /emulator/bin sub-folder of the SDK installation.
      Call on the emulator.exe with the JAD file created by the packager.
    • Coding, Compiling and Running the Easy Way
      … with a JavaFX-aware IDE
    • Code
      NetBeans 6.5 or Eclipse (with plug-in) use the JavaFX SDK under the covers.
      Create a JavaFX project.
      Create JavaFX scripts, classes and Stages (more in a bit).
      Source code editors support
      JavaFX specific syntax color-coded highlighting
      JavaFX API code completion
      Java FX code folding
      JavaFX javadoc documentation pop-ups
      JavaFX syntax error detection
      A JavaFX palette
      Drag/drop common elements into
      the source code
    • Run
      No manual compiling or packaging required
      It is done automatically.
      Pick your method of execution and run
      Web Start
      Mobile emulation
      Touch screen
    • NetBeans 6.5 and Eclipse 3.4 JavaFX plug-in
    • JavaFX Script Language
      JavaFX has a declarative syntax.
      Versus Java or C# that are imperative programming languages.
      Logic without so much control flow.
      Describes what the program should do, rather than describing how to do it.
      JavaFX is an expression language (more in a bit).
      JavaFX is statically (compile-time) typed.
      JavaFX code can call on “normal” Java classes.
      Java classes can call on JavaFX script.
    • Imperative vs. Declarative
      Stage {
      title: "Cool Running“
      width: 250
      height: 80
      scene: Scene {
      content: Text {
      font: Font {size: 20}
      x: 10
      y: 30
      fill: Color.GREEN
      content: "JavaFX is cool”}
      Java Swing
      public class Main {
      public static void main(String[] args) {
      JFrame aFrame = new JFrame("Cool Running");
      aFrame.setSize(250, 80);
      JPanel content = new JPanel();
      content.setLayout(new BorderLayout(5, 5));
      JLabel aLabel = new JLabel("Swing is cool");
      aLabel.setFont(new Font(null, Font.PLAIN, 20));
      content.add(aLabel, BorderLayout.CENTER);
    • JavaFX can call on Java code
      var a = 250;
      var b = 300;
      Stage {
      title: "Cool Running“
      width: java.lang.Math.max(a, b)
      height: 80
      scene: Scene {
      content: Text {
      font: Font {size: 20}
      x: 10
      y: 30
      fill: Color.GREEN
      content: "JavaFX is cool”}
    • What’s Next
      A general script language primer
      Declaring variables, functions, classes, etc.
      A JavaFX GUI API survey
    • JavaFX Language Primer
      data types
      data bindings
      access modifiers
    • JavaFX Script
      JavaFX Script programs are written as one or more scripts.
      A script consists of expressions and declarations
      Scripts are saved into a file (with a .fx extension).
      Here are some valid scripts.
      To make the scripts do something, add println to the script.
      When more than one expression is part of a script, add a semi-colon as a separator.
      Everything doesn’t have to be in a class
      “Hello world”
      println(“Hello world”)
      println(“Hello world”)
    • Data Types
      Everything in JavaFX (variable, function, expression) has a data type or put more simply a type.
      Value types are: String, Integer, Number, Boolean, Duration
      These have built-in language support
      Have built in literals
      Have built in operations (except Duration)
      Are immutable
      Have a default value different from null (“”,0,0.0, false, 0ms).
      Use “ “ or ‘ ‘ for String literals
      Two strings next to each other are merged
      “Good morning” ’class!’ = “Good morning class!”
    • Data Types (cont.)
      There is a function type in JavaFX
      In the example below, the variable squaredSum holds a function.
      More on variables and functions coming up.
      There is a class type to be covered later.
      A sequence type is a collection or array of any type.
      [ ] denote a sequence.
      Sequences are immutable.
      [1, 2, 3, 4] is also the same as [1..4].
      Sequences cannot hold other sequences.
      Embedded sequences are flattened out.
      [ [1, 5], [8, 9]] is the same as [1, 5, 8, 9]
      Null has no meaning in a sequence. [1, null, 3] == [1,3]
      var squaredSum = function (op1 :Integer, op2:Integer){(op1+op2)*(op1+op2)}
    • Variables
      Variables can be defined with keywords var or def.
      Use def to define a variable once and never reassign it.
      The value assigned to a var can change.
      Like in Java, there are different types of variables.
      Instance variables (defined in a class)
      Local variables (defined in a code block like a for loop)
      Script variables
      Unlike Java, a variable can be defined in a script yet not be part of any class or block
      def instructor = “Jim”;
      var start = 9;
      start = start + 2;
    • Variables (cont.)
      Variables can be typed explicitly.
      Or a variable’s type is determined implicitly when it is assigned.
      The optional on replace clause is a block of code that gets executed each time the variable is changed.
      var y: Integer = 9; //explicit typing
      var x;
      x = 8; //implicitly makes x an Integer
      x = "Try this"; //incompatible type and syntax error
      var y: Integer = 9 on replace {println("y now {y}")}; // prints “y now 9”
      y = 10; //prints “y now 10”
    • Pseudo Variables
      JavaFX comes with 3 pseudo variables (treat them as defs)
      __PROFILE__ is either "mobile", "desktop" or "browser" depending on environment.
      __FILE__ is the string URL of the containing script.
      __DIR__ is the string URL of the directory for the script.
      def hSize = if (__PROFILE__ == "desktop") then 355 else 320;
    • Functions
      Functions can be declared …
      inside a class (instance function)
      or at the script level (script function).
      By default, the last thing computed is returned.
      Function return value, return type and parameter types can be explicitly (below) set or inferred (above).
      function squaredSum (op1 , op2){
      (op1 + op2) * (op1 + op2)
      println(squaredSum(5, 5));
      function squaredSum (op1: Integer, op2:Integer) : Integer {
      return (op1 + op2) * (op1 + op2)
    • Classes
      As in Java, classes define things (real or conceptual).
      As in Java, instances or objects are created from the classes and represent things.
      Classes can have…
      Instance variables (with def or var)
      Class init and postInit optional blocks allow for initialization and after instantiation processes.
      Classes can extend other classes (inheritance).
      In fact, JavaFX supports multiple inheritance of JavaFX classes!
      JavaFX classes can extend a Java class and multiple Java interfaces.
      “Extending” an interface forces the class to implement the interface.
      Use override keyword to override super classes or interface methods or var definitions.
    • //JavaFX class
      public class Dog extends Pet, com.intertech.NoiseMaker, com.intertech.Animal {
      init {
      public override function makeNoise():Void{
      println("Woof Woof")
      public function eat() {
      println("Mmmpf, crunch... I love dog chow")
      public override function toString(): String {
      "{name} has {legs} legs"
      //Java class
      package com.intertech;
      public class Animal {
      public int legs = 2;
      //Java interface
      package com.intertech;
      public interface NoiseMaker {
      public void makeNoise();
      //JavaFX class
      public class Pet {
      public var name: String;
      var d = new Dog();
      Woof Woof
      Mulligan has 4 legs
      Mmmpf, crunch, mmpfh ... I love dog chow
    • Object instantiation
      //”Java way” of instantiating
      var cust1 = new Customer();
      cust1.address="Hugo, MN";
      //Given JavaFX class
      public class Customer {
      public var name: String;
      public var age: Integer;
      public var address: String;
      //more JavaFX way of instantiating
      var cust2 = Customer{
      name: "Jim"
      address: "Hugo, MN"
      age: 45
      Both work.
    • Expressions
      JavaFX is an expression language.
      Expressions are chunks of executable code
      They evaluate to a value (although sometimes they just return Void)
      They can be combined to produce larger expressions.
      Loops, conditionals, code blocks, are expressions
      There are many types of expressions
      block – declarations or other expressions in { }
      for & while (and break and continue)
      try, catch, throw and finally
      range – code between [ ] (sequences use range expressions)
      type - instanceof, as (as works as a “cast” or convert operation)
      miscellaneous (insert, delete, new, return, assignment, literals, …)
    • Some expected expressions (relative to Java)
      var age = 45;
      if (age >= 70) then //if expression - 'then' is optional
      println("Qualifies for full SSN"); //another expression
      } else {
      println("Qualifies for some SSN"); //another expression
      var odds = [1..9 step 2]; //range expression
      var total: Integer;
      for (odd in odds) //for expression
      { //block expression
      total+= odd; //assignment expression
      while (total > 0) //while expression
      println("count down - {total}");
      total= total - 1;
      try { //try and
      } catch (e: java.lang.Exception){ //catch expressions
      println("Math error: {e.getMessage()}")
      “+” is not a String operator
    • Some different expressions
      var answer = if (3 < 4) { "Yes“} else {"No”} //expression return a value
      println(answer) //prints Yes
      var myInt: Integer = 7;
      println(myInt); //prints 7
      var myNumber = 7 as Number;
      println(myNumber); //prints 7.0
      var teams = ["Cardinals", "Astros", "Brewers", "Reds", "Pirates"];
      println(sizeof teams); //prints 5
      insert "Cubs" into teams;
      println(teams); //prints [ Cardinals, Astros, Brewers, Reds, Pirates, Cubs ]
      delete "Cardinals" from teams;
      println(teams); //prints [ Astros, Brewers, Reds, Pirates, Cubs ]
      println(teams[2]); //prints Brewers
      println(teams[-1]); //prints " " - nothing but does not error
      teams = reverse teams;
      println(teams); //prints [ Cubs, Pirates, Reds, Brewers, Astros ]
      var contenders = teams[1..];
      println(contenders); //prints [ Pirates, Reds, Brewers, Astros ]
      var champs = teams[0..<1];
      println(champs); //prints [Cubs ]
    • Data Binding
      Data binding creates an immediate and direct relationship between two variables.
      Use the bind keyword to bind variables.
      In its simplest of forms, binding is shown below.
      var x = 0;
      var y = bind x;
      println(y); //prints 0
      x = 7;
      println(y); //prints 7
      var x = 0;
      def y = bind x;
      println(y); //prints 0
      x = 7;
      println(y); //prints 7
    • Slightly More Complex Bindings
      var prez = ["Washington", "Adams", "Jefferson", "Madison", "Monroe", "Quincy Adams"];
      var firstPresidents = bind prez[0..<3];
      println(firstPresidents); //prints [ Washington, Adams, Jefferson ]
      insert "Jackson" into prez;
      println(firstPresidents); //still prints [ Washington, Adams, Jefferson ]
      prez = reverse prez;
      println(firstPresidents); //prints [ Jackson, Quincy Adams, Monroe ]
      var z = 5;
      function add5 (anInt: Integer):Integer{
      anInt + 5;
      var sum = bind z + add5(z);
      println(sum); //prints 15
      println(sum); //prints 25
    • More complex binding
      var n = "Jim";
      var a = 45;
      var addr = "Hugo, MN";
      var cust = bind Customer{
      name: n
      age: a
      address: addr
      n = "Kelly"; //causes a new Customer object to be created and assigned to cust
      var n = "Jim";
      var a = 45;
      var addr = "Hugo, MN";
      var cust = Customer{
      name: bind n
      age: bind a
      address: bind addr
      n = "Kelly"; //modifies the name of cust without creating a new object
    • Binding with inverse
      Binding with inverse establishes a bi-directional relationship between variables.
      var x = 8;
      var y = bind x with inverse;
      x = 9;
      println(y); //prints 9
      y = 10;
      println(x); //prints 10
    • Packaging
      JavaFX scripts (classes, functions, etc.) can be assigned to a package.
      Specify the package name at the top of a script file.
      Script files should be in a folder structure that mimics the package naming.
      Use import to access scripts in other packages
      The import statement doesn’t have to be at the top of the script.
      Without import, you can also use complete package names when referencing classes, functions, etc. (just as in Java).
    • Package/Import Example
      var x = 9;
      var y = x + 7;
      import com.intertech.domain.Team;
      var t = Team{
      name: "Cubs"
      city: "Chicago"
      package com.intertech.domain;
      public class Team {
      public var name: String;
      public var city: String;
      public override function toString(): String{
      "{city} {name}"
      public function cheer(team: Team) {
      println("We love the {team}")
    • Access Modifiers
      As in Java, JavaFX has a number of access modifiers.
      Access modifiers control use or access to functions, variables, classes, etc. outside of the script they are defined in.
      Access modifiers, while similar in purpose, have different names than in Java.
    • Additional Variable Access Modifiers
      Two additional access modifiers can be used with variables.
    • JavaFX GUI API Survey
      Common vs. Desktop
      What else
    • JavaFX Architecture
      Beyond the basic language, JavaFX is separated into two profiles.
      The common profile includes classes that function on both the desktop and mobile devices.
      The desktop profile provides classes that take advantage of desktop power and enhance the UI.
    • “All the worlds a Stage”
      The Stage class is the top level UI container for JavaFX scripts.
      The Stage class comes from the javafx.stage package.
      It is part of the common profile.
      Typically, a Stage is given a title, dimensions, location, etc.
      import javafx.stage.Stage;
      Stage {
      import javafx.stage.Stage;
      Stage {
      title: "Welcome to the Stage"
      width: 350
      height: 80
      x: 200
      y: 200
    • Scenes are played upon the Stage
      The scene property on a Stage is given a Scene instance.
      The Scene class comes from the javafx.scene package.
      A Scene object is a collection mechanism for Node objects.
      Node objects are displayable items (rectangle, text, etc.).
      A Scene object can also have fill, height, width and other properties.
      import javafx.scene.Scene;
      import javafx.stage.Stage;
      import javafx.scene.paint.Color;
      Stage {
      title: "Welcome to the Stage“
      scene: Scene {
      fill: Color.MAGENTA
      width: 400
      height: 200
    • Nodes
      The Node is the base class for all displayed items in a Scene.
      The content property on a Scene holds a sequence of Nodes.
      Each Node may have children nodes – making a Scene graph.
      A Scene graph is a tree-like data structure.
      Each item or Node in the tree has zero or one parent.
      Each item is either a leaf with zero sub items or a "branch" with zero or more sub items.
      There are numerous Node types.
      Shapes - Rectangles, Circles, Lines, Arcs, etc.
    • Node Examples
      content: "Hello world“
      font: Font {size: 20}
      x: 200
      y: 175
      height: 50
      width: 100
      fill: Color.BLUE
      x: 100
      y: 100
      ImageView {
      image: Image {url: "{__DIR__}intertech.png”}
      x: 10
      y: 10
      import javafx.scene.image.*;
      import javafx.scene.paint.Color;
      import javafx.scene.Scene;
      import javafx.scene.shape.Rectangle;
      import javafx.scene.text.*;
      import javafx.stage.Stage;
      Stage {
      title: "Welcome to the Stage“
      x: 200
      y: 200
      scene: Scene {
      fill: Color.MAGENTA
      width: 400
      height: 200
      content: […]
    • Object Animation
      //code as before but with Rectangle in rect var
      var track: Path = Path {
      elements: [
      MoveTo {
      x: 200
      y: 200
      LineTo {
      x: 100
      y: 100
      var anim: PathTransition = PathTransition {
      node: rect
      path: AnimationPath.createFromPath(track);
      interpolate: Interpolator.LINEAR
      duration: (sizeof track.elements) * 1s
    • What else can I do?
      Transform (rotate, scale, shear, translate, etc.)
      Add event handling (clicking, keyboard, etc.)
      Add Animation
      Add media
      With the desktop profile
      Add “widgets”
      Add shadowing, lighting, blur, etc. effects
    • Resource List
      JavaFX Website (Overview, FAQ, download): http://javafx.com
      JavaFX SDK version 1.1: http://javafx.com/downloads
      NetBeans 6.5: http://www.netbeans.org/
      Eclipse 3.4: http://www.eclipse.org/downloads/
      Eclipse JavaFX Plug-in (optional): http://kenai.com/projects/eplugin
      Sun's JavaFX tutorial site: http://java.sun.com/javafx/1/tutorials/core/index.html
      Free JavaFX tutorial offered online: http://www.javapassion.com/javafx/
      Sun JavaFX building GUI tutorial: http://java.sun.com/javafx/1/tutorials/ui/index.html
      JavaFX API Javadocs: http://java.sun.com/javafx/1.1/docs/api/
      JavaFX language reference: http://openjfx.java.sun.com/current-build/doc/reference/JavaFXReference.html
      JavaFX Eclipse Plug-in tutorial: http://blogs.sun.com/octav/entry/eclipse_plugin_for_javafx_script
      quick 10 minute tutorial: http://www.dieajax.com/2007/08/23/10-minute-tutorial-javafx-hello-world/
      JavaFX Blog: http://learnjavafx.typepad.com/weblog/2008/02/getting-plutoed.html
      Performance Tips for JavaFX’ers: http://blogs.sun.com/michaelheinrichs/entry/best_practices_for_javafx_mobile1
    • Agenda
      • What is JavaFX?
      • What JavaFX is not and why use JavaFX
      • A JavaFX application demo
      • JavaFX Basics
      • What you need to do JavaFX
      • Code, compile and run JavaFX
      • Running in many environments (desktop, browser, mobile)
      • A look at current IDE support for JavaFX
      • Examine the JavaFX Language Basics
      • Explore some of the JavaFX GUI API (time permitting)
      • Resource overview
    • Q&A
    • Intertech Resources
      Intertech offers free:
      Content packed newsletters
      Podcasts through iTunes
      YouTube videos
      Free Oxygen Blast seminars
      Whitepapers and .pdf downloads
      For the above and special offers, register for the newsletter at the bottom of our homepage
    • Intertech Training
      Founded in 1991, Intertech offers a full training line-up:
      JEE, open source technologies
      .NET, SQL Server, SharePoint
      XML, Ajax
      Delivery formats include:
      Instructor-led public and onsite
      Instructor-led night and virtual
      Self-paced study
      For advanced purchase customers, Intertech offers Elite Rewards™—call 651-994-8558 +23
    • Intertech Consulting
      In addition to training, Intertech delivers consulting
      Consulting is part of our brand: Instructors Who Consult | Consultants Who Teach
      Give your project success with our consulting services
      To learn more, contact us at 651-994-8558 +11
    • Thanks for coming!