Dan Vulpe - JavaFX 2 - Developing RIA with Java
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,362
On Slideshare
1,362
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
28
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. 2Developing RIA with Java 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 eventsJavaFX 1.0 JavaFX 1.3 Windows Mac Linux
  • 3. Scene graph design Scene Parent Parent Parent ParentLeaf Leaf Leaf Leaf Leaf
  • 4. Scene graph design Scene Parent Parent Parent ParentLeaf 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 Propertiesservice.valueProperty().addListener(new ChangeListener<WorkItemUI>(){ @Override public void changed(ObservableValue<? extends WorkItemUI> value, WorkItemUI oldValue, WorkItemUI newValue) { itemsPane.getChildren().add(newValue); }});
  • 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. Hello JavaFX
  • 9. Layouts
  • 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. GUI Editor: Preview
  • 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. 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. Application Structure FXML (layout) FX CSS JavaFX JavaFX Scene (styling) Stage Rendered On Rendered On JavaController
  • 16. Best Practices?
  • 17. GUI componentsExternal Sends Actions To BusinessServices Presenter View Logic Client Updates Binds To Application State Model Core UI
  • 18. JavaFX approachExternal Business Sends Actions ToServices Logic Presenter View Client Updates Binds To Application State Model Core UI
  • 19. JavaFX approachExternal Business Sends Actions ToServices Logic Presenter View Client Updates Binds To Application State Model Core UI Async Services
  • 20. JavaFX approachExternal Business Sends Actions ToServices Logic Presenter View Client Updates Binds To Application State Model Core UI Async Services
  • 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. 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. 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. 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. DEMO
  • 26. JavaFX App Structure FXML (layout) FX CSS JavaFX JavaFX Scene (styling) Stage Rendered On Rendered On JavaController
  • 27. Swing Integration FXML (layout) swing Component FX CSS JavaFX Scene JFXPanel (styling) Rendered On Rendered On JavaController
  • 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 fill in the feedback form!