Presentation Introduction to JavaFX - A Rich Client Platform for All Screens

Richard Bair, JavaOne 2009 RockStar, Devoxx speaker, and JavaFX team lead, gives an overview of JavaFX at the kick-off of the Silicon Valley JavaFX Users Group. Late-breaking news on JavaFX 1.3 Controls, Styling, and Layouts are revealed as well!

Speakers


Slides

Title

Introduction to JavaFX A rich client platform for all screens Richard Bair Sun Microsystems, Inc.

Introduction to JavaFX

A rich client platform for all screens Introduction to JavaFX • JavaFX is the next generation client stack for the Java Platform > Consumer & Enterprise > Consistent cross-device API and development model • Designed for high performance graphics on desktop, mobile, tv > Leverages OpenGL, Direct3D, SSE3 when possible on any target device > Ground-up rewrite of fonts, image handling, rasterization • Designed for multi-language support > Java > JavaFX Script > more... 2009 Sun Microsystems, Incorporated. All Rights Reserved. 2

Outline

A rich client platform for all screens Outline • JavaFX Script – a new programming language • JavaFX scene graph • User interface controls • Styling • Charts • Layout • Developer tools 2009 Sun Microsystems, Incorporated. All Rights Reserved. 3

What is JavaFX Script?

A rich client platform for all screens What is JavaFX Script? 2009 Sun Microsystems, Incorporated. All Rights Reserved.

DSL for...

A rich client platform for all screens “DSL for the care and feeding of the Scenegraph” 2009 Sun Microsystems, Incorporated. All Rights Reserved.

Null Pointer-Less...

A rich client platform for all screens Null Pointer-less Language 2009 Sun Microsystems, Incorporated. All Rights Reserved.

Expression Language

A rich client platform for all screens Expression Language 2009 Sun Microsystems, Incorporated. All Rights Reserved.

Object Oriented

A rich client platform for all screens Object Oriented 2009 Sun Microsystems, Incorporated. All Rights Reserved.

JVM Language

A rich client platform for all screens JVM Language 2009 Sun Microsystems, Incorporated. All Rights Reserved.

Strongly Typed

A rich client platform for all screens Strongly Typed 2009 Sun Microsystems, Incorporated. All Rights Reserved.

Type Inference

A rich client platform for all screens Type Inference 2009 Sun Microsystems, Incorporated. All Rights Reserved.

Javascript / Scala Like Syntax

A rich client platform for all screens Javascript / Scala like syntax 2009 Sun Microsystems, Incorporated. All Rights Reserved.

Why a New Language?

A rich client platform for all screens Why A New Language? • A programming language is not about telling the computer what to do, but instead is about expressing the programmer’s intent. • A programming language needs to embody new, higher-level concepts and to abstract away irrelevant detail. (Brooks 1993, HOPL-II keynote) • JavaFX Script is tightly integrated with, and works extremely effectively with the JavaFX runtime and scenegraph • Itʼs fun! 2009 Sun Microsystems, Incorporated. All Rights Reserved. 13

Hello, world!

A rich client platform for all screens println(“Hello, world!”) 2009 Sun Microsystems, Incorporated. All Rights Reserved.

PI

A rich client platform for all screens def PI = 3.14159265; 2009 Sun Microsystems, Incorporated. All Rights Reserved.

Variables

A rich client platform for all screens var name = “Richard”; 2009 Sun Microsystems, Incorporated. All Rights Reserved.

Typing

A rich client platform for all screens var name:String; name = “Richard”; 2009 Sun Microsystems, Incorporated. All Rights Reserved.

Data Types

A rich client platform for all screens Data Types • Primitive types from Java: > Boolean, Integer, Long, String, ... > New: string interpolation expressions – println("The value of x is {x}"); • Object references (similar to Java) • Number • Duration • Sequences 2009 Sun Microsystems, Incorporated. All Rights Reserved. 18

Sequences

A rich client platform for all screens Sequences • An ordered collection of objects • Sequences are flat — they do not nest • A sequence cannot be null (but it can be empty) var numbers = [3, 1, 4, 1, 5]; insert [9, 2, 6] into numbers; delete numbers[2]; 2009 Sun Microsystems, Incorporated. All Rights Reserved. 19

