Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Java Fx Ajaxworld Rags V1

2,922 views

Published on

Published in: Technology
  • Be the first to comment

Java Fx Ajaxworld Rags V1

  1. 1. JavaFX: Incorporating Media and animation Raghavan N. Srinivas Technology Evangelist Sun Microsystems, Inc. 1
  2. 2. Speaker > 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 2
  3. 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 3
  4. 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 4
  5. 5. JavaFX roadmap Desktop Product Line JavaFX Desktop (Fall 2008) Mobile Product Line JavaFX Mobile (Spring 2009) JavaFX TV TV Product Line (Summer 2009) Other Platforms With Partner platforms/OSs 5
  6. 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 6
  7. 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); ... } 7
  8. 8. JavaFX code : Animation for everyone else 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] } ] }; 8
  9. 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 9
  10. 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 10
  11. 11. Components – JavaFX Preview SDK /lib javafxc.jar /docs javafxrt.jar javafxgui.jar /bin javafx-swing.jar javafxc.exe Scenario.jar javafx.exe Decora-D3D.jar /samples Decora-HW.jar SmokeScreenSample jmc.jar StopWatch jogl.jar jaxb*.jar 11
  12. 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 12
  13. 13. Agenda • JavaFX Platform Overview • JavaFX Script Language features > Binding > Animation > Media > JavaFX Script from Java • Java SE 6 & Deployment Basics • Summary and References 13
  14. 14. Binding in JavaFX Script > 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 14
  15. 15. Example: Binding in JavaFX Script import javafx.application.*; import javafx.ext.swing.*; Frame { var a: String = quot;namequot;; title: quot;Hello Worldquot; width: 400 stage: Stage { content: ComponentView { component: BorderPanel { bottom: TextField { text: bind a with inverse} top: Label { text: bind quot;Hello {a}quot; } } } } visible: true } 15
  16. 16. More Binding Examples public class User { public attribute userid: String; public attribute password: String; } // Create sequence var users = [ User {userid: quot;ragsquot; password: quot;everestquot; }, User {userid: quot;sridharquot; password: quot;hyderabadquot; }, User {userid: quot;inyoungquot; password: quot;koreaquot; }, ]; // Bind list to sequence of users var list = List{items: bind for (user in users) ListItem {text: bind quot;{user.userid}quot;}}; 16
  17. 17. Agenda • JavaFX Platform Overview • JavaFX Script language features > Binding > Animation > Media > JavaFX Script from Java • Java SE 6 & Deployment basics • Summary and References 17
  18. 18. Animation - javafx.animation.* KeyFrame action TimeLine canSkip autoReverse InterPolator time INDEFINITE timelines keyFrames DISCRETE values repeatCount EASEBOTH running EASEIN toggle EASEOUT LINEAR 18
  19. 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! 19
  20. 20. 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] } ] }; 20
  21. 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 :-)) 21
  22. 22. Animation Controls var buttons = FlowPanel { content: [ Button { text: quot;Startquot; action: function():Void { t.start(); } }, Button { text: quot;Stopquot; action: function():Void { t.stop(); } }, Button { text: quot;Pausequot; action: function():Void { t.pause(); } } ] }; 22
  23. 23. JavaFX Animation demo 23
  24. 24. Agenda • JavaFX Platform Overview • JavaFX Script language features > Binding > Animation > Media > JavaFX Script from Java • Java SE 6 & Deployment basics • Summary and References 24
  25. 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 25
  26. 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 26
  27. 27. Code Sample: Java Player class MediaDemo extends JFrame { MediaDemo() { JmediaPlayer mediaPlayer; try { mediaPlayer = new JMediaPlayer( new URI(quot;movie.movquot;)); } catch (Exception e) { System.out.println(quot;Error opening mediaquot; + e); System.exit(0); } add(mediaPlayer); mediaPlayer.play(); setVisible(true); } ... 27
  28. 28. Media - javafx.scene.media.* MediaPlayer media Media autoPlay source MediaView volume resolutionX fullScreen REPEAT_FOREVER resoultionY mediaPlayer clip rotate transform effect 28
  29. 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 29
  30. 30. 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; } 30
  31. 31. JavaFX Media demo 31
  32. 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 32
  33. 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(quot;getJComponentquot;); JComponent component = (Jcomponent) method.invoke(fxobject); frame.add(component); 33
  34. 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 34
  35. 35. Consumer JRE Project Hamburg Java SE 6, Update X Java SE 6, Update N Java SE 6, Update 10 35
  36. 36. Features • 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 36
  37. 37. Quickstarter • “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 37
  38. 38. Install Time • 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 38
  39. 39. JRE sizes 39
  40. 40. Look Mom! We Shrunk the JRE 40
  41. 41. Architectural Overview Java Applet 1 Java Applet 2 HTML-Webpage Java Applet 3 41
  42. 42. Architectural Overview Fat Client JVM 1 OS Process 2 Thin Server JVM OS Process 1 Fat Client JVM 2 OS Process 3 42
  43. 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 43
  44. 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 44
  45. 45. Ajax and Java compared (for RIA) Ajax Java • Javascript-based • Java-based • No plugins • Plugins required • Simple effects, transition • Complex effects, and windows transition, windows • Does not work in • Can work in disconnected mode disconnected mode • Mobile phones? • Plans for mobile phones • Designer/Developer • Designer/Developer delineation is blurred delineation can be clear 45
  46. 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 46
  47. 47. Project Nile (Designer + Developer) • Photoshop and Illustrator plugins • FXD File Format • FXD Viewer • SVG Converter • Designer / Developer Collaboration 47
  48. 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 48
  49. 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 49
  50. 50. Thank You!! Raghavan N. Srinivas Incorporating Media and animation into JavaFX and Java rags@sun.com 50

×