JavaFX™ 1.0
    SDK
About the Speakers
•   Martin lead the team
    responsible for the JavaFX
    Production Suite

•   Richard is one of the...
JavaFX is for graphical Java applications
           across all devices.
Agenda

•   Introduction to JavaFX

•   (Brief) JavaFX Script

•   Scene Graph

•   Animations and
    Transitions

•   Q ...
Introduction to JavaFX™
•   Common APIs across
    devices

•   Scales from small devices
    to powerful desktops

•   Br...
JavaFX Script
•   Expression language

•   Declarative and
    Procedural

•   Integrates with Java

•   Loosely based on
...
JavaFX Script Explained
•   JavaFX Script source files
    are called “scripts”

•   Everything* in JavaFX
    Script is an...
Primitive Data Types
•   Boolean

•   Integer

•   Number

•   String

•   Duration

•   Primitives cannot be null*
Declaring Sequences
// A sequence of one can omit the brackets
var names:String[] = “Richard”;

// Empty sequences are not...
Modifying Sequences
// Inserting items into a sequence
var names:String[] = “Richard”;
insert “Jasper” into names;

// Ins...
Operators
•   +-/*

•   ++ --

•   *= /= += -=

•   and or not

•   = == !=

•   mod
Flow Control
•   if ( booleanExpression)     •   for (i in sequence) { ... }
    then a else b
                           ...
Bind
• bind is a way to tie the       •   bound variables cannot be
    value of one variable to         set manually
    ...
JavaFX Objects
public class Distance extends {
  public var x1:Number;
  public var x2:Number;
  // Whenever x2 or x1 chan...
Object Literals
•   Concise declarative syntax
    for object creation

•   Similar to JavaScript

•   Combine with bindin...
Object Literal
// creates a Rectangle
// x: 10 is not an assignment, it is an initialization!
var rect = Rectangle {
   x:...
Nested Literals
// creates a Rectangle with a Color for its fill
var rect = Rectangle {
   x: 10
   y: 10
   width: 100
   ...
Variables and Literals
// A variation that allows me to reference the color later
var color:Color;
var rect = Rectangle {
...
Scene Graph
•   Describes the graphics    •   Graph is set on a Scene
    and controls in a scene
                        ...
Scene Graph

                  Group




         Circle             Group




                     Line           Rect
Scene
•   Canvas upon which the
    Scene Graph is
    displayed

•   Can set multiple CSS
    Stylesheets

•   Can set ba...
Stage
•   Top-level container for   •   JFrame on desktop
    the scene
                              •   JApplet on web p...
Custom Node
•   Primary method of
    Scene Graph
    encapsulation

•   All other nodes are not
    extendable

•   Simpl...
Shapes - Building Blocks
 •   Arc       •   Rectangle

 •   Circle    •   stroke

 •   Ellipse   •   strokeWidth

 •   Lin...
Create an App
   (part 1)
Colors
•   Colors                     •   Color.rgb(128, 222,
                                   21)
    •   150+ built in...
Linear Gradients
•   startX, startY, endX,     •   Has an offset
    endY                          between 0...1

    •   ...
Create an App
   (part 2)
Images
•   ImageView node shows     •   Preserve ratio
    images
                             •   Fit within a specific
• ...
Create an App
   (part 3)
Text
•   x, y, TextOrigin             •   Supports multiline text

•   By default, text             •   Use alignment to a...
Text Box
•   Used for text input      •   “action” function is
                                 invoked when ENTER
•   Use...
Effects
•   Effects are placed on        •   Reflection
    Nodes
                                 •   more...
•   Many sta...
Create an App
   (part 4)
Media
•   JavaFX supports both visual     •   MediaView is the Node which
    and audio media                     displays...
Animation
•   Animation is a key      •   Transitions
    feature of every rich
    graphics application
    platform

•  ...
Keyframe Animation
•   A general purpose        •   tween keyword and
    animation mechanism          custom interpolator...
Transitions
•   “Precanned”, single      •   Parallel
    purpose animations
                             •   Sequential
•...
Create an App
   (part 5)
JavaFX provides APIs for
    building creative
      applications
JavaFX will be updtaed
 regularly and quickly
1.1 release Februrary 2009
   1.5 release June 2009
JavaFX 1.0 Production Suite
 for professional graphics
Try JavaFX Today!
javafx.com
Upcoming SlideShare
Loading in...5
×

JavaFX 1.0 SDK Aquarium Paris

2,079

Published on

Java FX 1.0 SDK Presentation by Rich Bair, Jasper Potts, and Martin Brehovsky in Paris on December 12, 2008

Published in: Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,079
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

JavaFX 1.0 SDK Aquarium Paris

  1. 1. JavaFX™ 1.0 SDK
  2. 2. About the Speakers • Martin lead the team responsible for the JavaFX Production Suite • Richard is one of the API leads for JavaFX SDK • Jasper is one of the key engineers on the JavaFX SDK
  3. 3. JavaFX is for graphical Java applications across all devices.
  4. 4. Agenda • Introduction to JavaFX • (Brief) JavaFX Script • Scene Graph • Animations and Transitions • Q &A
  5. 5. Introduction to JavaFX™ • Common APIs across devices • Scales from small devices to powerful desktops • Brings rich media and graphical APIs to Java • Simplifies building graphical consumer and enterprise applications
  6. 6. JavaFX Script • Expression language • Declarative and Procedural • Integrates with Java • Loosely based on JavaScript
  7. 7. JavaFX Script Explained • JavaFX Script source files are called “scripts” • Everything* in JavaFX Script is an expression • All blocks are expressions • The last line is the result
  8. 8. Primitive Data Types • Boolean • Integer • Number • String • Duration • Primitives cannot be null*
  9. 9. Declaring Sequences // A sequence of one can omit the brackets var names:String[] = “Richard”; // Empty sequences are not null var names:String[]; println(sizeof names); // prints 0 // elements are accessed by index var names = [“Jasper”, “Richard”, “Martin”]; var martin = names[2]; // and you can populate a sequence using a for loop var hellos = for (i in [1..3]) { “Hello #{i}” }
  10. 10. Modifying Sequences // Inserting items into a sequence var names:String[] = “Richard”; insert “Jasper” into names; // Inserting before a certain index insert “Martin” before names[1]; // Inserting after a certain index insert “Duke” after names[1]; // Deleting from the sequence delete “Duke” from names;
  11. 11. Operators • +-/* • ++ -- • *= /= += -= • and or not • = == != • mod
  12. 12. Flow Control • if ( booleanExpression) • for (i in sequence) { ... } then a else b • Can get index of item • if (booleanExpression) a “i” by “indexof i” else b • break • if (booleanExpression) { a } else { b } • continue • while (booleanExpression) { ... }
  13. 13. Bind • bind is a way to tie the • bound variables cannot be value of one variable to set manually the value of an expression • binding must be defined when the variable is initialized • bindings are statically compiled
  14. 14. JavaFX Objects public class Distance extends { public var x1:Number; public var x2:Number; // Whenever x2 or x1 changes, distance will be updated // Binding can be used for invariants public-read var distance:Number = bind x2 - x1; }
  15. 15. Object Literals • Concise declarative syntax for object creation • Similar to JavaScript • Combine with binding for maximum effect • variable: initial-value • initial-value is an expression
  16. 16. Object Literal // creates a Rectangle // x: 10 is not an assignment, it is an initialization! var rect = Rectangle { x: 10 y: 10 width: 100 height: 100 }
  17. 17. Nested Literals // creates a Rectangle with a Color for its fill var rect = Rectangle { x: 10 y: 10 width: 100 height: 100 fill: Color { red: 1 green: 0 blue: 0 } }
  18. 18. Variables and Literals // A variation that allows me to reference the color later var color:Color; var rect = Rectangle { x: 10 y: 10 width: 100 height: 100 fill: color = Color { red: 1 green: 0 blue: 0 } }
  19. 19. Scene Graph • Describes the graphics • Graph is set on a Scene and controls in a scene • Scene is set in a Stage • Each node in the graph has a single parent • Special “group” nodes have zero or more children • “leaf” nodes have no children
  20. 20. Scene Graph Group Circle Group Line Rect
  21. 21. Scene • Canvas upon which the Scene Graph is displayed • Can set multiple CSS Stylesheets • Can set background color (or set to null) • Can set canvas width / height
  22. 22. Stage • Top-level container for • JFrame on desktop the scene • JApplet on web page • Contains only one Scene • SVG player on mobile • Can set Stage width / height • Potentially represented by:
  23. 23. Custom Node • Primary method of Scene Graph encapsulation • All other nodes are not extendable • Simply override the create() method
  24. 24. Shapes - Building Blocks • Arc • Rectangle • Circle • stroke • Ellipse • strokeWidth • Line • fill • Path • smooth • Polygon
  25. 25. Create an App (part 1)
  26. 26. Colors • Colors • Color.rgb(128, 222, 21) • 150+ built in colors (all the HTML & CSS built in values) • Color.web(“#aabbcc ”) • Color.web(“blue”)
  27. 27. Linear Gradients • startX, startY, endX, • Has an offset endY between 0...1 • Define the direction • Has a Color of the gradient • On the unit square • Stops define each step in the gradient. Each stop
  28. 28. Create an App (part 2)
  29. 29. Images • ImageView node shows • Preserve ratio images • Fit within a specific • Image represents an in width/height memory Image • When fit on Image • Image can load images level, keeps smaller in FG thread or BG image in memory thread • Both ImageView and Image can scale
  30. 30. Create an App (part 3)
  31. 31. Text • x, y, TextOrigin • Supports multiline text • By default, text • Use alignment to align positioned such that multiline text (x, y) is left baseline • To center text, • Fonts can be specified compute the center via on Text layout bounds • Favor “fill” over “stroke”
  32. 32. Text Box • Used for text input • “action” function is invoked when ENTER • Use CSS to style the pressed TextBox • “columns” specifies the • “text” is changed to preferred width based on the font size and reflect the actual text in the TextBox number of characters to display • “value” is changed when the text is “committed” via ENTER, TAB, etc
  33. 33. Effects • Effects are placed on • Reflection Nodes • more... • Many standard built in • DropShadow • ColorAdjust • GaussianBlur • Glow
  34. 34. Create an App (part 4)
  35. 35. Media • JavaFX supports both visual • MediaView is the Node which and audio media displays the Media • Cross platform JavaFX Media • No built in Movie playing file (fxm, mp3) Control • Also plays native formats (mov, wmv) • Media class represents a media file • MediaPlayer plays a Media file
  36. 36. Animation • Animation is a key • Transitions feature of every rich graphics application platform • There are two supported animation types in JavaFX • Keyframe Animations
  37. 37. Keyframe Animation • A general purpose • tween keyword and animation mechanism custom interpolators for JavaFX • Long sytax vs short • Uses a concept of a syntax timeline and keyframes specifying values at given times • autorepeat + autoreverse behavior • Built in the language • Actions syntax - can animate any variable • Nested timelines
  38. 38. Transitions • “Precanned”, single • Parallel purpose animations • Sequential • Translation/Rotation/ Scale/Fade • Pause Transition • “by” values • Animation along a path • • Containers:
  39. 39. Create an App (part 5)
  40. 40. JavaFX provides APIs for building creative applications
  41. 41. JavaFX will be updtaed regularly and quickly
  42. 42. 1.1 release Februrary 2009 1.5 release June 2009
  43. 43. JavaFX 1.0 Production Suite for professional graphics
  44. 44. Try JavaFX Today!
  45. 45. javafx.com

×