introduction to javafx 2
DESCRIPTION
TRANSCRIPT
![Page 1: Introduction to JavaFX 2](https://reader033.vdocuments.net/reader033/viewer/2022050808/54c7f0e14a79592a7e8b4586/html5/thumbnails/1.jpg)
Introduction toJavaFX 2
Thierry Wasylczenko
@twasyl
![Page 2: Introduction to JavaFX 2](https://reader033.vdocuments.net/reader033/viewer/2022050808/54c7f0e14a79592a7e8b4586/html5/thumbnails/2.jpg)
me.getInfo();
Software & quality engineer @ GE HealthcareJFXtras contributorOpenJFX in progressFormer Java Full Professor & teacher @ SUPINFOSpeaker
![Page 3: Introduction to JavaFX 2](https://reader033.vdocuments.net/reader033/viewer/2022050808/54c7f0e14a79592a7e8b4586/html5/thumbnails/3.jpg)
Desktop apps in Java
Abstract Window Toolkit (AWT)SwingEvent Dispatch Thread (EDT)ComplexL&F
Old lookingNimbusSynthetica, JGoodies Looks, SWT Ribbon, Quaqua, Substance, ...
![Page 4: Introduction to JavaFX 2](https://reader033.vdocuments.net/reader033/viewer/2022050808/54c7f0e14a79592a7e8b4586/html5/thumbnails/4.jpg)
The big button syndrome
![Page 5: Introduction to JavaFX 2](https://reader033.vdocuments.net/reader033/viewer/2022050808/54c7f0e14a79592a7e8b4586/html5/thumbnails/5.jpg)
Some tools "helped" us ...
Visual EditorEclipse pluginHow many JARs do I need to start creating a UI??!!
NetBeans
![Page 6: Introduction to JavaFX 2](https://reader033.vdocuments.net/reader033/viewer/2022050808/54c7f0e14a79592a7e8b4586/html5/thumbnails/6.jpg)
... or not !
So much junk code !!Not even editable
Except outside the IDE
![Page 7: Introduction to JavaFX 2](https://reader033.vdocuments.net/reader033/viewer/2022050808/54c7f0e14a79592a7e8b4586/html5/thumbnails/7.jpg)
A hope shined ...
JavaOne 2007JavaFX is announcedRich Internet Applications (RIA)"Seems" promising
![Page 8: Introduction to JavaFX 2](https://reader033.vdocuments.net/reader033/viewer/2022050808/54c7f0e14a79592a7e8b4586/html5/thumbnails/8.jpg)
... but ...
Java + Flash + Flex=
JavaFX=???
![Page 9: Introduction to JavaFX 2](https://reader033.vdocuments.net/reader033/viewer/2022050808/54c7f0e14a79592a7e8b4586/html5/thumbnails/9.jpg)
I am a Java developer !!
Scripting languageSimilar to Flash scripting languageUnusable Java API
JARs? What's that?Hey, I'm a Java developer !!
![Page 10: Introduction to JavaFX 2](https://reader033.vdocuments.net/reader033/viewer/2022050808/54c7f0e14a79592a7e8b4586/html5/thumbnails/10.jpg)
Look through the Windows
Windows Presentation Foundation (WPF)Works above DirectXIntroduced with .NET 3.0XAMLHey, I'm still a Java developer !
eface
![Page 11: Introduction to JavaFX 2](https://reader033.vdocuments.net/reader033/viewer/2022050808/54c7f0e14a79592a7e8b4586/html5/thumbnails/11.jpg)
And now ...
![Page 12: Introduction to JavaFX 2](https://reader033.vdocuments.net/reader033/viewer/2022050808/54c7f0e14a79592a7e8b4586/html5/thumbnails/12.jpg)
JavaFX 2
EOL of JavaFX 1.2 & 1.3December, 20th 2012
![Page 13: Introduction to JavaFX 2](https://reader033.vdocuments.net/reader033/viewer/2022050808/54c7f0e14a79592a7e8b4586/html5/thumbnails/13.jpg)
JavaFX architecture
![Page 14: Introduction to JavaFX 2](https://reader033.vdocuments.net/reader033/viewer/2022050808/54c7f0e14a79592a7e8b4586/html5/thumbnails/14.jpg)
Base classes
ApplicationThe entry point of your appApplication.launch()Override start()
SceneLike the content pane in SwingHosts a root element
Stage = JFrameContains a scenestage.show();
![Page 15: Introduction to JavaFX 2](https://reader033.vdocuments.net/reader033/viewer/2022050808/54c7f0e14a79592a7e8b4586/html5/thumbnails/15.jpg)
Base classes
public class TweetWallFX extends Application
public static void main(String[] args)
Application.launch(TweetWallFX.class, args);
@Override public void start(Stage stage) throws Exception
// Do your stuff here
Scene scene = new Scene( ... ); stage.setScene(scene); stage.show();
![Page 16: Introduction to JavaFX 2](https://reader033.vdocuments.net/reader033/viewer/2022050808/54c7f0e14a79592a7e8b4586/html5/thumbnails/16.jpg)
FXML
MVCMarkupbased languageCSS stylingJavaScript capabilitiesComponent binding
Controller conceptURL locatorI18N
![Page 17: Introduction to JavaFX 2](https://reader033.vdocuments.net/reader033/viewer/2022050808/54c7f0e14a79592a7e8b4586/html5/thumbnails/17.jpg)
FXML
<?xml version="1.0" encoding="UTF-8"?><?import java.lang.*?><?import javafx.scene.*?><?import javafx.scene.effect.*?><?import javafx.scene.image.*?><?import javafx.scene.control.*?><?import javafx.scene.layout.*?>
<AnchorPane xmlns:fx="http://javafx.com/fxml" id="mainPanel" fx:id="anchorPane" prefHeight="768" prefWidth="1024" fx:controller="com.twasyl.tweetwallfx.controllers.TweetWallFXController" style="-fx-background-color: linear-gradient(#69B4E4 0%, #0070B9 100%);" > <children> <ImageView id="twitterSticker" fitWidth="128" fitHeight="128" layoutX="30" layoutY="30"> <image> <Image url="@/com/twasyl/tweetwallfx/resources/images/twitterSticker.png" /> </image> </ImageView> <Label text="TweetWallFX" prefWidth="1024" style="-fx-font-size: 100pt; -fx-text-fill: white; -fx-font-weight: bold;" layoutY="30" /> <Button id="button" text="Search" onAction="#startTweetWall" style="-fx-font-size: 20pt;" /> </children></AnchorPane>
![Page 18: Introduction to JavaFX 2](https://reader033.vdocuments.net/reader033/viewer/2022050808/54c7f0e14a79592a7e8b4586/html5/thumbnails/18.jpg)
JavaFX CSS
Properties prefixed with fxfxtextfillfxbackgroundcolor...
lineargradientradialgradientrgb / rgbaEffects
dropshadow & innershadow
![Page 19: Introduction to JavaFX 2](https://reader033.vdocuments.net/reader033/viewer/2022050808/54c7f0e14a79592a7e8b4586/html5/thumbnails/19.jpg)
JavaFX CSS
Inline CSS
<Label text="TweetWallFX" prefWidth="1024" style="-fx-font-size: 100pt; -fx-text-fill: white; -fx-font-weight: bold;" layoutY="30" />
![Page 20: Introduction to JavaFX 2](https://reader033.vdocuments.net/reader033/viewer/2022050808/54c7f0e14a79592a7e8b4586/html5/thumbnails/20.jpg)
JavaFX CSS
Stylesheets and CSS classes
<AnchorPane ...> <stylesheets> <URL value="@/com/twasyl/Default.css" /> </stylesheets> <children> <Label styleClass="cool-class" /> <Label> <styleClass> <String fx:value="very-cool-class" /> <String fx:value="amazing-class" /> </styleClass> </Label> <children></AnchorPane>
![Page 21: Introduction to JavaFX 2](https://reader033.vdocuments.net/reader033/viewer/2022050808/54c7f0e14a79592a7e8b4586/html5/thumbnails/21.jpg)
JavaFX CSS
Java code
myButton.getStyleClass().addAll("cool-class", "very-cool-class");myButton.setStyle("-fx-background-color: white");
![Page 22: Introduction to JavaFX 2](https://reader033.vdocuments.net/reader033/viewer/2022050808/54c7f0e14a79592a7e8b4586/html5/thumbnails/22.jpg)
Controller
Similar to master pages in ASPSimilar to a Managed BeanUsed to
manage eventsupdate the view dynamically...
Referenced by fx:controller in the FXMLInitializable
Used to initialize the controller after the root element
![Page 23: Introduction to JavaFX 2](https://reader033.vdocuments.net/reader033/viewer/2022050808/54c7f0e14a79592a7e8b4586/html5/thumbnails/23.jpg)
Controller
public class TweetWallFXController implements Initializable
// ...
@Override public void initialize(URL arg0, ResourceBundle arg1)
// ...
![Page 24: Introduction to JavaFX 2](https://reader033.vdocuments.net/reader033/viewer/2022050808/54c7f0e14a79592a7e8b4586/html5/thumbnails/24.jpg)
@FXML
Component bindingLike JSFEach attribute must be strictly named as the fx:id in the FXML
Controller Method Event handleronAction, onClosed, ... attributesReferenced with # in FXML
![Page 25: Introduction to JavaFX 2](https://reader033.vdocuments.net/reader033/viewer/2022050808/54c7f0e14a79592a7e8b4586/html5/thumbnails/25.jpg)
@FXML
The controller
// ...
@FXML private Pane anchorPane;
@FXML public void startTweetWall(ActionEvent e) // ...
// ...
![Page 26: Introduction to JavaFX 2](https://reader033.vdocuments.net/reader033/viewer/2022050808/54c7f0e14a79592a7e8b4586/html5/thumbnails/26.jpg)
@FXML
The FXML
<AnchorPane ... fx:id="anchorPane" ... fx:controller="com.twasyl.tweetwallfx.controllers.TweetWallFXController" ... > <children> <Button id="button" onAction="#startTweetWall" ... />
</children></AnchorPane>
![Page 27: Introduction to JavaFX 2](https://reader033.vdocuments.net/reader033/viewer/2022050808/54c7f0e14a79592a7e8b4586/html5/thumbnails/27.jpg)
FXMLLoader
Load a FXML fileResourceBundle can be defined
Get the controller
![Page 28: Introduction to JavaFX 2](https://reader033.vdocuments.net/reader033/viewer/2022050808/54c7f0e14a79592a7e8b4586/html5/thumbnails/28.jpg)
FXMLLoader
URL fxmlURL = getClass().getResource("/my/package/myFile.fxml");FXMLLoader fxml = new FXMLLoader(fxmlURL);
// Get the root element of the fileParent root = (Parent) fxml.load();
// Get the controller associated to the FXMLMyController mc = (MyController) fxml.getController();
![Page 29: Introduction to JavaFX 2](https://reader033.vdocuments.net/reader033/viewer/2022050808/54c7f0e14a79592a7e8b4586/html5/thumbnails/29.jpg)
Properties
Expand & improve the JavaBeans concept"Observe" a value
Event deliveryListeners
Conventionprivate property fieldspublic final getter / setter for the valuepublic getter for the property
![Page 30: Introduction to JavaFX 2](https://reader033.vdocuments.net/reader033/viewer/2022050808/54c7f0e14a79592a7e8b4586/html5/thumbnails/30.jpg)
Properties
public class Foo
private DoubleProperty litersOfCoffee = new SimpleDoubleProperty();
public final double getLitersOfCoffee()
return this.litersOfCoffee.get();
public final void setLitersOfCoffee(double value)
this.litersOfCoffee.set(value);
public DoubleProperty litersOfCoffeeProperty()
return this.litersOfCoffee;
![Page 31: Introduction to JavaFX 2](https://reader033.vdocuments.net/reader033/viewer/2022050808/54c7f0e14a79592a7e8b4586/html5/thumbnails/31.jpg)
Bindings
Observes dependenciesProperties
Updates itself according changesHighLevel APILowLevel APIKind of Observer / Observable patternExample:
Could be used to synchronize the UI and the businessRefresh a chart data
![Page 32: Introduction to JavaFX 2](https://reader033.vdocuments.net/reader033/viewer/2022050808/54c7f0e14a79592a7e8b4586/html5/thumbnails/32.jpg)
Bindings
IntegerProperty num1 = new SimpleIntegerProperty(10);
IntegerProperty num2 = new SimpleIntegerProperty(20);
IntegerProperty num3 = new SimpleIntegerProperty(30);
IntegerProperty num4 = new SimpleIntegerProperty(40);
NumberBinding operation = Bindings.add(num1.multiply(num4), num2.divide(num3));
System.out.println("How much? " + operation.getValue());
num1.setValue(100);
System.out.println("And now? " + operation.getValue());
![Page 33: Introduction to JavaFX 2](https://reader033.vdocuments.net/reader033/viewer/2022050808/54c7f0e14a79592a7e8b4586/html5/thumbnails/33.jpg)
Bindings
How much? 400.67And now? 4000.67
![Page 34: Introduction to JavaFX 2](https://reader033.vdocuments.net/reader033/viewer/2022050808/54c7f0e14a79592a7e8b4586/html5/thumbnails/34.jpg)
Bindings
![Page 35: Introduction to JavaFX 2](https://reader033.vdocuments.net/reader033/viewer/2022050808/54c7f0e14a79592a7e8b4586/html5/thumbnails/35.jpg)
FXCollections
Extension of CollectionsObservableInterfaces
ObservableList, ObservableMapListeners
ListChangeListener, MapChangeListenerFXCollections
Utility class
![Page 36: Introduction to JavaFX 2](https://reader033.vdocuments.net/reader033/viewer/2022050808/54c7f0e14a79592a7e8b4586/html5/thumbnails/36.jpg)
FXCollections
List<String> stringLst = new ArrayList<String>();
// Create an observable listObservableList<String> stringObsLst1 = FXCollections.observableList(stringLst);
ObservableList<String> stringObsLst2 = FXCollections.observableList();
stringObsLst1.addListener(new ListChangeListener<String>()
@Override public void onChanged(Change<? extends String> event)
while(event.next())
if(event.wasAdded())
// ...
else if(event.wasRemoved())
// ...
![Page 37: Introduction to JavaFX 2](https://reader033.vdocuments.net/reader033/viewer/2022050808/54c7f0e14a79592a7e8b4586/html5/thumbnails/37.jpg)
Chart API
![Page 38: Introduction to JavaFX 2](https://reader033.vdocuments.net/reader033/viewer/2022050808/54c7f0e14a79592a7e8b4586/html5/thumbnails/38.jpg)
Chart API
![Page 39: Introduction to JavaFX 2](https://reader033.vdocuments.net/reader033/viewer/2022050808/54c7f0e14a79592a7e8b4586/html5/thumbnails/39.jpg)
Animation
![Page 40: Introduction to JavaFX 2](https://reader033.vdocuments.net/reader033/viewer/2022050808/54c7f0e14a79592a7e8b4586/html5/thumbnails/40.jpg)
Animation
KeyValueRepresent a "fixed" position of a Node
KeyFrameA durationSome KeyValues
AnimationCould contain some KeyFrames (Timeline)Play
![Page 41: Introduction to JavaFX 2](https://reader033.vdocuments.net/reader033/viewer/2022050808/54c7f0e14a79592a7e8b4586/html5/thumbnails/41.jpg)
Animation
Node node = ... ;
KeyValue kv = new KeyValue(node.layoutXProperty(), 100);
KeyFrame kf = new KeyFrame(new Duration(5000), kv);
Timeline timeline = new Timeline(kf);
timeline.setCycleCount(Animation.INDEFINITE);
timeline.setOnFinished( ... );
timeline.play();
![Page 42: Introduction to JavaFX 2](https://reader033.vdocuments.net/reader033/viewer/2022050808/54c7f0e14a79592a7e8b4586/html5/thumbnails/42.jpg)
Effects
Lot of effects availableBlur, blend, reflection, shadows, ...
Input propertyChain of effects
![Page 43: Introduction to JavaFX 2](https://reader033.vdocuments.net/reader033/viewer/2022050808/54c7f0e14a79592a7e8b4586/html5/thumbnails/43.jpg)
Media
Long way from JMFAudio
MP3, AIFF, WAV, AAC, m4aVideo
FLV, MPEG4 (H.264/AVC)MetadataListeners
![Page 44: Introduction to JavaFX 2](https://reader033.vdocuments.net/reader033/viewer/2022050808/54c7f0e14a79592a7e8b4586/html5/thumbnails/44.jpg)
Media
File mySong = new File("/mySong.mp3");
Media myMedia = new Media(mySong.toURI().toString());
MediaPlayer player = new MediaPlayer(myMedia);
player.setOnEndOfMedia( new Runnable() ... );
player.volumeProperty().addListener( ... );
player.play();
// ...
if(player.statusProperty().get() == Status.PLAYING) // ...
![Page 45: Introduction to JavaFX 2](https://reader033.vdocuments.net/reader033/viewer/2022050808/54c7f0e14a79592a7e8b4586/html5/thumbnails/45.jpg)
SceneBuilder
UI builder toolUseful for RAD
FXML generationCSS supportPreviewer
![Page 46: Introduction to JavaFX 2](https://reader033.vdocuments.net/reader033/viewer/2022050808/54c7f0e14a79592a7e8b4586/html5/thumbnails/46.jpg)
SceneBuilder
![Page 47: Introduction to JavaFX 2](https://reader033.vdocuments.net/reader033/viewer/2022050808/54c7f0e14a79592a7e8b4586/html5/thumbnails/47.jpg)
Scenic View
Understand current state of your applicationManipulation of the scenegraphManipulation of properties
![Page 48: Introduction to JavaFX 2](https://reader033.vdocuments.net/reader033/viewer/2022050808/54c7f0e14a79592a7e8b4586/html5/thumbnails/48.jpg)
Scenic View
![Page 49: Introduction to JavaFX 2](https://reader033.vdocuments.net/reader033/viewer/2022050808/54c7f0e14a79592a7e8b4586/html5/thumbnails/49.jpg)
Tools / API
JFXtrasFX Experience tool
Theminge(fx)clipseGroovyFXScalaFX...
![Page 50: Introduction to JavaFX 2](https://reader033.vdocuments.net/reader033/viewer/2022050808/54c7f0e14a79592a7e8b4586/html5/thumbnails/50.jpg)
Useful resources
http://thierrywasyl.wordpress.comhttp://docs.oracle.com/javafx/index.htmlhttps://forums.oracle.com/forums/forum.jspa?forumID=1385http://fxexperience.comhttp://jfxtras.org
![Page 51: Introduction to JavaFX 2](https://reader033.vdocuments.net/reader033/viewer/2022050808/54c7f0e14a79592a7e8b4586/html5/thumbnails/51.jpg)
Thank you