0
From Swing    To JavaFX- Migration Guide to JavaFX -               Java in the Box               Yuichi Sakuraba
Basics of JavaFX
JavaFXNext Generation Java GUI LibraryFunctionally Analogous:                 Swing+Java2D+α  JavaSE8 includes JavaFX3.0
public class Hello extends Application {    @Override    public void start(Stage stage) {        // Create Container      ...
PitfallsAdd to Container      pane.add(comp);      pane.getChildren().add(comp);Event Only One Event Listener: EventHandle...
Pitfalls   View         Observer Pattern  Bind                              Model           Swing                         ...
Pitfalls    View  Bind                          Model           JavaFX Bind             Controller
Pitfalls     View  Bind                                         Model           JavaFX Bind              Controller       ...
Migration Scenarios      Scenario #1 JavaFX in Swing     Scenario #2 Swing to JavaFX                       w/o FXML      S...
JavaFX in Swing   Embed JavaFX scene graph        in Swing application      No support for      embedding Swing components...
JavaFX in Swing   Embed JavaFX scene graph        in Swing application      No support for      embedding Swing components...
JFXPanel JFXPanel is a Swing component  that is compatible with JavaFX   Add scene graph into JFXPanel final JFXPanel fxPa...
Swing to JavaFX w/o FXML Rewrite Swing as JavaFX   Same concept, similar usage       Label, Button, TextField, et al.  Sam...
Same concept, : Button  similar usageSwing     JButton = new JButton(”Swing”);     button.addActionListener(new ActionList...
Same concept, : Layout different usageSwing: Container+LayoutManeger   JPanel panel = new JPanel();   panel.setLayout(new ...
New Concept: TableSwing: TableModelJavaFX: Bind Java Beans to Column class Student { ...... } // Java Bean & gradYear prop...
Swing to JavaFX           w/   FXML
FXMLUse XML to describe GUI structure    FXML describes Scene Graph  Schema-less    Class: XML Element    Property: XML At...
ex. browser.fxml<AnchorPane prefHeight="400.0" prefWidth="600.0">  <children>    <HBox alignment="CENTER"          prefHei...
Linking FXML to Java              ?     View     FXML                   Model                   Java      Controller      ...
Linking FXML to Java View     Controller   Model FXML       Java       Javafx:id     @FXML#method
<AnchorPane xmlns:fx="http://javafx.com/fxml"             fx:controller="contents.BrowserController">  <children>    <HBox...
<AnchorPane xmlns:fx="http://javafx.com/fxml"             fx:controller="contents.BrowserController">  <children>    <HBox...
Tools  Java   NetBeans  FXML   Scene Builder
Conclusion 3 migration scenarios Not so different from   a Component-based UI standpoint FXML is a key featureNo mention i...
From Swing    To JavaFX- Migration Guide to JavaFX -              Java in the Box              Yuichi Sakuraba
From Swing to JavaFX
Upcoming SlideShare
Loading in...5
×

From Swing to JavaFX

10,756

Published on

JJUG CCC

Published in: Technology, Education
1 Comment
5 Likes
Statistics
Notes
  • 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
No Downloads
Views
Total Views
10,756
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
132
Comments
1
Likes
5
Embeds 0
No embeds

No notes for slide

Transcript of "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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×