Slide 1: A JavaFX™ Script Programming Language Tutorial Jim Weaver, JavaFX™ Script Author, Developer, Teacher http://JavaFXpert.com TS-4794
Slide 2: JavaFX Script Software Tutorial - Goal Learn how to develop Rich Internet Applications in compiled JavaFX Script programming (by looking at lots of code) 2008 JavaOneSM Conference | java.sun.com/javaone | 2
Slide 3: JavaFX Script Software Tutorial - Agenda Do a quick demo of a JavaFX Script technology Show some instructive code from the demo (in most cases) Repeat first two steps until we’re almost out of time Q&A 2008 JavaOneSM Conference | java.sun.com/javaone | 3
Slide 4: Hidden Agenda Burn into your mind that JavaFX Script software is “Simple, Elegant, and Leverages the Power of Java” Show you the coolness of Declaratively Scripting the UI (including Layouts), Binding, Triggers, and Sequences Convince you that JavaFX Script software is desperately needed in the software development industry, and that it is fun to develop! Rant a little about how the dream of a ubiquitous Java Virtual Machine (JVM™) on the client didn’t happen circa 1996, but is happening in 2008, partly due to Java Platform, Standard Edition (Java SE platform) update 10 2008 JavaOneSM Conference | java.sun.com/javaone | 4
Slide 5: Creating a “fish eye” menu http://JavaFXpert.com/weblog/2007/11/spotting-javafx.html 2008 JavaOneSM Conference | java.sun.com/javaone | 5
Slide 6: Creating a picture thumbnail viewer http://JavaFXpert.com/weblog/2007/11/spotting-javafx.html 2008 JavaOneSM Conference | java.sun.com/javaone | 6
Slide 7: Using a List component http://JavaFXpert.com/weblog/2007/11/spotting-javafx.html 2008 JavaOneSM Conference | java.sun.com/javaone | 7
Slide 8: A beginning compiled JavaFX Script program http://java.sun.com/developer/technicalArticles/scripting/javafx/ria_1/ 2008 JavaOneSM Conference | java.sun.com/javaone | 8
Slide 9: Comments, package, import, declarative script /* * HelloGoodbye.fx * A "Hello World" style program that demonstrates * declaratively expressing a user interface. */ package beatles; import javafx.gui.*; Frame { var phrase:String // The model title: "Hello, Goodbye" height: 300 width: 400 visible: true content: BorderPanel { center: Canvas { content: Text { x: 50 y: 125 2008 JavaOneSM Conference | java.sun.com/javaone | 9
Slide 10: Layouts, events, comments, strings Canvas { content: Text { x: 50 y: 125 content: bind phrase font: Font { size: 36 } } } bottom: FlowPanel { content: [ Button { text: "Hello" action: function():Void { // The button was clicked phrase = "You say hello..."; 2008 JavaOneSM Conference | java.sun.com/javaone | 10
Slide 11: Drawing, fonts, object literals Button { text: "Hello" action: function():Void { // The button was clicked phrase = "You say hello..."; } }, Button { text: "Goodbye" action: function():Void { phrase = "and I say goodbye"; } } ] // end of content sequence } } } 2008 JavaOneSM Conference | java.sun.com/javaone | 11
Slide 12: Compiling and executing from command-line javafxc -d . HelloGoodbye.fx javafx beatles.HelloGoodbye 2008 JavaOneSM Conference | java.sun.com/javaone | 12
Slide 13: A slightly more sophisticated model http://java.sun.com/developer/technicalArticles/scripting/javafx/ria_1/ 2008 JavaOneSM Conference | java.sun.com/javaone | 13
Slide 14: Defining a class, and more binding public class HelloGoodbyeModel { public attribute phrase:String; public attribute color:Color; } Frame { var hgModel = HelloGoodbyeModel { phrase: "Hello, Goodbye lyrics" color: Color.GREEN } ... content: BorderPanel { center: Canvas { content: Text { x: 50 y: 125 content: bind hgModel.phrase fill: bind hgModel.color 2008 JavaOneSM Conference | java.sun.com/javaone | 14
Slide 15: Layouts, events, comments, strings ... bottom: FlowPanel { content: [ Button { text: "Hello" action: function():Void { hgModel.phrase = "You say hello..."; hgModel.color = Color.RED; } }, Button { text: "Goodbye" action: function():Void { hgModel.phrase = "and I say goodbye"; hgModel.color = Color.BLUE; } } ] // end of content sequence } ... 2008 JavaOneSM Conference | java.sun.com/javaone | 15
Slide 16: JavaFX primitive data types Data Type String Boolean Integer Number Literal Syntax “I’m a String” or ‘I am a String’ true / false 42 3.14159 Default Value Empty (zero length) String false 0 0.0 2008 JavaOneSM Conference | java.sun.com/javaone | 16
Slide 17: JavaFX Data Types There are two general categories of data types in JavaFX: • Primitive (also known as basic) data types • Object types Another data type is sequence (also known as an array). Any type may be assigned to a variable (attribute or var) 2008 JavaOneSM Conference | java.sun.com/javaone | 17
Slide 18: Freebase Browser JFX user interface http://java.sun.com/developer/technicalArticles/scripting/javafx/ria_1/ 2008 JavaOneSM Conference | java.sun.com/javaone | 18
Slide 19: Freebase Browser JFX architecture 2008 JavaOneSM Conference | java.sun.com/javaone | 19
Slide 20: TetrisJFX – Animation http://JavaFXpert.com/weblog/2008/03/really-this-tim.html 2008 JavaOneSM Conference | java.sun.com/javaone | 20
Slide 21: KeyFrame animation, class in separate file package metronome_model; import javafx.animation.*; public class MetronomeModel { public attribute x2Val:Number; public attribute anim = Timeline { autoReverse: true keyFrames: [ KeyFrame { time: 0s values: x2Val => 100 }, KeyFrame { time: 1s values: x2Val => 300 tween Interpolator.LINEAR } ] repeatCount: Timeline.INDEFINITE }; } 2008 JavaOneSM Conference | java.sun.com/javaone | 21
Slide 22: KeyFrame animation – The model for Metronome package metronome_ui; import javafx.gui.*; import metronome_model.*; Frame { var metroModel = MetronomeModel {} ... content: BorderPanel { center: Canvas { content: Line { x1: 200 y1: 400 x2: bind metroModel.x2Val y2: 100 strokeWidth: 5 stroke: Color.RED } } 2008 JavaOneSM Conference | java.sun.com/javaone | 22
Slide 23: Binding to the state of an animation bottom: FlowPanel { content: [ Button { text: "Start" enabled: bind not metroModel.anim.running action: function():Void { metroModel.anim.start(); } }, Button { text: "Pause" enabled: bind not metroModel.anim.paused and metroModel.anim.running action: function():Void { metroModel.anim.pause(); } }, 2008 JavaOneSM Conference | java.sun.com/javaone | 23
Slide 24: Controlling, and binding to an animation state Button { text: "Resume" enabled: bind metroModel.anim.paused action: function():Void { metroModel.anim.resume(); } }, Button { text: "Stop" enabled: bind metroModel.anim.running action: function():Void { metroModel.anim.stop(); } } ] } } } 2008 JavaOneSM Conference | java.sun.com/javaone | 24
Slide 25: Morphing / Animation http://JavaFXpert.com/weblog/2008/03/really-this-tim.html 2008 JavaOneSM Conference | java.sun.com/javaone | 25
Slide 26: Morphing shapes, module-level variables import javafx.animation.*; import javafx.gui.*; import java.lang.System; var shape1 = Circle { centerX: 190 centerY: 125 radius: 100 }; var shape2 = Rectangle { x: 40 y: 75 width: 300 height: 100 }; 2008 JavaOneSM Conference | java.sun.com/javaone | 26
Slide 27: Morphing shapes, module-level variables var shape3 = Text { font: Font { size: 96 style: FontStyle.BOLD } x: 25 y: 150 content: "JavaFX" }; var shape4 = Text { font: Font { size: 96 style: FontStyle.BOLD } x: 25 y: 150 content: "Rocks!" }; ; 2008 JavaOneSM Conference | java.sun.com/javaone | 27
Slide 28: Timeline for morphing shapes var color = Color.RED; var geom:Shape = shape1; var t = Timeline { repeatCount: Timeline.INDEFINITE autoReverse: true keyFrames: [ KeyFrame { time: 0s values: [ geom => shape1 tween Interpolator.EASEBOTH, color => Color.YELLOW tween Interpolator.EASEBOTH, ] }, KeyFrame { time: 3s values: [ geom => shape2 tween Interpolator.EASEBOTH, color => Color.GREEN tween Interpolator.EASEBOTH, ] }, 2008 JavaOneSM Conference | java.sun.com/javaone | 28
Slide 29: Timeline for morphing shapes (cont) KeyFrame { time: 6s values: [ geom => shape3 tween Interpolator.EASEBOTH, color => Color.BLUE tween Interpolator.EASEBOTH, ] }, KeyFrame { time: 9s values: [ geom => shape4 tween Interpolator.EASEBOTH, color => Color.RED tween Interpolator.EASEBOTH, ] } ] }; 2008 JavaOneSM Conference | java.sun.com/javaone | 29
Slide 30: DelegateShape, closeAction event Frame { closeAction: function() { System.exit(0); } title: "JavaFX Script Morphing"; visible: true content: Canvas { preferredSize: [380, 250] background: Color.WHITE content: DelegateShape { shape: bind geom fill: bind color } } } t.start(); 2008 JavaOneSM Conference | java.sun.com/javaone | 30
Slide 31: Java SE 6 Platform Update 10 (beta) Enhanced Java technology deployment • Easy JRE™ version detection via a simple JavaScript interface • Incremental Java Kernel online installer (for first-time Java platform users) • Java platform auto-updater Improved performance and look & feel • JavaSM Quick Starter service feature – warm start of JRE software by prefetching • Hardware acceleration support • Nimbus Look & Feel Next-Generation Java Plug-In Tool • Improved reliability – can kill the plug-in without affecting browser • Ability to specify large heap sizes • Built-in Java Network Launching Protocol (JNLP) support • Ability to specify per-applet command-line arguments • Improved Java platform/JavaScript platform communications 2008 JavaOneSM Conference | java.sun.com/javaone | 31
Slide 32: Applets, and Binding to Functions http://JavaFXpert.com/weblog/2008/03/creating-comp-1.html 2008 JavaOneSM Conference | java.sun.com/javaone | 32
Slide 33: Classes, JavaFX applets, Circle, leveraging Java class CircleModel { attribute diameter:Integer; bound function getArea():Number { Math.PI * Math.pow(diameter / 2, 2); } } Application { var cModel = CircleModel {} content: BorderPanel { center: Canvas { content: [ Circle { centerX: 240 centerY: 250 radius: bind cModel.diameter / 2 stroke: Color.PURPLE strokeWidth: 1 fill: Color.MAGENTA }, 2008 JavaOneSM Conference | java.sun.com/javaone | 33
Slide 34: Binding (uni and bi-directional, function) Slider Text { font: font24Bold x: 20 y: 50 fill: Color.RED content: bind "Diameter: {cModel.diameter}" }, Text { font: font24Bold x: 240 y: 50 fill: Color.RED content: bind "Area: {%3.2f cModel.getArea()}" } ] } bottom: Slider { minimum: 0 maximum: 400 value: bind cModel.diameter with inverse }... 2008 JavaOneSM Conference | java.sun.com/javaone | 34
Slide 35: HTML for a JavaFX™ Applet <html> <body> <center> <applet width=480 height=500> <param name="jnlp_href“ value="BindToFunctionApplet.jnlp"> <param name="ApplicationClass“ value="BindToFunctionApplet"> </applet> </center> </body> </html> 2008 JavaOneSM Conference | java.sun.com/javaone | 35
Slide 36: WinnerWheelJFX http://JavaFXpert.com/weblog/2008/03/creating-comp-1.html 2008 JavaOneSM Conference | java.sun.com/javaone | 36
Slide 37: WinnerWheelJFX – Zooming in http://JavaFXpert.com/weblog/2008/02/whos-zoomin-who.html 2008 JavaOneSM Conference | java.sun.com/javaone | 37
Slide 38: – CustomNode, scale, translate, rotate public class WinnerWheelJFX extends CustomNode { public function create():Node { ... return Group { transform: bind [ Scale.scale(if (zoomed) 3 else 1, if (zoomed) 3 else 1), Translate.translate(0, if (zoomed) -0.9 * cY else 0) ] content: [ Rectangle { ... }, ... Group { transform: bind [ Rotate.rotate(if (running) (a * rand) % 360 else chosenIdx.doubleValue() / sizeof names * 360.0, cX, cY) ] }... 2008 JavaOneSM Conference | java.sun.com/javaone | 38
Slide 39: Using Triggers http://JavaFXpert.com/weblog/2008/02/trigger-happy-.html 2008 JavaOneSM Conference | java.sun.com/javaone | 39
Slide 40: Triggers, sequence triggers class Model { attribute entries:String[] = ["Red", "Green", "Blue", "Yellow", "Purple"] on replace oldValue[idxA..idxB] = newElement { System.out.println("replaced {oldValue} at {idxA} with {entries[idxA]}"); }; attribute selectedIndex:Integer = 0 on replace { System.out.println("selectedIndex={selectedIndex}"); }; attribute enteredText:String; } 2008 JavaOneSM Conference | java.sun.com/javaone | 40
Slide 41: Binding ListBox to a sequence, bi-directional bind Frame { var mdl = Model {} ... ListBox { cells: bind for (entry in mdl.entries) ListCell { text: entry } selection: bind mdl.selectedIndex with inverse fixedCellWidth: 100 visibleRowCount: 4 } ... 2008 JavaOneSM Conference | java.sun.com/javaone | 41
Slide 42: Sequences, for expression import java.lang.System class CompiledSequenceExample { attribute ordinals:String[] = [“zero”, “one”, “two”, “three”, “four”, “five”, “six”]; function printSomeOrdinals():Void { for (lmnt in ordinals where lmnt.length() > 3) { System.out.println(“lmnt {}”); } } function getSomeOrdinals():String[] { var elements = for (lmnt in ordinals where lmnt.length() > 3) lmnt; return elements; } 2008 JavaOneSM Conference | java.sun.com/javaone | 42
Slide 43: Sequences, block expressions JavaFX Script is an expression language, with block expressions: • A block expression consists of expressions surrounded by curly braces and separated by semicolons • The value of a block is its last expression getSomeOrdinals() can be simplified by removing the var assignment and return statement: function getSomeOrdinals():String[] { for (lmnt in ordinals where lmnt.length() > 3) lmnt.length; } 2008 JavaOneSM Conference | java.sun.com/javaone | 43
Slide 44: If/else expression import java.lang.System class CompiledCompiledIfElseExample { function getAlias(name:String):String { var aka:String; if (name == “Bruce Springsteen”) { aka = “The Boss”; } else { aka = if (name == “Gordon Sumner”) “String” else “The Edge” } //return aka; // Note: return statement not required } } 2008 JavaOneSM Conference | java.sun.com/javaone | 44
Slide 45: Bi-directional bind, sequence manipulation: insert ... TextField { value: text mdl.enteredText with inverse columns: 10 }, Button { text: "Insert" defaultButton: true enabled: bind mdl.enteredText.trim() <> "" action: function():Void { insert mdl.enteredText before mdl.entries[mdl.selectedIndex.intValue()]; mdl.enteredText = ""; } }, ... 2008 JavaOneSM Conference | java.sun.com/javaone | 45
Slide 46: Sequence manipulation: replace, delete ... Button { text: "Replace" enabled: bind mdl.enteredText.trim() <> "" action: function():Void { mdl.entries[mdl.selectedIndex] = mdl.enteredText = ""; } }, Button { text: "Delete" enabled: bind mdl.selectedIndex >= 0 action: function():Void { delete mdl.entries[mdl.selectedIndex]; } } ... 2008 JavaOneSM Conference | java.sun.com/javaone | 46
Slide 47: TetrisJFX – Animation http://JavaFXpert.com/weblog/2008/03/really-this-tim.html 2008 JavaOneSM Conference | java.sun.com/javaone | 47
Slide 48: Word Search Puzzle Builder http://JavaFXpert.com/weblog/2007/11/spotting-javafx.html 2008 JavaOneSM Conference | java.sun.com/javaone | 48
Slide 49: Creating CustomNode, mouse events public class ThumbNailFilmStrip extends CustomNode { ... Group { content: [ ImageView { translateX: 5 translateY: 5 image: Image { url: "{__DIR__}images/navigation/left.gif" } onMouseEntered: function(me:MouseEvent):Void { apsModel.thumbNailFilmStripLastOffset = apsModel.thumbNailFilmStripOffset; apsModel.thumbNailFilmStripTargetOffset = 0; apsModel.anim.start(); } onMouseExited: function(me:MouseEvent):Void { apsModel.anim.stop(); }... 2008 JavaOneSM Conference | java.sun.com/javaone | 49
Slide 50: NetBeans 6.1 has JavaFX Software Plug-in 2008 JavaOneSM Conference | java.sun.com/javaone | 50
Slide 51: How to receive the JavaFX SDK JavaFX SDK: How to receive the SDK ? The JavaFX SDK Preview release will be available in June 2008. Please visit http://www.javafx.com to pre-register for the SDK Preview release. 2008 JavaOneSM Conference | java.sun.com/javaone | 51
Slide 52: Summary JavaFX Script software is: S_____, E______, and L________ the P____ of J___ Declaratively scripting the UI is straightforward, and layout components are placed in the UI containment hierarchy. Binding and triggers help enable declarative scripting. JavaFX Script software (and Java SE platform update 10) will bring back rich-client Java application environment 2008 JavaOneSM Conference | java.sun.com/javaone | 52
Slide 53: For More Info – Resources Related URLs: • JavaFX Software Community Site: https://openjfx.dev.java.net • Sun’s JavaFX Software Site: http://java.sun.com/javafx • PlanetJFX: http://jfx.wikia.com • Chris Oliver’s Weblog: http://blogs.sun.com/chrisoliver • “Helping you Become a JavaFXpert” Weblog: http://JavaFXpert.com Related Books: • はじめてのJavaFX―最新スクリトプト言語の基礎を徹底解説! (in Japanese), by 清水美樹 , published by 工学社 • JavaFX Script: Dynamic Java Scripting for Rich Internet/Client-side Applications , by James L. Weaver, published by Apress, October 2007 • Dynamische und interaktive Java-Applikationen mit JavaFX (in German), by Ralph Steyer, published by Addison-Wesley Related Training: • JavaFXpert BootCamp: http://BootCamp.JavaFXpert.com 2008 JavaOneSM Conference | java.sun.com/javaone | 53
Slide 54: For More Info – Technical Sessions Related JavaOneSM Conference Technical Sessions: • TS-5152 Overview of the JavaFX™ Script Programming Language • TS-5138 The JavaFX™ Platform: Sexy Interfaces For Mere Mortals • TS-6290 • TS-6610 Applets Reloaded: Introducing the Next-Generation Java™ Plug-in Technology Inside The JavaFX™ Script Technology-Based Runtime APIs: Scene Graph & WebKit • TS-5449 Java™ Technology for Blu -ray and TV: Authoring for Performance Diversity • TS-6019 A Look into Development for the JavaFX™ Mobile/TV Platform with the NetBea • TS-6609 Using JavaFX™ Script To Build Swing Applications • TS-6509 Incorporating Media into JavaFX™ and Java™ Technology-Based Applications • TS-6127 Build Your Own Multitouch Interface with Java™ and JavaFX™ Technology • TS-6656 Extreme GUI Makeover: Swing Meets FX 2008 JavaOne Conference | java.sun.com/javaone | 54 • TS-5657 SM
Slide 55: For More Info – Labs, BOFs, Panels Related JavaOne Conference Labs, BOFs and Panels: • LAB-7350 • • • • • • • • • JavaFX™ Technology-Based Applications: Rich Client Applications with Cool Effe PAN-7372 Case Studies from the JavaFX™ Technology World BOF-5804 Meet with the JavaFX™ Tools Team BOF-6511 The Java™ Media Components API BOF BOF-5936 Meet the Java 2D™ API Graphics and Java Advanced Imaging Team BOF-5965 3-D Graphics APIs for the Java™ and JavaFX™ Platforms BOF-5501 Java™ Champions BOF: The Latest Buzz, Highlights, and Panel Discussion BOF-5992 How to Build RESTful Clients with the JavaScript™, Ruby, and JavaFX™ Programming Languages BOF-4798 Parleys.com: An Adobe Flex/AIR and JavaFX™ Case Study BOF-5506 JavaFX™ TV Platform Overview 2008 JavaOneSM Conference | java.sun.com/javaone | 55
Slide 56: Jim Weaver, JavaFX™ Script Author, Developer, Teacher http://JavaFXpert.com TS-4794 2008 JavaOneSM Conference | java.sun.com/javaone | 56