JavaFX : A Technical Introduction Raghavan “Rags” N. Srinivas [email protected] Sun Microsystems 1

Speaker(s) > Rags > CTO, Technology Evangelism > Designing ugly GUIs for well over a decade (and counting) > HOL track lead for JavaOne > Author of JavaFX HOL for JavaOne 2007 and 2008

2

Goal of the Talk

Learn how to write programs using JavaFX including SceneGraphs, Animation and Media

3

JavaFX Script Overview • Declarative, statically-typed scripting language with type inference • Facilitates rapid GUI development • Many cool, interesting language features • Runs on Java VM • Deployment options same as Java • Fully utilizes Java class libraries behind the scenes 4

A Basic Java GUI: Not Very Pretty

5

Hello World with Swing import javax.swing.*; public class HelloWorldSwing { public static void main(String[] args) { JFrame frame = new JFrame("HelloWorldSwing"); final JLabel label = new JLabel("Hello World"); frame.getContentPane().add(label);

frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.pack(); frame.setVisible(true); } } 6

Hello World with JavaFX import javafx.ui.*; Frame { title: "Hello World JavaFX" width: 200 height: 50 content: Label { text: "Hello World" } visible: true }

7

Declarative Syntax • Tell me what you want. Not How. • Common in Web applications • For example, ease of composing styled text > HTML vs. JTextPane

• HTML Table using JSTL versus JTable • JavaFX brings that same ease of use to Swing and Java 2D API programming 8

JavaFX Simplified Architecture

JavaFX Script Software

Project Scene Graph Effects, Animation, Media and and Timing Java 2D Graphics hardware 9

Agenda • • • • • • •

SDK and Prerequisite software First JavaFX Application Language and SceneGraph Basics Animation Basics Media Basics Deployment Basics Summary

10

SDK and prerequisite software

11

Software Requirements • • • • •

Java SE 6 Update 10 SDK NetBeans 6.1 – Web & Java EE version JavaFX Kit – NetBeans plug-in JavaFX SDK (Already bundled with the plugin) Mozilla Firefox 3 beta 5 or higher (for deployment only)

12

NetBeans IDE – JavaFX Plug-in • New plug-in for NetBeans IDE 6.1 • Support development cycle > edit, compile, run, test

• JavaFX project system • Includes automatic installation of JavaFX SDK

13

Components – JavaFX SDK /lib javafxc.jar /docs javafxrt.jar Javadocs javafxgui.jar Scenario.jar Decora-D3D.jar Decora-HW.jar jmc.jar /samples jogl.jar SmokeScreenSample jaxb*.jar

/bin javafxc.bat javafx.bat

14

Command Line Development using JavaFX SDK • • • •

include <javafx-sdk>/bin in PATH javafxc to compile javafx to run Relevant library files in <javafx-sdk>/lib are automatically included in classpath as necessary. Rest can be included with the -classpath option > With packages > javafxc -d . simple/Main.fx > javafx simple.Main

> Without packages > javafxc Main.fx

15

First JavaFX Script Application

16

Language and SceneGraph Basics

17

Language Highlights • • • •

Declarative Syntax First Class Functions Sequences Binding

18

Declarative Syntax • • • • • •

Loosely based on Scalable Vector Graphics (SVG) Object literal syntax similar to JavaScript Enables fast, easy construction of GUI hierarchy No Swing programming experience required Attributes Triggers

19

