Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

From Swing to JavaFX

13,909 views

Published on

JJUG CCC

Published in: Technology, Education
  • This is very nice. Thank you.

    I general I would like to see more FXML examples such as what is done in code in slide 17.

    I pasted some FXML in my comment but it's gone...slideshare tag for code?
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

From Swing to JavaFX

  1. 1. From Swing To JavaFX- Migration Guide to JavaFX - Java in the Box Yuichi Sakuraba
  2. 2. Basics of JavaFX
  3. 3. JavaFXNext Generation Java GUI LibraryFunctionally Analogous: Swing+Java2D+α JavaSE8 includes JavaFX3.0
  4. 4. public class Hello extends Application { @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 public static void main(String[] args) { launch(args); }} Start JavaFX Application Thread
  5. 5. PitfallsAdd to Container pane.add(comp); pane.getChildren().add(comp);Event Only One Event Listener: EventHandler button.setOnAction( new EventHandler<ActionEvent>() { public void handle(ActionEvent event) { // handling event } });
  6. 6. Pitfalls View Observer Pattern Bind Model Swing Event Controller
  7. 7. Pitfalls View Bind Model JavaFX Bind Controller
  8. 8. Pitfalls View Bind Model JavaFX Bind Controller // Model object DoubleProperty xProperty = new DoubleProperty(); Slider slider = new Slider(50, 300, 0); // Bind slider property to model object xProperty.bind(slider.valueProperty()); Rectangle rect = new Rectangle(50, 10, 50, 30); // Bind model object to x property of rectangle rect.xProperty().bind(xProperty);
  9. 9. Migration Scenarios Scenario #1 JavaFX in Swing Scenario #2 Swing to JavaFX w/o FXML Scenario #3 Swing to JavaFX w/ FXML
  10. 10. JavaFX in Swing Embed JavaFX scene graph in Swing application No support for embedding Swing components into JavaFX applicationsUse features JavaFX only has with Swing
  11. 11. JavaFX in Swing Embed JavaFX scene graph in Swing application No support for embedding Swing components into JavaFX applicationsUse features JavaFX only has Web Media with Swing Charts Animation
  12. 12. JFXPanel JFXPanel is a Swing component that is compatible with JavaFX Add scene graph into JFXPanel final JFXPanel fxPanel = new JFXPanel(); Swing EDT jframe.add(fxPanel); Platform.runLater(new Runnable() { @Override public void run() { JavaFX App Thread AnchorPane root = new AnchorPane(); Scene scene = new Scene(root); root.getChildren().add(new Button("JavaFX Button")); fxPanel.setScene(scene); } });
  13. 13. Swing to JavaFX w/o FXML Rewrite Swing as JavaFX Same concept, similar usage Label, Button, TextField, et al. Same concept, different usage Layout New concept TableView, TreeView, ListView
  14. 14. Same concept, : Button similar usageSwing JButton = new JButton(”Swing”); button.addActionListener(new ActionListener() { @Override public void actionPerformed(new ActionEvent event) { // handling event } });JavaFX Button = new Button(”JavaFX”); button.setOnAction(new EventHandler<ActionEvent>() { @Override public void handle(ActionEvent event) { // handling event } });
  15. 15. Same concept, : Layout different usageSwing: 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);
  16. 16. New Concept: TableSwing: TableModelJavaFX: Bind Java Beans to Column class Student { ...... } // Java Bean & gradYear props {..} // Student has name 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);
  17. 17. Swing to JavaFX w/ FXML
  18. 18. FXMLUse XML to describe GUI structure FXML describes Scene Graph Schema-less Class: XML Element Property: XML Attribute or Element FXML read by Java application at run time
  19. 19. ex. browser.fxml<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"));
  20. 20. Linking FXML to Java ? View FXML Model Java Controller Java
  21. 21. Linking FXML to Java View Controller Model FXML Java Javafx:id @FXML#method
  22. 22. <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> public class BrowserController implements Initializable {</AnchorPane> @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(); } }
  23. 23. <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> public class BrowserController implements Initializable {</AnchorPane> @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(); } }
  24. 24. Tools Java NetBeans FXML Scene Builder
  25. 25. Conclusion 3 migration scenarios Not so different from a Component-based UI standpoint FXML is a key featureNo mention in this session CSS, Animaction, Effect Shape, Aysnc task
  26. 26. From Swing To JavaFX- Migration Guide to JavaFX - Java in the Box Yuichi Sakuraba

×