JavaFX fundamentalsTecniche di Programmazione – A.A. 2012/2013
Summary1.   Application structure2.   The Scene Graph3.   Events4.   Properties and Bindings 2                            ...
Application structure      Introduction to JavaFX
4   Tecniche di programmazione   A.A. 2012/2013
Separation of concerns5                Tecniche di programmazione   A.A. 2012/2013
General class diagram                                .launch()                                creates           Applicatio...
General rules       A JavaFX application extends        javafx.application.Application       The main() method should ca...
Minimal examplepublic class HelloWorld extends Application {    public static void main(String[] args) {        launch(arg...
Stage vs Scenejavafx.stage.Stage                        javafx.scene.Scene       The JavaFX Stage class is the        th...
Nodes    The Scene is populated with a tree of Nodes        Layout components        UI Controls        Charts       ...
Events    FX Event (javafx.event.Event):        Event Source => a Node        Event Target        Event Type    Usual...
Properties    Extension of the Java Beans convention        May be used also outside JavaFX    Encapsulate properties o...
Bindings    Automatically connect («bind») one Property to another     Property        Whenever the source property chan...
The Scene graph Introduction to JavaFX
Nodes    Root node: top level container    Intermediate nodes:        Containers        Layout managers        UI Com...
ChoiceBox                                                                   ColorPicker                                   ...
Exploring Controls and Examples    JavaFX Ensemble demo     application    Download from Oracle     site: JavaFX Demos a...
UI Form Controls    Controls may be     combined to construct     «Forms»    Control Nodes have a     value property    ...
19   Tecniche di programmazione   A.A. 2012/2013
Layout Class Hierarchy    Group:        Doesn’t perform any positioning of children.        To statically assemble a co...
21   Tecniche di programmazione   A.A. 2012/2013
22   Tecniche di programmazione   A.A. 2012/2013
23   Tecniche di programmazione   A.A. 2012/2013
24   Tecniche di programmazione   A.A. 2012/2013
25   Tecniche di programmazione   A.A. 2012/2013
26   Tecniche di programmazione   A.A. 2012/2013
27   Tecniche di programmazione   A.A. 2012/2013
28   Tecniche di programmazione   A.A. 2012/2013
Creating the Scene Graph    The Java way        Create Control Nodes        Set properties to new nodes        Add new...
Example: one text input fieldTextField text = new TextField("Text");                           Constructorstext.setMaxSize...
public class HelloDevoxx extends Application {       public static void main(String[] args)       {               launch(a...
public void start(Stage primaryStage){       primaryStage.setTitle("Hello Devoxx");       primaryStage.setScene(SceneBuild...
The FXML way...    XML-based format    Nested tree of XML Elements, corresponding to Nodes    XML Attributes correspond...
Example34        Tecniche di programmazione   A.A. 2012/2013
JavaFX Scene Builder35              Tecniche di programmazione   A.A. 2012/2013
FXMLLoader     @Override     public void start(Stage stage) throws Exception {         Parent root = FXMLLoader.load(     ...
Linking FXML and Java    FXML element may have an associated attribute fx:id    Nodes may be later retrieved by        ...
EventsIntroduction to JavaFX
Interacting with Nodes    In JavaFX applications, events are notifications that     something has happened.        An ev...
What is an event?40                  Tecniche di programmazione   A.A. 2012/2013
Event propagation    Events are generated on the source node    Events propagated in the scene graph hierarchy («dispatc...
Event Handlers    Implements the EventHandler interface    Executed during the event bubbling phase.    If does not con...
Registering Event Handlers    setOnEvent-type(     EventHandler<? super event-class> value )        Event-Type         ...
Exampleclass ButtonActionHandler implements                         Event Handlerjavafx.event.EventHandler<ActionEvent> { ...
Example (inline definition)                                               Registration &                                  ...
To be continued...    Properties and Bindings             Introduction to JavaFX
ResourcesIntroduction to JavaFX
Resources    API        http://docs.oracle.com/javafx/2/api/index.html    Slides/Tips        http://www.slideshare.net...
Licenza d’uso    Queste diapositive sono distribuite con licenza Creative Commons     “Attribuzione - Non commerciale - C...
Upcoming SlideShare
Loading in...5
×

JavaFX fundamentals

9,105

Published on

Fundamental steps for JavaFX 2.0 programming.

Topics:
Application structure
The Scene Graph
Events
Properties and Bindings


Teaching material for the course of "Tecniche di Programmazione" at Politecnico di Torino in year 2012/2013. More information: http://bit.ly/tecn-progr

Published in: Education, Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
9,105
On Slideshare
0
From Embeds
0
Number of Embeds
23
Actions
Shares
0
Downloads
140
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

JavaFX fundamentals

  1. 1. JavaFX fundamentalsTecniche di Programmazione – A.A. 2012/2013
  2. 2. Summary1. Application structure2. The Scene Graph3. Events4. Properties and Bindings 2 Tecniche di programmazione A.A. 2012/2013
  3. 3. Application structure Introduction to JavaFX
  4. 4. 4 Tecniche di programmazione A.A. 2012/2013
  5. 5. Separation of concerns5 Tecniche di programmazione A.A. 2012/2013
  6. 6. General class diagram .launch() creates Application Stage .setScene extends .start() creates Scene MyApp Root node children (at constructor) creates Node adds Parent (leaf) Node (root) Nodechildren 6 Tecniche di programmazione A.A. 2012/2013
  7. 7. General rules A JavaFX application extends javafx.application.Application The main() method should call Application.launch() The start() method is the main entry point for all JavaFX applications  Called with a Stage connected to the Operating System’s window The content of the scene is represented as a hierarchical scene graph of nodes  Stage is the top-level JavaFX container  Scene is the container for all content 7 Tecniche di programmazione A.A. 2012/2013
  8. 8. Minimal examplepublic class HelloWorld extends Application { public static void main(String[] args) { launch(args); } @Override public void start(Stage primaryStage) { primaryStage.setTitle("Hello World!"); Button btn = new Button(); btn.setText("Say Hello World"); StackPane root = new StackPane(); root.getChildren().add(btn); primaryStage.setScene(new Scene(root, 300, 250)); primaryStage.show(); }} 8 Tecniche di programmazione A.A. 2012/2013
  9. 9. Stage vs Scenejavafx.stage.Stage javafx.scene.Scene The JavaFX Stage class is the  the container for all content top level JavaFX container. in a scene graph The primary Stage is  The application must specify constructed by the platform. the root Node for the scene Additional Stage objects may graph be constructed by the  Root may be Group (clips), application. Region, Control (resizes) A stage can optionally have  If no initial size is specified, it an owner Window. will automatically compute it 9 Tecniche di programmazione A.A. 2012/2013
  10. 10. Nodes The Scene is populated with a tree of Nodes  Layout components  UI Controls  Charts  Shapes Nodes have Properties  Visual (size, position, z-order, color, ...)  Contents (text, value, data sets, ...) Nodes generate Events  UI events Nodes can be styled with CSS 10 Tecniche di programmazione A.A. 2012/2013
  11. 11. Events FX Event (javafx.event.Event):  Event Source => a Node  Event Target  Event Type Usually generated after some user action ActionEvent, TreeModificationEvent, InputEvent, ListView.E ditEvent, MediaErrorEvent, TableColumn.CellEditEvent,Tre eItem.TreeModificationEvent, TreeView.EditEvent, WebEve nt, WindowEvent, WorkerStateEvent You can define event handlers in your application 11 Tecniche di programmazione A.A. 2012/2013
  12. 12. Properties Extension of the Java Beans convention  May be used also outside JavaFX Encapsulate properties of an object  Different types (string, number, object, collection, ...)  Set/Get  Observe changes  Supports lazy evaluation Each Node has a large set of Properties 12 Tecniche di programmazione A.A. 2012/2013
  13. 13. Bindings Automatically connect («bind») one Property to another Property  Whenever the source property changes, the bound one is automatically updated  Multiple bindings are supported  Lazy evaluation is supported  Bindings may also involve computations (arithmetic operators, if-then-else, string concatenation, ...) that are automatically evaluated May be used to automate UI May be used to connect the Model with the View 13 Tecniche di programmazione A.A. 2012/2013
  14. 14. The Scene graph Introduction to JavaFX
  15. 15. Nodes Root node: top level container Intermediate nodes:  Containers  Layout managers  UI Composite controls Leaf (terminal) nodes:  Shapes  UI Controls Organized as a Hierarchical tree 15 Tecniche di programmazione A.A. 2012/2013
  16. 16. ChoiceBox ColorPicker ComboBoxBase Button ComboBoxNodes family CheckBox ButtonBase MenuButton Cell Labeled ToggleButton Label ListView Control TitledPane Group MenuBar Focus on Slider Panes TabPane and TextInputControl TextArea Controls TextField Parent ToolBar AnchorPane TreeView BorderPane Axis FlowPane Region Chart GridPane WebView Pane javafx.scene.Node Arc HBox JavaDoc StackPane is your friend Circle TilePane Line Shape VBox Polygon Canvas Rectangle Imageview16 Text Tecniche di programmazione A.A. 2012/2013
  17. 17. Exploring Controls and Examples JavaFX Ensemble demo application Download from Oracle site: JavaFX Demos and Samples Downloads Run Ensemble.jnlp 17 Tecniche di programmazione A.A. 2012/2013
  18. 18. UI Form Controls Controls may be combined to construct «Forms» Control Nodes have a value property  May be linked to application code Control Nodes generate UI Events  Button: ActionEvent  Text: ActionEvent, KeyTyped, KeyPressed, MouseClicked, ... 18 Tecniche di programmazione A.A. 2012/2013
  19. 19. 19 Tecniche di programmazione A.A. 2012/2013
  20. 20. Layout Class Hierarchy Group:  Doesn’t perform any positioning of children.  To statically assemble a collection of nodes in fixed positions  To apply an effect or transform to that collection. Region:  base class for all general purpose layout panes  resizable and stylable via CSS  Supports dynamic layout by sizing and positioning children Control:  the base class for all skinnable controls  resizable and subclasses are all stylable via CSS  Controls delegate layout to their skins (which are Regions)  Each layout Control subclass provides API for adding content in the appropriate place within its skin  you do not add children to a control directly. 20 Tecniche di programmazione A.A. 2012/2013
  21. 21. 21 Tecniche di programmazione A.A. 2012/2013
  22. 22. 22 Tecniche di programmazione A.A. 2012/2013
  23. 23. 23 Tecniche di programmazione A.A. 2012/2013
  24. 24. 24 Tecniche di programmazione A.A. 2012/2013
  25. 25. 25 Tecniche di programmazione A.A. 2012/2013
  26. 26. 26 Tecniche di programmazione A.A. 2012/2013
  27. 27. 27 Tecniche di programmazione A.A. 2012/2013
  28. 28. 28 Tecniche di programmazione A.A. 2012/2013
  29. 29. Creating the Scene Graph The Java way  Create Control Nodes  Set properties to new nodes  Add new nodes to parent node  With Constructors and/or with Builders The FXML way  Create a FXML file  Define Nodes and Properties in FXML  Load the FXML  (Optionally, add new nodes/properties the Java way) 29 Tecniche di programmazione A.A. 2012/2013
  30. 30. Example: one text input fieldTextField text = new TextField("Text"); Constructorstext.setMaxSize(140, 20);root.getChildren().add(text);TextField text = TextFieldBuilder().create() .maxHeight(20).maxWidth(140) .text("Text") .build() ; Buildersroot.getChildren().add(text); 30 Tecniche di programmazione A.A. 2012/2013
  31. 31. public class HelloDevoxx extends Application { public static void main(String[] args) { launch(args); } @Override public void start(Stage primaryStage) { primaryStage.setTitle("Hello Devoxx"); Group root = new Group(); Scene scene = new Scene(root, 400, 250, Color.ALICEBLUE); Text text = new Text(); text.setX(105); text.setY(120); text.setFont(new Font(30)); text.setText("Hello Devoxx"); root.getChildren().add(text); primaryStage.setScene(scene); primaryStage.show(); }} 31 Tecniche di programmazione A.A. 2012/2013
  32. 32. public void start(Stage primaryStage){ primaryStage.setTitle("Hello Devoxx"); primaryStage.setScene(SceneBuilder.create() .width(400).height(250).fill(Color.ALICEBLUE) .root(GroupBuilder.create().children( TextBuilder.create() .x(105).y(120) .text("Hello Devoxx") .font(new Font(30)).build() ).build() ).build()); primaryStage.show();} 32 Tecniche di programmazione A.A. 2012/2013
  33. 33. The FXML way... XML-based format Nested tree of XML Elements, corresponding to Nodes XML Attributes corresponding to (initial) properties of nodes JavaFX Scene Builder is a GUI for creating FXML files The FXMLLoader class reads a FXML file and creates all the Nodes 33 Tecniche di programmazione A.A. 2012/2013
  34. 34. Example34 Tecniche di programmazione A.A. 2012/2013
  35. 35. JavaFX Scene Builder35 Tecniche di programmazione A.A. 2012/2013
  36. 36. FXMLLoader @Override public void start(Stage stage) throws Exception { Parent root = FXMLLoader.load( getClass().getResource("fxml_example.fxml")); stage.setTitle("FXML Welcome"); stage.setScene(new Scene(root, 300, 275)); stage.show(); }36 Tecniche di programmazione A.A. 2012/2013
  37. 37. Linking FXML and Java FXML element may have an associated attribute fx:id Nodes may be later retrieved by  public Node lookup(java.lang.String selector)  Finds a node with a specified ID in the current sub-tree  Example:  scene.lookup("#myId"); Node references can also be «injected» using the @FXML annotation (see later) 37 Tecniche di programmazione A.A. 2012/2013
  38. 38. EventsIntroduction to JavaFX
  39. 39. Interacting with Nodes In JavaFX applications, events are notifications that something has happened.  An event represents an occurrence of something of interest to the application  As a user clicks a button, presses a key, moves a mouse, or performs other actions, events are dispatched. Registered event filters and event handlers within the application  receive the event and  provide a response. 39 Tecniche di programmazione A.A. 2012/2013
  40. 40. What is an event?40 Tecniche di programmazione A.A. 2012/2013
  41. 41. Event propagation Events are generated on the source node Events propagated in the scene graph hierarchy («dispatch chain»), in two phases  Dispatching: downwards, from root to source node  Processes Event Filters registered in the nodes  Bubbling: upwards, from source node to root  Processes Event Handlers registered in the nodes If you want an application to be notified when an event occurs, register a filter or a handler for the event Handlers may “consume” the event 41 Tecniche di programmazione A.A. 2012/2013
  42. 42. Event Handlers Implements the EventHandler interface Executed during the event bubbling phase. If does not consume the event, it is propagated to the parent. A node can register more than one handler. Handlers for a specific event type are executed before handlers for generic event types.  For example, a handler for the KeyEvent.KEY_TYPED event is called before the handler for the InputEvent.ANY event. To consume an event, call the consume() method 42 Tecniche di programmazione A.A. 2012/2013
  43. 43. Registering Event Handlers setOnEvent-type( EventHandler<? super event-class> value )  Event-Type  The type of event that the handler processes (e.g. setOnKeyTyped, setOnMouseClicked, ...)  Event-class  The class that defines the event type (e.g., KeyEvent , MouseEvent, ...)  Value  The event handler for event-class (or for one of its super classes)  Must implement: public void handle(ActionEvent event)  May be a regular class or an anonymous inline class 43 Tecniche di programmazione A.A. 2012/2013
  44. 44. Exampleclass ButtonActionHandler implements Event Handlerjavafx.event.EventHandler<ActionEvent> { public ButtonActionHandler (/*params*/) { // constructor - if needed } @Override public void handle(ActionEvent event) { Button b = (Button)event.getSource() ; //...do something String buttonText = b.getText() ; // ... } Registration} Button btn = new Button() ; btn.setOnAction(new ButtonActionHandler()) ; 44 Tecniche di programmazione A.A. 2012/2013
  45. 45. Example (inline definition) Registration & Anonymous event handler btn.setOnAction(new EventHandler<ActionEvent>() { public void handle(ActionEvent event) { System.out.println("Hello World"); } });45 Tecniche di programmazione A.A. 2012/2013
  46. 46. To be continued... Properties and Bindings Introduction to JavaFX
  47. 47. ResourcesIntroduction to JavaFX
  48. 48. Resources API  http://docs.oracle.com/javafx/2/api/index.html Slides/Tips  http://www.slideshare.net/steveonjava/java-fx-20-a-developers-guide  http://refcardz.dzone.com/refcardz/getting-started-javafx Tutorials/Articles  http://docs.oracle.com/javafx/2/events/jfxpub-events.htm  http://amyfowlersblog.wordpress.com/2011/06/02/javafx2-0-layout-a- class-tour/ Examples (Downloads)  JavaFX Demos and Samples, at http://www.oracle.com/technetwork/java/javase/downloads/jdk7- downloads-1880260.html 48 Tecniche di programmazione A.A. 2012/2013
  49. 49. Licenza d’uso Queste diapositive sono distribuite con licenza Creative Commons “Attribuzione - Non commerciale - Condividi allo stesso modo (CC BY-NC-SA)” Sei libero:  di riprodurre, distribuire, comunicare al pubblico, esporre in pubblico, rappresentare, eseguire e recitare questopera  di modificare questopera Alle seguenti condizioni:  Attribuzione — Devi attribuire la paternità dellopera agli autori originali e in modo tale da non suggerire che essi avallino te o il modo in cui tu usi lopera.  Non commerciale — Non puoi usare questopera per fini commerciali.  Condividi allo stesso modo — Se alteri o trasformi questopera, o se la usi per crearne unaltra, puoi distribuire lopera risultante solo con una licenza identica o equivalente a questa. http://creativecommons.org/licenses/by-nc-sa/3.0/ 49 Tecniche di programmazione A.A. 2012/2013
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×