Data Types

A rich client platform for all screens Data Types • Primitive types from Java: > Boolean, Integer, Long, String, ... > New: string interpolation expressions – println("The value of x is {x}"); • Object references (similar to Java) • Number • Duration • Sequences 2009 Sun Microsystems, Incorporated. All Rights Reserved. 18

Sequences

A rich client platform for all screens Sequences • An ordered collection of objects • Sequences are flat — they do not nest • A sequence cannot be null (but it can be empty) var numbers = [3, 1, 4, 1, 5]; insert [9, 2, 6] into numbers; delete numbers[2]; 2009 Sun Microsystems, Incorporated. All Rights Reserved. 19

Expressions, For-Loops, and Sequences

A rich client platform for all screens Expressions, For-Loops, and Sequences • Every “statement” is actually an expression that has a value var b = if (a >= 0) a else -a; • The value of a for-loop is a sequence of values from its body for (x in [1..5]) { x * x } [1, 4, 9, 16, 25] 2009 Sun Microsystems, Incorporated. All Rights Reserved. 20

Classes, Mixins, and APIs

A rich client platform for all screens Classes, Mixins, and APIs • Classes are normal classes similar to Java classes • Mixin classes like Java interfaces > Can include function implementations > Can include variable declarations and initial values • Extending classes > At most one normal superclass > Arbitrary number of mixin classes 2009 Sun Microsystems, Incorporated. All Rights Reserved. 21

Object Literals

A rich client platform for all screens Object Literals • Concise “declarative” syntax for object creation • A series of variable:initial-value pairs • Can be used on public and public-init variables • Can be nested arbitrarily > Useful for creating scene graph structures var rect = Rectangle { x: 10 y: 20 width: 30 height: 40 } 2009 Sun Microsystems, Incorporated. All Rights Reserved. 22

Object Literals and Binding

A rich client platform for all screens Object Literals and Binding when leftMargin changes the x-value of both Rectangles changes var leftMargin = 472; var r1 = Rectangle { x: bind leftMargin ... }; var r2 = Rectangle { x: bind leftMargin ... } 2009 Sun Microsystems, Incorporated. All Rights Reserved. 23

JavaFX Library API Style

A rich client platform for all screens JavaFX Library API Style • The x, y, width, height variables on Rectangle are public! > What about encapsulation? Enforcing invariants? • No getters > Variables can be public-read • No setters > Variables are public and have a trigger • No constructors > Variables are public-init allowing use in object literals • Few listeners and callbacks > State variables exposed (public, public-init, or public-read) > This allows binding on them 2009 Sun Microsystems, Incorporated. All Rights Reserved. 24

Binds and Triggers

A rich client platform for all screens Binds and Triggers public var x1; public var x2; public-read var width = bind x2 - x1; public var radius = 10 on replace { diameter = 2 * radius } 2009 Sun Microsystems, Incorporated. All Rights Reserved. 25

Outline

A rich client platform for all screens Outline • JavaFX Script – a new programming language • JavaFX scene graph • User interface controls • Styling • Charts • Layout • Developer tools 2009 Sun Microsystems, Incorporated. All Rights Reserved. 26

Binds and Triggers

A rich client platform for all screens Binds and Triggers public var x1; public var x2; public-read var width = bind x2 - x1; public var radius = 10 on replace { diameter = 2 * radius } 2009 Sun Microsystems, Incorporated. All Rights Reserved. 25

Outline

A rich client platform for all screens Outline • JavaFX Script – a new programming language • JavaFX scene graph • User interface controls • Styling • Charts • Layout • Developer tools 2009 Sun Microsystems, Incorporated. All Rights Reserved. 26

Scenegraph

A rich client platform for all screens Scenegraph • Data structure which represents all visual elements • Easily reference any visual element in the app and manipulate it • Comprised of Nodes > Leaf Nodes (shapes, images, text, etc) > Parent Nodes (Groups, Containers, etc) 2009 Sun Microsystems, Incorporated. All Rights Reserved. 27

