Dan Vulpe - JavaFX 2 - Developing RIA with Java

1,462 views
1,126 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,462
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
33
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Dan Vulpe - JavaFX 2 - Developing RIA with Java

  1. 1. 2Developing RIA with Java Dan Vulpe Software Engineer Centric @dvulpe dvulpe@gmail.com
  2. 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 eventsJavaFX 1.0 JavaFX 1.3 Windows Mac Linux
  3. 3. Scene graph design Scene Parent Parent Parent ParentLeaf Leaf Leaf Leaf Leaf
  4. 4. Scene graph design Scene Parent Parent Parent ParentLeaf Leaf Leaf Leaf Leaf
  5. 5. Nodes have Properties• parent• scene• translate (X,Y, Z)• scale (X,Y, Z)• opacity• ... see JavaDoc for javafx.scene.Node
  6. 6. Observable Propertiesservice.valueProperty().addListener(new ChangeListener<WorkItemUI>(){ @Override public void changed(ObservableValue<? extends WorkItemUI> value, WorkItemUI oldValue, WorkItemUI newValue) { itemsPane.getChildren().add(newValue); }});
  7. 7. Bindingpublic void bindTo(WorkItemModel workItem) { 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. 8. Hello JavaFX
  9. 9. Layouts
  10. 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. 11. Scene Builder - Oracle
  12. 12. GUI Editor: Preview
  13. 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. 14. Bindingspublic 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. 15. Application Structure FXML (layout) FX CSS JavaFX JavaFX Scene (styling) Stage Rendered On Rendered On JavaController
  16. 16. Best Practices?
  17. 17. GUI componentsExternal Sends Actions To BusinessServices Presenter View Logic Client Updates Binds To Application State Model Core UI
  18. 18. JavaFX approachExternal Business Sends Actions ToServices Logic Presenter View Client Updates Binds To Application State Model Core UI
  19. 19. JavaFX approachExternal Business Sends Actions ToServices Logic Presenter View Client Updates Binds To Application State Model Core UI Async Services
  20. 20. JavaFX approachExternal Business Sends Actions ToServices Logic Presenter View Client Updates Binds To Application State Model Core UI Async Services
  21. 21. JavaFX approach Use Case 1External Business Sends Actions ToServices Logic Presenter View Client Updates Binds To Application State Model Core UI Async Services
  22. 22. JavaFX approach Use Case 1External Business Use Sends Actions ToServices Logic Case 2 Presenter View Client Updates Binds To Application State Model Core UI Async Services
  23. 23. JavaFX approach Use Case 1External Business Use Sends Actions ToServices Logic Case 2 Presenter View Client Use Case 3 Updates Binds To Application State Model Core UI Async Services
  24. 24. JavaFX approach Use Case 1External Business Use Sends Actions ToServices Logic Case 2 Presenter View Client Use Case 3 Updates Binds To Application State Model Use Case N Core UI Async Services
  25. 25. DEMO
  26. 26. JavaFX App Structure FXML (layout) FX CSS JavaFX JavaFX Scene (styling) Stage Rendered On Rendered On JavaController
  27. 27. Swing Integration FXML (layout) swing Component FX CSS JavaFX Scene JFXPanel (styling) Rendered On Rendered On JavaController
  28. 28. Deploy• applets• Java WebStart• standalone applications (natively packaged Windows, Mac)• ... using JavaFX SDK tools (ant tasks)
  29. 29. Why JavaFX?• available on the JVM (Java, JRuby, Scala, Groovy, Clojure)• portability (Mac, Linux, Windows)• scene-graph• rapid development
  30. 30. Resources• http://fxexperience.com• http://github.com/dvulpe/codecamp-javafx
  31. 31. ?
  32. 32. Thank you!Please fill in the feedback form!

×