New and Cool: JavaFX
Eugene Bogaart
Solution Architect
Sun Microsystems

                       1
2
JavaFX Vision
    JavaFX is the platform for creating and
                   delivering
         Rich Internet Application...
A Basic Java GUI: Not Very Pretty




                                    4
Samples
• Vancouver Medal app
• Simon's Book example
• JavaFX Widget set




                         5
JavaFX Platform Architecture


            FX Applications

           Device                           FXScript
   Media ...
JavaFX Script Basics
• Declarative, statically-typed scripting language
• Facilitates rapid GUI development
• Many cool, i...
Basic JavaFXScript Class
Syntax is Java-like with shades of JavaScript

class HelloWorldNode extends CustomNode {
    publ...
Class Definition
Address class definition: The Address class declares
street, city, state, and zip instance variables all ...
Declaring an Object Literal
• In the JavaFX Script language, an object instance can
  be created with an object literal (u...
Nested Literal Declaration
• Nesting Address object inside Customer object
def customer = Customer {
  firstName: "John";
...
Sequences
• Sequences
 var time:Duration[] = [1s, 5s, 10s];
 var days = [1..31];
• Insert, delete, membership and reverse
...
Binding
• Dependency-based evaluation of expressions
• Enables expression of dynamic data relationships
  var x = 10;
  va...
Bound
var scale = 1.0;
// makePoint is a bound function. It will be invoked even when a value of
// non-function-arugment ...
Bound (cont)
// Code in the previous slide
// The bind keyword, placed just before the invocation of
// makePoint, binds t...
Trigger
• Triggers facilitates the catching and handling of data
  modification events.
  var x : String;
  var y = bind x...
Many more
Why Declarative Syntax for Building




                                      17
GUI?

• Because the structure of declared objects in the
  code reflects the visual structure of the scene
  graph, and th...
Scene Graph Nodes: javafx.gui.*
                     Node


ComponentView*       Group        Shape
  ImageView           ...
Effects: javafx.gui.effects.*
              Effect
              DisplacementMap
   Blend
           PerspectiveTransform ...
Effects
• Effects On Images Demo




                           21
Some Effects Supported In JavaFX
effect: SepiaTone { level: 0.5 }



effect: Glow { level: 0.7 }
                         ...
Lighting Effect
 effect: Lighting{
    surfaceScale: 7
    light: DistantLight {
       azimuth: 90
       elevation: 30
 ...
Animation
• Timelines handles the animation in JavaFX
• Timelines are first-class citizen in the language
  along with the...
Example – Defining Key Frames
Timeline {
   keyFrames: [
       KeyFrame {
           time: 0s
           values: [ radius...
Animation
• Animating TimeLines Sample




                               26
JavaFX Media Design Goals
• Media Playback is of primary importance
• Simple API: only a few lines of coded needed
• Cross...
Streaming Media
• Simple Stream Media Sample




                               28
JavaFX Media Example
var media = Media{source: ”movie.mov”};
var player = MediaPlayer{media: media, autoPlay:true};

var m...
JavaFX NetBeans IDE Plugin
• Available for NetBeans 6.1 and later
  > Current NB=6.8
• Supports conventional development c...
Further Information
•   openjdk.java.net
•   www.javafx.com
•   www.sun.com/javafx
•   openjfx.org
•   learnjavafx.typepad...
More info




            32
Summary
•   Java continues to evolve
•   JDK7 driving changes in the platform
•   JavaFX providing a RIA platform built on...
Q&A
Eugene Bogaart
Eugene.Bogaart@sun.com


                         34
Upcoming SlideShare
Loading in...5
×

Introduction into JavaFX

1,989

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,989
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

Transcript of "Introduction into JavaFX"

  1. 1. New and Cool: JavaFX Eugene Bogaart Solution Architect Sun Microsystems 1
  2. 2. 2
  3. 3. JavaFX Vision JavaFX is the platform for creating and delivering Rich Internet Applications across all the screens of your life JavaFX is Powered by Java 3
  4. 4. A Basic Java GUI: Not Very Pretty 4
  5. 5. Samples • Vancouver Medal app • Simon's Book example • JavaFX Widget set 5
  6. 6. JavaFX Platform Architecture FX Applications Device FXScript Media Specific Core Scene runtime WebKit Players APIs APIs Graph Ad FX Player Media VM Compiler Installer Codecs Device OS 6
  7. 7. JavaFX Script Basics • Declarative, statically-typed scripting language • Facilitates rapid GUI development • Many cool, interesting language features • Runs on the Java Virtual Machine • Deployment options same as Java programs > Applet, Application, WebStart • Fully utilizes Java class libraries behind the scenes • For content designers and media engineers 7
  8. 8. Basic JavaFXScript Class Syntax is Java-like with shades of JavaScript class HelloWorldNode extends CustomNode { public var text:String; public override function create(): Node { return Text { x: 10, y: 50 font: Font { size: 50 } content: “Hello World” } }; } 8
  9. 9. Class Definition Address class definition: The Address class declares street, city, state, and zip instance variables all of type String class Address { var street: String; var city: String; var state: String; var zip: String; } 9
  10. 10. Declaring an Object Literal • In the JavaFX Script language, an object instance can be created with an object literal (unlike Java) • Example: The first word (Address) specifies the type of object, class, that you are creating. Address { street: "1 Main Street"; // separated by semi colons city: "Santa Clara"; state: "CA"; zip: "95050"; } 10
  11. 11. Nested Literal Declaration • Nesting Address object inside Customer object def customer = Customer { firstName: "John"; lastName: "Doe"; phoneNum: "(408) 555-1212"; address: Address { street: "1 Main Street"; city: "Santa Clara"; state: "CA"; zip: "95050"; } } 11
  12. 12. Sequences • Sequences var time:Duration[] = [1s, 5s, 10s]; var days = [1..31]; • Insert, delete, membership and reverse insert 20s into time; delete 31 from days; var revDays = Sequences.reverse(days); • Slice via range and predicate var oddDays = days[n | (n mod 2) == 1]; var firstThree = time[0..<3]; 12
  13. 13. Binding • Dependency-based evaluation of expressions • Enables expression of dynamic data relationships var x = 10; var y = bind x + 100; x = 50; y == 150; // true • Any expression can be bound > conditionals, loops, functions, etc... • bind “with inverse” when 2-way is needed 13
  14. 14. Bound var scale = 1.0; // makePoint is a bound function. It will be invoked even when a value of // non-function-arugment such as scale changes. If you remove bound // keyword, then, the change of the value of scale does not invoke the function bound function makePoint(xPos : Number, yPos : Number) : Point { Point { x: xPos * scale y: yPos * scale } } class Point { var x : Number; var y : Number; } 14
  15. 15. Bound (cont) // Code in the previous slide // The bind keyword, placed just before the invocation of // makePoint, binds the newly created Point object (pt) to the outcome of the // makePoint function. var myX = 3.0; var myY = 3.0; def pt = bind makePoint(myX, myY); println(pt.x); // 3.0 myX = 10.0; println(pt.x); // 10.0 scale = 2.0; println(pt.x); // 20.0 15
  16. 16. Trigger • Triggers facilitates the catching and handling of data modification events. var x : String; var y = bind x; • Can be re-written using triggers in a equivalent manner: var x : String on replace { y = x; } • Trigger for tracing variable changes: var x : String on replace { y = x; Println(“X == {x}”); } 16
  17. 17. Many more Why Declarative Syntax for Building 17
  18. 18. GUI? • Because the structure of declared objects in the code reflects the visual structure of the scene graph, and this enables you to understand and maintain the code easily. • The order of elements you declare in the code matches the order in which they appear in the application. 18
  19. 19. Scene Graph Nodes: javafx.gui.* Node ComponentView* Group Shape ImageView HBox Arc HBox MediaView VBox Circle VBox CubicCurve Ellipse Transform Line Affine Path Rotate Polygon Scale Polyline Shear QuadCurve Translate Rectangle Text 19
  20. 20. Effects: javafx.gui.effects.* Effect DisplacementMap Blend PerspectiveTransform Light Bloom InvertMask Glow ColorAdjust DistanceLight Lighting SepiaTone PointLight Flood Reflection SpotLight GaussianBlur Shadow MotionBlur InnerShadow DropShadow 20
  21. 21. Effects • Effects On Images Demo 21
  22. 22. Some Effects Supported In JavaFX effect: SepiaTone { level: 0.5 } effect: Glow { level: 0.7 } Original image effect: GaussianBlur { input: SepiaTone { level: 0.5 } radius: 10.0 } effect: Reflection { fraction: 0.7 } 22
  23. 23. Lighting Effect effect: Lighting{ surfaceScale: 7 light: DistantLight { azimuth: 90 elevation: 30 } } effect: Lighting{ surfaceScale: 7 light: SpotLight { x: 0 y :0 z: 50 pointsAtX: 10 pointsAtY: 10 pointsAtZ: 0 } } 23
  24. 24. Animation • Timelines handles the animation in JavaFX • Timelines are first-class citizen in the language along with the duration time constants (1s, 10s) • They can have one or more KeyFrames • Functions: start(), stop(), pause(), resume() • Properties: autoReverse, repeatCount, toggle 24
  25. 25. Example – Defining Key Frames Timeline { keyFrames: [ KeyFrame { time: 0s values: [ radius => 30 ] } KeyFrame { time: 5s values: [ radius => 300 tween Interpolator.LINEAR ] } Key value How the value changes over time ] } radius = 30 radius = 300 0s 1s 2s 3s 4s 5s 6s Keyframes 25
  26. 26. Animation • Animating TimeLines Sample 26
  27. 27. JavaFX Media Design Goals • Media Playback is of primary importance • Simple API: only a few lines of coded needed • Cross platform A/V format required • Native support also desirable > “Mash ups” > Viewing local media • Zero Configuration plug in support > Drop in format support • Going beyond rectangular video > Lightweight rendering 27
  28. 28. Streaming Media • Simple Stream Media Sample 28
  29. 29. JavaFX Media Example var media = Media{source: ”movie.mov”}; var player = MediaPlayer{media: media, autoPlay:true}; var mediaView = MediaView{ // To enable audio only, don't create MediaView MediaView{ mediaPlayer: player, onMouseClicked: function(e) { // Play/pause control if (player.paused) { player.play(); } else { player.pause(); } } rotate: 90; // Rotate } 29
  30. 30. JavaFX NetBeans IDE Plugin • Available for NetBeans 6.1 and later > Current NB=6.8 • Supports conventional development cycle > edit, compile, run, test > Also has preview mode (avoid compile/run) • Specific project type for JavaFX • Automatic installation of JavaFX SDK • Editor supports code completion, drag and drop of components 30
  31. 31. Further Information • openjdk.java.net • www.javafx.com • www.sun.com/javafx • openjfx.org • learnjavafx.typepad.com More indepth details on the language can be found in a 2 hour overview presentation at www.JavaPassion.com 31
  32. 32. More info 32
  33. 33. Summary • Java continues to evolve • JDK7 driving changes in the platform • JavaFX providing a RIA platform built on Java • More to come... 33
  34. 34. Q&A Eugene Bogaart Eugene.Bogaart@sun.com 34

×