Embed Size (px)
DESCRIPTION
Citation preview
Introduction toJavaFX 2
Thierry Wasylczenko
@twasyl
me.getInfo();
Software & quality engineer @ GE HealthcareJFXtras contributorOpenJFX in progressFormer Java Full Professor & teacher @ SUPINFOSpeaker
Desktop apps in Java
Abstract Window Toolkit (AWT)SwingEvent Dispatch Thread (EDT)ComplexL&F
Old lookingNimbusSynthetica, JGoodies Looks, SWT Ribbon, Quaqua, Substance, ...
The big button syndrome
Some tools "helped" us ...
Visual EditorEclipse pluginHow many JARs do I need to start creating a UI??!!
NetBeans
... or not !
So much junk code !!Not even editable
Except outside the IDE
A hope shined ...
JavaOne 2007JavaFX is announcedRich Internet Applications (RIA)"Seems" promising
... but ...
Java + Flash + Flex=
JavaFX=???
I am a Java developer !!
Scripting languageSimilar to Flash scripting languageUnusable Java API
JARs? What's that?Hey, I'm a Java developer !!
Look through the Windows
Windows Presentation Foundation (WPF)Works above DirectXIntroduced with .NET 3.0XAMLHey, I'm still a Java developer !
eface
And now ...
JavaFX 2
EOL of JavaFX 1.2 & 1.3December, 20th 2012
JavaFX architecture
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();
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();
FXML
MVCMarkupbased languageCSS stylingJavaScript capabilitiesComponent binding
Controller conceptURL locatorI18N
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>
JavaFX CSS
Properties prefixed with fxfxtextfillfxbackgroundcolor...
lineargradientradialgradientrgb / rgbaEffects
dropshadow & innershadow
JavaFX CSS
Inline CSS
<Label text="TweetWallFX" prefWidth="1024" style="-fx-font-size: 100pt; -fx-text-fill: white; -fx-font-weight: bold;" layoutY="30" />
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>
JavaFX CSS
Java code
myButton.getStyleClass().addAll("cool-class", "very-cool-class");myButton.setStyle("-fx-background-color: white");
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
Controller
public class TweetWallFXController implements Initializable
// ...
@Override public void initialize(URL arg0, ResourceBundle arg1)
// ...
@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
@FXML
The controller
// ...
@FXML private Pane anchorPane;
@FXML public void startTweetWall(ActionEvent e) // ...
// ...
@FXML
The FXML
<AnchorPane ... fx:id="anchorPane" ... fx:controller="com.twasyl.tweetwallfx.controllers.TweetWallFXController" ... > <children> <Button id="button" onAction="#startTweetWall" ... />
</children></AnchorPane>
FXMLLoader
Load a FXML fileResourceBundle can be defined
Get the controller
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();
Properties
Expand & improve the JavaBeans concept"Observe" a value
Event deliveryListeners
Conventionprivate property fieldspublic final getter / setter for the valuepublic getter for the property
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;
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
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());
Bindings
How much? 400.67And now? 4000.67
Bindings
FXCollections
Extension of CollectionsObservableInterfaces
ObservableList, ObservableMapListeners
ListChangeListener, MapChangeListenerFXCollections
Utility class
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())
// ...
Chart API
Chart API
Animation
Animation
KeyValueRepresent a "fixed" position of a Node
KeyFrameA durationSome KeyValues
AnimationCould contain some KeyFrames (Timeline)Play
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();
Effects
Lot of effects availableBlur, blend, reflection, shadows, ...
Input propertyChain of effects
Media
Long way from JMFAudio
MP3, AIFF, WAV, AAC, m4aVideo
FLV, MPEG4 (H.264/AVC)MetadataListeners
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) // ...
SceneBuilder
UI builder toolUseful for RAD
FXML generationCSS supportPreviewer
SceneBuilder
Scenic View
Understand current state of your applicationManipulation of the scenegraphManipulation of properties
Scenic View
Tools / API
JFXtrasFX Experience tool
Theminge(fx)clipseGroovyFXScalaFX...
Useful resources
http://thierrywasyl.wordpress.comhttp://docs.oracle.com/javafx/index.htmlhttps://forums.oracle.com/forums/forum.jspa?forumID=1385http://fxexperience.comhttp://jfxtras.org
Thank you
