From Swing to JavaFX
-
Upload
skrb -
Category
Technology
-
view
142 -
download
1
description
Transcript of From Swing to JavaFX
![Page 1: From Swing to JavaFX](https://reader033.fdocuments.net/reader033/viewer/2022061223/54c6770f4a7959b0298b45ae/html5/thumbnails/1.jpg)
From Swing To JavaFX
Java in the BoxYuichi Sakuraba
- Migration Guide to JavaFX -
![Page 2: From Swing to JavaFX](https://reader033.fdocuments.net/reader033/viewer/2022061223/54c6770f4a7959b0298b45ae/html5/thumbnails/2.jpg)
![Page 3: From Swing to JavaFX](https://reader033.fdocuments.net/reader033/viewer/2022061223/54c6770f4a7959b0298b45ae/html5/thumbnails/3.jpg)
Basics of JavaFX
![Page 4: From Swing to JavaFX](https://reader033.fdocuments.net/reader033/viewer/2022061223/54c6770f4a7959b0298b45ae/html5/thumbnails/4.jpg)
JavaFXJavaFX
Next Generation Java GUI Library
Functionally Analogous: Swing+Java2D+α
JavaSE8 includes JavaFX3.0
![Page 5: From Swing to JavaFX](https://reader033.fdocuments.net/reader033/viewer/2022061223/54c6770f4a7959b0298b45ae/html5/thumbnails/5.jpg)
public class Hello extends Application {
}
public static void main(String[] args) { launch(args); }
Start JavaFX Application Thread
@Override public void start(Stage stage) {
}
// Create Container Group container = new Group(); // Create root of Scene Graph Scene scene = new Scene(container, 100, 20); stage.setScene(scene);
// Create label and add it to Scene Graph Label label = new Label("Hello, World!"); container.getChildren().add(label); stage.show(); SceneGraph
![Page 6: From Swing to JavaFX](https://reader033.fdocuments.net/reader033/viewer/2022061223/54c6770f4a7959b0298b45ae/html5/thumbnails/6.jpg)
Pitfalls
Add to Containerpane.add(comp);pane.getChildren().add(comp);
EventOnly One Event Listener: EventHandler
button.setOnAction( new EventHandler<ActionEvent>() { public void handle(ActionEvent event) { // handling event }});
![Page 7: From Swing to JavaFX](https://reader033.fdocuments.net/reader033/viewer/2022061223/54c6770f4a7959b0298b45ae/html5/thumbnails/7.jpg)
BindPitfalls
Model
View
ControllerEvent
Observer Pattern
Swing
![Page 8: From Swing to JavaFX](https://reader033.fdocuments.net/reader033/viewer/2022061223/54c6770f4a7959b0298b45ae/html5/thumbnails/8.jpg)
BindPitfalls
Model
View
Controller
JavaFX Bind
![Page 9: From Swing to JavaFX](https://reader033.fdocuments.net/reader033/viewer/2022061223/54c6770f4a7959b0298b45ae/html5/thumbnails/9.jpg)
BindPitfalls
Model
View
Controller
JavaFX Bind
// Model objectDoubleProperty xProperty = new DoubleProperty();
Slider slider = new Slider(50, 300, 0);// Bind slider property to model objectxProperty.bind(slider.valueProperty());
Rectangle rect = new Rectangle(50, 10, 50, 30); // Bind model object to x property of rectanglerect.xProperty().bind(xProperty);
![Page 10: From Swing to JavaFX](https://reader033.fdocuments.net/reader033/viewer/2022061223/54c6770f4a7959b0298b45ae/html5/thumbnails/10.jpg)
Migration Scenarios
Scenario #1 JavaFX in Swing
Scenario #2 Swing to JavaFX w/o FXML
Scenario #3 Swing to JavaFX w/ FXML
![Page 11: From Swing to JavaFX](https://reader033.fdocuments.net/reader033/viewer/2022061223/54c6770f4a7959b0298b45ae/html5/thumbnails/11.jpg)
JavaFX in Swing
Embed JavaFX scene graph in Swing application
No support for embedding Swing componentsinto JavaFX applications
Use features JavaFX only has with Swing
![Page 12: From Swing to JavaFX](https://reader033.fdocuments.net/reader033/viewer/2022061223/54c6770f4a7959b0298b45ae/html5/thumbnails/12.jpg)
JavaFX in Swing
Embed JavaFX scene graph in Swing application
No support for embedding Swing componentsinto JavaFX applications
Use features JavaFX only has with SwingWeb
ChartsMediaAnimation
![Page 13: From Swing to JavaFX](https://reader033.fdocuments.net/reader033/viewer/2022061223/54c6770f4a7959b0298b45ae/html5/thumbnails/13.jpg)
JFXPanelJFXPanelJFXPanel is a Swing component that is compatible with JavaFX
Add scene graph into JFXPanel final JFXPanel fxPanel = new JFXPanel(); jframe.add(fxPanel);
Platform.runLater(new Runnable() { @Override public void run() { AnchorPane root = new AnchorPane(); Scene scene = new Scene(root); root.getChildren().add(new Button("JavaFX Button")); fxPanel.setScene(scene); } });
Swing EDT
JavaFX App Thread
![Page 14: From Swing to JavaFX](https://reader033.fdocuments.net/reader033/viewer/2022061223/54c6770f4a7959b0298b45ae/html5/thumbnails/14.jpg)
Swing to JavaFX w/o FXML
Rewrite Swing as JavaFX
Same concept, similar usage
Same concept, different usage
New concept
Label, Button, TextField, et al.
Layout
TableView, TreeView, ListView
![Page 15: From Swing to JavaFX](https://reader033.fdocuments.net/reader033/viewer/2022061223/54c6770f4a7959b0298b45ae/html5/thumbnails/15.jpg)
Swing
JavaFX
Swing
JavaFX
Same concept, similar usage : Button
JButton = new JButton(”Swing”);
button.addActionListener(new ActionListener() { @Override public void actionPerformed(new ActionEvent event) { // handling event } });
Button = new Button(”JavaFX”);
button.setOnAction(new EventHandler<ActionEvent>() { @Override public void handle(ActionEvent event) { // handling event } });
![Page 16: From Swing to JavaFX](https://reader033.fdocuments.net/reader033/viewer/2022061223/54c6770f4a7959b0298b45ae/html5/thumbnails/16.jpg)
Same concept, different usage
: Layout
Swing: Container+LayoutManeger
JPanel panel = new JPanel();panel.setLayout(new BorderLayout());
panel.add(comp, BorderLayout.CENTER);
JavaFX: Container includes layout
BorderPane pane = new BorderPane();
pane.setCenter(comp);
![Page 17: From Swing to JavaFX](https://reader033.fdocuments.net/reader033/viewer/2022061223/54c6770f4a7959b0298b45ae/html5/thumbnails/17.jpg)
New Concept: Table
Swing: TableModelJavaFX: Bind Java Beans to Column
class Student { ...... } // Java Bean
TableView<Student> table = new TableView<>();
TableColumn col1 = new TableColumn("Name");col1.setCellValueFactory( new PropertyValueFactory<Student, String>("name"));TableColumn col2 = new TableColumn("Grad Year");col2.setCellValueFactory( new PropertyValueFactory<Student, Integer>("gradYear"));
table.setItems(students);table.getColumns().addAll(col1, col2);
class Student {..} // Student has name & gradYear props
TableView<Student> table = new TableView<>();
TableColumn col1 = new TableColumn("Name");col1.setCellValueFactory( new PropertyValueFactory<Student, String>("name"));TableColumn col2 = new TableColumn("Grad Year");col2.setCellValueFactory( new PropertyValueFactory<Student, Integer>("gradYear"));
table.setItems(students);table.getColumns().addAll(col1, col2);
![Page 18: From Swing to JavaFX](https://reader033.fdocuments.net/reader033/viewer/2022061223/54c6770f4a7959b0298b45ae/html5/thumbnails/18.jpg)
Swing to JavaFX
w/ FXML
![Page 19: From Swing to JavaFX](https://reader033.fdocuments.net/reader033/viewer/2022061223/54c6770f4a7959b0298b45ae/html5/thumbnails/19.jpg)
FXMLFXML
Use XML to describe GUI structureFXML describes Scene Graph
Schema-lessClass: XML ElementProperty: XML Attribute or Element
FXML read by Java application at run time
![Page 20: From Swing to JavaFX](https://reader033.fdocuments.net/reader033/viewer/2022061223/54c6770f4a7959b0298b45ae/html5/thumbnails/20.jpg)
<AnchorPane prefHeight="400.0" prefWidth="600.0"> <children> <HBox alignment="CENTER" prefHeight="50.0" prefWidth="572.0" spacing="20.0"> <children> <TextField prefWidth="200.0" style="-fx-font-size: 24;" /> <Button style="-fx-font-size: 24;" text="Load" /> </children> </HBox> <WebView prefHeight="302.0" prefWidth="572.0" /> </children></AnchorPane>
<AnchorPane prefHeight="400.0" prefWidth="600.0"> <children> <HBox alignment="CENTER" prefHeight="50.0" prefWidth="572.0" spacing="20.0"> <children> <TextField prefWidth="200.0" style="-fx-font-size: 24;" /> <Button style="-fx-font-size: 24;" text="Load" /> </children> </HBox> <WebView prefHeight="302.0" prefWidth="572.0" /> </children></AnchorPane>
<AnchorPane prefHeight="400.0" prefWidth="600.0"> <children> <HBox alignment="CENTER" prefHeight="50.0" prefWidth="572.0" spacing="20.0"> <children> <TextField prefWidth="200.0" style="-fx-font-size: 24;" /> <Button style="-fx-font-size: 24;" text="Load" /> </children> </HBox> <WebView prefHeight="302.0" prefWidth="572.0" /> </children></AnchorPane>
<AnchorPane prefHeight="400.0" prefWidth="600.0"> <children> <HBox alignment="CENTER" prefHeight="50.0" prefWidth="572.0" spacing="20.0"> <children> <TextField prefWidth="200.0" style="-fx-font-size: 24;" /> <Button style="-fx-font-size: 24;" text="Load" /> </children> </HBox> <WebView prefHeight="302.0" prefWidth="572.0" /> </children></AnchorPane>
AnchorPane pane = FXMLLoader.load( this.getClass().getResource("browser.fxml"));
ex. browser.fxml
![Page 21: From Swing to JavaFX](https://reader033.fdocuments.net/reader033/viewer/2022061223/54c6770f4a7959b0298b45ae/html5/thumbnails/21.jpg)
Linking FXML to Java
View
Model
Controller
FXML
Java
Java?
![Page 22: From Swing to JavaFX](https://reader033.fdocuments.net/reader033/viewer/2022061223/54c6770f4a7959b0298b45ae/html5/thumbnails/22.jpg)
Linking FXML to Java
ModelView ControllerFXML Java Java
fx:id#method
@FXML
![Page 23: From Swing to JavaFX](https://reader033.fdocuments.net/reader033/viewer/2022061223/54c6770f4a7959b0298b45ae/html5/thumbnails/23.jpg)
<AnchorPane xmlns:fx="http://javafx.com/fxml" fx:controller="contents.BrowserController"> <children> <HBox> <children> <TextField fx:id="textfield" /> <Button onAction="#handleAction" /> </children> </HBox> <WebView fx:id="webview" /> </children></AnchorPane>
<AnchorPane xmlns:fx="http://javafx.com/fxml" fx:controller="contents.BrowserController"> <children> <HBox> <children> <TextField fx:id="textfield" /> <Button onAction="#handleAction" /> </children> </HBox> <WebView fx:id="webview" /> </children></AnchorPane>
<AnchorPane xmlns:fx="http://javafx.com/fxml" fx:controller="contents.BrowserController"> <children> <HBox> <children> <TextField fx:id="textfield" /> <Button onAction="#handleAction" /> </children> </HBox> <WebView fx:id="webview" /> </children></AnchorPane>
public class BrowserController implements Initializable { @FXML private TextField textfield; @FXML private WebView webview; private WebEngine engine; @FXML public void handleAction(ActionEvent event) { engine.load(textfield.getText()); } @Override public void initialize(URL url, ResourceBundle rb) { engine = webview.getEngine(); } }
public class BrowserController implements Initializable { @FXML private TextField textfield; @FXML private WebView webview; private WebEngine engine; @FXML public void handleAction(ActionEvent event) { engine.load(textfield.getText()); } @Override public void initialize(URL url, ResourceBundle rb) { engine = webview.getEngine(); } }
![Page 24: From Swing to JavaFX](https://reader033.fdocuments.net/reader033/viewer/2022061223/54c6770f4a7959b0298b45ae/html5/thumbnails/24.jpg)
<AnchorPane xmlns:fx="http://javafx.com/fxml" fx:controller="contents.BrowserController"> <children> <HBox> <children> <TextField fx:id="textfield" /> <Button onAction="#handleAction" /> </children> </HBox> <WebView fx:id="webview" /> </children></AnchorPane>
<AnchorPane xmlns:fx="http://javafx.com/fxml" fx:controller="contents.BrowserController"> <children> <HBox> <children> <TextField fx:id="textfield" /> <Button onAction="#handleAction" /> </children> </HBox> <WebView fx:id="webview" /> </children></AnchorPane>
<AnchorPane xmlns:fx="http://javafx.com/fxml" fx:controller="contents.BrowserController"> <children> <HBox> <children> <TextField fx:id="textfield" /> <Button onAction="#handleAction" /> </children> </HBox> <WebView fx:id="webview" /> </children></AnchorPane>
public class BrowserController implements Initializable { @FXML private TextField textfield; @FXML private WebView webview; private WebEngine engine; @FXML public void handleAction(ActionEvent event) { engine.load(textfield.getText()); } @Override public void initialize(URL url, ResourceBundle rb) { engine = webview.getEngine(); } }
public class BrowserController implements Initializable { @FXML private TextField textfield; @FXML private WebView webview; private WebEngine engine; @FXML public void handleAction(ActionEvent event) { engine.load(textfield.getText()); } @Override public void initialize(URL url, ResourceBundle rb) { engine = webview.getEngine(); } }
![Page 25: From Swing to JavaFX](https://reader033.fdocuments.net/reader033/viewer/2022061223/54c6770f4a7959b0298b45ae/html5/thumbnails/25.jpg)
Tools
Java
FXML
NetBeans
Scene Builder
![Page 26: From Swing to JavaFX](https://reader033.fdocuments.net/reader033/viewer/2022061223/54c6770f4a7959b0298b45ae/html5/thumbnails/26.jpg)
Conclusion
3 migration scenarios
Not so different from a Component-based UI standpointFXML is a key feature
No mention in this sessionCSS, Animaction, EffectShape, Aysnc task
![Page 27: From Swing to JavaFX](https://reader033.fdocuments.net/reader033/viewer/2022061223/54c6770f4a7959b0298b45ae/html5/thumbnails/27.jpg)
From Swing To JavaFX
Java in the BoxYuichi Sakuraba
- Migration Guide to JavaFX -