• Home

  • Documents

  • Extreme GUI Makeover: Hybrid Swing and JavaFX™ · > Create listeners to wire JavaFX to Swing 9...
48
Extreme GUI Makeover: Hybrid Swing and JavaFX™ Amy Fowler, Sun Microsystems, Inc. David Grieve, Sun Microsystems, Inc. Paru Somashekar, Sun Microsystems, Inc. Jasper Potts, Sun Microsystems, Inc. Redux

Extreme GUI Makeover: Hybrid Swing and JavaFX™ · > Create listeners to wire JavaFX to Swing 9 FX Stage Swing JList Swing JTextPane. Create JavaFX Stage def STAGE_MIN_WIDTH = 845;

  • Upload
    dodat

  • View
    220

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Extreme GUI Makeover: Hybrid Swing and JavaFX™ · > Create listeners to wire JavaFX to Swing 9 FX Stage Swing JList Swing JTextPane. Create JavaFX Stage def STAGE_MIN_WIDTH = 845;

Extreme GUI Makeover:Hybrid Swing and JavaFX™

Amy Fowler, Sun Microsystems, Inc.David Grieve, Sun Microsystems, Inc.Paru Somashekar, Sun Microsystems, Inc.Jasper Potts, Sun Microsystems, Inc.

Redux

Page 2: Extreme GUI Makeover: Hybrid Swing and JavaFX™ · > Create listeners to wire JavaFX to Swing 9 FX Stage Swing JList Swing JTextPane. Create JavaFX Stage def STAGE_MIN_WIDTH = 845;

• The Before & After - Amy• Mixing Swing & JavaFX - Amy• Easy Eye Candy - Amy• Styling with CSS - David• 3D Illusion - Paru• Junk - Jasper

2

Agenda

Page 3: Extreme GUI Makeover: Hybrid Swing and JavaFX™ · > Create listeners to wire JavaFX to Swing 9 FX Stage Swing JList Swing JTextPane. Create JavaFX Stage def STAGE_MIN_WIDTH = 845;

A Hybrid Approach

Leverage existing Java/Swing application and use JavaFX to give it a face lift

3

Page 4: Extreme GUI Makeover: Hybrid Swing and JavaFX™ · > Create listeners to wire JavaFX to Swing 9 FX Stage Swing JList Swing JTextPane. Create JavaFX Stage def STAGE_MIN_WIDTH = 845;

> Leverage Java/Swing code/expertise> Swingʼs rich component suite

• stable & mature (lots of tire-kicking)• 3rd party extensions

> Java ideal for application internals• multi-threading• well defined patterns, data-models, practices, ...

4

Why Go Hybrid?and use Swing

Page 5: Extreme GUI Makeover: Hybrid Swing and JavaFX™ · > Create listeners to wire JavaFX to Swing 9 FX Stage Swing JList Swing JTextPane. Create JavaFX Stage def STAGE_MIN_WIDTH = 845;

> JavaFX script designed for rich interface construction• object literal syntax• binding• function pointers

> JavaFX platform graphics• 2D scene graph• Animation• Media (video)

> And JavaFX compiles to Java bytecodes5

Why Go Hybrid?and use JavaFX

Page 6: Extreme GUI Makeover: Hybrid Swing and JavaFX™ · > Create listeners to wire JavaFX to Swing 9 FX Stage Swing JList Swing JTextPane. Create JavaFX Stage def STAGE_MIN_WIDTH = 845;

6

before (2006)

after (2006)

The Before: Java Mail(GUI Makeover 2006)

Page 7: Extreme GUI Makeover: Hybrid Swing and JavaFX™ · > Create listeners to wire JavaFX to Swing 9 FX Stage Swing JList Swing JTextPane. Create JavaFX Stage def STAGE_MIN_WIDTH = 845;

7

Demo......

The After: ExtremeMail

Page 8: Extreme GUI Makeover: Hybrid Swing and JavaFX™ · > Create listeners to wire JavaFX to Swing 9 FX Stage Swing JList Swing JTextPane. Create JavaFX Stage def STAGE_MIN_WIDTH = 845;

Makeover Regimen

> Mixing Swing & JavaFX> Easy Eye Candy> Styling with CSS> 3D Illusion> Finale

8

Page 9: Extreme GUI Makeover: Hybrid Swing and JavaFX™ · > Create listeners to wire JavaFX to Swing 9 FX Stage Swing JList Swing JTextPane. Create JavaFX Stage def STAGE_MIN_WIDTH = 845;

Mixing Swing & JavaFX> Create JavaFX Stage> Embed Swing components in scene> Create listeners to wire JavaFX to Swing

9

FX Stage

Swing JList

Swing JTextPane

