Downloaded 174 times
![Minimal example
public 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](https://image.slidesharecdn.com/02-javafx-fundamentals-partial-130417051137-phpapp01/85/JavaFX-fundamentals-8-320.jpg)
![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](https://image.slidesharecdn.com/02-javafx-fundamentals-partial-130417051137-phpapp01/85/JavaFX-fundamentals-31-320.jpg)
![Minimal example
public 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](https://image.slidesharecdn.com/02-javafx-fundamentals-partial-130417051137-phpapp01/75/JavaFX-fundamentals-8-2048.jpg)
![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](https://image.slidesharecdn.com/02-javafx-fundamentals-partial-130417051137-phpapp01/75/JavaFX-fundamentals-31-2048.jpg)
Uploaded byFulvio Corno
JavaFX fundamentals
The document covers the fundamentals of JavaFX programming, focusing on application structure, scene graphs, events, properties, and bindings in JavaFX. It describes the design and implementation of JavaFX applications through examples, such as creating scenes and handling user interactions with event handlers. Additionally, it discusses the use of FXML for defining user interfaces in an XML-based format and the event handling mechanisms within JavaFX applications.
More Related Content
JavaFX fundamentals
- 1. JavaFX fundamentals Tecniche diProgrammazione – A.A. 2012/2013
- 2. Summary 1. Application structure 2. The Scene Graph 3. Events 4. Properties and Bindings 2 Tecniche di programmazione A.A. 2012/2013
- 3. Application structure Introduction to JavaFX
- 4. 4 Tecniche di programmazione A.A. 2012/2013
- 5. Separation of concerns 5 Tecniche di programmazione A.A. 2012/2013
- 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) Node children 6 Tecniche di programmazione A.A. 2012/2013
- 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. Minimal example public classHelloWorld 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. Stage vs Scene javafx.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. 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. 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. 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. 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. The Scene graph Introduction to JavaFX
- 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. ChoiceBox ColorPicker ComboBoxBase Button ComboBox Nodes 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 Imageview 16 Text Tecniche di programmazione A.A. 2012/2013
- 17. Exploring Controls andExamples 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. 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 Tecniche di programmazione A.A. 2012/2013
- 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 Tecniche di programmazione A.A. 2012/2013
- 22. 22 Tecniche di programmazione A.A. 2012/2013
- 23. 23 Tecniche di programmazione A.A. 2012/2013
- 24. 24 Tecniche di programmazione A.A. 2012/2013
- 25. 25 Tecniche di programmazione A.A. 2012/2013
- 26. 26 Tecniche di programmazione A.A. 2012/2013
- 27. 27 Tecniche di programmazione A.A. 2012/2013
- 28. 28 Tecniche di programmazione A.A. 2012/2013
- 29. Creating the SceneGraph 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. Example: one textinput field TextField text = new TextField("Text"); Constructors text.setMaxSize(140, 20); root.getChildren().add(text); TextField text = TextFieldBuilder().create() .maxHeight(20).maxWidth(140) .text("Text") .build() ; Builders root.getChildren().add(text); 30 Tecniche di programmazione A.A. 2012/2013
- 31. public class HelloDevoxxextends 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. public void start(StageprimaryStage) { 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. 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. Example 34 Tecniche di programmazione A.A. 2012/2013
- 35. JavaFX Scene Builder 35 Tecniche di programmazione A.A. 2012/2013
- 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. Linking FXML andJava 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.
- 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. What is anevent? 40 Tecniche di programmazione A.A. 2012/2013
- 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. 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. 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. Example class ButtonActionHandler implements Event Handler javafx.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. 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. To be continued... Properties and Bindings Introduction to JavaFX
- 47.
- 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. 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 quest'opera di modificare quest'opera Alle seguenti condizioni: Attribuzione — Devi attribuire la paternità dell'opera agli autori originali e in modo tale da non suggerire che essi avallino te o il modo in cui tu usi l'opera. Non commerciale — Non puoi usare quest'opera per fini commerciali. Condividi allo stesso modo — Se alteri o trasformi quest'opera, o se la usi per crearne un'altra, puoi distribuire l'opera 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