Declarative Syntax - Example import javafx.gui.*; Frame { title: "Hello World JavaFX width: 200 height: 50 content: Label { text: "Hello World" } visible: true } 20

First Class Functions • No anonymous inner classes! • Callbacks made easier

21

First Class Functions - Example import javafx.gui.*; import java.lang.System; var doExit = function():Void { System.exit(0); }; var fileItems = [ MenuItem{text:"Exit" action:doExit} ]; Frame { title: "JavaFX Demo" menus: [Menu{text:"File" items:fileItems}, Menu{text:"Help"}] content: ... }

22

Sequences • Arrays on steroids • Compared for equality on value • Series notation var days = [1..31];

• Slices via syntax and predicate var week1 = days[0..<7]; var oddDays = days[n|n % 2 == 1];

• Insert/delete delete 1 from days; // result is [2..31]

23

Data Binding in JavaFX > Cause and Effect—Responding to change > The JavaFX bind operator—Allows dynamic

content to be expressed declaratively > Dependency-based evaluation of any expression > Automated by the system—Rather than manually wired by the programmer > You just declare dependencies and the JavaFX runtime takes care of performing updates when things change > Eliminates listener patterns

24

Binding • The power drill for GUI development • 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, calls into Java

methods/constructors

25

Example: Dynamic Behavior import javafx.gui.*; Frame { var a: String = "name"; title: "Hello World" width: 400 content: BorderPanel { bottom: TextField { text: bind a with inverse} top: Label { text: bind "Hello {a}" } } visible: true } 26

More Binding Examples public class User { public attribute userid: String; public attribute password: String; } // Create sequence var users = [ User {userid: "rags" password: "everest" }, User {userid: "sridhar" password: "hyderabad" }, User {userid: "Inyoung" password: "korea" }, ]; // Bind list to sequence of users var list = List{items: bind for (user in users) ListItem {text: bind "{user.userid}"}}; 27

GUI Components –javafx.gui.*

Frame Dialog Window

Canvas

Button CheckBox ComboBox Label List RadioButton Slider ToggleButton Menu MenuItem TextField

BorderPanel FlowPanel GridPanel Panel

28

JavaFX Scene Graphs • Object literal syntax simplifies defining scenes var scene = Circle { centerX: 100 centerY: 100 radius: 50 fill: Color.CRIMSON stroke: Color.INDIGO strokeWidth: 5 }; Frame {

}

title: content: background: visible:

"Circle" Canvas { content:scene } Color.BEIGE true 29

GUI – Example 1 import javafx.gui.*; var var var var

b1 b2 b3 b4

= = = =

Button{name: Button{name: Button{name: Button{name:

"Button "Button "Button "Button

1" 2" 3" 4"

text: text: text: text:

"Button "Button "Button "Button

1"}; 2"}; 3"}; 4"};

var p1 = FlowPanel { content: [b1, b2, b3, b4] hgap: 10 vgap: 30 } var f1 = Frame { name: "Frame 1" content: p1 width: 400 height: 400 visible: true }

30

Scene Graph Nodes -javafx.gui.* Node ComponentView* ImageView MediaView

Transform Affine Rotate Scale Shear Translate

Group Hbox Vbox

Shape Arc Circle CubicCurve Ellipse Line Path Polygon Polyline QuadCurve Rectangle Text

31

Scene Graph Effects javafx.gui.effect.*

Blend Bloom ColorAdjust ... Flood GaussianBlur Glow ... MotionBlur ... Source 32

GUI – Example 2 var canvas = Canvas { background: Color.WHITE content: Rectangle { x: bind x1 y: bind y1 width: bind w height: bind h fill: bind color opacity: bind op onMouseEntered: function(e) { fader.start(); } onMouseExited: function(e) { fader.stop(); } } };

33

Animation Basics

34

Animation - javafx.gui.animation.* TimeLine autoReverse INDEFINITE keyFrames repeatCount running toggle

KeyFrame action canSkip time timelines values

InterPolator DISCRETE EASEBOTH EASEIN EASEOUT LINEAR

35

Animation var t = Timeline { repeatCount: bind rep autoReverse: bind autoRevCheckBox.selected toggle: bind toggleCheckBox.selected keyFrames: [ KeyFrame { time: 0ms values: [ x => 0, y => 0] }, KeyFrame { time: 2000ms values: [ x => 200 tween interpolate, y => 200 tween interpolate] } ] };

36

The “=>” literal constructor values: [x => 100 tween Interpolator.LINEAR] is equivalent to values: [KeyValue {target: pX, value: 100, interpolate: Interpolator.LINEAR}] where pX is “pointer of x” (obtained magically :-))

37

Animation Controls var buttons = FlowPanel { content: [ Button { text: "Start" action: function():Void { t.start(); } }, Button { text: "Stop" action: function():Void { t.stop(); } }, Button { text: "Pause" action: function():Void { t.pause(); } } ] };

38

Media Basics

39

Architectural Overview, JMC • Java Media Components > JmediaPlayer > A JComponent that provides media playback with user interface controls > JMediaPane > A JComponent that provided media playback without UI controls > MediaProvider > Low level media player that can render into a graphics object or pass raw data into other rendering systems > Media Class > For getting information about the media 40 –

Tracks: Audio Video and SubTitiles currently supported

Media in Java • Cross Platform Video Format Support > Encode once, play anywhere > Over time, multiple formats may be supported > Sun Open Media Stack (OMS)

• Leverages native platform > Windows > Play Windows Media via DirectShow > Flash via the ActiveX control > Mac > Quicktime and Core Audio/Video. > Linux and Solaris > GStreamer

41

Code Sample: Java Player class MediaDemo extends JFrame { MediaDemo() { JmediaPlayer mediaPlayer; try { mediaPlayer = new JMediaPlayer( new URI("movie.mov")); } catch (Exception e) { System.out.println("Error opening media" + e); System.exit(0); } add(mediaPlayer); mediaPlayer.play(); setVisible(true); } ... 42

Java API • JMediaPlayer, JMediaPane, and MediaProvider contain typical methods for media playback: > play, pause, setRate, setRepeating, setVolume,

setSource etc. > Player and media are separate objects, rather then having play methods on the media. > Better Beans/Swing/NetBeans integration > More efficient use of objects in typical scenarios

43

Media in JavaFX • Media classes are part of javafx.gui package • Media, MediaPlayer and MediaView > MediaView is a Node > has a MediaPlayer > MediaPlayer has a Media object. > MediaView may be rotated, translated, sheared, and have

filter effects applied to it. > Multiple views may be bound to single player.

• MediaTimers allow functions to be invoked at key points in Media. • Other media events may be triggered

44

Code Sample: JavaFX™ MediaPlayer var media = Media{source:”movie.mov”}; var player = MediaPlayer{media: media, autoPlay:true}; var mediaView = MediaView{mediaPlayer: player}; // To enable audio only, don't create MediaView MediaView{mediaPlayer:player, onMouseClicked: function(e) { if (player.paused) { player.play(); } else { player.pause(); } } // Add a clip and rotate clip: c; rotate: 90; }

45

Deployment Basics

46

Java SE 6 Update 10

• Unification of Java Web Start and applets > Ground-up rewrite of the support for applets in the web

browser > Applets are no longer executed in a Java virtual machine (JVM) inside the web browser > Instead, a separate JVM process is launched to execute the applets > By default, only one JVM is launched > Same resource consumption and sharing properties as the “classic” Java Plug-In

> Opportunity to launch more than one JVM > To support per-applet command-line arguments, heap size requests, and more

47

HelloWorld.jnlp <jnlp href="HelloWorld.jnlp"> ... <j2se version="1.6+" href= "http://java.sun.com/products/autodl/j2se" /> <jar href="HelloWorld.jar" main="true" /> <jar href="javafxrt.jar" /> <jar href="javafxgui.jar" /> <jar href="Scenario.jar" />

48

TestApplet.fx import javafx.gui.*; Application { content: Canvas { background: Color.BLACK content: [ Rectangle { width: 50 height: 50 fill: Color.CRIMSON }, Text { content: "Hello World" x: 25 y: 35 fill: Color.WHITE font: Font { size:32 } } ] } }

49

test.jnlp (applet) <jnlp href="test.jnlp"> ... <j2se version="1.6+" href= "http://java.sun.com/products/autodl/j2se" /> <jar href="TestApplet.jar" main="true" /> <jar href="javafxrt.jar" /> <jar href="javafxgui.jar" /> <jar href="Scenario.jar" /> 50

test.html

FX Script Applet Test

<param name="jnlp_href" value="test.jnlp"> <param name="ApplicationClass" value="TestApplet"> 51

Summary • We have learned how to Develop Java FX applications > > > >

Use the JavaFX SDK Work with NetBeans IDE Use JavaFX Script projects Integrate SceneGraph, Animation and media

• Deploy Java FX applications > as JNLP > as applets 52

For More Information • http://openjfx.dev.java.net • http://javafx.netbeans.org

53

Thank You! Raghavan “Rags” N. Srinivas [email protected] Sun Microsystems 54 54