JavaFX - Next Generation Java UI

1,501 views

Published on

JavaFX introduction + What's new in Java 6 Update 10.
Presented at JavaEdge 2008 by Yoav Aharoni

Published in: Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,501
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • מי שעבד
  • When saying UI Applications we mostly mean Desktop and RIA Applications.
  • Why the JavaFX Platform?
    Developers are seeking the most efficient way of creating RIAs across all screens. They need to build high-fidelity GUI's that operate seamlessly on multiple Web browsers, operating systems and devices, without having to port or rewrite their applications for each screen. To meet this goal, developers need to work efficiently with team members such as graphics designers and media authors to exchange audio, video and other rich media assetsThe JavaFX 1.0 platform introduces an essential set of tools and technologies that enable developers and designers to collaborate, create, and deploy RIAs to browsers and desktops. In addition, mobile application developers can use the JavaFX 1.0 Mobile Emulator Beta Release to preview development of mobile RIAs using the JavaFX platform.
    Key features of the JavaFX 1.0 platform include:
    One-stop shop RIA platform for all screens: Build engaging visual experiences across desktop, browser and mobile with a unified development and deployment model.
    Broadest market reach: Distribute RIAs easily across billions of devices with the power of Java.
    Designer-developer workflow: Dramatically shorten your production cycle for design and development.
    Powerful runtime: Leverage the extreme ubiquity, power, performance and security of the Java runtime.
    Break free from the browser: Drag-and drop a JavaFX application from the browser to deploy to the desktop.
    Java technology compatibility: Preserve your investment by enabling the use of any Java library within a JavaFX application.
  • Java
  • First off, this is what JavaFX is not.
    JavaFX is not Java, that is, it runs on the Java Platform, but it is not a sub or superset of the Java Programming Language proper. JavaFX has its own distinct grammar. In fact there are several “What the???”s to be aware of coming from Java (e.g. Java’s “void” vs. JavaFX’s capital “Void” , support for multiple inheritance, and some odd placements of the semicolon).
    While JavaFX is a scripting language, it is not a dynamic language, like Groovy. JavaFX is statically typed and compiled, and in this respect it is no more dynamic than Java.
    JavaFX is not part of the Java EE family, but rather a client-side technology. This may seem obvious, but although JavaFX is frequently compared to Web technologies, it is more closely related to the Standard Edition of Java. So in this respect JavaFX has more in common with applets and desktop applications than Servlets, and JSPs.
  • Cross platform: desktop, web, mobile
    Runs on JVM – performance
    ActionScript is limited to the Flash Development model
    utilize the new Java browser plug-in (you’ll see later why it’s an advantage).
    Reuse any Java code already out there – and you love java – write your model in java – resuse swing components.
    Import and reuse any Java code you already have.
    Use Java as backend.
    Reuse any awt/swing/2d/3d components you already have.
    Renders as Swing & Java 2D
  • Cross platform: desktop, web, mobile
    Runs on JVM – performance
    ActionScript is limited to the Flash Development model
    utilize the new Java browser plug-in (you’ll see later why it’s an advantage).
    Reuse any Java code already out there – and you love java – write your model in java – resuse swing components.
    Import and reuse any Java code you already have.
    Use Java as backend.
    Reuse any awt/swing/2d/3d components you already have.
    Renders as Swing & Java 2D
  • Cross platform: desktop, web, mobile
    Runs on JVM – performance
    ActionScript is limited to the Flash Development model
    utilize the new Java browser plug-in (you’ll see later why it’s an advantage).
    Reuse any Java code already out there – and you love java – write your model in java – resuse swing components.
    Import and reuse any Java code you already have.
    Use Java as backend.
    Reuse any awt/swing/2d/3d components you already have.
    Renders as Swing & Java 2D
  • Utilize the new Java browser plug-in
    Cross platform: desktop, web, mobile
    Runs on JVM – performance
    ActionScript is limited to the Flash Development model
    utilize the new Java browser plug-in (you’ll see later why it’s an advantage).
    Reuse any Java code already out there – and you love java – write your model in java – resuse swing components.
    Import and reuse any Java code you already have.
    Use Java as backend.
    Reuse any awt/swing/2d/3d components you already have.
    Renders as Swing & Java 2D
  • JavaFX Pad (small demo JavaFx interpreter)
    Project Nile:
    Plugins for Adobe Illustrator and Adobe Photoshop
    SVG to JavaFX converter
    Viewer
  • JavaFX Pad (small demo JavaFx interpreter)
    Project Nile:
    Plugins for Adobe Illustrator and Adobe Photoshop
    SVG to JavaFX converter
    Viewer
  • http://javafx.com/releases/preview1/docs/reference/ch10.html
    Examples:
    http://java.sun.com/javafx/
    https://openjfx.dev.java.net/
  • צביקה פיק
  • Nimbus - http://javadesktop.org/swinglabs/demos/nimbus/nimbus.jnlp
    (still a bit buggy)
  • Nimbus - http://javadesktop.org/swinglabs/demos/nimbus/nimbus.jnlp
    (still a bit buggy)
  • Supports Internet Explorer 6 and 7 on Windows XP and Vista, Firefox 3 on Windows XP, Windows Vista, Solaris and Linux
    Doesn’t support Firefox 2.
    Improved Java/JavaScript communication
    New LiveConnect Specification
    Per-applet command-line
    Possible to use different JRE versions, command-line arguments, and configurations to run different applets (java_arguments and java_version)
    Diff heap size
    Multiple JRE version support
    Easy jre detection
    Improved reliability
    Can kill plugin without effecting browser.
  • Java Deployment Toolkit
    The Java Deployment Toolkit makes deploying Java applets or Java Web Start programs a snap. The Deployment Toolkit JavaScript file provides:
    Accurate detection of installed JREs
    Seamless JRE installation
    Complete applet launching (JRE detection and, if necessary, upgrading) in a single line of code
    Complete Web Start program launching in a single line of code
  • JavaFX - Next Generation Java UI

    1. 1. Java UI - Next Generation Yoav Aharoni December 18th 2008
    2. 2. 2 SoWhat Does the Future Holds? • Basically, everything just got better: • A better way to write UI applications. • A better way to run and deploy UI applications.
    3. 3. JavaFX A Better Way to Write UI Applications (And it’s cool too!!)
    4. 4. 4 Why make things better? • Frankly, java UI as it is today has a lot to improve. • Things you’ll never hear from a UI developer:  “Writing UI is so easy and fun!"  “I like writing swing applications ”
    5. 5. 5 Other RIA Players • Other Players got that point. • Key players in RIA arena are:  Adobe AIR, Flex, Flash  Microsoft SilverLight  OpenLaszlo RIA is Rich Internet Applications RIA is Rich Internet Applications
    6. 6. 6 Enter the Dragon • And Now a new Player is coming:  Sun’s JavaFX
    7. 7. 8 JavaFX Script • The main thing about JavaFX is the way you write your code, Introducing:  JavaFX Script – a new scripting language designed especially for UI needs.
    8. 8. 9 JavaFX • Actually it’s more than that: It’s a family of products for creating rich internet applications. ToolsTools Stuff you can do Stuff you can do Runs on JVM Runs on JVM
    9. 9. 10 JavaFX Script IS NOT... • JavaFX is not Java. • JavaFX is not a dynamic language (unlike Groovy). • JavaFX is not part of the Java EE. • JavaFX doesn’t replace JavaScript and HTML.
    10. 10. 11 JavaFX Script IS • JavaFX Script is: • A scripting language • DSL aimed at coding UI • Statically typed • Object-oriented • With global variables • Declarative Uses a scene graph model Uses a scene graph model
    11. 11. 12 Some History • Developed by Chris Oliver • Announced at JavaOne 2007 • Formerly known as F3 (Forms Follow Function) • SDK Released at December 4, 2008
    12. 12. 13 Advantages over other players • It’s Open Source • Runs on JVM  Cross platform  Reuse any Java code already out there.  Performance. Which just got even better... Which just got even better...
    13. 13. 14 Advantages over other players • It’s Open Source • Runs on JVM  Cross platform  Reuse any Java code already out there.  Performance. Chris Oliver measured: • Statically typed ActionScript outperformed by a factor of 12 • Dynamically typed ActionScript outperformed by a factor of 65. Chris Oliver measured: • Statically typed ActionScript outperformed by a factor of 12 • Dynamically typed ActionScript outperformed by a factor of 65.
    14. 14. 15 Advantages over other players • It’s Open Source • Runs on JVM  Cross platform  Reuse any Java code already out there.  Performance. JavaOne 2006 statistics: • ~300,000,000 java downloads • Installed on over 60% of PC. JavaOne 2006 statistics: • ~300,000,000 java downloads • Installed on over 60% of PC.
    15. 15. 16 Advantages over other players • Utilize the new Java browser plug-in. • DesignerTools • SDK and IDE plug-ins • Built-inVideo & Audio Support • Cool language features Got better...Got better... Remember? A better way to write UI applications... Remember? A better way to write UI applications...
    16. 16. 17 Disadvantages • Still in it’s early stages.  Communities and libraries are only just starting.  Plug-ins still buggy and not fully featured. • Client-Side solution only. J2EE technology needed for backend.
    17. 17. 18 Currently AvailableTools • JavaFX SDK 1.0 • OpenJFX Compiler • IDE Plug-ins:  Netbeans  Eclipse  IntelliJ IDEA (Currently not a good one) • JavaFX Pad Javafx Javafxc Javafxdoc Javafxpackager emulator Javafx Javafxc Javafxdoc Javafxpackager emulator
    18. 18. 19 Currently AvailableTools • JavaFX SDK 1.0 • OpenJFX Compiler • IDE Plug-ins:  Netbeans  Eclipse  IntelliJ IDEA (Currently not a good one) • JavaFX Pad
    19. 19. 20 Currently AvailableTools • DesignerTools:  JavaFX Production Suite  Inkscape JavaFX Module  JavaFX Builder • Libraries:  WidgetFX  JFXtras Aka Project Nile Aka Project Nile
    20. 20. Cool JavaFX Features Better UI applications
    21. 21. 22 JavaFX:The Cool Stuff Attributes • An attribute is a variable that is associated with an object • Declared using the “var” keyword • Access Modifiers: protected, public, package, public-init, public- read class Person { var key: Number; public var name: String; public-init var parent: Person; public var children: Person; } class Person { var key: Number; public var name: String; public-init var parent: Person; public var children: Person; }
    22. 22. 23 JavaFX:The Cool Stuff Objects Literals • Member variables are initialized explicitly • Object literals can be nested class Point { var x: Number; var y: Number; } var pointA = Point { x: 3, y: 4 }; def ZERO_POINT = Point { x: 0, y: 0 }; class Point { var x: Number; var y: Number; } var pointA = Point { x: 3, y: 4 }; def ZERO_POINT = Point { x: 0, y: 0 };
    23. 23. 24 JavaFX:The Cool Stuff Declarative GUI ... Stage { title: "Example" width: 500 height: 300 scene: Scene { content: Text { x: 100, y: 126 content: "Hello, World." font: Font { size: 48 } } } } ... Stage { title: "Example" width: 500 height: 300 scene: Scene { content: Text { x: 100, y: 126 content: "Hello, World." font: Font { size: 48 } } } }
    24. 24. 27 JavaFX:The Cool Stuff Reuse Java and Swing • Import any java classes • Use SwingComponent.wrap to wrap any swing component. import javafx.ext.swing.*; var map = SetupMap.create(); map.setPreferredSize(new java.awt.Dimension(400,300)); var mapComp = SwingComponent.wrap(map); import javafx.ext.swing.*; var map = SetupMap.create(); map.setPreferredSize(new java.awt.Dimension(400,300)); var mapComp = SwingComponent.wrap(map); Show Demo
    25. 25. 28 JavaFX:The Cool Stuff Arrays: SequenceTypes • All types can be elements in a sequence • Sequence of sequences is not supported • Sequences cannot hold null elements var points: Point[]; // sequence of Point var funcs: function()[] = [function() { println("Hi") }]; // sequence of function() var points: Point[]; // sequence of Point var funcs: function()[] = [function() { println("Hi") }]; // sequence of function()
    26. 26. 29 JavaFX:The Cool Stuff Sequence Manipulations • Use insert, delete and reverse to manipulate content var nums = [1, 4, 2, 8, 5, 7]; insert 10 into nums; // [ 1, 4, 2, 8, 5, 7, 10 ] insert 20 before nums[2]; // [ 1, 4, 20, 2, 8, 5, 7, 10 ] insert 30 after nums[5]; // [ 1, 4, 20, 2, 8, 5, 30, 7, 10 ] delete 8 from nums; // [ 1, 4, 20, 2, 5, 30, 7, 10 ] delete nums[3]; // [ 1, 4, 20, 5, 30, 7, 10 ] delete nums[1..4]; // [ 1, 7, 10 ] var seq = [1 2 3]; var qes = reverse seq; println(seq); // => [ 1, 2, 3 ] println(qes); // => [ 3, 2, 1 ] var nums = [1, 4, 2, 8, 5, 7]; insert 10 into nums; // [ 1, 4, 2, 8, 5, 7, 10 ] insert 20 before nums[2]; // [ 1, 4, 20, 2, 8, 5, 7, 10 ] insert 30 after nums[5]; // [ 1, 4, 20, 2, 8, 5, 30, 7, 10 ] delete 8 from nums; // [ 1, 4, 20, 2, 5, 30, 7, 10 ] delete nums[3]; // [ 1, 4, 20, 5, 30, 7, 10 ] delete nums[1..4]; // [ 1, 7, 10 ] var seq = [1 2 3]; var qes = reverse seq; println(seq); // => [ 1, 2, 3 ] println(qes); // => [ 3, 2, 1 ]
    27. 27. 30 JavaFX:The Cool Stuff Range expression • Explicit sequence – for every type • Range – only for numeric • Uninitialized: empty sequence [ ] var oneTwoThree = [1, 2, 3]; // => [ 1 2 3 ] var oneToTen = [1..10]; // => [ 1 2 3 4 5 6 7 8 9 10 ] var oneToNine = [1..<10]; // => [ 1 2 3 4 5 6 7 8 9 ] var odds = [1..10 step 2]; // => [ 1 3 5 7 9 ] var reversed = [5..1 step -1]; // => [ 5 4 3 2 1 ] var oneTwoThree = [1, 2, 3]; // => [ 1 2 3 ] var oneToTen = [1..10]; // => [ 1 2 3 4 5 6 7 8 9 10 ] var oneToNine = [1..<10]; // => [ 1 2 3 4 5 6 7 8 9 ] var odds = [1..10 step 2]; // => [ 1 3 5 7 9 ] var reversed = [5..1 step -1]; // => [ 5 4 3 2 1 ]
    28. 28. 31 JavaFX:The Cool Stuff Built-in “Queries” • “in” clauses – iteration specifications used in “for” expressions • Can have “where” clauses that constrain the selection var xs = [0..2]; var ys = [0..2]; var ps = for (x in xs, y in ys where x*x+y*y <= 4) { Point { x: x, y: y } }; // => [ P(0,0), P(0,1), P(0,2), P(1,0), P(1,1), P(2,0) ] var xs = [0..2]; var ys = [0..2]; var ps = for (x in xs, y in ys where x*x+y*y <= 4) { Point { x: x, y: y } }; // => [ P(0,0), P(0,1), P(0,2), P(1,0), P(1,1), P(2,0) ] var nums = [1..5]; var numsGreaterThanTwo = nums[n | n > 2]; var nums = [1..5]; var numsGreaterThanTwo = nums[n | n > 2];
    29. 29. 32 JavaFX:The Cool Stuff String Parameters Replacement • JavaFX expressions may be embedded using { } • The embedded expression may itself contain quoted strings var name = 'Joe'; var s = "Hello {name}"; // s = ‘Hello Joe’ var answer = true; // s = 'The answer is Yes' var s = "The answer is {if answer then ‘Yes’ else ‘No’}"; var name = 'Joe'; var s = "Hello {name}"; // s = ‘Hello Joe’ var answer = true; // s = 'The answer is Yes' var s = "The answer is {if answer then ‘Yes’ else ‘No’}";
    30. 30. 33 JavaFX:The Cool Stuff Function as parameter / Closures function visit(nodes:Object[], visitNode:function(Object):Void):Void { for (node in nodes) { visitNode(node); } } // print nodes => 1 2 3 visit([1, 2, 3], function(node) { print(" {node} ") }); function visit(nodes:Object[], visitNode:function(Object):Void):Void { for (node in nodes) { visitNode(node); } } // print nodes => 1 2 3 visit([1, 2, 3], function(node) { print(" {node} ") });
    31. 31. 34 JavaFX:The Cool Stuff Data Binding • Change value of a variable when its binding changes • Similar to listener / observer pattern • Can be bi-directional var x = 10; var y = bind x; println(" x = {x}, y = {y}"); // => x = 10, y = 10 x = 20; println(" x = {x}, y = {y}"); // => x = 20, y = 20 var x = 10; var y = bind x; println(" x = {x}, y = {y}"); // => x = 10, y = 10 x = 20; println(" x = {x}, y = {y}"); // => x = 20, y = 20 var x = 10; var y = bind x with inverse; y = 20; println(" x = {x}"); // => x = 20 var x = 10; var y = bind x with inverse; y = 20; println(" x = {x}"); // => x = 20
    32. 32. 35 JavaFX:The Cool Stuff Data Binding - continued • Right-hand side of a binding can be an arbitrary expression • An automatic update of the left-hand variable is triggered if any of the variables mentioned in the right-hand side expression is changed var x = 1; var y = 2; // z is updated when x or y change var z = bind x * x + y * y; // w is updated when x or y change var w = bind sumOfSquares(x, y); var x = 1; var y = 2; // z is updated when x or y change var z = bind x * x + y * y; // w is updated when x or y change var w = bind sumOfSquares(x, y);
    33. 33. 37 JavaFX:The Cool Stuff Triggers • A replace trigger is automatically executed when the variable is assigned another value var password = "foo" on replace oldValue { println("nALERT! Password has changed!"); println("Old Value: {oldValue}"); println("New Value: {password}"); }; password = "bar"; var entries = [1] on replace oldValue[idxA..idxB] = newElement { println("replaced {oldValue} at {idxA} with {entries[idxA]}"); }; var password = "foo" on replace oldValue { println("nALERT! Password has changed!"); println("Old Value: {oldValue}"); println("New Value: {password}"); }; password = "bar"; var entries = [1] on replace oldValue[idxA..idxB] = newElement { println("replaced {oldValue} at {idxA} with {entries[idxA]}"); };
    34. 34. 38 JavaFX:The Cool Stuff • CoolTypes:  Duration  KeyValue var age :Duration = 5ms;var age :Duration = 5ms; values: [ scale => -1.0 tween Interpolator.EASEBOTH color => Color.GREEN ] values: [ scale => -1.0 tween Interpolator.EASEBOTH color => Color.GREEN ]
    35. 35. 40 JavaFX:The Cool Stuff Animation // declare variables var scale = 1.0; var color = Color.YELLOW; // create timeline Timeline { repeatCount: Timeline.INDEFINITE keyFrames: [ KeyFrame { time: 3s values: [ scale => -1.0 tween Interpolator.EASEBOTH color => Color.WHITE ] } } // declare variables var scale = 1.0; var color = Color.YELLOW; // create timeline Timeline { repeatCount: Timeline.INDEFINITE keyFrames: [ KeyFrame { time: 3s values: [ scale => -1.0 tween Interpolator.EASEBOTH color => Color.WHITE ] } }
    36. 36. 41 What more you can do with it • See JavaFX.com for more demos
    37. 37. JavaFX Mobile Just a few words...
    38. 38. 43 JavaFX Mobile • Mobiles are still the most ubiquitous application platform. • Over 1.8 billion mobile phones • Other embedded devices
    39. 39. 44 The MSA Stack (JSR 248 & 249) JSR 177 Security & Trust services JSR 229 Payments Security & Commerce JSR 135 Mobile Media JSR 184 3D Graphics JSR 226 SVG JSR 234 Multimedia Supplements Graphics JSR 238 Mobile I18n JSR 172 Web Services JSR 211 Content Handler Application Connectivity JSR 120 SMS JSR 82 Bluetooth JSR 205 MMS JSR 180 SIP Comms JSR 75 PIM & File JSR 179 Location Personal Information JSR 118, 271 MIDP JSR 248 MSA clarifications JSR 139 CLDC Environment JSR 218 CDC 44
    40. 40. 45 JavaFX Mobile Overview FrameworksFrameworks Application APIs UI Toolkit Application Manager Advanced Graphics Engine Telephony Framework Multimedia Framework Software Update Security Framework System Libraries Java VM ApplicationsApplications Messaging Browser Media Player PIM & Phone Apps Native OSNative OS Low-Level Services & Libraries Linux Kernel 45
    41. 41. 46 Run and deploy UI applications. • So we can build great UI applications with JavaFX. • What about deployment at the client? • As before: using Applets and Web Start Applications • Only better! Applets Resurrected
    42. 42. A better way to run and deploy UI applications. * Java 6 Update 10 *
    43. 43. 48 Java 6 Update 10 • More new features than in any previous Java update release
    44. 44. 49 Java 6 Update 10 • Faster FirstTime Installation:  Smaller download size  Faster installation Java Kernel Online Installer
    45. 45. 50 Java 6 Update 10 • Better Performance:  Java Quick Starter  Windows uses DirectX (9) • Better Updates:  Patching • New “Nimbus” Look and Feel • Much Better Browser Plug-in
    46. 46. 51 Java 6 Update 10 • Better Performance:  Java Quick Starter  Windows uses DirectX (9) • Better Updates:  Patching • New “Nimbus” Look and Feel • Much Better Browser Plug-in
    47. 47. 52 New Java Browser Plug-in • Improved reliability • Improved Applet/JavaScript communication • Access DOM of containing page • Drag n’ drop support • JNLP support
    48. 48. 53 New Java Browser Plug-in • Per-applet command-line arguments • Multiple JRE version support • Better large heap support • DeploymentToolkit • Loading Screen image • Cross-Domain XML Support
    49. 49. JavaFX It will change your lives...  Thank You 
    50. 50. 55 Reference • JavaFX  www.javafx.com  www.sun.com/software/javafx/  java.sun.com/javafx/  openjfx.dev.java.net/  jfx.wikia.com/  learnjavafx.typepad.com/ - James Weaver’s Blog  blogs.sun.com/ChrisOliver/ - Chris Oliver's Blog  widgetfx.org/  code.google.com/p/jfxtras/ • Java 6 Update 10  java.sun.com/developer/technicalArticles/javase/java6u10/  java.sun.com/javase/6/webnotes/6u10.html • Jake2 - bytonic.de/html/jake2.html
    51. 51. 56 PlayTime!

    ×