Downloaded 39 times
Uploaded byCodecamp Romania
Dan Vulpe - JavaFX 2 - Developing RIA with Java
This document discusses developing rich internet applications (RIAs) with JavaFX. It provides a brief history of JavaFX releases and features. It describes the scene graph design and how nodes have observable properties that can be bound. It also discusses layouts, FXML, CSS styling, bindings, and best practices for application structure. The document includes examples of controller code and demonstrates JavaFX concepts like scenes, parents and leaf nodes.
More Related Content
![[S lide] java_sig-spring-framework](https://cdn.slidesharecdn.com/ss_thumbnails/slidejavasig-spring-framework-110225111115-phpapp01-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Similar to Dan Vulpe - JavaFX 2 - Developing RIA with Java
Dan Vulpe - JavaFX 2 - Developing RIA with Java
- 1. 2 Developing RIA withJava Dan Vulpe Software Engineer Centric @dvulpe dvulpe@gmail.com
- 2. History Apr 2012 Aug 2012 JavaFX JavaFX Oct 2011 2.1 2.2 JavaFX LCD text Canvas 2.0 UI elements UI elements Dec 2008 Apr 2010 Java API Video h264 Touch events JavaFX 1.0 JavaFX 1.3 Windows Mac Linux
- 3. Scene graph design Scene Parent Parent Parent Parent Leaf Leaf Leaf Leaf Leaf
- 4. Scene graph design Scene Parent Parent Parent Parent Leaf Leaf Leaf Leaf Leaf
- 5. Nodes have Properties • parent • scene • translate (X,Y, Z) • scale (X,Y, Z) • opacity • ... see JavaDoc for javafx.scene.Node
- 6. Observable Properties service.valueProperty().addListener(new ChangeListener<WorkItemUI>() { @Override public void changed(ObservableValue<? extends WorkItemUI> value, WorkItemUI oldValue, WorkItemUI newValue) { itemsPane.getChildren().add(newValue); } });
- 7. Binding public void bindTo(WorkItemModelworkItem) { title.bindBidirectional(workItem.title); issueType.bind(workItem.issueType); workItemInfo.bindBidirectional(workItem.workItemInfo); asignee.bindBidirectional(workItem.asignee); dueDate.bindBidirectional(workItem.dueDate); priority.bindBidirectional(workItem.priority); }
- 8.
- 9.
- 10. FXML <VBox alignment="CENTER" prefHeight="250.0"prefWidth="450.0" spacing="5.0" xmlns:fx="http://javafx.com/fxml"> <children> <Label text="Enter your credentials" textFill="WHITE"/> <GridPane fx:id="formContainer" hgap="10.0" vgap="10.0"> <children> <Label text="Username" GridPane.columnIndex="0" GridPane.rowIndex="0"/> <Label text="Password" GridPane.columnIndex="0" GridPane.rowIndex="1" /> <TextField GridPane.columnIndex="1" GridPane.rowIndex="0" /> <TextField GridPane.columnIndex="1" GridPane.rowIndex="1" /> <Button text="Log In" GridPane.columnIndex="1" GridPane.rowIndex="2" /> </children> </GridPane> </children> </VBox>
- 11. Scene Builder -Oracle
- 12.
- 13. CSS Styling .root { -fx-font-size: 15px; -fx-base: #eee; -fx-font-family: "Trebuchet MS"; } .workItem { -fx-border-radius: 5; -fx-background-radius: 5; -fx-effect: dropshadow(gaussian, #ccc, 10, 0.1, 5, 2); -fx-border-color: #666; -fx-border-weight: 1px; -fx-font-size: 1em; -fx-opacity: 0.9; -fx-base: #333; }
- 14. Bindings public class DemoController{ @FXML private TextField textField; @FXML private Label label; @FXML private ListView<String> listView; @FXML private Pane rootPane; @FXML private Pane formPane; @FXML private Button aButton; public void setDataModel(DataModel dataModel) { label.textProperty().bind(dataModel.titleProperty()); textField.textProperty().bindBidirectional(dataModel.textProperty()); Bindings.bindContent(dataModel.aPlainList(), listView.getItems()); aButton.disableProperty().bind(textField.textProperty().isEqualTo("")); formPane.prefWidthProperty().bind(rootPane.widthProperty().divide(2)); } }
- 15. Application Structure FXML (layout) FX CSS JavaFX JavaFX Scene (styling) Stage Rendered On Rendered On Java Controller
- 16.
- 17. GUI components External Sends Actions To Business Services Presenter View Logic Client Updates Binds To Application State Model Core UI
- 18. JavaFX approach External Business Sends Actions To Services Logic Presenter View Client Updates Binds To Application State Model Core UI
- 19. JavaFX approach External Business Sends Actions To Services Logic Presenter View Client Updates Binds To Application State Model Core UI Async Services
- 20. JavaFX approach External Business Sends Actions To Services Logic Presenter View Client Updates Binds To Application State Model Core UI Async Services
- 21. JavaFX approach Use Case 1 External Business Sends Actions To Services Logic Presenter View Client Updates Binds To Application State Model Core UI Async Services
- 22. JavaFX approach Use Case 1 External Business Use Sends Actions To Services Logic Case 2 Presenter View Client Updates Binds To Application State Model Core UI Async Services
- 23. JavaFX approach Use Case 1 External Business Use Sends Actions To Services Logic Case 2 Presenter View Client Use Case 3 Updates Binds To Application State Model Core UI Async Services
- 24. JavaFX approach Use Case 1 External Business Use Sends Actions To Services Logic Case 2 Presenter View Client Use Case 3 Updates Binds To Application State Model Use Case N Core UI Async Services
- 25.
- 26. JavaFX App Structure FXML (layout) FX CSS JavaFX JavaFX Scene (styling) Stage Rendered On Rendered On Java Controller
- 27. Swing Integration FXML (layout) swing Component FX CSS JavaFX Scene JFXPanel (styling) Rendered On Rendered On Java Controller
- 28. Deploy • applets • Java WebStart • standalone applications (natively packaged Windows, Mac) • ... using JavaFX SDK tools (ant tasks)
- 29. Why JavaFX? • available on the JVM (Java, JRuby, Scala, Groovy, Clojure) • portability (Mac, Linux, Windows) • scene-graph • rapid development
- 30. Resources • http://fxexperience.com • http://github.com/dvulpe/codecamp-javafx
- 31.
- 32. Thank you! Please fillin the feedback form!