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.
2Developing RIA with Java                    Dan Vulpe                    Software Engineer                    Centric    ...
History                                         Apr 2012       Aug 2012                                        JavaFX     ...
Scene graph design                Scene                Parent       Parent   Parent   ParentLeaf    Leaf     Leaf     Leaf...
Scene graph design                Scene                Parent       Parent   Parent   ParentLeaf    Leaf     Leaf     Leaf...
Nodes have Properties•   parent•   scene•   translate (X,Y, Z)•   scale (X,Y, Z)•   opacity•   ... see JavaDoc for javafx....
Observable Propertiesservice.valueProperty().addListener(new ChangeListener<WorkItemUI>(){   @Override   public void chang...
Bindingpublic void bindTo(WorkItemModel workItem) {     title.bindBidirectional(workItem.title);     issueType.bind(workIt...
Hello JavaFX
Layouts
FXML<VBox alignment="CENTER" prefHeight="250.0" prefWidth="450.0" spacing="5.0"    xmlns:fx="http://javafx.com/fxml">  <ch...
Scene Builder - Oracle
GUI Editor: Preview
CSS Styling.root {    -fx-font-size: 15px;    -fx-base: #eee;    -fx-font-family: "Trebuchet MS";}.workItem {    -fx-borde...
Bindingspublic class DemoController {    @FXML    private TextField textField;    @FXML    private Label label;    @FXML  ...
Application Structure  FXML (layout) FX CSS                                                 JavaFX                        ...
Best Practices?
GUI componentsExternal                                   Sends Actions To            BusinessServices                  Pre...
JavaFX approachExternal           Business                       Sends Actions ToServices            Logic       Presenter...
JavaFX approachExternal           Business                                  Sends Actions ToServices            Logic     ...
JavaFX approachExternal           Business                                  Sends Actions ToServices            Logic     ...
JavaFX approach                                  Use                                 Case 1External           Business    ...
JavaFX approach                                  Use                                 Case 1External           Business    ...
JavaFX approach                                  Use                                 Case 1External           Business    ...
JavaFX approach                                  Use                                 Case 1External           Business    ...
DEMO
JavaFX App Structure  FXML (layout) FX CSS                                                 JavaFX                         ...
Swing Integration  FXML (layout)                                                            swing Component FX CSS        ...
Deploy•   applets•   Java WebStart•   standalone applications (natively packaged    Windows, Mac)•   ... using JavaFX SDK ...
Why JavaFX?•   available on the JVM (Java, JRuby, Scala, Groovy,    Clojure)•   portability (Mac, Linux, Windows)•   scene...
Resources•   http://fxexperience.com•   http://github.com/dvulpe/codecamp-javafx
?
Thank you!Please fill in the feedback form!
Upcoming SlideShare
Loading in …5
×

Dan Vulpe - JavaFX 2 - Developing RIA with Java

1,790 views

Published on

  • Be the first to comment

  • Be the first to like this

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!

×