By: Hagos Tesfahun Faculty Of Computing, Bahir Dar Institute of Technology, Bahir Dar University Chapter One GUI Programming- Java 1 Objectives 2 To write a simple JavaFX program and understand the relationship among stages , scenes , and nodes To create user interfaces using panes, UI controls, and shapes. To use the common properties style and rotate for nodes. To create colors using the Color class. To create fonts using the Font class. To create images using the Image class and to create image views using the ImageView class. To layout nodes using Pane , StackPane , FlowPane , GridPane , BorderPane , HBox , and VBox To display text using the Text class and create shapes using Line , Circle , Rectangle , Ellipse , Arc , Polygon , and Polyline Creating GUI Objects 3 // Create a button with text OK Button btOK = new Button("OK"); // Create a label with text "Enter your name: " Label lblName = new Label("Enter your name:"); // Create a text field with text "Type Name Here" TextField tfName = new TextField("Type Name Here"); // Create a check box with text bold CheckBox chkBold = new CheckBox("Bold"); // Create a radio button with text red RadioButton rbRed = new RadioButton("Red"); // Create a combo box with choices red, green, and blue ComboBox cboColor = new ComboBox(new String[]{" Red“,"Green“,"Blue "}); Button Label Text field Check Box Radio Butto n Combo Box A graphical user interface (GUI) presents a user-friendly mechanism for interacting with an app. GUIs are built from GUI components or simply controls or widgets — short for window gadgets. A GUI component is an object with which the user interacts via the mouse, the keyboard or another form of input, such as voice recognition. There are three GUI Libraries in Java Abstract Windows Toolkit (AWT) API Swing API since java version 1.2 JavaFX API since java version 1.8 4 Graphical User Interface (GUI) Java GUI Programming 5 When Java was introduced, the GUI classes were bundled in a library known as the Abstract Windows Toolkit (AWT). AWT was fine for developing simple graphical user interfaces, but not for developing comprehensive GUI projects. In addition, AWT is prone to platform-specific bugs. Later, the AWT user-interface components were replaced by a more robust, versatile, and flexible library known as Swing components Swing components depend less on the target platform and use less of the native GUI resources. For this reason, Swing components that don’t rely on native GUI are referred to as lightweight components, and AWT components are referred to as heavyweight components Swing is designed for developing desktop GUI applications. With the release of Java 8, Swing is replaced by a completely new GUI platform known as JavaFX JavaFX is a newer framework for developing Java GUI programs. JavaFX incorporates modern GUI technologies to enable you to develop Rich Internet Applications. A rich Internet application (RIA) is a Web application designed to deliver the same features and functions normally associated with desktop applications. A JavaFX application can run seamlessly on a desktop and from a Web browser. Additionally, JavaFX provides a multi-touch support for touch-enabled devices such as tablets and smart phones. JavaFX has a built-in 2D, 3D, animation support, video and audio playback, and runs as a stand-alone application or from a browser. JavaFX is the new GUI tool for developing cross-platform-rich Internet applications on desktop computers, on hand-held devices, and on the Web. 6 JavaFX Basic Concepts JavaFX application is divided hierarchically into three main components known as Stage, Scene and Scene Graph or nodes 1. Stage: Stage in a JavaFX application is similar to the Frame in a Swing Application. It acts like a container for all the JavaFX objects. Primary Stage is created internally by the platform. The object of primary stage is passed to start method. We need to call show method on the primary stage object in order to show our primary stage. It is found in the package ( javafx.stage.Stage ) . 2. Scene: Scene actually holds all the physical contents (nodes) of a JavaFX application. Javafx.scene.Scene class provides all the methods to deal with a scene object. Creating scene is necessary in order to visualize the contents on the stage. 3. Scene Graph: All visual components (controls, layouts etc.) must be attached to a scene to be displayed, and that scene must be attached to a stage for the whole scene to be visible. 7 JavaFX Application Structure The total object graph of all the controls, layouts etc. attached to a scene is called the scene graph Scene Graph can also be seen as the collection of various nodes. Node: A node is the element which is visualized on the stage. It can be any button, text box, layout, image, radio button, check box, etc. A node is a visual component such as a shape, an image view, a UI control, or a pane. A shape refers to a text, line, circle, ellipse, rectangle, arc, polygon, polyline, etc. A UI control refers to a label, button, check box, radio button, text field, text area, etc. All components attached to the scene graph are called nodes All nodes are subclasses of a JavaFX class called javafx.scene.Node 8 JavaFX Application Structure There are two types of nodes: Branch nodes and Leaf nodes A Branch node is a node that can contain other nodes (child nodes). Branch nodes are also referred to as parent nodes because they can contain child nodes. A Leaf node is a node which cannot contain other nodes. 9 JavaFX Application Structure 10 Stage object is automatically created by JVM when the application is launched – considered the window – you can have multiple stages. Scene object is the container for the content – considered the frame in the window – can have only one scene per stage or window Button object (or node) is a visual component such as a shape, image, UI control, groups, and panes. Used to invoke some type of action Container classes called panes can be used to help layout the nodes within a scene. Control refers to a label, check box, radio button, text field and etc. JavaFX Application Structure The relationship among Stage , Scene , Node , Control , and Pane is illustrated in the following UML diagram. 11 ( 1 ) One Scene per Stage ( 2 ) A Scene can contain a Control, Group or Pane ( 3 ) A Pane or Group can contain any subtype of Node JavaFX Application Structure Pane StackPane BorderPane HBox VBox FlowPane 12 JavaFX Layout Managers Layouts are the top level container classes that define the UI styles for scene graph objects. Layout can be seen as the parent node to all the other nodes. JavaFX provides various layout panes that support different styles of layouts. All Layout classes belong to javafx.scene.layout package. javafx.scene.layout.Pane class is the base class for all the built-in layout classes in JavaFX. GridPane AnchorPane TilePane TextFlow Accordion ButtonBar DialogPane ScrollPane SplitePane Tab TitledPane ToolBar 13 Class Description Pane Base class for layout panes. It contains the getChildren() method for returning a list of nodes in the pane. StackPane Places the nodes on top of each other in the center of the pane. FlowPane Places the nodes row-by-row horizontally . GridPane Places the nodes in the cells in a two-dimensional grid. BorderPane Places the nodes in the top, right, bottom, left, and center regions. HBox Places the nodes in a single row. VBox Places the nodes in a single column. JavaFX Layout Managers JavaFX provides many types of panes for automatically laying out nodes in a desired location and size. Steps to create layout: In order to create the layouts, we need to follow the following steps. Instantiate the respective layout class, for example, HBox root = new HBox(); Setting the properties for the layout, for example, root.setSpacing(20); Adding nodes to the layout object, for example, root.getChildren().addAll(<NodeObjects>); 14 JavaFX Layout Managers FlowPane GridPane BorderPane Hbox and VBox 15 • Each GUI component has background and foreground colors. • JavaFX defines the abstract Paint class for painting a node. • The javafx.scene.paint.Color is a concrete subclass of Paint, which is used to encapsulate colors. • A color constructor: public Color( double r, double g, double b, double opacity); in which r , g , and b specify a color by its red, green, and blue components with values in the range from 0.0 (darkest shade) to 1.0 (lightest shade). • The opacity value defines the transparency of a color within the range from 0.0 (completely transparent) to 1.0 (completely opaque). • This is known as the RGBA model , where RGBA stands for red, green, blue, and alpha. The alpha value indicates the opacity. • For example, Color color = new Color( 0.25 , 0.14 , 0.333 , 0.51 ); The Color Class 16 • Alternatively, you can use one of the many standard colors such as BEIGE , BLACK , BLUE , BROWN , CYAN , DARKGRAY , GOLD , GRAY , GREEN , LIGHTGRAY , MAGENTA , NAVY , ORANGE , PINK , RED , SILVER , WHITE , and YELLOW defined as constants in the Color class. Example: Button btn = new Button( " OK " ); btn.setTextFill(Color.RED); Standard Colors 17 A Font describes font name, weight, and size. You can set fonts for rendering the text. The javafx.scene.text.Font class is used to create fonts. A Font is defined by its name, weight, posture, and size. The font postures are two constants: FontPosture.ITALIC and FontPosture.REGULAR Font font1 = new Font(" SansSerif ", 16 ); Font font2 = Font.font(" Times New Roman ", FontWeight.BOLD, FontPosture.ITALIC, 12 ); The Font Class 18 • The Image class represents a graphical image and the ImageView class can be used to display an image • The javafx.scene.image.Image class is used for loading an image from a specified filename or a URL. • The javafx.scene.image.ImageView is a node for displaying an image. • An ImageView can be created from an Image object. • For example: Image image = new Image("image/us.gif"); ImageView imageView = new ImageView(image); • Alternatively, you can create an ImageView directly from a file or a URL as follows: ImageView imageView = new ImageView("image/us.gif"); The Image and ImageView Classes Label Button MenuButton SplitMenuButton ToggleButton RadioButton CheckBox ChoiceBox ComboBox ListView 19 TextField PasswordField TextArea ImageView DatePicker ColorPicker Slider Tooltip Hyperlink ProgressBar MenuBar ContextMenu Separator TableView TreeView TreeTableView HTMLEditor Pagination FileChooser DirectoryChooser Accordion JavaFX UI Controls The package javafx.scene.control provides all the necessary classes for the UI components . In order to create a basic JavaFX application, we need to: Import javafx.application.Application package into our program. Our Program must be extended from Application class. Override the start() method of the Application class. 20 Developing a Simple JavaFX Application Program