SlideShare a Scribd company logo

The Java Fx Platform – A Java Developer’S Guide

Download as PPTX, PDF
Stephen Chin, profile picture
Stephen Chin

The document provides an overview of JavaFX and covers topics such as downloading and setting up JavaFX, creating a basic "Hello World" application, working with layouts, images, audio, animations, and data binding. It also compares JavaFX and Java, discusses JavaFX operators and sequences, and looks at developing JavaFX applications for mobile devices.

TechnologyEducation
1 of 88
Downloaded 96 times
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
The JavaFX Platform – A Java Developer’s GuideStephen ChinInovis, Inc.
About Your PresenterDirector SWE, Inovis, Inc.Open-Source JavaFX HackerMBABelotti AwardUberScrumMasterXP CoachAgile EvangelistWidgetFXJFXtrasFEST-JavaFXPiccolo2DJava ChampionJavaOneRockstarJUG LeaderPro JavaFX Author2Family ManMotorcyclist
LearnFX and Win at DevoxxTweet to answer:@projavafxcourse your-answer-here3
Part 1 - JavaFX Crash Coursevar x = ['x','o','v','e','d','x'];insert x[5] before x[0];println("{reverse x[0..<]}");@projavafxcourse answer
1. Download JavaFXhttp://javafx.com/52. Run Your IDENetBeans (bundled)
Eclipse – ExadelJavaFX Studio3. Write Your First AppHello Devoxx!Step-by-Step Demovar x = ['x','o','v','e','d','x'];insert x[5] before x[0];println("{reverse x[0..<]}");@projavafxcourse answer
Hello Devoxx!: Creating a StageStage { title: "Hello Devoxx!" scene: Scene { content: [ "..." ] }}6var x = ['x','o','v','e','d','x'];insert x[5] before x[0];println("{reverse x[0..<]}");@projavafxcourse answer
Hello Devoxx!: Displaying ImagesImageView { image: Image {url: "http://www.javoxx.com/download/attachments/1706305/Devoxx09.jpg" } opacity: .5}7var x = ['x','o','v','e','d','x'];insert x[5] before x[0];println("{reverse x[0..<]}");@projavafxcourse answer
Hello Devoxx!: RSS Feedvaritems:Item[];RssTask { interval: 30s; location: "http://search.twitter.com/search.rss?q=devoxx"onItem: function(item) { insert item into items; }}.start();8
Hello Devoxx!: VBox LayoutvartextBox:VBox;textBox = VBox {layoutX: 40layoutY: 40 spacing: 20 content: "..."}9
Hello Devoxx!: Displaying Textcontent: bind for (item in items) { Text {textOrigin: TextOrigin.TOPtextAlignment: TextAlignment.JUSTIFYwrappingWidth: 520font: Font.font(null, FontWeight.BOLD, 18) content: item.title }}10
Hello Devoxx!: Animating GraphicsvartransTransition = TranslateTransition { duration: 2m node: bind textBoxfromY: 600toY: -4000 interpolator: Interpolator.LINEARrepeatCount: Timeline.INDEFINITE}transTransition.play();11
Hello Devoxx!: Playing Audio?MediaPlayer {autoPlay: truerepeatCount: MediaPlayer.REPEAT_FOREVER media: Media { source: "http://blogs.sun.com/roller/resources/dcb/Java.mp3" }}12
13Hello Devoxx! Demo
Resource: JavaFX API Documentation14http://java.sun.com/javafx/1.2/docs/api/
15Part 2 - Comparing JavaFX and Javavar x = ['x','o','v','e','d','x'];insert x[5] before x[0];println("{reverse x[0..<]}");@projavafxcourse answer
Language SimilaritiesJava is…Statically typedCompiled to bytecodesRuns on the JVMHas a large libraryJavaFX is…Statically typedCompiled to bytecodesRuns on the JVMCan call Java libraries16
Language Differences17
Integrating JavaFX and JavaCalling Java from JavaFXCan call Java interface or classes directlyAutomatic conversion to and from Arrays and CollectionsCan even extend Java interfaces and classesCalling JavaFX from JavaEasiest way is to create a Java interface that JavaFX extendsCan invoke JavaFX as a script and get results back18
Datatype Support19
JavaFX Operators20Multiplication and division of two durations is allowed, but not meaningful
Underflows/Overflows will fail silently, producing inaccurate results
Divide by zero will throw a runtime exceptionJavaFX Operators (continued)21
Access Modifiers22
Data BindingA variable or a constant can be bound to an expressionvar x = bind a + b;The bound expression is rememberedThe dependencies of the expression is watchedVariable is updatedRegular binding: when dependencies change valuesLazy binding: when the variable is accessedvar x = bind lazy a+ b;23
What Bind Updatesvar x = bind if(a) then b else cx is updated if a or b or c changesvar x = bind for (i in [a..b]) { i * i }Not everything is recalculatedIf a = 1 and b = 2, x is [1, 4]If b changes to 3, only the added element is calculated24149
Binding to ExpressionsBinding to a blockBound block may contain any number of defs followed by one expressionDependencies of block is backtraced from the expressionBinding to function invocation expressionRegular function: dependencies are parametersBound function: backtraced from final expression inside function25
Binding to Object Literalsvar a = 3; var b = 4;var p = bind Point { x: a, y: b };var q = bind Point { x: bind a, y: b };var r = bind Point { x: bind a, y: bind b };When a changes:p gets a new instance of Pointq and r keep the old instance with a new x valuer will never get a new instance of Point(the outer bind in r is useless)26
Binding to FunctionsStage { def cModel = CircleModel {};varsliderRef:Slider; scene: Scene { content: [ Circle { radius: bind cModel.diameter / 2 }, Text { content: bind "Diameter: {%3.0f cModel.diameter}" }, Text { content: bind "Area: {%3.2f cModel.getArea()}" },sliderRef = Slider { value: bind cModel.diameter with inverse}]}}27class CircleModel {vardiameter:Number; bound function getArea():Number {Math.PI * Math.pow(diameter / 2, 2); }}http://learnjavafx.typepad.com/weblog/javafx_app_deployment/
JavaFX SequencesRepresents collections of homogeneous dataA fundamental container data typeRich set of language facilitiesContributor to declarative syntaxAutomatic conversion to and from Java Arrays and Collections28
Creating SequencesExplicit sequence expression[1, 3, 5, 7, 9]Elements are separated by commasComma may be omitted if element ends with brace2913579
Creating SequencesNumeric sequence with range expressions:[1..10]Can have a step:[1..10 step 2][0.0..0.9 step 0.1]Can be decreasing:[10..1 step -3]Beware of step that goes opposite direction:[10..1] is []Exclusive right end[1..<5]3012345678910135790.1.2.3.4.5.6.7.8.9107411234
Getting Information from Sequencesints = [1, 3, 5, 7, 9]sizeofintsis 5ints[0] is 1, ints[1] is 3, ..., ints[4] is 9ints[-1] is 0 (default value of Integer), so is ints[5]For a sequence of objects, the default is null3113579[0][1][2][3][4]
Getting Slices From Sequencesints = [1, 3, 5, 7, 9]ints[0..2] is [1, 3, 5]ints[0..<2] is [1, 3]ints[2..] is [5, 7, 9]ints[2..<] is [5, 7]ints[2..0], ints[-2..-1], ints[5..6] are all []s3213579[0][1][2][3][4]
Getting Subsets from Sequencesints = [1, 3, 5, 7, 9]ints[k | k > 6] is:[7, 9] (k > 6 is a condition)ints[k | indexof k < 2] is:[1, 3]ints[k | k > 10] is:[]3313579[0][1][2][3][4]
Inserting into Sequencesints = [1, 3, 5, 7, 9]insert 20 into intsinsert 30 before ints[2]insert 40 after ints[4]insert [50, 60] into ints3413579135792013579203013579203040135792030405060
Deleting from Sequencesints = [1, 3, 5, 7, 9]delete 7 from intsdelete ints[0]delete ints[0..1]delete ints: ints becomes []35135791357913593599
Sequence PuzzlersFXWhat is the size of this sequence:[1..10 step -1]What does this evaluate to:[10..<20 step 2][k|k>17]What is the size of this sequence:sizeof [20..1 step -3]361A: 02A: [18]3A: 1
Reference: JavaFXRefCard37http://refcardz.dzone.com/refcardz/
Demo by Tor Norbye38JavaFX Builder Tool?
39JavaFX 1.2 Layouts
JavaFX 1.2 Custom LayoutsContainerPanelBoth Extend ParentContainer creates layouts by extensionPanel creates layouts by declaration40
Who is My Representative?41Web Service Integration
Calling a REST ServiceREST URL:http://whoismyrepresentative.com/getall_mems.php?zip=90210&output=jsonOutput:{ "results": [ { "type": "rep", "name": "Henry A. Waxman", "party": "D", "state": "CA", "district": "30", "phone": "(202) 225-3976", "office": "2204 Rayburn", "link": "http://www.henrywaxman.house.gov/" }]}42
Making an HttpRequestreq = HttpRequest { method: HttpRequest.GET location: urlonInput: parseResponseonDone: function() { if (req.responseCode != 200) { message = req.responseMessage; } else if (sizeof senators == 0 and sizeof representatives == 0) { message = "No members found for {zipcode}"; } }onException: function(ex: java.lang.Exception) {println("Exception: {ex.getClass()} {ex.getMessage()}"); }}req.start();43
Using the Pull Parserwhile (parser.event.type != PullParser.END_DOCUMENT) {parser.seek( "type" ); if (parser.event.type == PullParser.START_VALUE) {parser.forward(); if (parser.event.text == "rep") {var rep = Representative{}parseMemberOfCongress( rep, parser ); insert rep into representatives; } else if (parser.event.text == "sen" ) {varsen = Senator{}parseMemberOfCongress( sen, parser ); insert sen into senators;} } }44
JavaFX Mobile Development
JavaFX Mobile AdvantagesWrite Once, Run AnywhereDesktop, Mobile, Set-top Boxes (future)Large Embedded BaseBuilt on top of Java ME platformWide Range of DevicesRuns on Feature Phones, Smart PhonesCurrently available for Windows Mobile devices
JavaFX Mobile ConstraintsScreen SizeYour application has to be capable of adapting to different screen sizes as small as 320 by 240.Common ProfileMobile applications are limited to the JavaFX APIs that are part of the Common Profile, which is a subset of the Desktop Profile.PerformanceMobile applications run on much less powerful devices, so they have less CPU and memory resources available to work with.
Developing for the Common Profile
Changes to Improve Hello Devoxx!It runs as is with no changes, but was not designed for the mobile format.We can do better:Replace all hard-coded sizes with a bindScale the background image to the screen sizePut an error up on network failureThe improved version also works on the desktop.49
Mobile DemoHello Devoxx!
JavaFX How-To’s51http://javafx.com/learn/howto.jsp
52JFXtras – Open Source JavaFXAddonshttp://jfxtras.org/
JFXtras Grid53RowRow
JFXtras GridXGrid { effect: Reflection {} border: 20vgap: 12hgap: 12 rows: bind [ row([text, progressBar]), row([navigator, mediaGrid]) ]}54
Media Explorer Example55
JFXtras Borders56
JFXtras BordersFunction:override function create() {XTitledBorder { id: "imageTitle“ title: file.getName() content: XFrameBorder { id: "imageFrame“ node: XImageView {preserveRatio: true smooth: true image: bind image } } }}CSS:#imageTitle { position: "bottom"; justification: "center"; font: bold 12pt Serif; text-color: #000060;}#imageFrame { border-left-width: 12; border-top-width: 12; border-bottom-width: 20; border-right-width: 12; background-fill: #00007020;}57
JFXtras Borders58
59MigLayout for JavaFX
60Flexible Grid-Based LayoutFlowWrap
MigLayout Constraints“wrap”“fill”“flowy”“gap”MigLayout { constraints: “fill, wrap” // to be continued}61
MigLayout { constraints: "fill, wrap" columns: "[][]" rows: "[][]4mm[]push[]" content: [ Label { text: "Email"layoutInfo: nodeConstraints( "ax right" ) }TextBox {layoutInfo: nodeConstraints( "growx, pushx" ) } Label { text: "Password"layoutInfo: nodeConstraints( "ax right" ) }TextBox {layoutInfo: nodeConstraints( "growx, pushx" ) } Button { text: "Login"layoutInfo: nodeConstraints( "skip, right" ) } Label { text: "This text is 'pushed' to the bottom"layoutInfo: nodeConstraints( "span" ) } ]}62
JFXtras Shapes63 Almond Intersection of two circles (VesicaPiscis) centerX, centerY, width Arrow Arrow shape x, y, width, height, depth, rise Asterisk Asterisk with rounded corners centerX, centerY, width, radius, beams, roundnessAstroidHypocloid with four cusps centerX, centerY, radius Balloon Rectangular shape with a tab x, y, width, height, arc, anglePosition, tabWidth,tabHeight, tabLocation, tabDisplacement Cross Symmetrical cross shape centerX, centerY, width, radius, roundness Donut Regular polygon with a hole centerX, centerY, innerRadius, outerRadius, sidesLauburu Four comma-shaped heads centerX, centerY, radiusContinued…
JFXtras Shapes (continued)64MultiRoundRectangle Rectangle with configurable corners x, y, width, height, topLeftWidth/Height,topRightWidth/Height, bottomLeftWidth/Height,bottomRightWidth/Height Rays Multiple rays extend from center centerX, centerY, rays, radius, extent, roundedRegularPolygon Polygon with equal sides centerX, centerY, sides, radiusReuleauxTriangle Curved triangle shape centerX, centerY, radiusRoundPin Cone with rounded top centerX, centerY, height, radius Star2 Multipoint star centerX, centerY, innerRadius, outerRadius, countETriangle Equilateral triangle x, y, widthITriangle Isosceles triangle x, y, width, height RTriangle Right triangle x, y, width, height, anglePosition
JFXtras Shapes65
Sphere Challenge66Andres Almiray’s Webloghttp://www.jroller.com/aalmiray/entry/griffon_gfxbuilder_fxbuilder_side_by“The following snapshot shows a couple of spheres drawn with GfxBuilder and FxBuilder, can you guess which one is which?…This is by no means a post to bash JavaFXrather to point out some of its deficiencies” -- Andres Almiray(taken completely out of context)
Sphere Challenge – JavaFX ResponseComposition:RadialGradient for the Sphere Three additional RadialGradients for the light sources A blurred shadow underneathFeatures:All Bound/Relative CoordinatesConfigurable –Base, Ambient, Specular, Shine ColorsShadow Size and HeightUses New JFXtrasColorUtil LibraryJavaFX Caching for High Performance67Will be shipped with JFXtras 0.6
JFXtras Spheres Demo68
JFXtras Shelf69
The JavaFX Desktop Widget PlatformWidgetFX
WidgetFX Origins71
72Why WidgetFX Matters
Movie Widget Tutorial
Widget Properties74
Widget Definitionvar widget: Widget;widget = Widget { width: 640 height: 352aspectRatio: bind player.media.width / player.media.height content: bind player}75
Load the Mediavar source = "http://projavafx.com/movies/ elephants-dream-640x352.flv";var player = bind SimpleMoviePlayer { media: Media { source: source } width: bind widget.width height: bind widget.height}76
Run in Widget Runner77
Widget Configuration Properties78
Widget Configurationwidget = Widget { ... configuration: Configuration { properties: [StringProperty { name: "source“ value: bind source with inverse } ] scene: Scene {…} // see next page }}79
Widget Config DialogScene { content: XGrid { rows: row([ Text { content: "Source URL:“ },TextBox { columns: 30, value: bind source with inverse } ]) }}80
Add an On-Replace Triggervar player = bind SimpleMoviePlayer { media: Media { source: source } width: bind widget.width height: bind widget.height} on replace =oldPlayer {oldPlayer.player.stop();}81
Widget Configuration (demo)82
WidgetFX Contest Results!3rd PlaceInfix WeatherWidgetLarry Dickson2nd PlaceRadioFXYannick Van Godtsenhoven1st PlaceScreenshotFXPär Dahlberg83
JavaFXpert RIA Exemplar Challenge"Create an application in JavaFX that exemplifies the appearance and behavior of a next-generation enterprise RIA (rich internet application)".Grand Prize: $2,000 USD(split between a two-man graphics artist and application developer team)Deadline: 10 January, 2010For more info: http://learnjavafx.typepad.com/84
LearnFX and Win at Devoxx85
Thursday’s QuestionHttpRequest { location: http://steveonjava.com/onResponseMessage: function(m) {println(m); FX.exit()}}.start();Launch LearnFX from my blog: http://steveonjava.com/Or tweet @projavafxcourse answer2:00PM Room 8 (right here!)86

More Related Content

PPTX
Pro Java Fx – Developing Enterprise Applications
Stephen Chin
 
PPTX
JavaFX 2.0 With Alternative Languages - Groovy, Clojure, Scala, Fantom, and V...
Stephen Chin
 
PPTX
Internet of Things Magic Show
Stephen Chin
 
PDF
Threads, Queues, and More: Async Programming in iOS
TechWell
 
PDF
Unbreakable: The Craft of Code
Joe Morgan
 
PDF
ES6 patterns in the wild
Joe Morgan
 
PDF
Managing Mocks
Helen Sherwood-Taylor
 
KEY
Meck
Adam Lindberg
 
Pro Java Fx – Developing Enterprise Applications
Stephen Chin
 
JavaFX 2.0 With Alternative Languages - Groovy, Clojure, Scala, Fantom, and V...
Stephen Chin
 
Internet of Things Magic Show
Stephen Chin
 
Threads, Queues, and More: Async Programming in iOS
TechWell
 
Unbreakable: The Craft of Code
Joe Morgan
 
ES6 patterns in the wild
Joe Morgan
 
Managing Mocks
Helen Sherwood-Taylor
 
Meck
Adam Lindberg
 

What's hot (20)

PDF
Integration testing with spring @snow one
Victor Rentea
 
PDF
Meck at erlang factory, london 2011
Adam Lindberg
 
PDF
Integration testing with spring @JAX Mainz
Victor Rentea
 
PDF
Implementações paralelas
Willian Molinari
 
PDF
Error Management: Future vs ZIO
John De Goes
 
PDF
Introduction to kotlin coroutines
NAVER Engineering
 
PPT
Come on, PHP 5.4!
paulgao
 
PDF
Spring hibernate jsf_primefaces_intergration
Carlos Junior Caso Casimiro
 
PDF
JavaOne 2016 -Emerging Web App Architectures using Java and node.js
Steve Wallin
 
PPTX
ZIO: Powerful and Principled Functional Programming in Scala
Wiem Zine Elabidine
 
PPT
Find bottleneck and tuning in Java Application
guest1f2740
 
PDF
Python concurrency: libraries overview
Andrii Mishkovskyi
 
PPTX
Django + Vue, JavaScript de 3ª generación para modernizar Django
Javier Abadía
 
PDF
Metrics-Driven Engineering at Etsy
Mike Brittain
 
PPT
Core data optimization
Gagan Vishal Mishra
 
KEY
Testing My Patience
Adam Lowry
 
PPTX
ES6, 잘 쓰고 계시죠?
장현 한
 
PDF
Contextual communications and why you should care - Droidcon DE
Marcos Placona
 
PDF
Testing a 2D Platformer with Spock
Alexander Tarlinder
 
PDF
Exploit ie using scriptable active x controls version English
chen yuki
 
Integration testing with spring @snow one
Victor Rentea
 
Meck at erlang factory, london 2011
Adam Lindberg
 
Integration testing with spring @JAX Mainz
Victor Rentea
 
Implementações paralelas
Willian Molinari
 
Error Management: Future vs ZIO
John De Goes
 
Introduction to kotlin coroutines
NAVER Engineering
 
Come on, PHP 5.4!
paulgao
 
Spring hibernate jsf_primefaces_intergration
Carlos Junior Caso Casimiro
 
JavaOne 2016 -Emerging Web App Architectures using Java and node.js
Steve Wallin
 
ZIO: Powerful and Principled Functional Programming in Scala
Wiem Zine Elabidine
 
Find bottleneck and tuning in Java Application
guest1f2740
 
Python concurrency: libraries overview
Andrii Mishkovskyi
 
Django + Vue, JavaScript de 3ª generación para modernizar Django
Javier Abadía
 
Metrics-Driven Engineering at Etsy
Mike Brittain
 
Core data optimization
Gagan Vishal Mishra
 
Testing My Patience
Adam Lowry
 
ES6, 잘 쓰고 계시죠?
장현 한
 
Contextual communications and why you should care - Droidcon DE
Marcos Placona
 
Testing a 2D Platformer with Spock
Alexander Tarlinder
 
Exploit ie using scriptable active x controls version English
chen yuki
 
Ad

Viewers also liked (7)

PPTX
JavaFX and WidgetFX at SVCodeCamp
Stephen Chin
 
PPTX
Raspberry Pi Gaming 4 Kids (Devoxx4Kids)
Stephen Chin
 
PPTX
Confessions of a Former Agile Methodologist (JFrog Edition)
Stephen Chin
 
PPTX
Oracle IoT Kids Workshop
Stephen Chin
 
PPTX
Devoxx4Kids NAO Workshop
Stephen Chin
 
PPTX
Devoxx4Kids Lego Workshop
Stephen Chin
 
PDF
JFXtras - JavaFX Controls, Layout, Services, and More
Stephen Chin
 
JavaFX and WidgetFX at SVCodeCamp
Stephen Chin
 
Raspberry Pi Gaming 4 Kids (Devoxx4Kids)
Stephen Chin
 
Confessions of a Former Agile Methodologist (JFrog Edition)
Stephen Chin
 
Oracle IoT Kids Workshop
Stephen Chin
 
Devoxx4Kids NAO Workshop
Stephen Chin
 
Devoxx4Kids Lego Workshop
Stephen Chin
 
JFXtras - JavaFX Controls, Layout, Services, and More
Stephen Chin
 
Ad

Similar to The Java Fx Platform – A Java Developer’S Guide (20)

PDF
JavaFX Overview
José Maria Silveira Neto
 
ODP
Presentation - Course about JavaFX
Tom Mix Petreca
 
ODP
JavaFX introduction
José Maria Silveira Neto
 
ODP
JavaFXScript
webuploader
 
PPT
Intro to JavaFX & Widget FX
Stephen Chin
 
ODP
Java Fx Overview Tech Tour
Carol McDonald
 
PDF
Java Fx Ajaxworld Rags V1
rajivmordani
 
PPT
JavaFX - Next Generation Java UI
Yoav Aharoni
 
PDF
JavaFX In Practice
Richard Bair
 
PDF
BeJUG JavaFx In Practice
Pursuit Consulting
 
PPTX
JavaFX 2 and Scala - Like Milk and Cookies (33rd Degrees)
Stephen Chin
 
PDF
Java Fx
Karthik Sankar
 
ODP
JavaFX in Action Part I
Mohammad Hossein Rimaz
 
PDF
JavaFX 1.0 SDK Aquarium Paris
Alexis Moussine-Pouchkine
 
PPTX
Java Core | JavaFX 2.0: Great User Interfaces in Java | Simon Ritter
JAX London
 
PPT
JavaFX
Mark Nankman
 
PDF
Scripting with Java FX - Cédric Tabin - December 2007
JUG Lausanne
 
PDF
JavaFX
Raphael Marques
 
PDF
Hacking JavaFX with Groovy, Clojure, Scala, and Visage: Stephen Chin
jaxconf
 
PPTX
JavaFX 2.0 With Alternative Languages - JavaOne 2011
Stephen Chin
 
JavaFX Overview
José Maria Silveira Neto
 
Presentation - Course about JavaFX
Tom Mix Petreca
 
JavaFX introduction
José Maria Silveira Neto
 
JavaFXScript
webuploader
 
Intro to JavaFX & Widget FX
Stephen Chin
 
Java Fx Overview Tech Tour
Carol McDonald
 
Java Fx Ajaxworld Rags V1
rajivmordani
 
JavaFX - Next Generation Java UI
Yoav Aharoni
 
JavaFX In Practice
Richard Bair
 
BeJUG JavaFx In Practice
Pursuit Consulting
 
JavaFX 2 and Scala - Like Milk and Cookies (33rd Degrees)
Stephen Chin
 
Java Fx
Karthik Sankar
 
JavaFX in Action Part I
Mohammad Hossein Rimaz
 
JavaFX 1.0 SDK Aquarium Paris
Alexis Moussine-Pouchkine
 
Java Core | JavaFX 2.0: Great User Interfaces in Java | Simon Ritter
JAX London
 
JavaFX
Mark Nankman
 
Scripting with Java FX - Cédric Tabin - December 2007
JUG Lausanne
 
JavaFX
Raphael Marques
 
Hacking JavaFX with Groovy, Clojure, Scala, and Visage: Stephen Chin
jaxconf
 
JavaFX 2.0 With Alternative Languages - JavaOne 2011
Stephen Chin
 

More from Stephen Chin (20)

PPTX
DevOps Tools for Java Developers v2
Stephen Chin
 
PPTX
10 Ways Everyone Can Support the Java Community
Stephen Chin
 
PPTX
Java Clients and JavaFX: The Definitive Guide
Stephen Chin
 
PPTX
DevOps Tools for Java Developers
Stephen Chin
 
PPTX
Java Clients and JavaFX - Presented to LJC
Stephen Chin
 
PPTX
RetroPi Handheld Raspberry Pi Gaming Console
Stephen Chin
 
PPTX
JavaFX on Mobile (by Johan Vos)
Stephen Chin
 
PPTX
Raspberry Pi with Java (JJUG)
Stephen Chin
 
PPTX
Confessions of a Former Agile Methodologist
Stephen Chin
 
PPTX
Zombie Time - JSR 310 for the Undead
Stephen Chin
 
PPTX
JCrete Embedded Java Workshop
Stephen Chin
 
PPTX
OpenJFX on Android and Devices
Stephen Chin
 
PPTX
Java on Raspberry Pi Lab
Stephen Chin
 
PDF
Java 8 for Tablets, Pis, and Legos
Stephen Chin
 
PDF
DukeScript
Stephen Chin
 
PDF
Raspberry Pi Gaming 4 Kids - Dutch Version
Stephen Chin
 
PPTX
Raspberry pi gaming 4 kids
Stephen Chin
 
PDF
Mary Had a Little λ (QCon)
Stephen Chin
 
PPTX
Raspberry Pi à la GroovyFX
Stephen Chin
 
PPTX
LUGOD Raspberry Pi Hacking
Stephen Chin
 
DevOps Tools for Java Developers v2
Stephen Chin
 
10 Ways Everyone Can Support the Java Community
Stephen Chin
 
Java Clients and JavaFX: The Definitive Guide
Stephen Chin
 
DevOps Tools for Java Developers
Stephen Chin
 
Java Clients and JavaFX - Presented to LJC
Stephen Chin
 
RetroPi Handheld Raspberry Pi Gaming Console
Stephen Chin
 
JavaFX on Mobile (by Johan Vos)
Stephen Chin
 
Raspberry Pi with Java (JJUG)
Stephen Chin
 
Confessions of a Former Agile Methodologist
Stephen Chin
 
Zombie Time - JSR 310 for the Undead
Stephen Chin
 
JCrete Embedded Java Workshop
Stephen Chin
 
OpenJFX on Android and Devices
Stephen Chin
 
Java on Raspberry Pi Lab
Stephen Chin
 
Java 8 for Tablets, Pis, and Legos
Stephen Chin
 
DukeScript
Stephen Chin
 
Raspberry Pi Gaming 4 Kids - Dutch Version
Stephen Chin
 
Raspberry pi gaming 4 kids
Stephen Chin
 
Mary Had a Little λ (QCon)
Stephen Chin
 
Raspberry Pi à la GroovyFX
Stephen Chin
 
LUGOD Raspberry Pi Hacking
Stephen Chin
 

Recently uploaded (20)

PDF
KodekX | Application Modernization Development
KodekX
 
PDF
Empathic Computing: Creating Shared Understanding
Mark Billinghurst
 
PDF
TokAI - TikTok AI Agent : The First AI Application That Analyzes 10,000+ Vira...
SOFTTECHHUB
 
PDF
cuic standard and advanced reporting.pdf
SimoneTitaniumTomase
 
PPTX
Effective Security Operations Center (SOC) A Modern, Strategic, and Threat-In...
ReZa AdineH
 
DOCX
The AUB Centre for AI in Media Proposal.docx
GAONE9
 
PDF
NewMind AI Monthly Chronicles - July 2025
NewMind AI
 
PPTX
breach-and-attack-simulation-cybersecurity-india-chennai-defenderrabbit-2025....
defencerabbit Team
 
PDF
solutions_manual_-_materials___processing_in_manufacturing__demargo_.pdf
AbdullahSani29
 
PPTX
Cloud computing and distributed systems.
kkkkkhan
 
PDF
Electronic commerce courselecture one. Pdf
OmerMohamed64
 
PDF
NewMind AI Weekly Chronicles - August'25 Week I
NewMind AI
 
PDF
Modernizing your data center with Dell and AMD
Principled Technologies
 
PDF
Shreyas Phanse Resume: Experienced Backend Engineer | Java • Spring Boot • Ka...
SHREYAS PHANSE
 
PDF
Architecting across the Boundaries of two Complex Domains - Healthcare & Tech...
Peter Tan
 
PDF
Mobile App Security Testing_ A Comprehensive Guide.pdf
flufftailshop
 
PPTX
Big Data Technologies - Introduction.pptx
kuthubussaman1
 
PPTX
Spectroscopy.pptx food analysis technology
nawahassan45
 
PDF
Peak of Data & AI Encore- AI for Metadata and Smarter Workflows
Safe Software
 
PPTX
MYSQL Presentation for SQL database connectivity
Swati270511
 
KodekX | Application Modernization Development
KodekX
 
Empathic Computing: Creating Shared Understanding
Mark Billinghurst
 
TokAI - TikTok AI Agent : The First AI Application That Analyzes 10,000+ Vira...
SOFTTECHHUB
 
cuic standard and advanced reporting.pdf
SimoneTitaniumTomase
 
Effective Security Operations Center (SOC) A Modern, Strategic, and Threat-In...
ReZa AdineH
 
The AUB Centre for AI in Media Proposal.docx
GAONE9
 
NewMind AI Monthly Chronicles - July 2025
NewMind AI
 
breach-and-attack-simulation-cybersecurity-india-chennai-defenderrabbit-2025....
defencerabbit Team
 
solutions_manual_-_materials___processing_in_manufacturing__demargo_.pdf
AbdullahSani29
 
Cloud computing and distributed systems.
kkkkkhan
 
Electronic commerce courselecture one. Pdf
OmerMohamed64
 
NewMind AI Weekly Chronicles - August'25 Week I
NewMind AI
 
Modernizing your data center with Dell and AMD
Principled Technologies
 
Shreyas Phanse Resume: Experienced Backend Engineer | Java • Spring Boot • Ka...
SHREYAS PHANSE
 
Architecting across the Boundaries of two Complex Domains - Healthcare & Tech...
Peter Tan
 
Mobile App Security Testing_ A Comprehensive Guide.pdf
flufftailshop
 
Big Data Technologies - Introduction.pptx
kuthubussaman1
 
Spectroscopy.pptx food analysis technology
nawahassan45
 
Peak of Data & AI Encore- AI for Metadata and Smarter Workflows
Safe Software
 
MYSQL Presentation for SQL database connectivity
Swati270511
 

The Java Fx Platform – A Java Developer’S Guide

  • 1. The JavaFX Platform – A Java Developer’s GuideStephen ChinInovis, Inc.
  • 2. About Your PresenterDirector SWE, Inovis, Inc.Open-Source JavaFX HackerMBABelotti AwardUberScrumMasterXP CoachAgile EvangelistWidgetFXJFXtrasFEST-JavaFXPiccolo2DJava ChampionJavaOneRockstarJUG LeaderPro JavaFX Author2Family ManMotorcyclist
  • 3. LearnFX and Win at DevoxxTweet to answer:@projavafxcourse your-answer-here3
  • 4. Part 1 - JavaFX Crash Coursevar x = ['x','o','v','e','d','x'];insert x[5] before x[0];println("{reverse x[0..<]}");@projavafxcourse answer
  • 6. Eclipse – ExadelJavaFX Studio3. Write Your First AppHello Devoxx!Step-by-Step Demovar x = ['x','o','v','e','d','x'];insert x[5] before x[0];println("{reverse x[0..<]}");@projavafxcourse answer
  • 7. Hello Devoxx!: Creating a StageStage { title: "Hello Devoxx!" scene: Scene { content: [ "..." ] }}6var x = ['x','o','v','e','d','x'];insert x[5] before x[0];println("{reverse x[0..<]}");@projavafxcourse answer
  • 8. Hello Devoxx!: Displaying ImagesImageView { image: Image {url: "http://www.javoxx.com/download/attachments/1706305/Devoxx09.jpg" } opacity: .5}7var x = ['x','o','v','e','d','x'];insert x[5] before x[0];println("{reverse x[0..<]}");@projavafxcourse answer
  • 9. Hello Devoxx!: RSS Feedvaritems:Item[];RssTask { interval: 30s; location: "http://search.twitter.com/search.rss?q=devoxx"onItem: function(item) { insert item into items; }}.start();8
  • 10. Hello Devoxx!: VBox LayoutvartextBox:VBox;textBox = VBox {layoutX: 40layoutY: 40 spacing: 20 content: "..."}9
  • 11. Hello Devoxx!: Displaying Textcontent: bind for (item in items) { Text {textOrigin: TextOrigin.TOPtextAlignment: TextAlignment.JUSTIFYwrappingWidth: 520font: Font.font(null, FontWeight.BOLD, 18) content: item.title }}10
  • 12. Hello Devoxx!: Animating GraphicsvartransTransition = TranslateTransition { duration: 2m node: bind textBoxfromY: 600toY: -4000 interpolator: Interpolator.LINEARrepeatCount: Timeline.INDEFINITE}transTransition.play();11
  • 13. Hello Devoxx!: Playing Audio?MediaPlayer {autoPlay: truerepeatCount: MediaPlayer.REPEAT_FOREVER media: Media { source: "http://blogs.sun.com/roller/resources/dcb/Java.mp3" }}12
  • 15. Resource: JavaFX API Documentation14http://java.sun.com/javafx/1.2/docs/api/
  • 16. 15Part 2 - Comparing JavaFX and Javavar x = ['x','o','v','e','d','x'];insert x[5] before x[0];println("{reverse x[0..<]}");@projavafxcourse answer
  • 17. Language SimilaritiesJava is…Statically typedCompiled to bytecodesRuns on the JVMHas a large libraryJavaFX is…Statically typedCompiled to bytecodesRuns on the JVMCan call Java libraries16
  • 19. Integrating JavaFX and JavaCalling Java from JavaFXCan call Java interface or classes directlyAutomatic conversion to and from Arrays and CollectionsCan even extend Java interfaces and classesCalling JavaFX from JavaEasiest way is to create a Java interface that JavaFX extendsCan invoke JavaFX as a script and get results back18
  • 21. JavaFX Operators20Multiplication and division of two durations is allowed, but not meaningful
  • 22. Underflows/Overflows will fail silently, producing inaccurate results
  • 23. Divide by zero will throw a runtime exceptionJavaFX Operators (continued)21
  • 25. Data BindingA variable or a constant can be bound to an expressionvar x = bind a + b;The bound expression is rememberedThe dependencies of the expression is watchedVariable is updatedRegular binding: when dependencies change valuesLazy binding: when the variable is accessedvar x = bind lazy a+ b;23
  • 26. What Bind Updatesvar x = bind if(a) then b else cx is updated if a or b or c changesvar x = bind for (i in [a..b]) { i * i }Not everything is recalculatedIf a = 1 and b = 2, x is [1, 4]If b changes to 3, only the added element is calculated24149
  • 27. Binding to ExpressionsBinding to a blockBound block may contain any number of defs followed by one expressionDependencies of block is backtraced from the expressionBinding to function invocation expressionRegular function: dependencies are parametersBound function: backtraced from final expression inside function25
  • 28. Binding to Object Literalsvar a = 3; var b = 4;var p = bind Point { x: a, y: b };var q = bind Point { x: bind a, y: b };var r = bind Point { x: bind a, y: bind b };When a changes:p gets a new instance of Pointq and r keep the old instance with a new x valuer will never get a new instance of Point(the outer bind in r is useless)26
  • 29. Binding to FunctionsStage { def cModel = CircleModel {};varsliderRef:Slider; scene: Scene { content: [ Circle { radius: bind cModel.diameter / 2 }, Text { content: bind "Diameter: {%3.0f cModel.diameter}" }, Text { content: bind "Area: {%3.2f cModel.getArea()}" },sliderRef = Slider { value: bind cModel.diameter with inverse}]}}27class CircleModel {vardiameter:Number; bound function getArea():Number {Math.PI * Math.pow(diameter / 2, 2); }}http://learnjavafx.typepad.com/weblog/javafx_app_deployment/
  • 30. JavaFX SequencesRepresents collections of homogeneous dataA fundamental container data typeRich set of language facilitiesContributor to declarative syntaxAutomatic conversion to and from Java Arrays and Collections28
  • 31. Creating SequencesExplicit sequence expression[1, 3, 5, 7, 9]Elements are separated by commasComma may be omitted if element ends with brace2913579
  • 32. Creating SequencesNumeric sequence with range expressions:[1..10]Can have a step:[1..10 step 2][0.0..0.9 step 0.1]Can be decreasing:[10..1 step -3]Beware of step that goes opposite direction:[10..1] is []Exclusive right end[1..<5]3012345678910135790.1.2.3.4.5.6.7.8.9107411234
  • 33. Getting Information from Sequencesints = [1, 3, 5, 7, 9]sizeofintsis 5ints[0] is 1, ints[1] is 3, ..., ints[4] is 9ints[-1] is 0 (default value of Integer), so is ints[5]For a sequence of objects, the default is null3113579[0][1][2][3][4]
  • 34. Getting Slices From Sequencesints = [1, 3, 5, 7, 9]ints[0..2] is [1, 3, 5]ints[0..<2] is [1, 3]ints[2..] is [5, 7, 9]ints[2..<] is [5, 7]ints[2..0], ints[-2..-1], ints[5..6] are all []s3213579[0][1][2][3][4]
  • 35. Getting Subsets from Sequencesints = [1, 3, 5, 7, 9]ints[k | k > 6] is:[7, 9] (k > 6 is a condition)ints[k | indexof k < 2] is:[1, 3]ints[k | k > 10] is:[]3313579[0][1][2][3][4]
  • 36. Inserting into Sequencesints = [1, 3, 5, 7, 9]insert 20 into intsinsert 30 before ints[2]insert 40 after ints[4]insert [50, 60] into ints3413579135792013579203013579203040135792030405060
  • 37. Deleting from Sequencesints = [1, 3, 5, 7, 9]delete 7 from intsdelete ints[0]delete ints[0..1]delete ints: ints becomes []35135791357913593599
  • 38. Sequence PuzzlersFXWhat is the size of this sequence:[1..10 step -1]What does this evaluate to:[10..<20 step 2][k|k>17]What is the size of this sequence:sizeof [20..1 step -3]361A: 02A: [18]3A: 1
  • 40. Demo by Tor Norbye38JavaFX Builder Tool?
  • 42. JavaFX 1.2 Custom LayoutsContainerPanelBoth Extend ParentContainer creates layouts by extensionPanel creates layouts by declaration40
  • 43. Who is My Representative?41Web Service Integration
  • 44. Calling a REST ServiceREST URL:http://whoismyrepresentative.com/getall_mems.php?zip=90210&output=jsonOutput:{ "results": [ { "type": "rep", "name": "Henry A. Waxman", "party": "D", "state": "CA", "district": "30", "phone": "(202) 225-3976", "office": "2204 Rayburn", "link": "http://www.henrywaxman.house.gov/" }]}42
  • 45. Making an HttpRequestreq = HttpRequest { method: HttpRequest.GET location: urlonInput: parseResponseonDone: function() { if (req.responseCode != 200) { message = req.responseMessage; } else if (sizeof senators == 0 and sizeof representatives == 0) { message = "No members found for {zipcode}"; } }onException: function(ex: java.lang.Exception) {println("Exception: {ex.getClass()} {ex.getMessage()}"); }}req.start();43
  • 46. Using the Pull Parserwhile (parser.event.type != PullParser.END_DOCUMENT) {parser.seek( "type" ); if (parser.event.type == PullParser.START_VALUE) {parser.forward(); if (parser.event.text == "rep") {var rep = Representative{}parseMemberOfCongress( rep, parser ); insert rep into representatives; } else if (parser.event.text == "sen" ) {varsen = Senator{}parseMemberOfCongress( sen, parser ); insert sen into senators;} } }44
  • 48. JavaFX Mobile AdvantagesWrite Once, Run AnywhereDesktop, Mobile, Set-top Boxes (future)Large Embedded BaseBuilt on top of Java ME platformWide Range of DevicesRuns on Feature Phones, Smart PhonesCurrently available for Windows Mobile devices
  • 49. JavaFX Mobile ConstraintsScreen SizeYour application has to be capable of adapting to different screen sizes as small as 320 by 240.Common ProfileMobile applications are limited to the JavaFX APIs that are part of the Common Profile, which is a subset of the Desktop Profile.PerformanceMobile applications run on much less powerful devices, so they have less CPU and memory resources available to work with.
  • 50. Developing for the Common Profile
  • 51. Changes to Improve Hello Devoxx!It runs as is with no changes, but was not designed for the mobile format.We can do better:Replace all hard-coded sizes with a bindScale the background image to the screen sizePut an error up on network failureThe improved version also works on the desktop.49
  • 54. 52JFXtras – Open Source JavaFXAddonshttp://jfxtras.org/
  • 56. JFXtras GridXGrid { effect: Reflection {} border: 20vgap: 12hgap: 12 rows: bind [ row([text, progressBar]), row([navigator, mediaGrid]) ]}54
  • 59. JFXtras BordersFunction:override function create() {XTitledBorder { id: "imageTitle“ title: file.getName() content: XFrameBorder { id: "imageFrame“ node: XImageView {preserveRatio: true smooth: true image: bind image } } }}CSS:#imageTitle { position: "bottom"; justification: "center"; font: bold 12pt Serif; text-color: #000060;}#imageFrame { border-left-width: 12; border-top-width: 12; border-bottom-width: 20; border-right-width: 12; background-fill: #00007020;}57
  • 63. MigLayout Constraints“wrap”“fill”“flowy”“gap”MigLayout { constraints: “fill, wrap” // to be continued}61
  • 64. MigLayout { constraints: "fill, wrap" columns: "[][]" rows: "[][]4mm[]push[]" content: [ Label { text: "Email"layoutInfo: nodeConstraints( "ax right" ) }TextBox {layoutInfo: nodeConstraints( "growx, pushx" ) } Label { text: "Password"layoutInfo: nodeConstraints( "ax right" ) }TextBox {layoutInfo: nodeConstraints( "growx, pushx" ) } Button { text: "Login"layoutInfo: nodeConstraints( "skip, right" ) } Label { text: "This text is 'pushed' to the bottom"layoutInfo: nodeConstraints( "span" ) } ]}62
  • 65. JFXtras Shapes63 Almond Intersection of two circles (VesicaPiscis) centerX, centerY, width Arrow Arrow shape x, y, width, height, depth, rise Asterisk Asterisk with rounded corners centerX, centerY, width, radius, beams, roundnessAstroidHypocloid with four cusps centerX, centerY, radius Balloon Rectangular shape with a tab x, y, width, height, arc, anglePosition, tabWidth,tabHeight, tabLocation, tabDisplacement Cross Symmetrical cross shape centerX, centerY, width, radius, roundness Donut Regular polygon with a hole centerX, centerY, innerRadius, outerRadius, sidesLauburu Four comma-shaped heads centerX, centerY, radiusContinued…
  • 66. JFXtras Shapes (continued)64MultiRoundRectangle Rectangle with configurable corners x, y, width, height, topLeftWidth/Height,topRightWidth/Height, bottomLeftWidth/Height,bottomRightWidth/Height Rays Multiple rays extend from center centerX, centerY, rays, radius, extent, roundedRegularPolygon Polygon with equal sides centerX, centerY, sides, radiusReuleauxTriangle Curved triangle shape centerX, centerY, radiusRoundPin Cone with rounded top centerX, centerY, height, radius Star2 Multipoint star centerX, centerY, innerRadius, outerRadius, countETriangle Equilateral triangle x, y, widthITriangle Isosceles triangle x, y, width, height RTriangle Right triangle x, y, width, height, anglePosition
  • 68. Sphere Challenge66Andres Almiray’s Webloghttp://www.jroller.com/aalmiray/entry/griffon_gfxbuilder_fxbuilder_side_by“The following snapshot shows a couple of spheres drawn with GfxBuilder and FxBuilder, can you guess which one is which?…This is by no means a post to bash JavaFXrather to point out some of its deficiencies” -- Andres Almiray(taken completely out of context)
  • 69. Sphere Challenge – JavaFX ResponseComposition:RadialGradient for the Sphere Three additional RadialGradients for the light sources A blurred shadow underneathFeatures:All Bound/Relative CoordinatesConfigurable –Base, Ambient, Specular, Shine ColorsShadow Size and HeightUses New JFXtrasColorUtil LibraryJavaFX Caching for High Performance67Will be shipped with JFXtras 0.6
  • 72. The JavaFX Desktop Widget PlatformWidgetFX
  • 77. Widget Definitionvar widget: Widget;widget = Widget { width: 640 height: 352aspectRatio: bind player.media.width / player.media.height content: bind player}75
  • 78. Load the Mediavar source = "http://projavafx.com/movies/ elephants-dream-640x352.flv";var player = bind SimpleMoviePlayer { media: Media { source: source } width: bind widget.width height: bind widget.height}76
  • 79. Run in Widget Runner77
  • 81. Widget Configurationwidget = Widget { ... configuration: Configuration { properties: [StringProperty { name: "source“ value: bind source with inverse } ] scene: Scene {…} // see next page }}79
  • 82. Widget Config DialogScene { content: XGrid { rows: row([ Text { content: "Source URL:“ },TextBox { columns: 30, value: bind source with inverse } ]) }}80
  • 83. Add an On-Replace Triggervar player = bind SimpleMoviePlayer { media: Media { source: source } width: bind widget.width height: bind widget.height} on replace =oldPlayer {oldPlayer.player.stop();}81
  • 85. WidgetFX Contest Results!3rd PlaceInfix WeatherWidgetLarry Dickson2nd PlaceRadioFXYannick Van Godtsenhoven1st PlaceScreenshotFXPär Dahlberg83
  • 86. JavaFXpert RIA Exemplar Challenge"Create an application in JavaFX that exemplifies the appearance and behavior of a next-generation enterprise RIA (rich internet application)".Grand Prize: $2,000 USD(split between a two-man graphics artist and application developer team)Deadline: 10 January, 2010For more info: http://learnjavafx.typepad.com/84
  • 87. LearnFX and Win at Devoxx85
  • 88. Thursday’s QuestionHttpRequest { location: http://steveonjava.com/onResponseMessage: function(m) {println(m); FX.exit()}}.start();Launch LearnFX from my blog: http://steveonjava.com/Or tweet @projavafxcourse answer2:00PM Room 8 (right here!)86
  • 89. Sneak Preview of Thursday’s Session87
  • 90. 88Thank YouStephen Chinhttp://steveonjava.com/Tweet: steveonjavaThanks to my co-authors, Jim, Weiqi , and Dean for content included in this talk!