• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Introduction into JavaFX
 

Introduction into JavaFX

on

  • 2,139 views

 

Statistics

Views

Total Views
2,139
Views on SlideShare
2,138
Embed Views
1

Actions

Likes
0
Downloads
0
Comments
0

1 Embed 1

http://www.linkedin.com 1

Accessibility

Categories

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

    Introduction into JavaFX Introduction into JavaFX Presentation Transcript

    • New and Cool: JavaFX Eugene Bogaart Solution Architect Sun Microsystems 1
    • 2
    • 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 3
    • A Basic Java GUI: Not Very Pretty 4
    • Samples • Vancouver Medal app • Simon's Book example • JavaFX Widget set 5
    • JavaFX Platform Architecture FX Applications Device FXScript Media Specific Core Scene runtime WebKit Players APIs APIs Graph Ad FX Player Media VM Compiler Installer Codecs Device OS 6
    • JavaFX Script Basics • Declarative, statically-typed scripting language • Facilitates rapid GUI development • Many cool, interesting language features • Runs on the Java Virtual Machine • Deployment options same as Java programs > Applet, Application, WebStart • Fully utilizes Java class libraries behind the scenes • For content designers and media engineers 7
    • Basic JavaFXScript Class Syntax is Java-like with shades of JavaScript class HelloWorldNode extends CustomNode { public var text:String; public override function create(): Node { return Text { x: 10, y: 50 font: Font { size: 50 } content: “Hello World” } }; } 8
    • Class Definition Address class definition: The Address class declares street, city, state, and zip instance variables all of type String class Address { var street: String; var city: String; var state: String; var zip: String; } 9
    • Declaring an Object Literal • In the JavaFX Script language, an object instance can be created with an object literal (unlike Java) • Example: The first word (Address) specifies the type of object, class, that you are creating. Address { street: "1 Main Street"; // separated by semi colons city: "Santa Clara"; state: "CA"; zip: "95050"; } 10
    • Nested Literal Declaration • Nesting Address object inside Customer object def customer = Customer { firstName: "John"; lastName: "Doe"; phoneNum: "(408) 555-1212"; address: Address { street: "1 Main Street"; city: "Santa Clara"; state: "CA"; zip: "95050"; } } 11
    • Sequences • Sequences var time:Duration[] = [1s, 5s, 10s]; var days = [1..31]; • Insert, delete, membership and reverse insert 20s into time; delete 31 from days; var revDays = Sequences.reverse(days); • Slice via range and predicate var oddDays = days[n | (n mod 2) == 1]; var firstThree = time[0..<3]; 12
    • Binding • 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, etc... • bind “with inverse” when 2-way is needed 13
    • Bound var scale = 1.0; // makePoint is a bound function. It will be invoked even when a value of // non-function-arugment such as scale changes. If you remove bound // keyword, then, the change of the value of scale does not invoke the function bound function makePoint(xPos : Number, yPos : Number) : Point { Point { x: xPos * scale y: yPos * scale } } class Point { var x : Number; var y : Number; } 14
    • Bound (cont) // Code in the previous slide // The bind keyword, placed just before the invocation of // makePoint, binds the newly created Point object (pt) to the outcome of the // makePoint function. var myX = 3.0; var myY = 3.0; def pt = bind makePoint(myX, myY); println(pt.x); // 3.0 myX = 10.0; println(pt.x); // 10.0 scale = 2.0; println(pt.x); // 20.0 15
    • Trigger • Triggers facilitates the catching and handling of data modification events. var x : String; var y = bind x; • Can be re-written using triggers in a equivalent manner: var x : String on replace { y = x; } • Trigger for tracing variable changes: var x : String on replace { y = x; Println(“X == {x}”); } 16
    • Many more Why Declarative Syntax for Building 17
    • GUI? • Because the structure of declared objects in the code reflects the visual structure of the scene graph, and this enables you to understand and maintain the code easily. • The order of elements you declare in the code matches the order in which they appear in the application. 18
    • Scene Graph Nodes: javafx.gui.* Node ComponentView* Group Shape ImageView HBox Arc HBox MediaView VBox Circle VBox CubicCurve Ellipse Transform Line Affine Path Rotate Polygon Scale Polyline Shear QuadCurve Translate Rectangle Text 19
    • Effects: javafx.gui.effects.* Effect DisplacementMap Blend PerspectiveTransform Light Bloom InvertMask Glow ColorAdjust DistanceLight Lighting SepiaTone PointLight Flood Reflection SpotLight GaussianBlur Shadow MotionBlur InnerShadow DropShadow 20
    • Effects • Effects On Images Demo 21
    • Some Effects Supported In JavaFX effect: SepiaTone { level: 0.5 } effect: Glow { level: 0.7 } Original image effect: GaussianBlur { input: SepiaTone { level: 0.5 } radius: 10.0 } effect: Reflection { fraction: 0.7 } 22
    • Lighting Effect effect: Lighting{ surfaceScale: 7 light: DistantLight { azimuth: 90 elevation: 30 } } effect: Lighting{ surfaceScale: 7 light: SpotLight { x: 0 y :0 z: 50 pointsAtX: 10 pointsAtY: 10 pointsAtZ: 0 } } 23
    • 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 • Functions: start(), stop(), pause(), resume() • Properties: autoReverse, repeatCount, toggle 24
    • Example – Defining Key Frames Timeline { keyFrames: [ KeyFrame { time: 0s values: [ radius => 30 ] } KeyFrame { time: 5s values: [ radius => 300 tween Interpolator.LINEAR ] } Key value How the value changes over time ] } radius = 30 radius = 300 0s 1s 2s 3s 4s 5s 6s Keyframes 25
    • Animation • Animating TimeLines Sample 26
    • JavaFX Media 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 > Lightweight rendering 27
    • Streaming Media • Simple Stream Media Sample 28
    • JavaFX Media Example var media = Media{source: ”movie.mov”}; var player = MediaPlayer{media: media, autoPlay:true}; var mediaView = MediaView{ // To enable audio only, don't create MediaView MediaView{ mediaPlayer: player, onMouseClicked: function(e) { // Play/pause control if (player.paused) { player.play(); } else { player.pause(); } } rotate: 90; // Rotate } 29
    • JavaFX NetBeans IDE Plugin • Available for NetBeans 6.1 and later > Current NB=6.8 • Supports conventional development cycle > edit, compile, run, test > Also has preview mode (avoid compile/run) • Specific project type for JavaFX • Automatic installation of JavaFX SDK • Editor supports code completion, drag and drop of components 30
    • Further Information • openjdk.java.net • www.javafx.com • www.sun.com/javafx • openjfx.org • learnjavafx.typepad.com More indepth details on the language can be found in a 2 hour overview presentation at www.JavaPassion.com 31
    • More info 32
    • Summary • Java continues to evolve • JDK7 driving changes in the platform • JavaFX providing a RIA platform built on Java • More to come... 33
    • Q&A Eugene Bogaart Eugene.Bogaart@sun.com 34