50
1 JavaFX: Incorporating Media and animation Raghavan N. Srinivas Technology Evangelist Sun Microsystems, Inc.

Java Fx Ajaxworld Rags V1

Embed Size (px)

Citation preview

Page 1: Java Fx Ajaxworld Rags V1

1

JavaFX: Incorporating Media and animation

Raghavan N. SrinivasTechnology EvangelistSun Microsystems, Inc.

Page 2: Java Fx Ajaxworld Rags V1

2

> Rags●CTO, Technology Evangelism●Developing and deploying Java apps. for a decade

(trying to anyway)●HOL track lead for JavaOne; Author of JavaFX

HOL for JavaOne 2007 and 2008

Speaker

Page 3: Java Fx Ajaxworld Rags V1

3

Agenda• JavaFX Platform Overview• JavaFX Script Language features

> Binding> Animation> Media> JavaFX Script from Java

• Java SE 6 update 10 and Deployment basics• Tools, Summary and References

Page 4: Java Fx Ajaxworld Rags V1

4

JavaFX Vision

JavaFX is THE platform for creating and delivering Rich Internet Applications

across all the screens of your life

JavaFX is Powered by Java

Page 5: Java Fx Ajaxworld Rags V1

5

JavaFX roadmap

JavaFX Desktop(Fall 2008)

JavaFX Mobile(Spring 2009)

JavaFX TV(Summer 2009)

Desktop Product Line

Mobile Product Line

TV Product Line

Other Platforms With Partner platforms/OSs

Page 6: Java Fx Ajaxworld Rags V1

6

JavaFX Script Programming Language

• Declarative, statically-typed scripting language• Facilitates rapid GUI development• Many cool, interesting language features • Runs on Virtual Machine for the Java™ platform• Deployment options same as Java programs• Fully utilizes Java class libraries behind the scenes• For content designers and Media engineers• binding – the swiss army knife

Page 7: Java Fx Ajaxworld Rags V1

7

Timing, Jgoodies Framework

public ControlPanel(AnimationView animationView) { this.animationView = animationView; setLayout(new GridBagLayout()); intFormat = NumberFormat.getNumberInstance(); intFormat.setParseIntegerOnly(true); doubleFormat = NumberFormat.getNumberInstance(); setupCycleGUI(); setupEnvelopeGUI(); setupPropertySetterGUI(); setupAccelerationGUI(); setupActionsGUI(); // Animation View JPanel panel = new JPanel(new BorderLayout()); panel.add(animationView); ... }

Page 8: Java Fx Ajaxworld Rags V1

8

JavaFX code : Animation for everyone elsevar 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] } ]};

Page 9: Java Fx Ajaxworld Rags V1

9

How to get started: Software Requirements

• Java SE 6 Update 10 SDK• NetBeans IDE 6.1 with JavaFX Plugin OR pre-

bundled NetBeans IDE 6.1 with JavaFX• JavaFX Preview SDK (Already bundled with the

plugin)• Mozilla Firefox 3, Safari, Internet Explorer or

Google Chrome

Page 10: Java Fx Ajaxworld Rags V1

10

NetBeans IDE 6.1

• JavaFX Plugin for NetBeans IDE 6.1 OR pre-bundled NetBeans IDE 6.1 for JavaFX> Support development cycle

●edit, compile, run, test> JavaFX project system> Includes automatic installation of JavaFX Preview SDK

Page 11: Java Fx Ajaxworld Rags V1

11

Components – JavaFX Preview SDK

/docs

/libjavafxc.jarjavafxrt.jarjavafxgui.jar

javafx-swing.jarScenario.jar

Decora-D3D.jarDecora-HW.jar

jmc.jarjogl.jarjaxb*.jar

/samplesSmokeScreenSample

StopWatch

/binjavafxc.exejavafx.exe

Page 12: Java Fx Ajaxworld Rags V1

12

Command Line Development• 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● javafx Main

Page 13: Java Fx Ajaxworld Rags V1

13

Agenda• JavaFX Platform Overview• JavaFX Script Language features

> Binding> Animation> Media> JavaFX Script from Java

• Java SE 6 & Deployment Basics• Summary and References

Page 14: Java Fx Ajaxworld Rags V1

14

> Cause and Effect—Responding to change> The JavaFX Script 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

Binding in JavaFX Script

Page 15: Java Fx Ajaxworld Rags V1

15

import javafx.application.*;import javafx.ext.swing.*;