Page 10: Extreme GUI Makeover: Hybrid Swing and JavaFX™ · > Create listeners to wire JavaFX to Swing 9 FX Stage Swing JList Swing JTextPane. Create JavaFX Stage def STAGE_MIN_WIDTH = 845;

Create JavaFX Stage

def STAGE_MIN_WIDTH = 845;def STAGE_MIN_HEIGHT = 700;

def stage = Stage { style: StageStyle.TRANSPARENT scene: scene = Scene { width: STAGE_MIN_WIDTH height: STAGE_MIN_HEIGHT fill: null content: CaspianFrame { // scene contents.... } }}

// CaspianFrame is home-grown class implementing top-level // window shape/decorations (authored by Jasper Potts)

10

Page 11: Extreme GUI Makeover: Hybrid Swing and JavaFX™ · > Create listeners to wire JavaFX to Swing 9 FX Stage Swing JList Swing JTextPane. Create JavaFX Stage def STAGE_MIN_WIDTH = 845;

Embedding Swing Components

> Any Swing class can be embedded in scenejavafx.ext.swing.SwingComponent

> Can be treated like any node:• opacity (!), rotate, scale, translate, etc• Resizable and work with scene graph layout

> But treated as single node• node transforms only on whole component• cannot transform or animate component internals

11

Page 12: Extreme GUI Makeover: Hybrid Swing and JavaFX™ · > Create listeners to wire JavaFX to Swing 9 FX Stage Swing JList Swing JTextPane. Create JavaFX Stage def STAGE_MIN_WIDTH = 845;

Embedding Swing Components continued

> Can invoke Java/Swing apis from JavaFX scriptdef map = new HashMap();

var table = new JTable();

> Cannot use JavaFX script features on Components • no binding to Java bean properties

> Can create JavaFX wrapper classes to help• SDK provides wrappers for many Swing classes

javafx.ext.swing.*

> JavaFX strictly single-threaded• non-gui thread execution must happen in Java code

12

Page 13: Extreme GUI Makeover: Hybrid Swing and JavaFX™ · > Create listeners to wire JavaFX to Swing 9 FX Stage Swing JList Swing JTextPane. Create JavaFX Stage def STAGE_MIN_WIDTH = 845;

Embed Swing Components in Scenevar body:Panel;var toolbar:ToolBar;var mailboxArea:BackDrop;var messageListArea:RoundedPanel;var messageArea:RoundedPanel;

var swingMessageList = new MessageListPanel(); // Swing classvar swingMessagePanel = new MessagePanel(); //Swing class body = Panel { content: [ toolbar = ToolBar { ... } mailboxArea = BackDrop { ... } messageListArea = RoundedPanel { node: SwingComponent.wrap(swingMessageList); } messageHeaderArea = BackDrop { ... } messageArea = RoundedPanel { node: SwingComponent.wrap(swingMessagePane); } ]}

13

Page 14: Extreme GUI Makeover: Hybrid Swing and JavaFX™ · > Create listeners to wire JavaFX to Swing 9 FX Stage Swing JList Swing JTextPane. Create JavaFX Stage def STAGE_MIN_WIDTH = 845;

Create Listeners for Wiring JavaFX to Swing

14

class PropChangeListener extends PropertyChangeListener { public var onPropChange:function(event:PropertyChangeEvent):Void; override function propertyChange(event:PropertyChangeEvent):Void { onPropChange(event); }}

def pcl:PropChangeListener = PropChangeListener { onPropChange: function(event:PropertyChangeEvent):Void { if (event.getPropertyName().equals("selectedMessage")) { // handle property change in FX } } }// add listener to Swing componentmessageListPanel.addPropertyChangeListener(pcl);

Page 15: Extreme GUI Makeover: Hybrid Swing and JavaFX™ · > Create listeners to wire JavaFX to Swing 9 FX Stage Swing JList Swing JTextPane. Create JavaFX Stage def STAGE_MIN_WIDTH = 845;

Easy Eye Candy

> Reflections and Rollover Effects> Rounded Panels> Animating Tree

15

Page 16: Extreme GUI Makeover: Hybrid Swing and JavaFX™ · > Create listeners to wire JavaFX to Swing 9 FX Stage Swing JList Swing JTextPane. Create JavaFX Stage def STAGE_MIN_WIDTH = 845;

Reflections and Rollover Effects

16

Page 17: Extreme GUI Makeover: Hybrid Swing and JavaFX™ · > Create listeners to wire JavaFX to Swing 9 FX Stage Swing JList Swing JTextPane. Create JavaFX Stage def STAGE_MIN_WIDTH = 845;

Reflections

def reflection = Reflection { fraction: 0.33 }; // effects can be shared!

composeButtonLabel = VBox { nodeHPos:HPos.CENTER spacing: 4 content: bind [ ImageView { image: Image { url: "{__DIR__}resources/compose.png"} effect: reflection cache: true }, label = Text { ... } ]}

17

Page 18: Extreme GUI Makeover: Hybrid Swing and JavaFX™ · > Create listeners to wire JavaFX to Swing 9 FX Stage Swing JList Swing JTextPane. Create JavaFX Stage def STAGE_MIN_WIDTH = 845;

Rollover Effect

var label:Text;var fadein:FadeTransition = FadeTransition { node: bind label fromValue: 0 toValue: 1.0 duration: 100ms // fade-in is fast };var fadeout:FadeTransition = FadeTransition { node: bind label fromValue: 1.0 toValue: 0.0 duration: 500ms // fade-out is slower};

...

18

Page 19: Extreme GUI Makeover: Hybrid Swing and JavaFX™ · > Create listeners to wire JavaFX to Swing 9 FX Stage Swing JList Swing JTextPane. Create JavaFX Stage def STAGE_MIN_WIDTH = 845;

...composeButtonLabel = VBox { nodeHPos:HPos.CENTER spacing: 4 content: bind [ ImageView { ... }, label = Text { content: “Compose” fill: TEXT_FILL font: Font.font("Verdana", FontWeight.BOLD, 10) textAlignment: TextAlignment.CENTER opacity: 0.0 } ] onMouseEntered:function(event:MouseEvent):Void { fadein.playFromStart(); } onMouseExited:function(event:MouseEvent):Void { fadeout.playFromStart(); }}

19

Rollover Effect continued

Page 20: Extreme GUI Makeover: Hybrid Swing and JavaFX™ · > Create listeners to wire JavaFX to Swing 9 FX Stage Swing JList Swing JTextPane. Create JavaFX Stage def STAGE_MIN_WIDTH = 845;

Rounded Panels

20

JavaFX node case Swing wrapper case

shadow over and clipped

Page 21: Extreme GUI Makeover: Hybrid Swing and JavaFX™ · > Create listeners to wire JavaFX to Swing 9 FX Stage Swing JList Swing JTextPane. Create JavaFX Stage def STAGE_MIN_WIDTH = 845;

Rounded Panel JavaFX Node Case

21

public class BackDrop extends CustomNode, Resizable { public var node:Node; public var fill:Paint = Color.TRANSPARENT; public var stroke:Paint; public var strokeWidth:Number = 0; public var arcLength:Number = 0; override function create():Node { Panel { width: bind this.width height: bind this.height content: bind [ Rectangle { width: bind this.width height: bind this.height arcWidth: bind arcLength arcHeight: bind arcLength fill: bind fill stroke: bind stroke strokeWidth: bind strokeWidth effect: InnerShadow {} } node // the node backed by rounded panel ] onLayout: function():Void { ... } // lays out node within rectangle } }

Since Mailbox Tree has transparent background,

this works

Page 22: Extreme GUI Makeover: Hybrid Swing and JavaFX™ · > Create listeners to wire JavaFX to Swing 9 FX Stage Swing JList Swing JTextPane. Create JavaFX Stage def STAGE_MIN_WIDTH = 845;

2. do shape-subtract3. add drop shadow4. clip

Rounded Panel Swing Wrapper Case

22

Since Swing Componentcannot have a transparent background, we have to do

it differently

1. create rectangle

Page 23: Extreme GUI Makeover: Hybrid Swing and JavaFX™ · > Create listeners to wire JavaFX to Swing 9 FX Stage Swing JList Swing JTextPane. Create JavaFX Stage def STAGE_MIN_WIDTH = 845;

23

public class RoundedPanel extends CustomNode, Resizable { public var node:Node; // node contained in rounded panel

public var fill:Paint = Color.TRANSPARENT; public var stroke:Paint; public var strokeWidth:Number = 0; public var arcLength:Number = 0; var clipper:Panel; override function create():Node { Panel { width: bind this.width height: bind this.height content: bind [ Rectangle { width: bind this.width height: bind this.height arcWidth: bind arcLength arcHeight: bind arcLength fill: bind fill stroke: bind stroke strokeWidth: bind strokeWidth } clipper = Panel { ...

Rounded Panel Swing Wrapper Case

Page 24: Extreme GUI Makeover: Hybrid Swing and JavaFX™ · > Create listeners to wire JavaFX to Swing 9 FX Stage Swing JList Swing JTextPane. Create JavaFX Stage def STAGE_MIN_WIDTH = 845;

24

clipper = Panel { clip: Rectangle { x: -1 y: -1 width: bind this.width - 2*strokeWidth + 2 height: bind this.height - 2*strokeWidth + 2 arcWidth: bind arcLength arcHeight: bind arcLength } content: [ node, // the Swing Component wrapper ShapeSubtract { layoutX: -1 layoutY: -1 effect: DropShadow { spread: .30 } cache: true a: bind Rectangle { width: this.width - 2*strokeWidth + 4 height: this.height - 2*strokeWidth + 4 } b: bind Rectangle { x: 1 y: 1 width: this.width - 2*strokeWidth + 2 height: this.height - 2*strokeWidth + 2 arcWidth: bind arcLength arcHeight: bind arcLength }; } ] onLayout: function():Void { ... } }

Rounded Panel Swing Wrapper Case

Page 25: Extreme GUI Makeover: Hybrid Swing and JavaFX™ · > Create listeners to wire JavaFX to Swing 9 FX Stage Swing JList Swing JTextPane. Create JavaFX Stage def STAGE_MIN_WIDTH = 845;

Animating Tree

> Build tree control with nested VBoxes that collapse/expand with animation

25

open closedclosing

Page 26: Extreme GUI Makeover: Hybrid Swing and JavaFX™ · > Create listeners to wire JavaFX to Swing 9 FX Stage Swing JList Swing JTextPane. Create JavaFX Stage def STAGE_MIN_WIDTH = 845;

Animating Tree

26

public class ExpandingVBox extends VBox {

var expansion:Number = 1.0 on replace { requestLayout(); // size needs to change }

override function getPrefHeight(width:Number):Number { expansion * super.getPrefHeight(width) }

override function doLayout():Void { // allow VBox to set layoutX/layoutY as normal super.doLayout(); for (node in getManaged(content)) { // changing translateX/translateY will not disturb layout! // translation is added on top of layout translation node.translateX = if (indexof node mod 2 > 0) slideTx else -slideTx; } }

...

Page 27: Extreme GUI Makeover: Hybrid Swing and JavaFX™ · > Create listeners to wire JavaFX to Swing 9 FX Stage Swing JList Swing JTextPane. Create JavaFX Stage def STAGE_MIN_WIDTH = 845;

Animating Tree continued

27

... public var duration:Duration = 20000ms; var slideTx:Number = 0; var blurWidth:Number = 0; def boxBlur = BoxBlur { width: bind blurWidth }; var expanimator:Timeline = Timeline { rate: -1 keyFrames: [ KeyFrame { time: 0s values: [ expansion => 1.0, opacity => 1.0, slideTx => 0 tween Interpolator.EASEBOTH, blurWidth => 0 ] action: toggleBlur } KeyFrame { time: bind duration values: [ expansion => 0.0, opacity => 0.0, slideTx => 200 tween Interpolator.EASEBOTH, blurWidth => 5 ] action: toggleBlur } ] }

Page 28: Extreme GUI Makeover: Hybrid Swing and JavaFX™ · > Create listeners to wire JavaFX to Swing 9 FX Stage Swing JList Swing JTextPane. Create JavaFX Stage def STAGE_MIN_WIDTH = 845;

Animating Tree continued

28

....

function toggleBlur():Void { // toggle blur so its only on during animation effect = if (effect == boxBlur) null else boxBlur }

function toggleExpansion():Void { if (not expanimator.running) { expanimator.rate = -1 * expanimator.rate; // reverse expanimator.play(); } }}

Page 29: Extreme GUI Makeover: Hybrid Swing and JavaFX™ · > Create listeners to wire JavaFX to Swing 9 FX Stage Swing JList Swing JTextPane. Create JavaFX Stage def STAGE_MIN_WIDTH = 845;

Styling with CSS

> JavaFX supports styling with CSS• Node has style variables:

public var styleClass:String

public var style:String

> Style sheets can be set on Scene> Shapes can be styled

• fill, stroke, font, etc> Controls can be styled

• styling wired to skins under the covers29

Page 30: Extreme GUI Makeover: Hybrid Swing and JavaFX™ · > Create listeners to wire JavaFX to Swing 9 FX Stage Swing JList Swing JTextPane. Create JavaFX Stage def STAGE_MIN_WIDTH = 845;

Letʼs give this thing a mullet! Styling with CSS

stage = Stage { style: StageStyle.TRANSPARENT scene: scene = Scene { stylesheets: [ "{__DIR__}resources/style.css" ] width: STAGE_MIN_WIDTH height: STAGE_MIN_HEIGHT...

30

Page 31: Extreme GUI Makeover: Hybrid Swing and JavaFX™ · > Create listeners to wire JavaFX to Swing 9 FX Stage Swing JList Swing JTextPane. Create JavaFX Stage def STAGE_MIN_WIDTH = 845;

Letʼs give this thing a mullet! Styling with CSS

mailboxArea = BackDrop { id: “mailBoxArea” styleClass: "roundedPanel" arcLength: 20 fill: AREA_FILL stroke: Color.BLACK strokeWidth: 1 topMargin: 4 leftMargin: 4 node: mailboxTree}

31

Page 32: Extreme GUI Makeover: Hybrid Swing and JavaFX™ · > Create listeners to wire JavaFX to Swing 9 FX Stage Swing JList Swing JTextPane. Create JavaFX Stage def STAGE_MIN_WIDTH = 845;

Letʼs give this thing a mullet! Styling with CSSstyle.css

32

.roundedPanel { arcLength: 20; }

.roundedButton { arcLength: 12; }

.treeNodeLabel { font: 12pt "Veranda"; }RoundedPanel, #mailBoxArea { fill: linear (0%, 0%) to (0%, 100%) stops (0.00, #808080), (1.00, #e0e0e0);}

Page 33: Extreme GUI Makeover: Hybrid Swing and JavaFX™ · > Create listeners to wire JavaFX to Swing 9 FX Stage Swing JList Swing JTextPane. Create JavaFX Stage def STAGE_MIN_WIDTH = 845;

eyeContactsAddress Book with page flipping

> Builds on Chris Campbellʼs book panel sample • http://www.javafx.com/samples/BookPanel/

index.html

} 33

Page 34: Extreme GUI Makeover: Hybrid Swing and JavaFX™ · > Create listeners to wire JavaFX to Swing 9 FX Stage Swing JList Swing JTextPane. Create JavaFX Stage def STAGE_MIN_WIDTH = 845;

eyeContactsAddress Book with page flipping

> The AddressBook is implemented as a transparent Stage with a background Image

var bookStage = Stage {style:

StageStyle.TRANSPARENTscene: scene = Scene {

fill: nullGroup {

content: [{//background image}, {//Pages }] ...

}

34

Page 35: Extreme GUI Makeover: Hybrid Swing and JavaFX™ · > Create listeners to wire JavaFX to Swing 9 FX Stage Swing JList Swing JTextPane. Create JavaFX Stage def STAGE_MIN_WIDTH = 845;

eyeContactsAddress Book with page flipping

> A Book with Pages are added to the Stage

ImageView { layoutX: 0 layoutY : 50 fitWidth: bind scene.width fitHeight: bind bookHeight image: Image { url:

"{__DIR__}resources/ addressbook.png"},Book pages: [

for ( i in [0..5]) { createPage(i); }] }

35

Page 36: Extreme GUI Makeover: Hybrid Swing and JavaFX™ · > Create listeners to wire JavaFX to Swing 9 FX Stage Swing JList Swing JTextPane. Create JavaFX Stage def STAGE_MIN_WIDTH = 845;

eyeContactsAddress Book with page flipping

> A Page in the book is a CustomNodeclass Page extends CustomNode { public var data: Node; public var profileImageUrl: String;

override function create():Node { return Group {

content: [ImageView {

fitWidth: 100 fitHeight: 100 image: bind Image {url: profileImageUrl;}

}, Group {content: data ...} ] blocksMouse: true

...

36

Page 37: Extreme GUI Makeover: Hybrid Swing and JavaFX™ · > Create listeners to wire JavaFX to Swing 9 FX Stage Swing JList Swing JTextPane. Create JavaFX Stage def STAGE_MIN_WIDTH = 845;

eyeContactsAddress Book with page flipping

> Connecting Visuals to java datavar contactInfoList: ContactInfoPanel[];// populate contactInfoList sequence from java AddressBook// class

function createPage(i:Integer) : Page {Page {

fill: Color.WHITEdata: contactInfoList[i]

profileImageUrl: contactInfoList[i].contact.getImageLocation().toString()

}

}

37

Page 38: Extreme GUI Makeover: Hybrid Swing and JavaFX™ · > Create listeners to wire JavaFX to Swing 9 FX Stage Swing JList Swing JTextPane. Create JavaFX Stage def STAGE_MIN_WIDTH = 845;

eyeContactsAddress Book with page flipping

> ContactInfoPanel - a CustomNode with layoutdef displayNameLayout = LayoutInfo { height : 55 };

public var contact : Contact; // Contact is a java class

var displayName = contact.getDisplayName(); override function create():Node {

VBox { content: [

HBox { content: [ Label { text: bind displayName hpos: HPos.LEADING

font: Font.font("Verdana", 28) textFill: Color.web("#1285c3") layoutInfo: displayNameLayout }]

}, HBox { ... }

38

Page 39: Extreme GUI Makeover: Hybrid Swing and JavaFX™ · > Create listeners to wire JavaFX to Swing 9 FX Stage Swing JList Swing JTextPane. Create JavaFX Stage def STAGE_MIN_WIDTH = 845;

eyeContactsAddress Book with page flipping> Page Flip Effect

• Book is a CustomNode and has• an array of pages• gripLeft and gripRight of type Grip (explained below)

• to track mouse events over bottomLeftCorner and bottomRightCorner

• Grip is a CustomNode that handles mouse events (enter, press, move, drag, release, exit) on a 50x50 rectangle and calls functions to simulate the page flip.

39

Page 40: Extreme GUI Makeover: Hybrid Swing and JavaFX™ · > Create listeners to wire JavaFX to Swing 9 FX Stage Swing JList Swing JTextPane. Create JavaFX Stage def STAGE_MIN_WIDTH = 845;

eyeContactsAddress Book with page flipping> Ilustration of flipping page B over bottom right corner

• Flip effect is achieved by a combination of

• Translate• Rotate• Clip

40

CBA

D

C

Page 41: Extreme GUI Makeover: Hybrid Swing and JavaFX™ · > Create listeners to wire JavaFX to Swing 9 FX Stage Swing JList Swing JTextPane. Create JavaFX Stage def STAGE_MIN_WIDTH = 845;

eyeContactsAddress Book with page flipping> Mouse event handling

• The Page Node sets blocksMouse to true• In order to consume mouse events with out passing them up the

scenegraph. • This separates the draggable feature of the Address book with page

flipping.

• Sound effect for page flip var mediaPlayer = MediaPlayer {

media: Media{source: "{__DIR__}page-flip.mp3"} };

mediaPlayer.play();

41

Page 42: Extreme GUI Makeover: Hybrid Swing and JavaFX™ · > Create listeners to wire JavaFX to Swing 9 FX Stage Swing JList Swing JTextPane. Create JavaFX Stage def STAGE_MIN_WIDTH = 845;

Exploding JunkExplosion Animation

42

Page 43: Extreme GUI Makeover: Hybrid Swing and JavaFX™ · > Create listeners to wire JavaFX to Swing 9 FX Stage Swing JList Swing JTextPane. Create JavaFX Stage def STAGE_MIN_WIDTH = 845;

Exploding JunkExplosion Animation

var animation = SequentialTransition { content: [ TranslateTransition{ // open missile hatch node: junkButton byX: -36 duration: 200ms } ...

43

Page 44: Extreme GUI Makeover: Hybrid Swing and JavaFX™ · > Create listeners to wire JavaFX to Swing 9 FX Stage Swing JList Swing JTextPane. Create JavaFX Stage def STAGE_MIN_WIDTH = 845;

Exploding JunkExplosion Animation

ParallelTransition { content: [ FadeTransition { // fade in missile node: missile toValue: 1 duration: 200ms } PathTransition { // fly missile node: missile path: AnimationPath.createFromPath(missilePath) duration: 1.2s orientation: OrientationType.ORTHOGONAL_TO_TANGENT interpolator: Interpolator.EASEIN action: function() { missileGroup.content = fireBall } } TranslateTransition{ // close missile hatch node: junkButton byX: 36 duration: 500ms } ]}

44

Page 45: Extreme GUI Makeover: Hybrid Swing and JavaFX™ · > Create listeners to wire JavaFX to Swing 9 FX Stage Swing JList Swing JTextPane. Create JavaFX Stage def STAGE_MIN_WIDTH = 845;

Exploding JunkExplosion Animation

ParallelTransition { content: [ PauseTransition { duration: 1s action: deleteMessage } fireBall.timeline // explosion ] } ] };

var sound = MediaPlayer{ media:Media { source:"{__DIR__}fire/bomb.mp3" } };

animation.play(); sound.play();

45

Page 46: Extreme GUI Makeover: Hybrid Swing and JavaFX™ · > Create listeners to wire JavaFX to Swing 9 FX Stage Swing JList Swing JTextPane. Create JavaFX Stage def STAGE_MIN_WIDTH = 845;

Exploding JunkExplosion Graphicsvar images:Image[] = for(i in [101..178]) Image{ url:"{__DIR__}fire/Sequence 0{i}.png" }

public class FireBall extends CustomNode { var index:Integer = 0; var view:ImageView =

ImageView{ image: bind images[index] }; public var timeline:Timeline = Timeline { keyFrames: [ at (0s) {index => 0}, at (3s) {index => (sizeof images-1)} ] }; public override function create():Node{ view }}

46

Page 47: Extreme GUI Makeover: Hybrid Swing and JavaFX™ · > Create listeners to wire JavaFX to Swing 9 FX Stage Swing JList Swing JTextPane. Create JavaFX Stage def STAGE_MIN_WIDTH = 845;

Summary

You can have the best of both worlds:Java/Swing for stability, maturity, leverageJavaFX for easier graphics & animation

Give JavaFX a try....you might even have some fun

47

Page 48: Extreme GUI Makeover: Hybrid Swing and JavaFX™ · > Create listeners to wire JavaFX to Swing 9 FX Stage Swing JList Swing JTextPane. Create JavaFX Stage def STAGE_MIN_WIDTH = 845;

Amy Fowler [email protected] Grieve [email protected] Somashekar [email protected] Potts [email protected]


1. 2 Practical Pros & Cons of Replacing Swing with JavaFX in Existing Applications

1. 2 Practical Pros & Cons of Replacing Swing with JavaFX in Existing Applications

Documents
JavaProgramming$$ Unit5$myflex.org/yf/java/Unit5_GUI.pdf · AWT,Swing, JavaFX$ • Firstthere$was$AbstractWindowing$Toolkit(AWT)$ $ • Swing$library$of$components$has$replaced$AWT,$

JavaProgramming$$ Unit5$myflex.org/yf/java/Unit5_GUI.pdf · AWT,Swing, JavaFX$ • Firstthere$was$AbstractWindowing$Toolkit(AWT)$ $ • Swing$library$of$components$has$replaced$AWT,$

Documents
Java Graphics Swing Graphics. Java 2D API Java contains sophisticated drawing capabilities Java 2D API successor technology JavaFX Java 2D capabilities

Java Graphics Swing Graphics. Java 2D API Java contains sophisticated drawing capabilities Java 2D API successor technology JavaFX Java 2D capabilities

Documents
AWT -> SWING -> JAVAFX Interfaces graphiques Allégorie du …mediamining.univ-lyon2.fr/velcin/public/GL-k/java... · 2017-04-28 · AWT -> SWING -> JAVAFX Allégorie du théatre

AWT -> SWING -> JAVAFX Interfaces graphiques Allégorie du …mediamining.univ-lyon2.fr/velcin/public/GL-k/java... · 2017-04-28 · AWT -> SWING -> JAVAFX Allégorie du théatre

Documents
Stanislav ArnaudovLinux, Git, CMake, make, Robot Operating System (ROS), RabbitMQ, JavaFX/Java-Swing, JUnit, Maven, Frontend (AngularJS, VueJS), Backend (NodeJS, Express, Flask), LaTeX,

Stanislav ArnaudovLinux, Git, CMake, make, Robot Operating System (ROS), RabbitMQ, JavaFX/Java-Swing, JUnit, Maven, Frontend (AngularJS, VueJS), Backend (NodeJS, Express, Flask), LaTeX,

Documents
JavaFX introduction

JavaFX introduction

Economy & Finance
JavaFX - tomasz.kubik.staff.iiar.pwr.wroc.pltomasz.kubik.staff.iiar.pwr.wroc.pl/dydaktyka/Java/JavaFX-01-TK.pdf · JavaFX jest biblioteką zawierającą natywne klasy i interfejsy

JavaFX - tomasz.kubik.staff.iiar.pwr.wroc.pltomasz.kubik.staff.iiar.pwr.wroc.pl/dydaktyka/Java/JavaFX-01-TK.pdf · JavaFX jest biblioteką zawierającą natywne klasy i interfejsy

Documents
01 - JavaFX. Введение в JavaFX

01 - JavaFX. Введение в JavaFX

Education
From Swing to JavaFX

From Swing to JavaFX

Technology
Curso de Java #05 - Swing e JavaFX

Curso de Java #05 - Swing e JavaFX

Education
From Swing to JavaFX - SwingからJavaFXへのマイグレーションガイド

From Swing to JavaFX - SwingからJavaFXへのマイグレーションガイド

Technology
Karsten Lentzsch JGoodies VON SWING NACH JAVAFX · Java-GUI-Bibliotheken und -Rahmenwerk ... Toolkit: Swing, SWT, JavaFX oder HTML5? Unklare Situation zur Zukunft Geräte: Desktop,

Karsten Lentzsch JGoodies VON SWING NACH JAVAFX · Java-GUI-Bibliotheken und -Rahmenwerk ... Toolkit: Swing, SWT, JavaFX oder HTML5? Unklare Situation zur Zukunft Geräte: Desktop,

Documents
JavaFX Your Way: Building JavaFX Applications with Alternative Languages

JavaFX Your Way: Building JavaFX Applications with Alternative Languages

Technology
Karsten Lentzsch JGoodies VON SWING NACH JAVAFX...Look & Feel Styling Fokus Gesten Native Swing vs. JavaFX II Wie/wo behebt man Probleme? Bibliotheken und Rahmenwerke (Marktlage) Reife:

Karsten Lentzsch JGoodies VON SWING NACH JAVAFX...Look & Feel Styling Fokus Gesten Native Swing vs. JavaFX II Wie/wo behebt man Probleme? Bibliotheken und Rahmenwerke (Marktlage) Reife:

Documents
JavaFX 2 Swing war gestern. Agenda Einführung JavaFX Geschichte Entwicklung Einsatzmöglichkeiten Neuerungen Beispiele Konzepte / Live Coding Scene Graph

JavaFX 2 Swing war gestern. Agenda Einführung JavaFX Geschichte Entwicklung Einsatzmöglichkeiten Neuerungen Beispiele Konzepte / Live Coding Scene Graph

Documents
Ausgeswingt - Herbstcampus 2019 · 2013-09-13 · Herbstcampus 2013 – Titel 5 JavaFX Gegenwart •Nahtlose Integration in Swing oder SWT •Einbindung von JavaFX Features, wie Videowiedergabe,

Ausgeswingt - Herbstcampus 2019 · 2013-09-13 · Herbstcampus 2013 – Titel 5 JavaFX Gegenwart •Nahtlose Integration in Swing oder SWT •Einbindung von JavaFX Features, wie Videowiedergabe,

Documents
Building Data Rich Interfaces with JavaFX · SPEAKER‘S COMPANY LOGO 3 AGENDA > JavaFX Technology Stack > Data Binding > JavaFX 1.3 Controls > Control Styling > JavaFX 1.3 Layouts

Building Data Rich Interfaces with JavaFX · SPEAKER‘S COMPANY LOGO 3 AGENDA > JavaFX Technology Stack > Data Binding > JavaFX 1.3 Controls > Control Styling > JavaFX 1.3 Layouts

Documents
JavaFX Mobile - ビーブレイクシステムズ | ITで経営の … 株式会社ビーブレイクシステムズ JavaFX Mobile 1. JavaFX Mobile とは 2 1.1. JavaFXプラットフォーム

JavaFX Mobile - ビーブレイクシステムズ | ITで経営の … 株式会社ビーブレイクシステムズ JavaFX Mobile 1. JavaFX Mobile とは 2 1.1. JavaFXプラットフォーム

Documents
Professionelle Testautomatisierung Das GUI-Testtool für ... · • Plattformunabhängig: Swing, JavaFX, SWT, Web auf Windows, Linux, Unix, macOS ... Tutorial, Stan- dardbibliothek,

Professionelle Testautomatisierung Das GUI-Testtool für ... · • Plattformunabhängig: Swing, JavaFX, SWT, Web auf Windows, Linux, Unix, macOS ... Tutorial, Stan- dardbibliothek,

Documents
Graphical User Interfaces JavaFX GUI Basicspfodor/courses/CSE114/L14-JavaFXBasics.pdf · (c) Paul Fodor and Pearson Inc. JavaFX vs Swing and AWT Swing and AWT are replaced by the

Graphical User Interfaces JavaFX GUI Basicspfodor/courses/CSE114/L14-JavaFXBasics.pdf · (c) Paul Fodor and Pearson Inc. JavaFX vs Swing and AWT Swing and AWT are replaced by the

Documents
BIBLIOTECAS SWING E JAVAFX PARA SOFTWARES JAVA EM …

BIBLIOTECAS SWING E JAVAFX PARA SOFTWARES JAVA EM …

Documents
Integrating Swing with JavaFX Steve Northover (Client Architect) Kevin Rushforth (Consulting Member of Technical Staff) Java Client Platform Sept, 2014

Integrating Swing with JavaFX Steve Northover (Client Architect) Kevin Rushforth (Consulting Member of Technical Staff) Java Client Platform Sept, 2014

Documents
Cours IHM-1 JavaFX - Développement d'applications et ...remy-manu.no-ip.biz/Java/Tutoriels/JavaFX/PDF/ihm1_fx_01...•Cohabitation améliorée avec les composants Swing •Prise en

Cours IHM-1 JavaFX - Développement d'applications et ...remy-manu.no-ip.biz/Java/Tutoriels/JavaFX/PDF/ihm1_fx_01...•Cohabitation améliorée avec les composants Swing •Prise en

Documents
JWord 4 User's Guide · Although JWord is based on Swing toolkit, it has a JavaFX compatible interface which allows using JWord in JavaFX applications. The basic classes included

JWord 4 User's Guide · Although JWord is based on Swing toolkit, it has a JavaFX compatible interface which allows using JWord in JavaFX applications. The basic classes included

Documents
Presentation JavaFX

Presentation JavaFX

Documents
JavaFX 1.2

JavaFX 1.2

Technology
Javafx Avancado

Javafx Avancado

Technology
Chapter 14 JavaFX Basics - Kennesaw State Universityksuweb.kennesaw.edu/~rjone192/courses/2302/summer2015/doc/Lecture... · AWT vs. Swing vs. JavaFX Abstract Windows Toolkit (AWT)

Chapter 14 JavaFX Basics - Kennesaw State Universityksuweb.kennesaw.edu/~rjone192/courses/2302/summer2015/doc/Lecture... · AWT vs. Swing vs. JavaFX Abstract Windows Toolkit (AWT)

Documents
Javafx Gui

Javafx Gui

Education
JavaFX 2.0

JavaFX 2.0

Technology