• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
The Java Fx Platform – A Java Developer’S Guide
 

The Java Fx Platform – A Java Developer’S Guide

on

  • 6,812 views

Presented at Devoxx 2009 for the JavaFX Univerity Session. Also available online at Parleys.com.

Presented at Devoxx 2009 for the JavaFX Univerity Session. Also available online at Parleys.com.

Statistics

Views

Total Views
6,812
Views on SlideShare
4,092
Embed Views
2,720

Actions

Likes
0
Downloads
87
Comments
0

9 Embeds 2,720

http://steveonjava.wordpress.com 1683
http://steveonjava.com 605
http://javafx.steveonjava.com 407
http://www.slideshare.net 12
http://translate.googleusercontent.com 8
http://www.linkedin.com 2
http://www.google.co.in 1
http://webcache.googleusercontent.com 1
https://steveonjava.wordpress.com 1
More...

Accessibility

Categories

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.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    The Java Fx Platform – A Java Developer’S Guide The Java Fx Platform – A Java Developer’S Guide Presentation Transcript

    • The JavaFX Platform – A Java Developer’s Guide
      Stephen Chin
      Inovis, Inc.
    • About Your Presenter
      Director SWE, Inovis, Inc.
      Open-Source JavaFX Hacker
      MBA
      Belotti Award
      UberScrumMaster
      XP Coach
      Agile Evangelist
      WidgetFX
      JFXtras
      FEST-JavaFX
      Piccolo2D
      Java Champion
      JavaOneRockstar
      JUG Leader
      Pro JavaFX Author
      2
      Family Man
      Motorcyclist
    • LearnFX and Win at Devoxx
      Tweet to answer:
      @projavafxcourse your-answer-here
      3
    • Part 1 - JavaFX Crash Course
      var x = ['x','o','v','e','d','x'];
      insert x[5] before x[0];
      println("{reverse x[0..<]}");
      @projavafxcourse answer
    • 1. Download JavaFX
      http://javafx.com/
      5
      2. Run Your IDE
      • NetBeans (bundled)
      • Eclipse – ExadelJavaFX Studio
      3. Write Your First App
      Hello Devoxx!
      • Step-by-Step Demo
      var x = ['x','o','v','e','d','x'];
      insert x[5] before x[0];
      println("{reverse x[0..<]}");
      @projavafxcourse answer
    • Hello Devoxx!: Creating a Stage
      Stage {
      title: "Hello Devoxx!"
      scene: Scene {
      content: [
      "..."
      ]
      }
      }
      6
      var x = ['x','o','v','e','d','x'];
      insert x[5] before x[0];
      println("{reverse x[0..<]}");
      @projavafxcourse answer
    • Hello Devoxx!: Displaying Images
      ImageView {
      image: Image {
      url: "http://www.javoxx.com/download/attachments/1706305/Devoxx09.jpg"
      }
      opacity: .5
      }
      7
      var x = ['x','o','v','e','d','x'];
      insert x[5] before x[0];
      println("{reverse x[0..<]}");
      @projavafxcourse answer
    • Hello Devoxx!: RSS Feed
      varitems:Item[];
      RssTask {
      interval: 30s;
      location: "http://search.twitter.com/search.rss?q=devoxx"
      onItem: function(item) {
      insert item into items;
      }
      }.start();
      8
    • Hello Devoxx!: VBox Layout
      vartextBox:VBox;
      textBox = VBox {
      layoutX: 40
      layoutY: 40
      spacing: 20
      content: "..."
      }
      9
    • Hello Devoxx!: Displaying Text
      content: bind for (item in items) {
      Text {
      textOrigin: TextOrigin.TOP
      textAlignment: TextAlignment.JUSTIFY
      wrappingWidth: 520
      font: Font.font(null, FontWeight.BOLD, 18)
      content: item.title
      }
      }
      10
    • Hello Devoxx!: Animating Graphics
      vartransTransition = TranslateTransition {
      duration: 2m
      node: bind textBox
      fromY: 600
      toY: -4000
      interpolator: Interpolator.LINEAR
      repeatCount: Timeline.INDEFINITE
      }
      transTransition.play();
      11
    • Hello Devoxx!: Playing Audio
      ?
      MediaPlayer {
      autoPlay: true
      repeatCount: MediaPlayer.REPEAT_FOREVER
      media: Media {
      source: "http://blogs.sun.com/roller/resources/dcb/Java.mp3"
      }
      }
      12
    • 13
      Hello Devoxx! Demo
    • Resource: JavaFX API Documentation
      14
      http://java.sun.com/javafx/1.2/docs/api/
    • 15
      Part 2 - Comparing JavaFX and Java
      var x = ['x','o','v','e','d','x'];
      insert x[5] before x[0];
      println("{reverse x[0..<]}");
      @projavafxcourse answer
    • Language Similarities
      Java is…
      Statically typed
      Compiled to bytecodes
      Runs on the JVM
      Has a large library
      JavaFX is…
      Statically typed
      Compiled to bytecodes
      Runs on the JVM
      Can call Java libraries
      16
    • Language Differences
      17
    • Integrating JavaFX and Java
      Calling Java from JavaFX
      Can call Java interface or classes directly
      Automatic conversion to and from Arrays and Collections
      Can even extend Java interfaces and classes
      Calling JavaFX from Java
      Easiest way is to create a Java interface that JavaFX extends
      Can invoke JavaFX as a script and get results back
      18
    • Datatype Support
      19
    • JavaFX Operators
      20
      • Multiplication and division of two durations is allowed, but not meaningful
      • Underflows/Overflows will fail silently, producing inaccurate results
      • Divide by zero will throw a runtime exception
    • JavaFX Operators (continued)
      21
    • Access Modifiers
      22
    • Data Binding
      A variable or a constant can be bound to an expression
      var x = bind a + b;
      The bound expression is remembered
      The dependencies of the expression is watched
      Variable is updated
      Regular binding: when dependencies change values
      Lazy binding: when the variable is accessed
      var x = bind lazy a+ b;
      23
    • What Bind Updates
      var x = bind if(a) then b else c
      x is updated if a or b or c changes
      var x = bind for (i in [a..b]) { i * i }
      Not everything is recalculated
      If a = 1 and b = 2, x is [1, 4]
      If b changes to 3, only the added element is calculated
      24
      1
      4
      9
    • Binding to Expressions
      Binding to a block
      Bound block may contain any number of defs followed by one expression
      Dependencies of block is backtraced from the expression
      Binding to function invocation expression
      Regular function: dependencies are parameters
      Bound function: backtraced from final expression inside function
      25
    • Binding to Object Literals
      var a = 3; var b = 4;
      var p = bind Point { x: a, y: b };
      var q = bind Point { x: bind a, y: b };
      var r = bind Point { x: bind a, y: bind b };
      When a changes:
      p gets a new instance of Point
      q and r keep the old instance with a new x value
      r will never get a new instance of Point
      (the outer bind in r is useless)
      26
    • Binding to Functions
      Stage {
      def cModel = CircleModel {};
      varsliderRef:Slider;
      scene:
      Scene {
      content: [
      Circle {
      radius: bind cModel.diameter / 2
      },
      Text {
      content: bind "Diameter: {%3.0f cModel.diameter}"
      },
      Text {
      content: bind "Area: {%3.2f cModel.getArea()}"
      },
      sliderRef = Slider {
      value: bind cModel.diameter with inverse
      }]}}
      27
      class CircleModel {
      vardiameter:Number;
      bound function getArea():Number {
      Math.PI * Math.pow(diameter / 2, 2);
      }
      }
      http://learnjavafx.typepad.com/weblog/javafx_app_deployment/
    • JavaFX Sequences
      Represents collections of homogeneous data
      A fundamental container data type
      Rich set of language facilities
      Contributor to declarative syntax
      Automatic conversion to and from Java Arrays and Collections
      28
    • Creating Sequences
      Explicit sequence expression
      [1, 3, 5, 7, 9]
      Elements are separated by commas
      Comma may be omitted if element ends with brace
      29
      1
      3
      5
      7
      9
    • Creating Sequences
      Numeric sequence with range expressions:
      [1..10]
      Can have a step:
      [1..10 step 2]
      [0.0..0.9 step 0.1]
      Can be decreasing:
      [10..1 step -3]
      Beware of step that goes opposite direction:
      [10..1] is []
      Exclusive right end
      [1..<5]
      30
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      1
      3
      5
      7
      9
      0
      .1
      .2
      .3
      .4
      .5
      .6
      .7
      .8
      .9
      10
      7
      4
      1
      1
      2
      3
      4
    • Getting Information from Sequences
      ints = [1, 3, 5, 7, 9]
      sizeofintsis 5
      ints[0] is 1, ints[1] is 3, ..., ints[4] is 9
      ints[-1] is 0 (default value of Integer), so is ints[5]
      For a sequence of objects, the default is null
      31
      1
      3
      5
      7
      9
      [0]
      [1]
      [2]
      [3]
      [4]
    • Getting Slices From Sequences
      ints = [1, 3, 5, 7, 9]
      ints[0..2] is [1, 3, 5]
      ints[0..<2] is [1, 3]
      ints[2..] is [5, 7, 9]
      ints[2..<] is [5, 7]
      ints[2..0], ints[-2..-1], ints[5..6] are all []s
      32
      1
      3
      5
      7
      9
      [0]
      [1]
      [2]
      [3]
      [4]
    • Getting Subsets from Sequences
      ints = [1, 3, 5, 7, 9]
      ints[k | k > 6] is:
      [7, 9] (k > 6 is a condition)
      ints[k | indexof k < 2] is:
      [1, 3]
      ints[k | k > 10] is:
      []
      33
      1
      3
      5
      7
      9
      [0]
      [1]
      [2]
      [3]
      [4]
    • Inserting into Sequences
      ints = [1, 3, 5, 7, 9]
      insert 20 into ints
      insert 30 before ints[2]
      insert 40 after ints[4]
      insert [50, 60] into ints
      34
      1
      3
      5
      7
      9
      1
      3
      5
      7
      9
      20
      1
      3
      5
      7
      9
      20
      30
      1
      3
      5
      7
      9
      20
      30
      40
      1
      3
      5
      7
      9
      20
      30
      40
      50
      60
    • Deleting from Sequences
      ints = [1, 3, 5, 7, 9]
      delete 7 from ints
      delete ints[0]
      delete ints[0..1]
      delete ints: ints becomes []
      35
      1
      3
      5
      7
      9
      1
      3
      5
      7
      9
      1
      3
      5
      9
      3
      5
      9
      9
    • Sequence Puzzlers
      FX
      What is the size of this sequence:
      [1..10 step -1]
      What does this evaluate to:
      [10..<20 step 2][k|k>17]
      What is the size of this sequence:
      sizeof [20..1 step -3]
      36
      1
      A: 0
      2
      A: [18]
      3
      A: 1
    • Reference: JavaFXRefCard
      37
      http://refcardz.dzone.com/refcardz/
    • Demo by Tor Norbye
      38
      JavaFX Builder Tool
      ?
    • 39
      JavaFX 1.2 Layouts
    • JavaFX 1.2 Custom Layouts
      Container
      Panel
      Both Extend Parent
      Container creates layouts by extension
      Panel creates layouts by declaration
      40
    • Who is My Representative?
      41
      Web Service Integration
    • Calling a REST Service
      REST URL:
      http://whoismyrepresentative.com/getall_mems.php?zip=90210&output=json
      Output:
      { "results": [
      { "type": "rep", "name": "Henry A. Waxman", "party": "D", "state": "CA", "district": "30", "phone": "(202) 225-3976", "office": "2204 Rayburn", "link": "http://www.henrywaxman.house.gov/" }
      ]}
      42
    • Making an HttpRequest
      req = HttpRequest {
      method: HttpRequest.GET
      location: url
      onInput: parseResponse
      onDone: function() {
      if (req.responseCode != 200) {
      message = req.responseMessage;
      } else if (sizeof senators == 0 and sizeof representatives == 0) {
      message = "No members found for {zipcode}";
      }
      }
      onException: function(ex: java.lang.Exception) {
      println("Exception: {ex.getClass()} {ex.getMessage()}");
      }
      }
      req.start();
      43
    • Using the Pull Parser
      while (parser.event.type != PullParser.END_DOCUMENT) {
      parser.seek( "type" );
      if (parser.event.type == PullParser.START_VALUE) {
      parser.forward();
      if (parser.event.text == "rep") {
      var rep = Representative{}
      parseMemberOfCongress( rep, parser );
      insert rep into representatives;
      } else if (parser.event.text == "sen" ) {
      varsen = Senator{}
      parseMemberOfCongress( sen, parser );
      insert sen into senators;
      } } }
      44
    • JavaFX Mobile Development
    • JavaFX Mobile Advantages
      Write Once, Run Anywhere
      Desktop, Mobile, Set-top Boxes (future)
      Large Embedded Base
      Built on top of Java ME platform
      Wide Range of Devices
      Runs on Feature Phones, Smart Phones
      Currently available for Windows Mobile devices
    • JavaFX Mobile Constraints
      Screen Size
      Your application has to be capable of adapting to different screen sizes as small as 320 by 240.
      Common Profile
      Mobile applications are limited to the JavaFX APIs that are part of the Common Profile, which is a subset of the Desktop Profile.
      Performance
      Mobile applications run on much less powerful devices, so they have less CPU and memory resources available to work with.
    • Developing for the Common Profile
    • Changes to Improve Hello Devoxx!
      It runs as is with no changes, but was not designed for the mobile format.
      We can do better:
      Replace all hard-coded sizes with a bind
      Scale the background image to the screen size
      Put an error up on network failure
      The improved version also works on the desktop.
      49
    • Mobile Demo
      Hello Devoxx!
    • JavaFX How-To’s
      51
      http://javafx.com/learn/howto.jsp
    • 52
      JFXtras – Open Source JavaFXAddons
      http://jfxtras.org/
    • JFXtras Grid
      53
      Row
      Row
    • JFXtras Grid
      XGrid {
      effect: Reflection {}
      border: 20
      vgap: 12
      hgap: 12
      rows: bind [
      row([text, progressBar]),
      row([navigator, mediaGrid])
      ]
      }
      54
    • Media Explorer Example
      55
    • JFXtras Borders
      56
    • JFXtras Borders
      Function:
      override function create() {
      XTitledBorder {
      id: "imageTitle“
      title: file.getName()
      content: XFrameBorder {
      id: "imageFrame“
      node: XImageView {
      preserveRatio: true
      smooth: true
      image: bind image
      }
      }
      }
      }
      CSS:
      #imageTitle {
      position: "bottom";
      justification: "center";
      font: bold 12pt Serif;
      text-color: #000060;
      }
      #imageFrame {
      border-left-width: 12;
      border-top-width: 12;
      border-bottom-width: 20;
      border-right-width: 12;
      background-fill: #00007020;
      }
      57
    • JFXtras Borders
      58
    • 59
      MigLayout for JavaFX
    • 60
      Flexible Grid-Based Layout
      Flow
      Wrap
    • MigLayout Constraints
      “wrap”
      “fill”
      “flowy”
      “gap”
      MigLayout {
      constraints: “fill, wrap”
      // to be continued
      }
      61
    • MigLayout {
      constraints: "fill, wrap"
      columns: "[][]"
      rows: "[][]4mm[]push[]"
      content: [
      Label {
      text: "Email"
      layoutInfo: nodeConstraints( "ax right" )
      }
      TextBox {
      layoutInfo: nodeConstraints( "growx, pushx" )
      }
      Label {
      text: "Password"
      layoutInfo: nodeConstraints( "ax right" )
      }
      TextBox {
      layoutInfo: nodeConstraints( "growx, pushx" )
      }
      Button {
      text: "Login"
      layoutInfo: nodeConstraints( "skip, right" )
      }
      Label {
      text: "This text is 'pushed' to the bottom"
      layoutInfo: nodeConstraints( "span" )
      }
      ]
      }
      62
    • JFXtras Shapes
      63
      Almond Intersection of two circles (VesicaPiscis) centerX, centerY, width
      Arrow Arrow shape x, y, width, height, depth, rise
      Asterisk Asterisk with rounded corners centerX, centerY, width, radius, beams, roundness
      AstroidHypocloid with four cusps centerX, centerY, radius
      Balloon Rectangular shape with a tab x, y, width, height, arc, anglePosition, tabWidth,
      tabHeight, tabLocation, tabDisplacement
      Cross Symmetrical cross shape centerX, centerY, width, radius, roundness
      Donut Regular polygon with a hole centerX, centerY, innerRadius, outerRadius, sides
      Lauburu Four comma-shaped heads centerX, centerY, radius
      Continued…
    • JFXtras Shapes (continued)
      64
      MultiRoundRectangle Rectangle with configurable corners x, y, width, height, topLeftWidth/Height,
      topRightWidth/Height, bottomLeftWidth/Height,
      bottomRightWidth/Height
      Rays Multiple rays extend from center centerX, centerY, rays, radius, extent, rounded
      RegularPolygon Polygon with equal sides centerX, centerY, sides, radius
      ReuleauxTriangle Curved triangle shape centerX, centerY, radius
      RoundPin Cone with rounded top centerX, centerY, height, radius
      Star2 Multipoint star centerX, centerY, innerRadius, outerRadius, count
      ETriangle Equilateral triangle x, y, width
      ITriangle Isosceles triangle x, y, width, height
      RTriangle Right triangle x, y, width, height, anglePosition
    • JFXtras Shapes
      65
    • Sphere Challenge
      66
      Andres Almiray’s Weblog
      http://www.jroller.com/aalmiray/entry/griffon_gfxbuilder_fxbuilder_side_by
      “The following snapshot shows a couple of spheres drawn with GfxBuilder and FxBuilder, can you guess which one is which?

      This is by no means a post to bash JavaFX
      rather to point out some of its deficiencies”
      -- Andres Almiray
      (taken completely out of context)
    • Sphere Challenge – JavaFX Response
      Composition:
      RadialGradient for the Sphere
      Three additional RadialGradients for the light sources
      A blurred shadow underneath
      Features:
      All Bound/Relative Coordinates
      Configurable –
      Base, Ambient, Specular, Shine Colors
      Shadow Size and Height
      Uses New JFXtrasColorUtil Library
      JavaFX Caching for High Performance
      67
      Will be shipped with JFXtras 0.6
    • JFXtras Spheres Demo
      68
    • JFXtras Shelf
      69
    • The JavaFX Desktop Widget Platform
      WidgetFX
    • WidgetFX Origins
      71
    • 72
      Why WidgetFX Matters
    • Movie Widget Tutorial
    • Widget Properties
      74
    • Widget Definition
      var widget: Widget;
      widget = Widget {
      width: 640
      height: 352
      aspectRatio: bind player.media.width
      / player.media.height
      content: bind player
      }
      75
    • Load the Media
      var source = "http://projavafx.com/movies/ elephants-dream-640x352.flv";
      var player = bind SimpleMoviePlayer {
      media: Media {
      source: source
      }
      width: bind widget.width
      height: bind widget.height
      }
      76
    • Run in Widget Runner
      77
    • Widget Configuration Properties
      78
    • Widget Configuration
      widget = Widget {
      ...
      configuration: Configuration {
      properties: [
      StringProperty {
      name: "source“
      value: bind source with inverse
      }
      ]
      scene: Scene {…} // see next page
      }
      }
      79
    • Widget Config Dialog
      Scene {
      content: XGrid {
      rows: row([
      Text {
      content: "Source URL:“
      },
      TextBox {
      columns: 30,
      value: bind source with inverse
      }
      ])
      }
      }
      80
    • Add an On-Replace Trigger
      var player = bind SimpleMoviePlayer {
      media: Media {
      source: source
      }
      width: bind widget.width
      height: bind widget.height
      } on replace =oldPlayer {
      oldPlayer.player.stop();
      }
      81
    • Widget Configuration (demo)
      82
    • WidgetFX Contest Results!
      3rd Place
      Infix WeatherWidget
      Larry Dickson
      2nd Place
      RadioFX
      Yannick Van Godtsenhoven
      1st Place
      ScreenshotFX
      Pär Dahlberg
      83
    • JavaFXpert RIA Exemplar Challenge
      "Create an application in JavaFX that exemplifies the appearance and behavior of a next-generation enterprise RIA (rich internet application)".
      Grand Prize: $2,000 USD
      (split between a two-man graphics artist and application developer team)
      Deadline: 10 January, 2010
      For more info: http://learnjavafx.typepad.com/
      84
    • LearnFX and Win at Devoxx
      85
    • Thursday’s Question
      HttpRequest {
      location: http://steveonjava.com/
      onResponseMessage: function(m) {
      println(m); FX.exit()
      }}.start();
      Launch LearnFX from my blog: http://steveonjava.com/
      Or tweet @projavafxcourse answer
      2:00PM Room 8 (right here!)
      86
    • Sneak Preview of Thursday’s Session
      87
    • 88
      Thank You
      Stephen Chin
      http://steveonjava.com/
      Tweet: steveonjava
      Thanks to my co-authors, Jim, Weiqi , and Dean for content included in this talk!