Introduction into JavaFX

2,462 views

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
2,462
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

×