Javafx Overview 90minutes

1,608 views
1,543 views

Published on

Sang Shin at MUFIX
JavaFX: Building RIA Applications

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,608
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
28
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Javafx Overview 90minutes

  1. 1. JavaFX: Building RIA Application Sang Shin javapassion.com 1
  2. 2. Topics • Things you can build with JavaFX • JavaFX script overview • Declarative GUI building • Scene graph • Animation • Media • Deployment • JavaFX Mobile • Web services 2
  3. 3. Things You Can Build with JavaFX
  4. 4. Demo: JavaFX Sample Apps from javafx.com 4
  5. 5. JavaFX Script Overview
  6. 6. Features of JavaFX Script • Declarative, statically-typed scripting language • Facilitates rapid GUI development • Runs on Virtual Machine for the Java™ platform • Deployment options same as Java programs • Fully utilizes Java class libraries behind the scenes • Cool, interesting language features for building RIA apps > Object literal, Sequence, Data binding, Animation, Media, etc. 6
  7. 7. Class Definition • Address class definition: The Address class declares street, city, state, and zip fields all of type String class Address { var street: String; var city: String; var state: String; var zip: String; } 7
  8. 8. Object Literal – Creating object • In the JavaFX Script programming language, an object instance can be created with an object literal (like in JavaScript, unlike in 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"; } 8
  9. 9. Nesting an Object inside Another Object • 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"; } } 9
  10. 10. Binding • Cause and effect – responding to changes • bind operator allows dynamic content to be expressed declaratively • Dependency based evaluation of any expression • Automated by the JavaFX runtime rather than manually wired by the programmer • Eliminates the listener pattern 10
  11. 11. Binding to a Simple Expression var x = 0; // Bind variable x to variable y. Whenever the value of x changes, // the value of variable y automatically changes as well. var y = bind x + 10; x = 1; println("----y after x is changed to 1 = {y}"); // y now equals 11 x = 47; println("----y after x is changed to 47 = {y}"); // y now equals 57 11
  12. 12. Using Declarative Syntax (for Creating GUI)
  13. 13. Example of JavaFX Application import javafx.scene.paint.Color; import javafx.scene.Scene; import javafx.scene.shape.Circle; import javafx.stage.Stage; Stage { title: "My circle" width: 100 height: 100 scene: Scene { content: [ Circle { centerX: 50, centerY: 50 radius: 40 fill: Color.RED } ] } } 13
  14. 14. Why Declarative Syntax for Building 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. 14
  15. 15. Demo: Building “HelloWorld” JavaFX Application http://www.javapassion.com/handsonlabs/javafx_lang/#Exercise_1 15
  16. 16. Scene Graph
  17. 17. What is Scene Graph? • Scene Graph enables declarative GUI programming • The scene graph is a tree-like data structure which defines a hierarchy of graphical objects in a scene. • A single element in the scene graph is called a node • You can apply the following GUI properties to any node in Scene Graph tree > Effect > Animation > Transformation > User input 17
  18. 18. Scene Graph: Group Group { transforms: Translate { Gro up x:15, y, 15 } x content: [ : Text { 1 x: 10, y: 50 5 y: font: Font: { 1 size: 50 5 } content: “Hello World” } Circle { Text Circle centerX: 100, centerY: 100 radius: 40 fill: Color.BLACK } ] } 18
  19. 19. Effects
  20. 20. How Effect Works • Any Effect instance can be applied to a scene graph Node by setting the Node.effect variable. • All Effect classes extend the abstract javafx.scene.effect.Effect base class. • Each Effect subclass exposes a small number of variables that control the visual appearance of the Node. 20
  21. 21. Effects: DropShadow
  22. 22. Example: DropShadow class • DropShadow class provides 5 variables > color: The shadow Color > default: Color.BLACK > offsetX: The shadow offset in the x direction, in pixels. > default: 0.0 > offsetY: The shadow offset in the y direction, in pixels. > default: 0.0 > radius: The radius of the shadow blur kernel. > default: 10.0, max: 63.0 > spread: The spread of the shadow. > default: 0.0, max: 1.0, min: 0.0 22
  23. 23. Example: DropShadow Text { effect: DropShadow { offsetY: 3 color: Color.color(0.4, 0.4, 0.4) }; ... }, Circle { effect: DropShadow { offsetY: 4 }, ... } 23
  24. 24. Example: DropShadow Text { effect: DropShadow { offsetY: 3 color: Color.GREEN radius: 20.0 }; ... }, Circle { effect: DropShadow { offsetX: 10 offsetY: 20 color: Color.BLUE radius: 30.0 } ... 24
  25. 25. Example: DropShadow with Binding • Apply a DropShadow effect to a rounded Rectangle and control its appearance through the magic of the bind operator. Rectangle { effect: DropShadow { radius: bind radius } x: 50 y: 30 width: 150 height: 100 arcWidth: 40 arcHeight: 40 fill: Color.RED } 25
  26. 26. Demo: DropShadow, javapassion.com/handsonlabs/javafx_guibasics/index.html#7.1 DropShadow with Binding, javapassion.com/handsonlabs/javafx_customnode EffectsPlayground http://javafx.com/samples/EffectsPlayground/index.html 26
  27. 27. JavaFX GUI Basics II: Interaction, Transformation, Binding, Drag and drop, Swing components 27
  28. 28. Topics • Interaction • Transformation • Binding • Drag and drop • Swing components 28
  29. 29. Interactions
  30. 30. Handling Events • All nodes have either mouse or keyboard events > Override the appropriate method • Mouse events – onMouseXXXX() > XXXX = Entered, Exited, Pressed, Dragged, Moved, Clicked, Released, WheelMoved • Keyboard events – onKeyboardXXXX() > XXXX = Pressed, Released, Typed • Indicate interactivity by changing cursor > Set the cursor attribute 30
  31. 31. Example: Handling Events • Mouse events change the color of an rectangle var rectangle:Rectangle = Rectangle { x: 20, y: 10 width: 150, height: 70 arcWidth: 50, arcHeight: 50 fill: Color.LIGHTBLUE stroke: Color.ROYALBLUE strokeWidth: 3 onMouseEntered: function( e: MouseEvent ):Void { rectangle.fill = Color.WHITESMOKE; } onMouseExited: function( e: MouseEvent ):Void { rectangle.fill = Color.LIGHTBLUE; } } 31
  32. 32. Demo: Simple Sketch gui2_interaction_Sketch_basic_3steps http://www.javapassion.com/handsonlabs/javafx_guibasics2/#1.3 32
  33. 33. Transformation
  34. 34. Transformation class • Provides functions to perform > Rotating > Scaling > Shearing > Translation 34
  35. 35. Rotate Transformation • Rotates coordinates around an anchor point Stage { title: "Welcome to JavaFX!" scene: Scene { width: 200 height: 200 content: [ Rectangle { transforms: Rotate { angle: bind angle pivotX: 10 pivotY: 10 } ... } ] } } 35
  36. 36. Translation Transformation • Translates coordinates by the specified factors Stage { title: "Transformation - Translate" width: 100 height: 100 scene: Scene { content: [ Rectangle { transforms: Translate { x: bind translateX y: bind translateY } x: 10 y: 10 width: 20 height: 20 fill: Color.GREEN onMouseEntered: function( e: MouseEvent ):Void { translateX = 20; translateY = 30 } onMouseExited: function( e: MouseEvent ):Void { translateX = 0.0; translateY = 0.0; 36
  37. 37. Demo: Transformation www.javapassion.com/handsonlabs/javafx_guibasics2/#Exercise_2 37
  38. 38. Bindings with GUI Objects
  39. 39. Binding with GUI objects • The power of binding really shows when it is used with GUI objects > GUI objects can automatically change their shape, characteristics, and behavior 39
  40. 40. Demo: Transformation gui2_binding_DropShadow_Mouse www.javapassion.com/handsonlabs/javafx_guibasics2/#Exercise_3 40
  41. 41. Animation Support in JavaFX
  42. 42. Animation Support in JavaFX • Built in the language syntax > Can animate any variable • Native support for time > Duration class > Time literals – 1ms, 1s, 1m, 1h > Eg. var runFor = 500ms 42
  43. 43. Two Types of Animation in JavaFX • Transition > “Precanned” animation > Single purpose • Animation > More flexible but more code 43
  44. 44. Transitions
  45. 45. Transitions • Predefined animations to perform a specific task > Position, rotation, opacity, etc. • Out of the box transitions > RotateTranstion – rotation > FadeTransition – opacity > TranslateTransition – move a node along a straight line > PathTransition – move an object along a defined path > ScaleTranstion – grows or shrinks a node 45
  46. 46. Using Transitions • Need to specify which node the transition is performed on > Nodes – geometric shapes, images, text, Swing components • Other attributes > Duration – how long to perform the animation > Rate – the speed and direction > Interpolator – the acceleration and deceleration of the animation • Can execute a function at the end of the animation > Assign a function to action attribute 46
  47. 47. RotationTransition var rotTransition = RotateTransition { duration: 3s node: node byAngle: 180 repeatCount:4 autoReverse: true } var princess:ImageView = ImageView { image: Image { url: "{__DIR__}princess.png" } onMouseClicked: function( e: MouseEvent ):Void { rotTransition.play(); } } 47
  48. 48. Path Transition var earth:ImageView = ImageView { x: sx y: sy image: Image { url: "{__DIR__}earth.png” } } def path = [ MoveTo { x: sx y: sy} ArcTo { x: 0 y: 200 radiusX: 50 radiusY: 50 sweepFlag: true } ]; var aniPath:PathTransition = PathTransition { node: earth path: AnimationPath.createFromPath( Path {elements: path }) duration: 1500ms } aniPath.playFromStart(); 48
  49. 49. Demo: Transitions http://www.javapassion.com/handsonlabs/javafx_animation/#Exercise_1 http://www.javapassion.com/handsonlabs/javafx_animation/#Exercise_2 49
  50. 50. KeyFrame based Animation
  51. 51. Key Frame based Animation • What is Key Frame based animation? > A declarative model in which programmer describes the animated state transitions of each "scene" by declaring "snapshots" (key frames) of state at certain points in time • Two basic varieties of key frame animation > Discrete - Set of discrete key frames > Interpolated - Special interpolation functions calculate the states that occur between animation frames • Animation controls > Start, stop, pause, and resume 51
  52. 52. Programming Model of Key Frame Animation • Animations occur along a timeline, represented by a javafx.animation.Timeline object. • Each timeline contains two or more key frames, represented by javafx.animation.KeyFrame objects. • Each timeline supports > Animation attributes > autoReverse, repeatCount, toggle, etc. > Playback controls > start(), stop(), pause(), and resume() 52
  53. 53. Example: Interpolator Based // The value of tx changes from 0 to 700 // in 10 second period in linear fashion var t = Timeline { keyFrames : [ KeyFrame { time: 0s values: [ tx => 0 ] action: function() { … } }, KeyFrame { time: 10s values: [ tx => 700 tween Interpolator.LINEAR ] } ] } t.start(); 53
  54. 54. Example – Defining Key Frames Timeline { keyFrames: [ KeyFrame { time: 0s values: [ radius => 30 ] } KeyFrame { time: 5s values: [ radius => 300 tween Interpolator.LINEAR ] } How the value changes over time Key value ] } radius = 30 radius = 300 0s 1s 2s 3s 4s 5s 6s Keyframes 54
  55. 55. at() (Shorthand notation) var t = Timeline { ... keyFrames: [ KeyFrame { time: 0ms values: [ radius => 30 ] }, KeyFrame { time: 500ms values: [ radius => 300 tween Interpolator.LINEAR ] } ] keyFrames: [ }; at(0ms) { radius => 30 } at(500ms) { radius => 300 Interpolator.LINEAR } ] 55
  56. 56. Animation through Binding var opa = 0.0; var street1:ImageView = ImageView { image: Image { url: "{__DIR__}street1.jpg" } opacity: bind opa onMouseClicked: function( e: MouseEvent ):Void { timeline.play(); } } var timeline:Timeline = Timeline { keyFrames: [ KeyFrame { time: 0s values: [ opa => 0.0,] }, KeyFrame { time: 1s values: [ opa => 1.0 tween Interpolator.LINEAR,] } ] } 56
  57. 57. Custom Node
  58. 58. Custom Node • Primary means of Scene Graph encapsulation • Use it when extending existing GUI class is not enough for your task • Simply override the create() method, which returns a Node object 58
  59. 59. Simple CustomNode • Extend CustomNode class and override create() class Bars extends CustomNode { override function create():Node { return Group { content: for(x in [0..4]) { Rectangle { y: indexof x * 20 width: 100 height: 10 fill:Color.RED } } }; } } // Bars object literal Bars { } 59
  60. 60. Demo: Building “Under the Sea” Step by Step http://www.javapassion.com/handsonlabs/javafx_animation/index.html#4.1 60
  61. 61. Media
  62. 62. FX Media API Overview Media MediaView is MediaPlayer UI that extended MediaView from the Node SceneGraph Node • Simple model-view-controller design • All classes in javafx.scene.media package. • MediaView takes all cool features of SceneGraph node, such as effects, transforming, clip, opacity, etc... 62
  63. 63. Example of Creating a Media Player var video:Media = Media { source: "http://..." }; var player:MediaPlayer = MediaPlayer { media: video rate: 1.0 volume: 0.4 Stage { }; title: "Media Player" var view:MediaView = MediaView { width: 700 mediaPlayer: player height: 700 x:200 y:200 scene: Scene { }; content: [view] } } 63
  64. 64. Demo: Media http://javafx.com/samples/SimpleVideoPlayer/index.html 64
  65. 65. Deployment
  66. 66. Deployment Options • JavaFX 1.0 applications can be deployed using the two standard Java deployment technologies > Java Plugin: A tool used for deploying Java applets that run inside a web browser > Java Web Start: A tool used for deploying stand-alone Java applications on the desktop, using JNLP (Java Network Launching Protocol). • Or using mobile emulation > JavaFX Mobile Emulator: A tool provided with the JavaFX SDK, which displays your applications as they would look on a typical mobile device. 66
  67. 67. Execution Models • Standard, Web Start, Applet, Mobile emulator 67
  68. 68. Demo: Draggable Applet 68
  69. 69. JavaFX Mobile
  70. 70. Demo: JavaFX Mobile http://javafx.com/samples/SimpleVideoPlayerMobile/index.html 70
  71. 71. Java Store
  72. 72. What is Java Store? • Online store for Java and JavaFX applications > Distribution channel delivering Java and JavaFX applications to 1Billion Java enabled desktop and devices • Provide an easy means for developers and ISVs to monetize their Java and JavaFX applications 72
  73. 73. Java Store is Written in JavaFX 73
  74. 74. Java Store End-to-End Architecture •Developer Java Store Registration Desktop •Publishing •Testing Mobile Store DEVELOPERS SP/OEM Branded •Content Management •Payment TV Store Settlement WEB WAREHOUSE STORES DEVELOPERS MARKETPLACE END USER 74
  75. 75. How People Get Java Store? >store.java.com >Java auto-update >JRE/JDK downloads >Java.sun.com 75
  76. 76. Demo: Java Store 76
  77. 77. WidgetFX
  78. 78. Demo: WidgetFx 78
  79. 79. JavaFX Technology Overview 79

×