Javafx Overview 90minutes
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Javafx Overview 90minutes

on

  • 1,819 views

Sang Shin at MUFIX

Sang Shin at MUFIX
JavaFX: Building RIA Applications

Statistics

Views

Total Views
1,819
Views on SlideShare
1,819
Embed Views
0

Actions

Likes
0
Downloads
25
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

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

Javafx Overview 90minutes Presentation Transcript

  • 1. JavaFX: Building RIA Application Sang Shin javapassion.com 1
  • 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. Things You Can Build with JavaFX
  • 4. Demo: JavaFX Sample Apps from javafx.com 4
  • 5. JavaFX Script Overview
  • 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. 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. 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. 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. 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. 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. Using Declarative Syntax (for Creating GUI)
  • 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. 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. Demo: Building “HelloWorld” JavaFX Application http://www.javapassion.com/handsonlabs/javafx_lang/#Exercise_1 15
  • 16. Scene Graph
  • 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. 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. Effects
  • 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. Effects: DropShadow
  • 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. Example: DropShadow Text { effect: DropShadow { offsetY: 3 color: Color.color(0.4, 0.4, 0.4) }; ... }, Circle { effect: DropShadow { offsetY: 4 }, ... } 23
  • 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. 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. 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. JavaFX GUI Basics II: Interaction, Transformation, Binding, Drag and drop, Swing components 27
  • 28. Topics • Interaction • Transformation • Binding • Drag and drop • Swing components 28
  • 29. Interactions
  • 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. 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. Demo: Simple Sketch gui2_interaction_Sketch_basic_3steps http://www.javapassion.com/handsonlabs/javafx_guibasics2/#1.3 32
  • 33. Transformation
  • 34. Transformation class • Provides functions to perform > Rotating > Scaling > Shearing > Translation 34
  • 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. 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. Demo: Transformation www.javapassion.com/handsonlabs/javafx_guibasics2/#Exercise_2 37
  • 38. Bindings with GUI Objects
  • 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. Demo: Transformation gui2_binding_DropShadow_Mouse www.javapassion.com/handsonlabs/javafx_guibasics2/#Exercise_3 40
  • 41. Animation Support in JavaFX
  • 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. Two Types of Animation in JavaFX • Transition > “Precanned” animation > Single purpose • Animation > More flexible but more code 43
  • 44. Transitions
  • 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. 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. 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. 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. Demo: Transitions http://www.javapassion.com/handsonlabs/javafx_animation/#Exercise_1 http://www.javapassion.com/handsonlabs/javafx_animation/#Exercise_2 49
  • 50. KeyFrame based Animation
  • 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. 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. 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. 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. 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. 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. Custom Node
  • 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. 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. Demo: Building “Under the Sea” Step by Step http://www.javapassion.com/handsonlabs/javafx_animation/index.html#4.1 60
  • 61. Media
  • 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. 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. Demo: Media http://javafx.com/samples/SimpleVideoPlayer/index.html 64
  • 65. Deployment
  • 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. Execution Models • Standard, Web Start, Applet, Mobile emulator 67
  • 68. Demo: Draggable Applet 68
  • 69. JavaFX Mobile
  • 70. Demo: JavaFX Mobile http://javafx.com/samples/SimpleVideoPlayerMobile/index.html 70
  • 71. Java Store
  • 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. Java Store is Written in JavaFX 73
  • 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. How People Get Java Store? >store.java.com >Java auto-update >JRE/JDK downloads >Java.sun.com 75
  • 76. Demo: Java Store 76
  • 77. WidgetFX
  • 78. Demo: WidgetFx 78
  • 79. JavaFX Technology Overview 79