• Save
JavaFX 1.0 SDK Aquarium Paris
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

JavaFX 1.0 SDK Aquarium Paris

on

  • 2,949 views

Java FX 1.0 SDK Presentation by Rich Bair, Jasper Potts, and Martin Brehovsky in Paris on December 12, 2008

Java FX 1.0 SDK Presentation by Rich Bair, Jasper Potts, and Martin Brehovsky in Paris on December 12, 2008

Statistics

Views

Total Views
2,949
Views on SlideShare
2,904
Embed Views
45

Actions

Likes
0
Downloads
0
Comments
0

1 Embed 45

http://blogs.sun.com 45

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

JavaFX 1.0 SDK Aquarium Paris Presentation Transcript

  • 1. JavaFX™ 1.0 SDK
  • 2. About the Speakers • Martin lead the team responsible for the JavaFX Production Suite • Richard is one of the API leads for JavaFX SDK • Jasper is one of the key engineers on the JavaFX SDK
  • 3. JavaFX is for graphical Java applications across all devices.
  • 4. Agenda • Introduction to JavaFX • (Brief) JavaFX Script • Scene Graph • Animations and Transitions • Q &A
  • 5. Introduction to JavaFX™ • Common APIs across devices • Scales from small devices to powerful desktops • Brings rich media and graphical APIs to Java • Simplifies building graphical consumer and enterprise applications
  • 6. JavaFX Script • Expression language • Declarative and Procedural • Integrates with Java • Loosely based on JavaScript
  • 7. JavaFX Script Explained • JavaFX Script source files are called “scripts” • Everything* in JavaFX Script is an expression • All blocks are expressions • The last line is the result
  • 8. Primitive Data Types • Boolean • Integer • Number • String • Duration • Primitives cannot be null*
  • 9. Declaring Sequences // A sequence of one can omit the brackets var names:String[] = “Richard”; // Empty sequences are not null var names:String[]; println(sizeof names); // prints 0 // elements are accessed by index var names = [“Jasper”, “Richard”, “Martin”]; var martin = names[2]; // and you can populate a sequence using a for loop var hellos = for (i in [1..3]) { “Hello #{i}” }
  • 10. Modifying Sequences // Inserting items into a sequence var names:String[] = “Richard”; insert “Jasper” into names; // Inserting before a certain index insert “Martin” before names[1]; // Inserting after a certain index insert “Duke” after names[1]; // Deleting from the sequence delete “Duke” from names;
  • 11. Operators • +-/* • ++ -- • *= /= += -= • and or not • = == != • mod
  • 12. Flow Control • if ( booleanExpression) • for (i in sequence) { ... } then a else b • Can get index of item • if (booleanExpression) a “i” by “indexof i” else b • break • if (booleanExpression) { a } else { b } • continue • while (booleanExpression) { ... }
  • 13. Bind • bind is a way to tie the • bound variables cannot be value of one variable to set manually the value of an expression • binding must be defined when the variable is initialized • bindings are statically compiled
  • 14. JavaFX Objects public class Distance extends { public var x1:Number; public var x2:Number; // Whenever x2 or x1 changes, distance will be updated // Binding can be used for invariants public-read var distance:Number = bind x2 - x1; }
  • 15. Object Literals • Concise declarative syntax for object creation • Similar to JavaScript • Combine with binding for maximum effect • variable: initial-value • initial-value is an expression
  • 16. Object Literal // creates a Rectangle // x: 10 is not an assignment, it is an initialization! var rect = Rectangle { x: 10 y: 10 width: 100 height: 100 }
  • 17. Nested Literals // creates a Rectangle with a Color for its fill var rect = Rectangle { x: 10 y: 10 width: 100 height: 100 fill: Color { red: 1 green: 0 blue: 0 } }
  • 18. Variables and Literals // A variation that allows me to reference the color later var color:Color; var rect = Rectangle { x: 10 y: 10 width: 100 height: 100 fill: color = Color { red: 1 green: 0 blue: 0 } }
  • 19. Scene Graph • Describes the graphics • Graph is set on a Scene and controls in a scene • Scene is set in a Stage • Each node in the graph has a single parent • Special “group” nodes have zero or more children • “leaf” nodes have no children
  • 20. Scene Graph Group Circle Group Line Rect
  • 21. Scene • Canvas upon which the Scene Graph is displayed • Can set multiple CSS Stylesheets • Can set background color (or set to null) • Can set canvas width / height
  • 22. Stage • Top-level container for • JFrame on desktop the scene • JApplet on web page • Contains only one Scene • SVG player on mobile • Can set Stage width / height • Potentially represented by:
  • 23. Custom Node • Primary method of Scene Graph encapsulation • All other nodes are not extendable • Simply override the create() method
  • 24. Shapes - Building Blocks • Arc • Rectangle • Circle • stroke • Ellipse • strokeWidth • Line • fill • Path • smooth • Polygon
  • 25. Create an App (part 1)
  • 26. Colors • Colors • Color.rgb(128, 222, 21) • 150+ built in colors (all the HTML & CSS built in values) • Color.web(“#aabbcc ”) • Color.web(“blue”)
  • 27. Linear Gradients • startX, startY, endX, • Has an offset endY between 0...1 • Define the direction • Has a Color of the gradient • On the unit square • Stops define each step in the gradient. Each stop
  • 28. Create an App (part 2)
  • 29. Images • ImageView node shows • Preserve ratio images • Fit within a specific • Image represents an in width/height memory Image • When fit on Image • Image can load images level, keeps smaller in FG thread or BG image in memory thread • Both ImageView and Image can scale
  • 30. Create an App (part 3)
  • 31. Text • x, y, TextOrigin • Supports multiline text • By default, text • Use alignment to align positioned such that multiline text (x, y) is left baseline • To center text, • Fonts can be specified compute the center via on Text layout bounds • Favor “fill” over “stroke”
  • 32. Text Box • Used for text input • “action” function is invoked when ENTER • Use CSS to style the pressed TextBox • “columns” specifies the • “text” is changed to preferred width based on the font size and reflect the actual text in the TextBox number of characters to display • “value” is changed when the text is “committed” via ENTER, TAB, etc
  • 33. Effects • Effects are placed on • Reflection Nodes • more... • Many standard built in • DropShadow • ColorAdjust • GaussianBlur • Glow
  • 34. Create an App (part 4)
  • 35. Media • JavaFX supports both visual • MediaView is the Node which and audio media displays the Media • Cross platform JavaFX Media • No built in Movie playing file (fxm, mp3) Control • Also plays native formats (mov, wmv) • Media class represents a media file • MediaPlayer plays a Media file
  • 36. Animation • Animation is a key • Transitions feature of every rich graphics application platform • There are two supported animation types in JavaFX • Keyframe Animations
  • 37. Keyframe Animation • A general purpose • tween keyword and animation mechanism custom interpolators for JavaFX • Long sytax vs short • Uses a concept of a syntax timeline and keyframes specifying values at given times • autorepeat + autoreverse behavior • Built in the language • Actions syntax - can animate any variable • Nested timelines
  • 38. Transitions • “Precanned”, single • Parallel purpose animations • Sequential • Translation/Rotation/ Scale/Fade • Pause Transition • “by” values • Animation along a path • • Containers:
  • 39. Create an App (part 5)
  • 40. JavaFX provides APIs for building creative applications
  • 41. JavaFX will be updtaed regularly and quickly
  • 42. 1.1 release Februrary 2009 1.5 release June 2009
  • 43. JavaFX 1.0 Production Suite for professional graphics
  • 44. Try JavaFX Today!
  • 45. javafx.com