Building Graphical user interface using JavaFX

Transcription

1 CS244 Advanced programming Applications Building Graphical user interface using JavaFX Dr Walid M. Aly Lecture 6

2 JavaFX vs Swing and AWT When Java was introduced, the GUI classes were bundled in a library known as the Abstract Windows Toolkit (AWT). The AWT user-interface components were replaced by a more robust, versatile, and flexible library known as Swing components. With the release of Java 8, Swing is replaced by a completely new GUI platform known as JavaFX. 2

3 Basic Structure of JavaFX Every JavaFX program is defined in a class that extends javafx.application.application A JavaFX program can run stand-alone or from a Web browser Application Override the start(stage primarystage) method Stage, Scene, and Nodes Stage Scene Button 3

4 import javafx.application.application; import javafx.scene.scene; import javafx.scene.control.button; import javafx.stage.stage; public class MyJavaFX extends Application { public void start(stage primarystage) { Button btok = new Button("OK"); Scene scene = new Scene(btOK, 200, 250); primarystage.settitle("myjavafx"); // Set the stage title primarystage.setscene(scene); // Place the scene in the stage primarystage.show( ); // Display the stage } public static void main(string[] args) { launch(args); } } MyJavaFX 4

5 Notes on MyJavaFX.java The launch method (line 22) is a static method defined in the Application class for launching a stand-alone JavaFX application. The main method (lines 21 23) is not needed if you run the program from the command line. It may be needed to launch a JavaFX program from an IDE with a limitedjavafx support. When you run a JavaFX application without a main method, JVM automatically invokes the launch method to run the application. public static void main(string[] args) { launch(args); } 5

6 Notes on MyJavaFX.java The main class overrides the start method defined in javafx.application.application After a JavaFX application is launched:- the JVM constructs an instance of the class using its no-arg constructor and invokes itsstart method. The start method normally places UI controls in a scene and displays the scene in a stage public void start(stage primarystage) { // Create a button and place it in the scene Button btok = new Button("OK"); Scene scene = new Scene(btOK, 200, 250); primarystage.settitle("myjavafx"); // Set the stage title primarystage.setscene(scene); // Place the scene in the stag,,stage dimensions will adapt to scene primarystage.show(); // Display the stage } 6

7 Stage-Scene A Stage object is a window. A Stage object called primary stage is automatically created by the JVM when the application is launched You can create additional stages if needed Class Button is subclass of class Parent javafx.stage.stage public final void setscene(scene value) Specify the scene to be used on this stage. Stage ( ) Creates a new instance of decorated Stage. public final void show() show this Window by setting visibility to true javafx.scene.scene Scene(Parent root, double width, double height) Creates a Scene for a specific root Node with a specific size. 7

8 Example:Multiple Stages public void start(stage primarystage) { // Create a scene and place a button in the scene Scene scene = new Scene(new Button("OK"), 200, 250); primarystage.settitle("myjavafx"); // Set the stage title primarystage.setscene(scene); // Place the scene in the stage primarystage.show(); // Display the stage Stage stage = new Stage(); // Create a new stage stage.settitle("second Stage"); // Set the stage title // Set a scene with a button in the stage stage.setscene(new Scene(new Button("New Stage"), 100, 100)); stage.show(); // Display the stage } MultipleStageDemo 8

9 Panes, UI Controls, and Shapes When you run MyJavaFX, The button is always centered in the scene and occupies the entire window no matter how you resize it. You can fix the problem by setting the position and size properties of a button. a better approach is to use container classes, called panes, for automatically laying out the nodes in a desired location and size. You place nodes inside a pane and then place the pane into a scene. 9

10 Panes, UI Controls, and Shapes qa node is a visual component such as a shape, an image view, a UI control, or a pane. q A shape refers to a text, line, circle, ellipse, rectangle, arc, polygon, polyline, etc. q A UI control refers to a label, button, check box, radio button, text field, text area, etc. q A node can be placed only in one pane. Otherwise an exception is thrown q a pane is a node. So a pane can be added into another pane. 10

11 Panes, UI Controls, and Shapes Stage can have only one Scene but will own solely its reference Scene can have only one Parent but will own solely its reference Pane can have many nodes, but will own solely each reference of them 11

12 Panes, UI Controls, and Shapes 12

13 javafx.scene.layout.pane public class Pane extends Region This class may be used directly in cases where absolute positioning of children is required since it does not perform layout beyond resizing resizable children to their preferred sizes. It is the application's responsibility to position the children since the pane leaves the positions alone during layout Pane pane = new Pane(); pane.getchildren().add(new Button(" ")); pane.getchildren().add(new Button("Hello World")); pane.getchildren().add(new Button("W")); Pane( ) Creates a Pane layout javafx.scene.layout.pane protected ObservableList<Node> getchildren( ) Gets the list of children of this Parent. javafx.collections. ObservableList<E> boolean add(e e) Appends the specified element to the end of this list 13

14 javafx.scene.layout.stackpane javafx.scene.layout.stackpane StackPane( ) Creates a StackPane layout with default CENTER alignment. protected ObservableList<Node> getchildren( ) Gets the list of children of this Parent. Ø StackPane lays out its children in a back-to-front stack. The StackPane respects a node s preferred size Ø A StackPane places the nodes in the center and nodes are placed on top of each other Ø The z-order of the children is defined by the order of the children list with the 0th child being the bottom and last child on top Ø Alignment property, :defaults to Pos.CENTER. 14

15 Example:using StackPane import javafx.application.application; import javafx.scene.scene; import javafx.scene.control.button; import javafx.scene.layout.stackpane; import javafx.stage.stage; public class ButtonInPane extends Application { public void start(stage primarystage) { // Create a scene and place a button in the scene StackPane pane = new StackPane(); pane.getchildren().add(new Button("Hello World")); pane.getchildren().add(new Button("OK..")); pane.getchildren().add(new Button("H")); Scene scene = new Scene(pane, 200, 200); primarystage.settitle("buttons in a stack pane"); // Set the stage title primarystage.setscene(scene); // Place the scene in the stage primarystage.show( ); // Display the stage } public static void main(string[] args) { launch(args); } } ButtonInPane 15

16 Display a Shape This example displays a circle in the center of the pane. x (0, 0) X Axis Y Axis y Y Axis (x, y) Java Coordinate System Conventional Coordinate System (0, 0) X Axis ShowCircle (a) A circle is displayed in the center of the scene. (b) Using Pane,the circle is not centered after the window is resized.

17 Display a Shape.. If the pane was of type StackPane, the circle will be centered will the pane is resized, Stack pane automatically places nodes in the center of the pane public void start(stage primarystage) { // Create a circle and set its properties Circle circle = new Circle(); circle.setcenterx(100); circle.setcentery(100); circle.setradius(50); circle.setstroke(color.black); circle.setfill(null); // Create a pane to hold the circle Pane pane = new StackPane(); pane.getchildren().add(circle); // Create a scene and place it in the stage Scene scene = new Scene(pane, 200, 200); primarystage.settitle("showcircle in Stacked Pane"); primarystage.setscene(scene); // Place the scene in the stage primarystage.show(); // Display the stage ShowCircleInStackPane.java 17

18 Common Properties and Methods for Nodes style: set a JavaFX CSS style The syntax for setting a style is stylename:value. Multiple style properties for a node can be set together separated by semicolon (;). For example, the following statement circle.setstyle("-fx-stroke: black; -fx-fill: red;"); sets two JavaFX CSS properties for a circle. This statement is equivalent to the following two statements. circle.setstroke(color.black); circle.setfill(color.red); rotate: Rotate a node javafx.scene.node public final void setstyle(java.lang.string value) A string representation of the CSS style associated with this specific Node. This is analogous to the "style" attribute of an HTML element NodeStyleRotateDemo 18

19 The Color Class 19

20 The Font Class 20

21 Label label = new Label("JavaFX"); label.setfont(font.font("times New Roman",FontWeight.BOLD, FontPosture.ITALIC, 20)); pane.getchildren( ).add(label); FontDemo 21

22 The Image and ImageView Classes the ImageView class can be used to display an image. The javafx.scene.image.image class represents a graphical image and is used for loading an image from a specified filename or a URL. new Image("image/us.gif") new Image(" 22

23 The ImageView Class 23

24 Example:Using ImageView import javafx.application.application;. public class ShowImage extends Application { public void start(stage primarystage) { Pane pane = new HBox(10); pane.setpadding(new Insets(5, 5, 5, 5)); Image image = new Image("image/us.gif"); pane.getchildren().add(new ImageView(image)); ImageView imageview2 = new ImageView(image); imageview2.setfitheight(100); imageview2.setfitwidth(100); pane.getchildren().add(imageview2); ImageView imageview3 = new ImageView(image); imageview3.setrotate(90); pane.getchildren().add(imageview3); Scene scene = new Scene(pane); primarystage.settitle("showimage"); // Set the stage title primarystage.setscene(scene); // Place the scene in the stage primarystage.show(); // Display the stage }.. } The padding property can be set to manage the distance between the nodes and the edges of thehbox pane ShowImage 24

25 Notes on previous program The program creates an HBox (line 14). An HBox is a pane that places all nodes horizontally in one row. The setrotate method is defined in the Node class and can be used for any node. an Image object can be shared by multiple nodes. In this case, it is shared by three ImageView. However, a node such as ImageView cannot be shared. You cannot place an ImageView multiple times into a pane or scene. Note that you must place the image file in the same directory as the class file, as shown in the following figure. 25

26 References pub-get_started.htm