From Swing to JavaFX
Upcoming SlideShare
Loading in...5
×
 

From Swing to JavaFX

on

  • 9,083 views

JJUG CCC

JJUG CCC

Statistics

Views

Total Views
9,083
Views on SlideShare
9,061
Embed Views
22

Actions

Likes
2
Downloads
88
Comments
1

3 Embeds 22

http://192.168.11.8 11
http://www.docshut.com 8
http://us-w1.rockmelt.com 3

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • 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?
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

From Swing to JavaFX From Swing to JavaFX Presentation Transcript

  • 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 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
  • 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 } });
  • Pitfalls View Observer Pattern Bind Model Swing Event Controller
  • Pitfalls View Bind Model JavaFX Bind Controller
  • 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);
  • Migration Scenarios Scenario #1 JavaFX in Swing Scenario #2 Swing to JavaFX w/o FXML Scenario #3 Swing to JavaFX w/ FXML
  • 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
  • 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
  • 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); } });
  • 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
  • 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 } });
  • 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);
  • 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);
  • Swing to JavaFX w/ FXML
  • 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
  • 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"));
  • Linking FXML to Java ? View FXML Model Java Controller Java
  • 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> <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(); } }
  • <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(); } }
  • 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 in this session CSS, Animaction, Effect Shape, Aysnc task
  • From Swing To JavaFX- Migration Guide to JavaFX - Java in the Box Yuichi Sakuraba