An Intertech Course
JavaFX – the face of future Java UIs
Intertech’s Oxygen Blast Series
April 2009
Course Name
Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 2
Welcome to Intertech
• How many ...
Course Name
Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 3
Who is this guy?
• Jim White – j...
Course Name
Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 4
Agenda
• What is JavaFX?
• What ...
Course Name
Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 5
What is JavaFX?
• A family of pr...
Course Name
Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 6
“All the screens of your life”
•...
Course Name
Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 7
JavaFX to the rescue
• JavaFX is...
Course Name
Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 8
What is an RIA technology
• RIA ...
Course Name
Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 9
What JavaFX is not…
Although som...
Course Name
Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 10
JavaFX competition (sort of)
• ...
Course Name
Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 11
Why pick JavaFX
• RIA for all p...
Course Name
Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 12
The Basics: code, compile, run
Course Name
Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 13
What you need to do JavaFX
• Ja...
Course Name
Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 14
Your first JavaFX application
S...
Course Name
Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 15
Code
• Save the code you just s...
Course Name
Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 16
Compiling and Running the Hard ...
Course Name
Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 17
Compile
• Compile the code with...
Course Name
Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 18
Run
• Run the application on th...
Course Name
Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 19
Package and Run
• Alternately, ...
Course Name
Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 20
Package and Run for Mobile
• To...
Course Name
Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 21
Course Name
Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 22
Run mobile emulation
• Provided...
Course Name
Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 23
Coding, Compiling and Running t...
Course Name
Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 24
Code
• NetBeans 6.5 or Eclipse ...
Course Name
Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 25
Run
• No manual compiling or pa...
Course Name
Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 26
NetBeans 6.5 and Eclipse 3.4 Ja...
Course Name
Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 27
JavaFX Script Language
• JavaFX...
Course Name
Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 28
Imperative vs. Declarative
• Ja...
Course Name
Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 29
JavaFX can call on Java code
va...
Course Name
Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 30
What’s Next
• A general script ...
Course Name
Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 31
JavaFX Language Primer
• script...
Course Name
Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 32
JavaFX Script
• JavaFX Script p...
Course Name
Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 33
Data Types
• Everything in Java...
Course Name
Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 34
Data Types (cont.)
• There is a...
Course Name
Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 35
Variables
• Variables can be de...
Course Name
Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 36
Variables (cont.)
• Variables c...
Course Name
Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 37
Pseudo Variables
• JavaFX comes...
Course Name
Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 38
Functions
• Functions can be de...
Course Name
Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 39
Classes
• As in Java, classes d...
Course Name
Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 40
//Java class
package com.intert...
Course Name
Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 41
Object instantiation
//Given Ja...
Course Name
Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 42
Expressions
• JavaFX is an expr...
Course Name
Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 43
Some expected expressions (rela...
Course Name
Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 44
Some different expressions
var ...
Course Name
Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 45
Data Binding
• Data binding cre...
Course Name
Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 46
Slightly More Complex Bindings
...
Course Name
Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 47
More complex binding
var n = "J...
Course Name
Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 48
Binding with inverse
• Binding ...
Course Name
Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 49
Packaging
• JavaFX scripts (cla...
Course Name
Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 50
Package/Import Example
package ...
Course Name
Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 51
Access Modifiers
• As in Java, ...
Course Name
Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 52
Additional Variable Access Modi...
Course Name
Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 53
JavaFX GUI API Survey
• Profile...
Course Name
Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 54
JavaFX Architecture
• Beyond th...
Course Name
Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 55
“All the worlds a Stage”
• The ...
Course Name
Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 56
Scenes are played upon the Stag...
Course Name
Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 57
Nodes
• The Node is the base cl...
Course Name
Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 58
Node Examples
import javafx.sce...
Course Name
Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 59
Object Animation
//code as befo...
Course Name
Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 60
What else can I do?
• Transform...
Course Name
Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 61
Resource List
• JavaFX Website ...
Course Name
Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 62
Agenda
 What is JavaFX?
 What...
An Intertech Course
Q&A
Course Name
Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 64
Intertech Resources
• Intertech...
Course Name
Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 65
Intertech Training
• Founded in...
Course Name
Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 66
Intertech Consulting
• In addit...
An Intertech Course
Thanks for coming!
Upcoming SlideShare
Loading in...5
×

JavaFX Training

5,419

Published on

http://www.Intertech.com

This slide deck is from an Intertech Oxygen Blast on JavaFX.

Published in: Technology, Business
1 Comment
7 Likes
Statistics
Notes
No Downloads
Views
Total Views
5,419
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
1
Likes
7
Embeds 0
No embeds

No notes for slide

Transcript of "JavaFX Training"

  1. 1. An Intertech Course JavaFX – the face of future Java UIs Intertech’s Oxygen Blast Series April 2009
  2. 2. Course Name Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 2 Welcome to Intertech • How many people have been to Intertech before? • We’ve been doing software developer training since 1991! • Home of the Twin Cities Java Users Group. • How many people are Java developers? • How many people are doing Java thick client development (Swing)? • How many people are doing Java Web development? • How many people are doing Java ME development? • How many people have heard of JavaFX? • How many people have started looking at JavaFX development? • How many people have started developing a JavaFX application? • How many people came for the free food and a ½ day off work?
  3. 3. Course Name Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 3 Who is this guy? • Jim White – jwhite@intertech.com • Intertech Instructor • Author J2ME, Java in Small Things – 2002, Manning • International Speaker • Including JavaOne • Contributor to many journals including: • JDJ • DevX.com • JavaPro • Consultant, engineer and architect with several companies • Most recently - Senior Technical Architect at Target Corp.
  4. 4. Course Name Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 4 Agenda • What is JavaFX? • What JavaFX is not and why use JavaFX • A JavaFX application demo • JavaFX Basics • What you need to do JavaFX • Code, compile and run JavaFX • Running in many environments (desktop, browser, mobile) • A look at current IDE support for JavaFX • 10 minute BREAK • Examine the JavaFX Language Basics • Explore some of the JavaFX GUI API (time permitting) • Resource overview and question/answers • Questions before we begin?????
  5. 5. Course Name Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 5 What is JavaFX? • A family of products • JavaFX Script (usually just called JavaFX) • A scripting language meant to provide rich user interfaces • Uses a syntax that resembles Javascript and Scalar Vector Graphics • JavaFX Mobile • JavaFX used on mobile platforms
  6. 6. Course Name Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 6 “All the screens of your life” • Java has always espoused to the WORA mantra. • This has been difficult given the diverse set of platforms Java finds itself on.
  7. 7. Course Name Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 7 JavaFX to the rescue • JavaFX is • rich Internet application (RIA) technology • provided through a single language that runs on any JVM • for building “all the screens of your life” • not just web-based Proof through Demonstration
  8. 8. Course Name Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 8 What is an RIA technology • RIA = rich Internet application • RIA are Web-based applications • Function as traditional desktop applications • Typically delivered via the internet to the browser • May require software in the browser (ActiveX, Java, Flash, etc.) • “New and Cool” – Web 2.0
  9. 9. Course Name Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 9 What JavaFX is not… Although sometimes rumored to be. • a Swing replacement. • Swing is extensible GUI components for desktop apps • JavaFX is rich client platform for RIA across multiple screens/platforms. • The two can be used together. • a Java ME replacement. • Java ME provides a host of API for building complete mobile apps • JavaFX just augments the UI capability – across multiple screens/platforms • a tool to add animation to Java web sites • It can, but its much more
  10. 10. Course Name Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 10 JavaFX competition (sort of) • Ajax • Asynchronous Javascript + CSS + XHTML + DOM • Adobe AIR (Adobe Integrated Runtime) • Flash + Flex + HTML + Ajax • Microsoft Silverlight • Miniaturized distribution of the .NET platform used to build media rich web plug-ins • Still others • OpenLaszlo - open source platform served as Java Servlets or a Flash file in a browser • Curl – a programming language • Cappuccino – Objective-J ++
  11. 11. Course Name Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 11 Why pick JavaFX • RIA for all platforms • desktop, browser as well as mobile device • Truly WORA • Leverage Java • Runs on the JVM • JavaFX script can call Java classes • Java classes can call JavaFX script • A simple and easy language • Allows content authors to write in a format that closely matches the layout of current graphical user interfaces • As a fully object-oriented language allows expert programmers to build highly complex and robust interfaces.
  12. 12. Course Name Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 12 The Basics: code, compile, run
  13. 13. Course Name Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 13 What you need to do JavaFX • JavaFX SDK (latest version is 1.1 – provides JavaFX Mobile) • Java SDK 6 update 7 (Windows) • Java SDK 5 update 13 (MacOS) • A Linux version is sort of supported by group of open source developers • A JavaFX aware IDE (optional but probably a good idea) • NetBeans 6.5 • Windows • MacOS (but without mobile runtime/emulation) • Eclipse 3.4 with JavaFX Plug-in • JavaFX 1.1 Production Suite (optional) • Provides a set of tools for graphics designers to create visual assets for JavaFX apps. • Can even export JavaFX graphics from tools such as Adobe Illustrator or Adobe Photoshop • Java ME SDK 3.0 will support JavaFX Mobile emulation/runtime (spring 2009)
  14. 14. Course Name Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 14 Your first JavaFX application Stage { title: "Cool Running“ width: 250 height: 80 scene: Scene { content: Text { font: Font {size: 20} x: 10 y: 30 fill: Color.GREEN content: "JavaFX is cool”} } }
  15. 15. Course Name Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 15 Code • Save the code you just saw in a file with a .fx suffix • Name (in this case) doesn’t matter. • For example sake, the code above is saved in Test.fx in c:jfx
  16. 16. Course Name Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 16 Compiling and Running the Hard Way … with the Java SDK command line tools and no IDE
  17. 17. Course Name Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 17 Compile • Compile the code with the JavaFX SDK compiler • javafxc.exe is provided in the /bin folder of the JavaFX SDK install • Works like javac.exe – compiling JavaFX source code into byte code class files (Test.class). • Many of the same command line options from javac.exe are available on javafxc.exe
  18. 18. Course Name Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 18 Run • Run the application on the desktop • javafx.exe kicks of the JVM and JavaFX Script runtime. • The javafx.exe is also in the /bin folder of the JavaFX SDK. • Many of the same switches that java.exe uses are available for javafx.exe.
  19. 19. Course Name Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 19 Package and Run • Alternately, to Run the application on a browser or via Web Start, it must first be packaged. • Package the application with javafxpackager.exe. • The javafxpackager.exe is also provided in the /bin folder of the SDK. • It produces files that can be used to display the app in a browser or via Web Start engine.
  20. 20. Course Name Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 20 Package and Run for Mobile • To run the application on a mobile device (or mobile emulator) it must also be packaged. • The same packager utility can be used. • A “-p mobile” switch must be provided (-p stands for profile) • A “-p desktop” switch could be provided for the browser/Web Start packaging but is the default. • This produces Java ME .JAD and .JAR files.
  21. 21. Course Name Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 21
  22. 22. Course Name Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 22 Run mobile emulation • Provided with the JavaFX SDK is an emulator. • The emulator is located in the /emulator/bin sub-folder of the SDK installation. • Call on the emulator.exe with the JAD file created by the packager.
  23. 23. Course Name Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 23 Coding, Compiling and Running the Easy Way … with a JavaFX-aware IDE
  24. 24. Course Name Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 24 Code • NetBeans 6.5 or Eclipse (with plug-in) use the JavaFX SDK under the covers. • Create a JavaFX project. • Create JavaFX scripts, classes and Stages (more in a bit). • Source code editors support • JavaFX specific syntax color-coded highlighting • JavaFX API code completion • Java FX code folding • JavaFX javadoc documentation pop-ups • JavaFX syntax error detection • A JavaFX palette • Drag/drop common elements into the source code
  25. 25. Course Name Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 25 Run • No manual compiling or packaging required • It is done automatically. • Pick your method of execution and run • Desktop • Web Start • Browser • Mobile emulation • Default • Touch screen
  26. 26. Course Name Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 26 NetBeans 6.5 and Eclipse 3.4 JavaFX plug-in Demos
  27. 27. Course Name Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 27 JavaFX Script Language • JavaFX has a declarative syntax. • Versus Java or C# that are imperative programming languages. • Logic without so much control flow. • Describes what the program should do, rather than describing how to do it. • JavaFX is an expression language (more in a bit). • JavaFX is statically (compile-time) typed. • JavaFX code can call on “normal” Java classes. • Java classes can call on JavaFX script.
  28. 28. Course Name Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 28 Imperative vs. Declarative • JavaFX Stage { title: "Cool Running“ width: 250 height: 80 scene: Scene { content: Text { font: Font {size: 20} x: 10 y: 30 fill: Color.GREEN content: "JavaFX is cool”} } } • Java Swing public class Main { public static void main(String[] args) { JFrame aFrame = new JFrame("Cool Running"); aFrame.setSize(250, 80); JPanel content = new JPanel(); content.setLayout(new BorderLayout(5, 5)); content.setBackground(Color.WHITE); JLabel aLabel = new JLabel("Swing is cool"); aLabel.setFont(new Font(null, Font.PLAIN, 20)); aLabel.setForeground(Color.GREEN); content.add(aLabel, BorderLayout.CENTER); aFrame.setContentPane(content); aFrame.setVisible(true); aFrame.setDefaultCloseOperation(JFrame.EXIT_ON_CL OSE); } }
  29. 29. Course Name Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 29 JavaFX can call on Java code var a = 250; var b = 300; Stage { title: "Cool Running“ width: java.lang.Math.max(a, b) height: 80 scene: Scene { content: Text { font: Font {size: 20} x: 10 y: 30 fill: Color.GREEN content: "JavaFX is cool”} } }
  30. 30. Course Name Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 30 What’s Next • A general script language primer • Syntax • Declaring variables, functions, classes, etc. • A JavaFX GUI API survey
  31. 31. Course Name Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 31 JavaFX Language Primer • scripting • data types • variables • functions • classes • expressions • data bindings • packages • access modifiers
  32. 32. Course Name Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 32 JavaFX Script • JavaFX Script programs are written as one or more scripts. • A script consists of expressions and declarations • Scripts are saved into a file (with a .fx extension). • Here are some valid scripts. • To make the scripts do something, add println to the script. • When more than one expression is part of a script, add a semi- colon as a separator. 9.8 println(9.8) “Hello world” println(“Hello world”) println(9.8); println(“Hello world”) Everything doesn’t have to be in a class
  33. 33. Course Name Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 33 Data Types • Everything in JavaFX (variable, function, expression) has a data type or put more simply a type. • Value types are: String, Integer, Number, Boolean, Duration • These have built-in language support • Have built in literals • Have built in operations (except Duration) • Are immutable • Have a default value different from null (“”,0,0.0, false, 0ms). • Use “ “ or ‘ ‘ for String literals • Two strings next to each other are merged • “Good morning” ’class!’ = “Good morning class!”
  34. 34. Course Name Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 34 Data Types (cont.) • There is a function type in JavaFX • In the example below, the variable squaredSum holds a function. • More on variables and functions coming up. • There is a class type to be covered later. • A sequence type is a collection or array of any type. • [ ] denote a sequence. • Sequences are immutable. • [1, 2, 3, 4] is also the same as [1..4]. • Sequences cannot hold other sequences. • Embedded sequences are flattened out. • [ [1, 5], [8, 9]] is the same as [1, 5, 8, 9] • Null has no meaning in a sequence. [1, null, 3] == [1,3] var squaredSum = function (op1 :Integer, op2:Integer){(op1+op2)*(op1+op2)}
  35. 35. Course Name Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 35 Variables • Variables can be defined with keywords var or def. • Use def to define a variable once and never reassign it. • The value assigned to a var can change. • Like in Java, there are different types of variables. • Instance variables (defined in a class) • Local variables (defined in a code block like a for loop) • Script variables • Unlike Java, a variable can be defined in a script yet not be part of any class or block def instructor = “Jim”; var start = 9; start = start + 2;
  36. 36. Course Name Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 36 Variables (cont.) • Variables can be typed explicitly. • Or a variable’s type is determined implicitly when it is assigned. • The optional on replace clause is a block of code that gets executed each time the variable is changed. var y: Integer = 9; //explicit typing var x; x = 8; //implicitly makes x an Integer x = "Try this"; //incompatible type and syntax error var y: Integer = 9 on replace {println("y now {y}")}; // prints “y now 9” y = 10; //prints “y now 10”
  37. 37. Course Name Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 37 Pseudo Variables • JavaFX comes with 3 pseudo variables (treat them as defs) • __PROFILE__ is either "mobile", "desktop" or "browser" depending on environment. • __FILE__ is the string URL of the containing script. • __DIR__ is the string URL of the directory for the script. def hSize = if (__PROFILE__ == "desktop") then 355 else 320;
  38. 38. Course Name Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 38 Functions • Functions can be declared … • inside a class (instance function) • or at the script level (script function). • By default, the last thing computed is returned. • Function return value, return type and parameter types can be explicitly (below) set or inferred (above). function squaredSum (op1 , op2){ (op1 + op2) * (op1 + op2) } println(squaredSum(5, 5)); function squaredSum (op1: Integer, op2:Integer) : Integer { return (op1 + op2) * (op1 + op2) }
  39. 39. Course Name Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 39 Classes • As in Java, classes define things (real or conceptual). • As in Java, instances or objects are created from the classes and represent things. • Classes can have… • Instance variables (with def or var) • Functions • Class init and postInit optional blocks allow for initialization and after instantiation processes. • Classes can extend other classes (inheritance). • In fact, JavaFX supports multiple inheritance of JavaFX classes! • JavaFX classes can extend a Java class and multiple Java interfaces. • “Extending” an interface forces the class to implement the interface. • Use override keyword to override super classes or interface methods or var definitions.
  40. 40. Course Name Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 40 //Java class package com.intertech; public class Animal { public int legs = 2; } //Java interface package com.intertech; public interface NoiseMaker { public void makeNoise(); } //JavaFX class public class Pet { public var name: String; } //JavaFX class public class Dog extends Pet, com.intertech.NoiseMaker, com.intertech.Animal { init { name="Mulligan"; legs=4; } public override function makeNoise():Void{ println("Woof Woof") } public function eat() { println("Mmmpf, crunch... I love dog chow") } public override function toString(): String { "{name} has {legs} legs" } } var d = new Dog(); d.makeNoise(); println(d); d.eat(); Woof Woof Mulligan has 4 legs Mmmpf, crunch, mmpfh ... I love dog chow
  41. 41. Course Name Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 41 Object instantiation //Given JavaFX class public class Customer { public var name: String; public var age: Integer; public var address: String; } //”Java way” of instantiating var cust1 = new Customer(); cust1.name="Jim"; cust1.address="Hugo, MN"; cust1.age=45; //more JavaFX way of instantiating var cust2 = Customer{ name: "Jim" address: "Hugo, MN" age: 45 } Both work.
  42. 42. Course Name Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 42 Expressions • JavaFX is an expression language. • Expressions are chunks of executable code • They evaluate to a value (although sometimes they just return Void) • They can be combined to produce larger expressions. • Loops, conditionals, code blocks, are expressions • There are many types of expressions • block – declarations or other expressions in { } • if • for & while (and break and continue) • try, catch, throw and finally • range – code between [ ] (sequences use range expressions) • type - instanceof, as (as works as a “cast” or convert operation) • miscellaneous (insert, delete, new, return, assignment, literals, …)
  43. 43. Course Name Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 43 Some expected expressions (relative to Java) var age = 45; if (age >= 70) then //if expression - 'then' is optional { println("Qualifies for full SSN"); //another expression } else { println("Qualifies for some SSN"); //another expression } var odds = [1..9 step 2]; //range expression var total: Integer; for (odd in odds) //for expression { //block expression total+= odd; //assignment expression } while (total > 0) //while expression { println("count down - {total}"); total= total - 1; } try { //try and println(8/0); } catch (e: java.lang.Exception){ //catch expressions println("Math error: {e.getMessage()}") } “+” is not a String operator
  44. 44. Course Name Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 44 Some different expressions var answer = if (3 < 4) { "Yes“} else {"No”} //expression return a value println(answer) //prints Yes var myInt: Integer = 7; println(myInt); //prints 7 var myNumber = 7 as Number; println(myNumber); //prints 7.0 var teams = ["Cardinals", "Astros", "Brewers", "Reds", "Pirates"]; println(sizeof teams); //prints 5 insert "Cubs" into teams; println(teams); //prints [ Cardinals, Astros, Brewers, Reds, Pirates, Cubs ] delete "Cardinals" from teams; println(teams); //prints [ Astros, Brewers, Reds, Pirates, Cubs ] println(teams[2]); //prints Brewers println(teams[-1]); //prints " " - nothing but does not error teams = reverse teams; println(teams); //prints [ Cubs, Pirates, Reds, Brewers, Astros ] var contenders = teams[1..]; println(contenders); //prints [ Pirates, Reds, Brewers, Astros ] var champs = teams[0..<1]; println(champs); //prints [Cubs ]
  45. 45. Course Name Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 45 Data Binding • Data binding creates an immediate and direct relationship between two variables. • Use the bind keyword to bind variables. • In its simplest of forms, binding is shown below. var x = 0; var y = bind x; println(y); //prints 0 x = 7; println(y); //prints 7 var x = 0; def y = bind x; println(y); //prints 0 x = 7; println(y); //prints 7
  46. 46. Course Name Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 46 Slightly More Complex Bindings var z = 5; function add5 (anInt: Integer):Integer{ anInt + 5; } var sum = bind z + add5(z); println(sum); //prints 15 z=10; println(sum); //prints 25 var prez = ["Washington", "Adams", "Jefferson", "Madison", "Monroe", "Quincy Adams"]; var firstPresidents = bind prez[0..<3]; println(firstPresidents); //prints [ Washington, Adams, Jefferson ] insert "Jackson" into prez; println(firstPresidents); //still prints [ Washington, Adams, Jefferson ] prez = reverse prez; println(firstPresidents); //prints [ Jackson, Quincy Adams, Monroe ]
  47. 47. Course Name Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 47 More complex binding var n = "Jim"; var a = 45; var addr = "Hugo, MN"; var cust = bind Customer{ name: n age: a address: addr }; n = "Kelly"; //causes a new Customer object to be created and assigned to cust var n = "Jim"; var a = 45; var addr = "Hugo, MN"; var cust = Customer{ name: bind n age: bind a address: bind addr }; n = "Kelly"; //modifies the name of cust without creating a new object
  48. 48. Course Name Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 48 Binding with inverse • Binding with inverse establishes a bi-directional relationship between variables. var x = 8; var y = bind x with inverse; x = 9; println(y); //prints 9 y = 10; println(x); //prints 10
  49. 49. Course Name Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 49 Packaging • JavaFX scripts (classes, functions, etc.) can be assigned to a package. • Specify the package name at the top of a script file. • Script files should be in a folder structure that mimics the package naming. • Use import to access scripts in other packages • The import statement doesn’t have to be at the top of the script. • Without import, you can also use complete package names when referencing classes, functions, etc. (just as in Java).
  50. 50. Course Name Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 50 Package/Import Example package com.intertech.domain; public class Team { public var name: String; public var city: String; public override function toString(): String{ "{city} {name}" } } public function cheer(team: Team) { println("We love the {team}") } var x = 9; var y = x + 7; import com.intertech.domain.Team; var t = Team{ name: "Cubs" city: "Chicago" }; Team.cheer(t);
  51. 51. Course Name Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 51 Access Modifiers • As in Java, JavaFX has a number of access modifiers. • Access modifiers control use or access to functions, variables, classes, etc. outside of the script they are defined in. • Access modifiers, while similar in purpose, have different names than in Java. Modifier keyword Access description default No modifier Script only access. Can only be accessed within the script where it is defined. package Package access. Can only be accessed within the package where it is defined. protected Protected access. Can be accessed from the package where it is defined and from subclasses of the class where it is defined. public Public access. Can be accessed anywhere.
  52. 52. Course Name Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 52 Additional Variable Access Modifiers • Two additional access modifiers can be used with variables. Modifier keyword Access description public-read The variable can be read anywhere but can be written only in the script it is defined. public-init The variable can be initialized or read anywhere. Initialized means set (but not bound) in an object literal.
  53. 53. Course Name Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 53 JavaFX GUI API Survey • Profiles • Common vs. Desktop • Stage • Scene • Nodes • Animation • What else
  54. 54. Course Name Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 54 JavaFX Architecture • Beyond the basic language, JavaFX is separated into two profiles. • The common profile includes classes that function on both the desktop and mobile devices. • The desktop profile provides classes that take advantage of desktop power and enhance the UI.
  55. 55. Course Name Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 55 “All the worlds a Stage” • The Stage class is the top level UI container for JavaFX scripts. • The Stage class comes from the javafx.stage package. • It is part of the common profile. • Typically, a Stage is given a title, dimensions, location, etc. import javafx.stage.Stage; Stage { } import javafx.stage.Stage; Stage { title: "Welcome to the Stage" width: 350 height: 80 x: 200 y: 200 }
  56. 56. Course Name Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 56 Scenes are played upon the Stage • The scene property on a Stage is given a Scene instance. • The Scene class comes from the javafx.scene package. • A Scene object is a collection mechanism for Node objects. • Node objects are displayable items (rectangle, text, etc.). • A Scene object can also have fill, height, width and other properties. import javafx.scene.Scene; import javafx.stage.Stage; import javafx.scene.paint.Color; Stage { title: "Welcome to the Stage“ scene: Scene { fill: Color.MAGENTA width: 400 height: 200 } }
  57. 57. Course Name Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 57 Nodes • The Node is the base class for all displayed items in a Scene. • The content property on a Scene holds a sequence of Nodes. • Each Node may have children nodes – making a Scene graph. • A Scene graph is a tree-like data structure. • Each item or Node in the tree has zero or one parent. • Each item is either a leaf with zero sub items or a "branch" with zero or more sub items. • There are numerous Node types. • Shapes - Rectangles, Circles, Lines, Arcs, etc. • Text • Images • Media • Etc.
  58. 58. Course Name Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 58 Node Examples import javafx.scene.image.*; import javafx.scene.paint.Color; import javafx.scene.Scene; import javafx.scene.shape.Rectangle; import javafx.scene.text.*; import javafx.stage.Stage; Stage { title: "Welcome to the Stage“ x: 200 y: 200 scene: Scene { fill: Color.MAGENTA width: 400 height: 200 content: […] } } [ Text{ content: "Hello world“ font: Font {size: 20} x: 200 y: 175 }, Rectangle{ height: 50 width: 100 fill: Color.BLUE x: 100 y: 100 }, ImageView { image: Image {url: "{__DIR__}intertech.png”} x: 10 y: 10 } ]
  59. 59. Course Name Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 59 Object Animation //code as before but with Rectangle in rect var var track: Path = Path { elements: [ MoveTo { x: 200 y: 200 }, LineTo { x: 100 y: 100 }] } var anim: PathTransition = PathTransition { node: rect path: AnimationPath.createFromPath(track); interpolate: Interpolator.LINEAR duration: (sizeof track.elements) * 1s }; anim.play();
  60. 60. Course Name Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 60 What else can I do? • Transform (rotate, scale, shear, translate, etc.) • Add event handling (clicking, keyboard, etc.) • Add Animation • Add media • With the desktop profile • Add “widgets” • Add shadowing, lighting, blur, etc. effects
  61. 61. Course Name Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 61 Resource List • JavaFX Website (Overview, FAQ, download): http://javafx.com • JavaFX SDK version 1.1: http://javafx.com/downloads • NetBeans 6.5: http://www.netbeans.org/ • Eclipse 3.4: http://www.eclipse.org/downloads/ • Eclipse JavaFX Plug-in (optional): http://kenai.com/projects/eplugin • Sun's JavaFX tutorial site: http://java.sun.com/javafx/1/tutorials/core/index.html • Free JavaFX tutorial offered online: http://www.javapassion.com/javafx/ • Sun JavaFX building GUI tutorial: http://java.sun.com/javafx/1/tutorials/ui/index.html • JavaFX API Javadocs: http://java.sun.com/javafx/1.1/docs/api/ • JavaFX language reference: http://openjfx.java.sun.com/current- build/doc/reference/JavaFXReference.html • JavaFX Eclipse Plug-in tutorial: http://blogs.sun.com/octav/entry/eclipse_plugin_for_javafx_script • quick 10 minute tutorial: http://www.dieajax.com/2007/08/23/10-minute-tutorial-javafx-hello- world/ • JavaFX Blog: http://learnjavafx.typepad.com/weblog/2008/02/getting-plutoed.html • Performance Tips for JavaFX’ers: http://blogs.sun.com/michaelheinrichs/entry/best_practices_for_javafx_mobile1
  62. 62. Course Name Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 62 Agenda  What is JavaFX?  What JavaFX is not and why use JavaFX  A JavaFX application demo  JavaFX Basics  What you need to do JavaFX  Code, compile and run JavaFX  Running in many environments (desktop, browser, mobile)  A look at current IDE support for JavaFX  Examine the JavaFX Language Basics  Explore some of the JavaFX GUI API (time permitting)  Resource overview
  63. 63. An Intertech Course Q&A
  64. 64. Course Name Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 64 Intertech Resources • Intertech offers free: • Content packed newsletters • Podcasts through iTunes • YouTube videos • Free Oxygen Blast seminars • Whitepapers and .pdf downloads • For the above and special offers, register for the newsletter at the bottom of our homepage
  65. 65. Course Name Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 65 Intertech Training • Founded in 1991, Intertech offers a full training line-up: • JEE, open source technologies • .NET, SQL Server, SharePoint • XML, Ajax • Delivery formats include: • Instructor-led public and onsite • Instructor-led night and virtual • Self-paced study • For advanced purchase customers, Intertech offers Elite Rewards™—call 651-994-8558 +23
  66. 66. Course Name Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 66 Intertech Consulting • In addition to training, Intertech delivers consulting • Consulting is part of our brand: Instructors Who Consult | Consultants Who Teach • Give your project success with our consulting services • To learn more, contact us at 651-994-8558 +11
  67. 67. An Intertech Course Thanks for coming!

×