Upload
twasyl
View
2.424
Download
3
Embed Size (px)
DESCRIPTION
My slides presented during SoftShake 2013 (October, 24th)
Citation preview
JavaFXbecause you're worth it
Thierry Wasylczenko@twasyl
me.getInfo();
Software & quality engineer @ GE HealthcareJFXtras contributorOpenJFX in progressFormer Java Full Professor & teacher @ SUPINFOSpeaker
We all know this...
But also this...
private class MyFrame extends JFrame {
private void initComponents() { jLabel1 = new JLabel(); jTextField1 = new JTextField(); jLabel2 = new JLabel(); jTextField2 = new JTextField(); jLabel3 = new JLabel(); jRadioButton1 = new JRadioButton(); jRadioButton2 = new JRadioButton(); jButton1 = new JButton(); jScrollPane1 = new JScrollPane(); jTable1 = new JTable(); setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE); jLabel1.setText("Person name:"); jLabel2.setText("Person first name:"); jLabel3.setText("Sex:"); jRadioButton1.setText("Male"); jRadioButton1.addActionListener( new ActionListener() { public void actionPerformed(ActionEvent evt) { // TODO } }); // TO BE CONTINUED }}
To get this...
The big button syndrome
Desktop apps in Java
Abstract Window Toolkit (AWT)SwingEvent Dispatch Thread (EDT)ComplexL&F
Old lookingNimbusSynthetica, JGoodies Looks, SWT Ribbon, Quaqua,Substance, ...
Some tools "helped" us ...
Visual EditorEclipse pluginHow many JARs do I need to start creating aUI??!!
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
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
MVCMarkup-based 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" prefHeightstyle="-fx-background-color: linear-gradient(#69B4E4 0%, #0070B9 100%);" > <children> <ImageView id="twitterSticker" fitWidth="128" fitHeight="128" layoutX="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;" <Button id="button" text="Search" onAction="#startTweetWall" style="-fx-font-size: 20pt;" </children></AnchorPane>
JavaFX CSS
Properties prefixed with -fx-fx-text-fill-fx-background-color...
linear-gradientradial-gradientrgb / 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;"
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 rootelement
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:idin 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 changesHigh-Level APILow-Level APIKind of Observer / Observable patternExample:
Could be used to synchronize the UI and thebusinessRefresh 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.67
And now? 4000.67
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,m4a
VideoFLV, MPEG-4(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.com
http://thierrywasyl.wordpress.comhttp://docs.oracle.com/javafx/index.htmlhttps://forums.oracle.com/forums/forum.jspa?forumID=1385http://fxexperience.comhttp://jfxtras.org
Thank you