Stage

A rich client platform for all screens Group Image Group Circle Media 2009 Sun Microsystems, Incorporated. All Rights Reserved. 28

Scenegraph Sample

A rich client platform for all screens Scenegraph Sample Group { content: [ ImageView { } Group { content: [ Circle { }, MediaView { } ] } ] } Group Image Group Circle Media 2009 Sun Microsystems, Incorporated. All Rights Reserved. 29

Nodes

A rich client platform for all screens Nodes • Group • CustomNode • Container • Control • Line • Path • Rectangle • ImageView • MediaView • Text • more... 2009 Sun Microsystems, Incorporated. All Rights Reserved. 30

ImageView

A rich client platform for all screens ImageView • Image represents an in-memory bitmap > loaded via URL, from jar • ImageView Node contains an Image • Both ImageView and Image can scale > Preserve ratio > Fit within a specific width/height 2009 Sun Microsystems, Incorporated. All Rights Reserved. 31

Text Node

A rich client platform for all screens Text Node • x, y, TextOrigin • Fonts can be specified on Text • Supports multiline text • By default, text positioned such that (x, y) is left baseline 2009 Sun Microsystems, Incorporated. All Rights Reserved. 32

Example

A rich client platform for all screens (0, -10) (0, 0) Example 2009 Sun Microsystems, Incorporated. All Rights Reserved.

Effects

A rich client platform for all screens Effects • Any Node can have an Effect • Many standard built in > Blend modes > Bloom > DisplacementMap > DropShadow > ColorAdjust > BoxBlur > Glow > Reflection > InnerShadow > more... 2009 Sun Microsystems, Incorporated. All Rights Reserved. 34

Media

A rich client platform for all screens Media • JavaFX supports both visual and audio media • Cross platform JavaFX Media file (fxm, mp3) • Also plays native formats (mov, wmv) • Media class represents a media file • MediaPlayer plays a Media file • MediaView is the Node which displays the Media 2009 Sun Microsystems, Incorporated. All Rights Reserved. 35

Animation

A rich client platform for all screens Animation • Animation is a key feature of every rich graphics application platform • There are two supported animation types in JavaFX > Keyframe animations > Transitions 2009 Sun Microsystems, Incorporated. All Rights Reserved. 36

KeyFrame Animation

A rich client platform for all screens KeyFrame Animation • KeyFrame: specifies that a variable should have... > a particular value > at a particular time • Timeline > Modifies values of variables specified by KeyFrames > Doesn’t necessarily do any animation itself • How is animation actually done? > Arrange for a KeyFrame to modify an interesting Node variable – x, rotate, opacity, fill, ... 2009 Sun Microsystems, Incorporated. All Rights Reserved. 37

KeyFrame Animation Setup

A rich client platform for all screens KeyFrame Animation Setup var text = Text { x: 50 y: 80 content: "Hello, world!" rotate: 30 } Timeline { keyFrames: at (4s) { text.rotate => 210.0 } }.play(); 2009 Sun Microsystems, Incorporated. All Rights Reserved. 38

Transitions

A rich client platform for all screens Transitions • Predefined, single-purpose animations > Fade, Path, Pause, Rotate, Scale, Translate > Can specify to, from, and by values • Container transitions: > Parallel, Sequential > Can be nested arbitrarily 2009 Sun Microsystems, Incorporated. All Rights Reserved. 39

DEMO - Simple Scene Graph

A rich client platform for all screens DEMO – Simple Scene Graph 2009 Sun Microsystems, Incorporated. All Rights Reserved. 40

JavaFX UI Controls

A rich client platform for all screens JavaFX UI Controls • Simple • Useful • Rich 2009 Sun Microsystems, Incorporated. All Rights Reserved. 42

Architecture

A rich client platform for all screens Architecture Skin Control Behavior 2009 Sun Microsystems, Incorporated. All Rights Reserved. 43

Control Sample

A rich client platform for all screens Dark color buttons on toolbar Light color controls on almost white background 2009 Sun Microsystems, Incorporated. All Rights Reserved. 44

