JavaFX
Rich Internet Application with Java




                                      copyright 2008 trainologic LTD
JavaFX



• Introduction.
• The Scripting Language.
• UI - The Scene Graph.
• Deployment.




                            ...
JavaFX



                  What is JavaFX?

• Started from the F3 project developed by Chris Oliver.
• Java’s Rich Intern...
JavaFX



                What is JavaFX?

  A platform and tools suite that offers distinct
  advantages to Web developer...
JavaFX



                  What is JavaFX?

• Composed of a simple scripting language, combined
  with enhanced graphics ...
JavaFX



         What is JavaFX?




                6
                           copyright 2008 trainologic LTD
JavaFX



• Introduction.
• The Scripting Language.
• UI - The Scene Graph.
• Deployment.




                            ...
JavaFX



         The JavaFX Scripting Language

• As the name suggests, it is a scripting language.
• Unlike many other ...
JavaFX



         The JavaFX Scripting Language

• Let’s dive into the water...


     result = add(1, 2);
     println(q...
JavaFX



         The JavaFX Scripting Language

• So... What do we have here?
• Code out of a class.
• Untyped variables...
JavaFX



         The JavaFX Scripting Language

• Declaring a class:


     class Customer {
          var firstName: St...
JavaFX



         The JavaFX Scripting Language

• Object literals:

     def customer = Customer {
          firstName: ...
JavaFX



         The JavaFX Scripting Language

• The basic data types:
      String - “Hello”, ‘Hello’, “Hello {express...
JavaFX



         The JavaFX Scripting Language

• Sequences:

         // Sequence Literal
         var weekDays: String...
JavaFX



         The JavaFX Scripting Language

• Block Expression - Returns the value of the last
  expression in the b...
JavaFX



         The JavaFX Scripting Language

• Another cool feature in JavaFX is data binding.
• Data binding means b...
JavaFX



         The JavaFX Scripting Language

• Binding two variables, not so impressive...


          var x = 0;
   ...
JavaFX



             The JavaFX Scripting Language

 • Binding an object, starting to get more interesting...

var   myS...
JavaFX



           The JavaFX Scripting Language
 • Binding and functions:

var scale = 1.0;

bound function makePoint(x...
JavaFX



         The JavaFX Scripting Language
• There is more:
      Replace Triggers
  •

      Special Access Modifie...
JavaFX



• Introduction.
• The Scripting Language.
• UI - The Scene Graph.
• Deployment.




                            ...
JavaFX



                   User Interface

• JavaFX has a very strong support for building rich user
  interfaces.

• It...
JavaFX



                   User Interface

• JavaFX supports a streamlined development model
  from the designer to the ...
JavaFX



                      User Interface

• Unlike its competitors, JavaFX doesn’t use XML to
  represent the UI.

•...
JavaFX



                     User Interface

• The main nodes in every JavaFX “tree”:
      Stage - The window hosting t...
JavaFX



         User Interface




               26
                          copyright 2008 trainologic LTD
JavaFX



                              User Interface

Stage{
    title: quot;Hello Worldquot;
    width: 250
    height:...
JavaFX



                             User Interface

    • Adding a small piece of code can totally change the
        l...
JavaFX



                             User Interface

    • Adding behavior is super easy...



Text{
     ...
     onMou...
JavaFX



                    User Interface

• There is much more to the User Interface in JavaFX:
      Animations.
  •
...
JavaFX



• Introduction.
• The Scripting Language.
• UI - The Scene Graph.
• Deployment.




                            ...
JavaFX



                      Deployment

• JavaFX supports the following deployment modes:
      Standard Execution.
  ...
JavaFX



                           Deployment

• Standard execution is a regular process execution using
   the javafx e...
JavaFX



                                Deployment

    • Web Start is using the JNLP, just like a Swing Web
       Star...
JavaFX



                        Deployment

• In-Browser - The good old Applet...


         <script src=quot;http://dl....
JavaFX



                     Deployment

• Mobile - There is a Mobile emulator, currently in beta.




                 ...
Thank You



            Q&A
             Gal Marder

             CEO, Trainologic




                  copyright 2008 t...
Upcoming SlideShare
Loading in...5
×

Introduction to Java FX

5,962

Published on

This is a presentation given in a Java Open day conducted by Trainologic.
Trainologic shares its training content for free at trainologic.org you can find many more free full course there.

Published in: Technology
2 Comments
5 Likes
Statistics
Notes
  • one of the best presentation i have seen till now... BTW.. tomorrow i am giving a presentation on JAVAFX... and yours will be my motivator :) Thanks for sharing your knowledge...
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • sir pls send me dis ppt...its vry 9ce...my mail id is prathibavrandha@ymail.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
5,962
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
2
Likes
5
Embeds 0
No embeds

No notes for slide

Introduction to Java FX

  1. 1. JavaFX Rich Internet Application with Java copyright 2008 trainologic LTD
  2. 2. JavaFX • Introduction. • The Scripting Language. • UI - The Scene Graph. • Deployment. copyright 2008 trainologic LTD
  3. 3. JavaFX What is JavaFX? • Started from the F3 project developed by Chris Oliver. • Java’s Rich Internet Application Platform. • Direct Competition with Adobe Flash/Flex/Air. • Direct competition with MS Silverlite. 3 copyright 2008 trainologic LTD
  4. 4. JavaFX What is JavaFX? A platform and tools suite that offers distinct advantages to Web developers, Web designers, and Java developers who are building rich, connected experiences. 4 copyright 2008 trainologic LTD
  5. 5. JavaFX What is JavaFX? • Composed of a simple scripting language, combined with enhanced graphics abilities. • Tools that help designers and developers work closer together. • Runs on the JVM. • Deploys easily to the desktop, browser. • Future releases are planed to support Mobile Phones and TV. 5 copyright 2008 trainologic LTD
  6. 6. JavaFX What is JavaFX? 6 copyright 2008 trainologic LTD
  7. 7. JavaFX • Introduction. • The Scripting Language. • UI - The Scene Graph. • Deployment. copyright 2008 trainologic LTD
  8. 8. JavaFX The JavaFX Scripting Language • As the name suggests, it is a scripting language. • Unlike many other scripting languages, it is a compiled language. • As you probably guessed, it is compiling to Java Classes. • Unlike Java, it has a handful of tricks that makes the development really easy... We will cover some of them. 8 copyright 2008 trainologic LTD
  9. 9. JavaFX The JavaFX Scripting Language • Let’s dive into the water... result = add(1, 2); println(quot;1 + 2 = {result}quot;); function add(numOne:Integer, numTwo:Integer):Integer { var result = numOne + numTwo; return result; } 9 copyright 2008 trainologic LTD
  10. 10. JavaFX The JavaFX Scripting Language • So... What do we have here? • Code out of a class. • Untyped variables. • Special String literal. • There is much more... 10 copyright 2008 trainologic LTD
  11. 11. JavaFX The JavaFX Scripting Language • Declaring a class: class Customer { var firstName: String; var lastName: String; var phoneNum: String; var address: Address; function printName() { println(quot;Name: {firstName} {lastName}quot;); } 11 copyright 2008 trainologic LTD
  12. 12. JavaFX The JavaFX Scripting Language • Object literals: def customer = Customer { firstName: quot;Johnquot;; lastName: quot;Doequot;; phoneNum: quot;(408) 555-1212quot;; address: Address { street: quot;1 Main Streetquot;; city: quot;Santa Claraquot;; state: quot;CAquot;; zip: quot;95050quot;; } } 12 copyright 2008 trainologic LTD
  13. 13. JavaFX The JavaFX Scripting Language • The basic data types: String - “Hello”, ‘Hello’, “Hello {expression}” • Number - 4.2 • Integer - 3 • Boolean - true, false • Duration - 10ms, 5s, 3m, 1h • Void - just like Java, but written with upper-case. • null - just the same as in Java. • 13 copyright 2008 trainologic LTD
  14. 14. JavaFX The JavaFX Scripting Language • Sequences: // Sequence Literal var weekDays: String[] = [quot;Monquot;,quot;Tuequot;,quot;Wedquot;,quot;Thuquot;,quot;Friquot;]; // Sequence Concatenation var days = [weekDays, [quot;Satquot;,quot;Sunquot;]]; // Sequence ranges var nums = [1..100] var nums = [1..100 step 2] // 1, 3, 5, ...99 // Sequence Querying var numsGreaterThanTwo = nums[n | n > 2]; // 3, 4, 5 ...100 14 copyright 2008 trainologic LTD
  15. 15. JavaFX The JavaFX Scripting Language • Block Expression - Returns the value of the last expression in the block. var nums = [5, 7, 3, 9]; var total = { var sum = 0; for (a in nums) { sum += a }; sum; } println(quot;Total is {total}.quot;); 15 copyright 2008 trainologic LTD
  16. 16. JavaFX The JavaFX Scripting Language • Another cool feature in JavaFX is data binding. • Data binding means binding the value of one variable to another. • When the first changes it changes the second as well. • Objects and methods can also be bound. • Let’s take a look... 16 copyright 2008 trainologic LTD
  17. 17. JavaFX The JavaFX Scripting Language • Binding two variables, not so impressive... var x = 0; def y = bind x; x = 1; println(y); // y now equals 1 x = 47; println(y); // y now equals 47 17 copyright 2008 trainologic LTD
  18. 18. JavaFX The JavaFX Scripting Language • Binding an object, starting to get more interesting... var myStreet = quot;1 Main Streetquot;; var myCity = quot;Santa Claraquot;; var myState = quot;CAquot;; var myZip = quot;95050quot;; def address = bind Address { street: myStreet; city: myCity; state: myState; zip: myZip; }; println(quot;address.street == {address.street}quot;); // 1 Main Street myStreet = quot;100 Maple Streetquot;; println(quot;address.street == {address.street}quot;); // 100 Maple Street 18 copyright 2008 trainologic LTD
  19. 19. JavaFX The JavaFX Scripting Language • Binding and functions: var scale = 1.0; bound function makePoint(xPos : Number, yPos : Number) : Point { Point { x: xPos * scale y: yPos * scale } } var myX = 3.0; var myY = 3.0; def pt = bind makePoint(myX, myY); println(pt.x); // 3 myX = 10.0; println(pt.x); // 10 scale = 2.0; println(pt.x); // 20 19 copyright 2008 trainologic LTD
  20. 20. JavaFX The JavaFX Scripting Language • There is more: Replace Triggers • Special Access Modifiers - public-read, public-init... • Special sequences tricks. • Integration with Java classes. • Running from a Java application. • more... • 20 copyright 2008 trainologic LTD
  21. 21. JavaFX • Introduction. • The Scripting Language. • UI - The Scene Graph. • Deployment. copyright 2008 trainologic LTD
  22. 22. JavaFX User Interface • JavaFX has a very strong support for building rich user interfaces. • It has a very strong graphics engine which is capable of taking advantage of hardware graphics accelerators. • All Swing components are supported. • A strong API for 2D painting using the JavaFX scripting language. • Support for a wide variety of media formats. 22 copyright 2008 trainologic LTD
  23. 23. JavaFX User Interface • JavaFX supports a streamlined development model from the designer to the developer. • JavaFX comes with a set of plugins that enables the export of objects from Adobe Photoshop and Illustrator directly to JavaFX. 23 copyright 2008 trainologic LTD
  24. 24. JavaFX User Interface • Unlike its competitors, JavaFX doesn’t use XML to represent the UI. • Instead, JavaFX uses the scripting language to define a composite (tree like) structure of components. • We call this structure, “The Scene Graph”. 24 copyright 2008 trainologic LTD
  25. 25. JavaFX User Interface • The main nodes in every JavaFX “tree”: Stage - The window hosting the application. • Scene - The canvas, where the components show. • • All the components and graphic elements are put into the Scene. 25 copyright 2008 trainologic LTD
  26. 26. JavaFX User Interface 26 copyright 2008 trainologic LTD
  27. 27. JavaFX User Interface Stage{ title: quot;Hello Worldquot; width: 250 height: 50 scene:Scene{ content: [ Text{ content:quot;Hello Worldquot; x:10 y:12 font:Font{ name:quot;Verdanaquot; size:12 } } ] } } 27 copyright 2008 trainologic LTD
  28. 28. JavaFX User Interface • Adding a small piece of code can totally change the look. Text{ content:quot;Hello Worldquot; x:10 y:20 fill: Color.SEAGREEN font:Font{ name:quot;Verdanaquot; size:20 } effect: Reflection { fraction: 0.9 topOpacity: 0.9 topOffset: 0.1 } } 28 copyright 2008 trainologic LTD
  29. 29. JavaFX User Interface • Adding behavior is super easy... Text{ ... onMouseEntered: function (evt:MouseEvent) { evt.node.effect = Reflection { fraction: 0.9 topOpacity: 0.9 topOffset: 0.1 } } } 29 copyright 2008 trainologic LTD
  30. 30. JavaFX User Interface • There is much more to the User Interface in JavaFX: Animations. • Transformations. • Layout • Media elements • More... • 30 copyright 2008 trainologic LTD
  31. 31. JavaFX • Introduction. • The Scripting Language. • UI - The Scene Graph. • Deployment. copyright 2008 trainologic LTD
  32. 32. JavaFX Deployment • JavaFX supports the following deployment modes: Standard Execution. • Web Start. • In Browser. • Mobile - Based on a MIDlet. Currently in Beta. • 32 copyright 2008 trainologic LTD
  33. 33. JavaFX Deployment • Standard execution is a regular process execution using the javafx executable. .../bin/javafx -classpath MyJFXApplication.jar myPackage.myMainScript.class 33 copyright 2008 trainologic LTD
  34. 34. JavaFX Deployment • Web Start is using the JNLP, just like a Swing Web Start. <?xml version=quot;1.0quot; encoding=quot;UTF-8quot;?> <jnlp spec=quot;1.0+quot; codebase=quot;file:/HelloJavaFX/dist/quot; href=quot;HelloJavaFX.jnlpquot;> <information> <title>HelloJavaFX</title> <vendor>galmarder</vendor> <homepage href=quot;quot;/> <description>HelloJavaFX</description> <offline-allowed/> <shortcut> <desktop/> </shortcut> </information> <resources> <j2se version=quot;1.5+quot;/> <extension name=quot;JavaFX Runtimequot; href=quot;http://dl.javafx.com/javafx-rt.jnlpquot;/> <jar href=quot;HelloJavaFX.jarquot; main=quot;truequot;/> </resources> <application-desc main-class=quot;HelloWorldquot;/> </jnlp> 34 copyright 2008 trainologic LTD
  35. 35. JavaFX Deployment • In-Browser - The good old Applet... <script src=quot;http://dl.javafx.com/dtfx.jsquot;></script> <script> javafx( { archive: quot;HelloJavaFX.jarquot;, draggable: true, width: 200, height: 200, code: quot;HelloWorldquot;, name: quot;HelloJavaFXquot; } ); </script> 35 copyright 2008 trainologic LTD
  36. 36. JavaFX Deployment • Mobile - There is a Mobile emulator, currently in beta. 36 copyright 2008 trainologic LTD
  37. 37. Thank You Q&A Gal Marder CEO, Trainologic copyright 2008 trainologic LTD

×