Frame { var a: String = "name"; title: "Hello World" width: 400 stage: Stage { content: ComponentView { component: BorderPanel { bottom: TextField { text: bind a with inverse} top: Label { text: bind "Hello {a}" } } } } visible: true}

Example: Binding in JavaFX Script

Page 16: Java Fx Ajaxworld Rags V1

16

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

Page 17: Java Fx Ajaxworld Rags V1

17

Agenda• JavaFX Platform Overview• JavaFX Script language features

> Binding> Animation> Media> JavaFX Script from Java

• Java SE 6 & Deployment basics• Summary and References

Page 18: Java Fx Ajaxworld Rags V1

18

Animation - javafx.animation.*

actioncanSkiptime

timelinesvalues

KeyFrame

TimeLineautoReverseINDEFINITEkeyFramesrepeatCountrunningtoggle

InterPolator

DISCRETEEASEBOTHEASEINEASEOUTLINEAR

Page 19: Java Fx Ajaxworld Rags V1

19

Animation• Timelines handles the animation in JavaFX • Timelines are first-class citizen in the language

along with the duration time constants (1s, 10s) • They can have one or more KeyFrames • Methods: start(), stop(), pause(), resume() • Properties: autoReverse, repeatCount, toggle • BigDeal: Timelines are nestable!

Page 20: Java Fx Ajaxworld Rags V1

20

Animationvar 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] } ]};

Page 21: Java Fx Ajaxworld Rags V1

21

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 :-))

Page 22: Java Fx Ajaxworld Rags V1

22

Animation Controlsvar 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(); } } ]};

Page 23: Java Fx Ajaxworld Rags V1

23

JavaFX Animation demo

Page 24: Java Fx Ajaxworld Rags V1

24

Agenda• JavaFX Platform Overview• JavaFX Script language features

> Binding> Animation> Media> JavaFX Script from Java

• Java SE 6 & Deployment basics• Summary and References

Page 25: Java Fx Ajaxworld Rags V1

25

Design Goals• Media Playback is of primary importance• Simple API: only a few lines of coded needed• Cross platform A/V format required• Native support also desirable

> “Mash ups”> Viewing local media

• Zero Configuration plug in support> Drop in format support

• Going beyond rectangular video> Support lightweight rendering> Integration with Scenegraph, FXScript, and 3D APIs

Page 26: Java Fx Ajaxworld Rags V1

26

Architectural Overview, JMC• Java Media Components

> JMediaPlayer●A JComponent that provides media playback

> JMediaPane●A JComponent that provided media playback

without UI controls> MediaProvider

●Low level media player > Media Class

●For getting information about the media– Tracks– Metadata

> Events and Exceptions

Page 27: Java Fx Ajaxworld Rags V1

27

Code Sample: Java Playerclass 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);

} ...

Page 28: Java Fx Ajaxworld Rags V1

28

Media - javafx.scene.media.*

mediaautoPlayvolumeREPEAT_FOREVER

MediaPlayer

MediasourceresolutionXresoultionY

MediaViewfullScreenmediaPlayercliprotatetransformeffect

Page 29: Java Fx Ajaxworld Rags V1

29

Media in JavaFX

• Media classes are part of javafx.scene.media 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

Page 30: Java Fx Ajaxworld Rags V1

30

Code Sample: JavaFX™ MediaPlayervar 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;}

Page 31: Java Fx Ajaxworld Rags V1

31

JavaFX Media demo

Page 32: Java Fx Ajaxworld Rags V1

32

Agenda• JavaFX Platform Overview• JavaFX Script language features

> Binding> Animation> Media> JavaFX Script from Java

• Java SE 6 & Deployment basics• Tools, Summary and References

Page 33: Java Fx Ajaxworld Rags V1

33

Code Sample: JavaFX™ from Java// evaluate the FX script

Object fxobject = scrEng.eval(script.toString()); // you could use the FXAdapter method// or use pure reflection

Method method= fxobject.getClass().getMethod("getJComponent");

JComponent component = (Jcomponent) method.invoke(fxobject); frame.add(component);

Page 34: Java Fx Ajaxworld Rags V1

34

Agenda• JavaFX Platform Overview• JavaFX Script language features

> Binding> Animation> Media> JavaFX Script from Java

• Java SE 6 & Deployment basics• Tools, Summary and References

Page 35: Java Fx Ajaxworld Rags V1