Controls in JavaFX

A rich client platform for all screens Controls in JavaFX • Button • ToggleButton • RadioButton • CheckBox • Slider • Label • ScrollBar • Hyperlink • ProgressIndicator • ProgressBar • TextBox • ListView • TreeView • PasswordBox • ChoiceButton • MenuButton • SplitMenuButton • Menus • ToolBar • ScrollView 45 • Multiline TextBox • Horizontal ListView • Popup • Tooltip 2009 Sun Microsystems, Incorporated. All Rights Reserved.

Button

A rich client platform for all screens Button • action:function() • Example: Button { text: “Cancel” action: function() { println(“I’ve been clicked!”); } } 2009 Sun Microsystems, Incorporated. All Rights Reserved. 46

Progress Indicator

A rich client platform for all screens Progress Indicator • progress:Number (0..1) • progress bar is-a progress indicator • Example: var task = HttpRequest { ... } ProgressIndicator { progress: bind task.percentDone } 2009 Sun Microsystems, Incorporated. All Rights Reserved. 47

TextBox

A rich client platform for all screens TextBox • text:String • promptText:String • font:Font • action:function() • Example: var t:TextBox = TextBox { promptText: “Search” action: function() { startSearch(t.text); t.text = “”; } } 2009 Sun Microsystems, Incorporated. All Rights Reserved. 48

Multiline TextBox

A rich client platform for all screens Multiline TextBox • columns:Integer • lines:Integer • multiline:Boolean • Example: var t:TextBox = TextBox { columns: 30 lines: 10 multiline: true } 2009 Sun Microsystems, Incorporated. All Rights Reserved. 49

ListView

A rich client platform for all screens List View • Horizontal or Vertical • Massively Scalable • Custom Cells • Dynamically variable row height • Example: ListView { items: [“Apples”, “Oranges”, “Bananas”] cellMaker: function() { ListCell { ... } } } 2009 Sun Microsystems, Incorporated. All Rights Reserved. 50

Demo - UI Controls

A rich client platform for all screens DEMO – UI Controls 2009 Sun Microsystems, Incorporated. All Rights Reserved. 51

Outline

A rich client platform for all screens Outline • JavaFX Script – a new programming language • JavaFX scene graph • User interface controls • Styling • Charts • Layout • Developer tools 2009 Sun Microsystems, Incorporated. All Rights Reserved. 52

Styling

A rich client platform for all screens Styling • Easy and Powerful (CSS) • Highly Customized (fxz) • Complete Control (code) 2009 Sun Microsystems, Incorporated. All Rights Reserved. 53

Styling

A rich client platform for all screens Styling • Easy and Powerful (CSS) • Highly Customized (fxz) • Complete Control (code) 2009 Sun Microsystems, Incorporated. All Rights Reserved. 54

Styling - Examples

A rich client platform for all screens Styling 2009 Sun Microsystems, Incorporated. All Rights Reserved. 55

Styling - Strategy

A rich client platform for all screens Styling • CSS is our strategy for styling • Caspian is our default CSS stylesheet • CSS is fast, and works on mobile, desktop, and tv • Stick to the spirit of HTML CSS > but do not be bound by it 2009 Sun Microsystems, Incorporated. All Rights Reserved. 56

Styling - Skins

A rich client platform for all screens Styling • Break control skins in styleable parts • In some ways similar to HTML CSS’s Box • Rectangle with independently rounded corners > or any arbitrary path • Can have multiple > background fills > background images > border strokes > border images 2009 Sun Microsystems, Incorporated. All Rights Reserved. 57

Styling - Borders

A rich client platform for all screens Styling 2009 Sun Microsystems, Incorporated. All Rights Reserved. 58

Styling - Shapes

A rich client platform for all screens 2009 Sun Microsystems, Incorporated. All Rights Reserved. 59

Styling - Button Composite

Styling - Scrollbar Breakdown

A rich client platform for all screens Left Button Track Thumb ScrollBar Right Button Left Arrow Right Arrow 2009 Sun Microsystems, Incorporated. All Rights Reserved. 61