35

Consumer JRE

Project Hamburg

Java SE 6, Update X

Java SE 6, Update N

Java SE 6, Update 10

Page 36: Java Fx Ajaxworld Rags V1

36

• Java Quick Starter> Faster cold starts on most systems

• Java Kernel> Shorter download + install + launch times

• Deployment Toolkit> Simplifies using Java technology in a web browser

Features

Page 37: Java Fx Ajaxworld Rags V1

37

• “Coldstart” vs. “Warmstart”• Root problem:

> Large files + Disk access speed• Solution: QuickStarter

> Pre-warm the disk cache• Note: QuickStarter != running VM

> Smaller footprint, more targeted disk pages

Quickstarter

Page 38: Java Fx Ajaxworld Rags V1

38

• Java's not small> J2SE 5.0: 7.1 MB> Java SE 6: 10+ MB> rt.jar: 40+ MB on disk

• Lots of bits being moved around> Download, Unzip, Unpack200, Copying

• Solution: Java Kernel> Download only core dependencies first> Launch application> Download and install in the background

Install Time

Page 39: Java Fx Ajaxworld Rags V1

39

JRE sizes

Page 40: Java Fx Ajaxworld Rags V1

40

Look Mom! We Shrunk the JRE

Page 41: Java Fx Ajaxworld Rags V1

41

Architectural Overview

HTML-Webpage

Java Applet 1

Java Applet 2

Java Applet 3

Page 42: Java Fx Ajaxworld Rags V1

42

Architectural Overview

Thin Server JVM

Fat Client JVM 1

Fat Client JVM 2OS Process 1

OS Process 2

OS Process 3

Page 43: Java Fx Ajaxworld Rags V1

43

Applets Reloaded

• Ground-up rewrite of the Java Plug-In> Mostly in Java

• Advanced new architecture> Out-of-process execution

• Major benefits> Improved reliability> Support for larger Java heap sizes for applets> Better support for signed applets on Windows Vista> Support for per-applet JVM command-line arguments> Support for multiple simultaneous JRE versions

Page 44: Java Fx Ajaxworld Rags V1

44

Agenda• JavaFX Platform Overview• JavaFX Script Language features

> Binding> Animation> Media> JavaFX Script from Java

• Java SE 6 & Deployment basics• Tools, Summary and References

Page 45: Java Fx Ajaxworld Rags V1

45

Ajax and Java compared (for RIA)

Ajax

• Javascript-based• No plugins• Simple effects, transition

and windows• Does not work in

disconnected mode• Mobile phones?• Designer/Developer

delineation is blurred

• Java-based• Plugins required• Complex effects,

transition, windows• Can work in

disconnected mode• Plans for mobile phones• Designer/Developer

delineation can be clear

Java

Page 46: Java Fx Ajaxworld Rags V1

46

JavaFX Preview SDK

• JavaFX Preview SDK since 31st July 2008 > http://openjfx.java.sun.com > http://www.javafx.com> available for Windows and MacOS

• NetBeans 6.1 IDE and JavaFX Plugin > Available now and since 31st July 2008

• Desktop SDK 1.0 later this year• Project Nile

Page 47: Java Fx Ajaxworld Rags V1

47

Project Nile (Designer + Developer)

• Photoshop and Illustrator plugins

• FXD File Format

• FXD Viewer

• SVG Converter

• Designer / Developer Collaboration

Page 48: Java Fx Ajaxworld Rags V1

48

JavaFX Summary

• JavaFX is a Platform for creating rich internet applications (RIA) with immersive media and content, across all the screens of your life

• JavaFX has familiarity with Java developers aimed at designers

• Easier to write UI and Graphics programs• Timelines make animations very easy• Binding and other features make it easier• Possible to use JavaFX Script in Java• Java SE 6 update 10 is the deployment platform

Page 49: Java Fx Ajaxworld Rags V1

49

JavaFX References

• http://javafx.com/• https://openjfx.dev.java.net/• http://openjfx-compiler.dev.java.net • http://scenegraph.dev.java.net• http://java.sun.com/javafx/• http://java.sun.com/javafx/tutorials/project_nile_integrating_graphics/• http://openjfx.java.sun.com/current-build/doc/index.html • http://www.netbeans.org

Page 50: Java Fx Ajaxworld Rags V1

50

Thank You!!

Raghavan N. SrinivasIncorporating Media and animation into JavaFX and Java

[email protected]