Outline

A rich client platform for all screens Outline • JavaFX Script – a new programming language • JavaFX scene graph • User interface controls • Styling • Charts • Layout • Developer tools 2009 Sun Microsystems, Incorporated. All Rights Reserved. 62

Charts

A rich client platform for all screens Charts • A basic set of charts for everyday use > Simple > Customizable • To provide tools to help you build your own charts 2009 Sun Microsystems, Incorporated. All Rights Reserved. 63

Pie Chart

A rich client platform for all screens Pie Chart 2009 Sun Microsystems, Incorporated. All Rights Reserved. 64

Sample Pie

A rich client platform for all screens Sample Pie PieChart { title: "Sample Pie" data: [ PieChart.Data { label: "Apples" value: 34 action: function(){ Alert.inform("Clicked") } }, PieChart.Data { label: "Oranges" value: 27 }, PieChart.Data { label: "Bananas" value: 16 }, PieChart.Data { label: "Grapes" value: 50 }, PieChart.Data { label: "Cherries" value: 6 }, PieChart.Data { label: "Strawberry" value: 5 }, PieChart.Data { label: "Raspberry" value: 7 } ] } 2009 Sun Microsystems, Incorporated. All Rights Reserved. 65

Bar Chart

A rich client platform for all screens Bar Chart 2009 Sun Microsystems, Incorporated. All Rights Reserved. 66

Line Chart

A rich client platform for all screens Line Chart 2009 Sun Microsystems, Incorporated. All Rights Reserved. 67

Area Chart

A rich client platform for all screens Area Chart 2009 Sun Microsystems, Incorporated. All Rights Reserved. 68

Scatter Chart

A rich client platform for all screens Scatter Chart 2009 Sun Microsystems, Incorporated. All Rights Reserved. 69

Bubble Chart

A rich client platform for all screens Bubble Chart 2009 Sun Microsystems, Incorporated. All Rights Reserved. 70

3D Bar Chart

A rich client platform for all screens 3D Bar Chart 2009 Sun Microsystems, Incorporated. All Rights Reserved. 71

3D Pie Chart

A rich client platform for all screens 3D Pie Chart 2009 Sun Microsystems, Incorporated. All Rights Reserved. 72

Outline

A rich client platform for all screens Outline • JavaFX Script – a new programming language • JavaFX scene graph • User interface controls • Styling • Charts • Layout • Developer tools 2009 Sun Microsystems, Incorporated. All Rights Reserved. 73

Layout Containers

A rich client platform for all screens Layout Containers • Container-based layout • Container is-a Node • Built-in Containers in 1.2 > Stack: stack all content nodes on top of each other > HBox: lay out content horizontally > VBox: lay out content vertically > Flow: layout out content either horizontally or vertically and line wrap > Panel: Customizable layout container 2009 Sun Microsystems, Incorporated. All Rights Reserved. 74

Flow Sample

A rich client platform for all screens Flow Sample Flow { width: 800 height: 600 content: for (img in images) { ImageView { image: img } } } 2009 Sun Microsystems, Incorporated. All Rights Reserved. 75

Developer Tools

A rich client platform for all screens Developer Tools • NetBeans with JavaFX plug-in > Syntax highlighting > Code completion > SDK integration • Eclipse, IntelliJ • JavaFX Production Suite > Imports artwork from content creation tools > ... into the scenegraph as a Node • JavaFX Authoring Tool > Creating JavaFX Content > Built completely on top of JavaFX and UI Controls 2009 Sun Microsystems, Incorporated. All Rights Reserved. 76

Developer-Designer Workflow

A rich client platform for all screens Developer-Designer Workflow 2009 Sun Microsystems, Incorporated. All Rights Reserved. 77

Call to Action

A rich client platform for all screens Call To Action • fxexperience.com • Visit javafx.com > Download JavaFX SDK + NetBeans > See demos > Download example code > Read tutorials, FAQs, white papers, documentation > Browse API Documentation Thank You! 2009 Sun Microsystems, Incorporated. All Rights Reserved. 79