TA: Nouf Al-Harbi NoufNaief.net ::: nouf200@hotmail.com Programming 2 LAB TA: Nouf Al-Harbi NoufNaief.net ::: nouf200@hotmail.com

Lab 5 Introduction to GUI

GUI stands for Graphical User Interface

A GUI component is an object that represents a screen element such as a button or a text field GUI-related classes are defined primarily in the java.awt and the javax.swing packages The Abstract Windowing Toolkit (AWT) was the original Java GUI package The Swing package provides additional and more versatile components Both packages are needed to create a Java GUI-based program GUI Components

A label is a GUI component that displays a line of text and/or an image GUI Components

A button is is a GUI component that generates an action event GUI Components

A text field allows the user to enter one line of input GUI Components

A check box is a button that can be toggled on or off GUI Components

A group of radio buttons represents a set of mutually exclusive options – only one can be selected at any given time GUI Components

A dialog box is a window that appears on top of any currently active window GUI Components

An image icon is a fixed-size picture; typically it is small and used to decorate components. Java currently supports three image formats: GIF, JPEG and PNG. To display an image icon, first create an ImageIcon object using new javax.swing.ImageIcon(filename). For example, the following statement creates an icon from an image file us.gif in the image directory under the current class path: ImageIcon icon = new ImageIcon("image\us.gif"); GUI Components

A GUI container is a component that is used to hold and organize other components A frame is a container displayed as a separate window with a title bar It can be repositioned and resized on the screen as needed A panel is a container that cannot be displayed on its own but is used to organize other components A panel must be added to another container (like a frame) to be displayed GUI Containers

Displaying Three Cards Example

Displaying Three Cards Display a frame that contains three labels. Each label displays a card, as shown in the figure below. The card image files are named 1.png, 2.png, ..., 54.png and stored in the image/card directory. All three cards are distinct and selected randomly. Displaying Three Cards

To create a user interface, you need to create either a frame or an applet to hold the user-interface components. Create GUI

1- import swing & awt classes that will be used in the code import javax.swing.*; import java.awt.*; 1- import swing & awt classes that will be used in the code

2- create a frame & adjust its properties

Title bar Content pane Output…

You should invoke the setSize(w, h) method before invoking setLocationRelativeTo(null) to center the frame Notes …

Adding Components to a Frame

The Java GUI components are placed in containers, where they are arranged by the container’s layout manager. In the preceding program, you did not specify where to place the Labels in the frame, but Java knows where to place them, because the layout manager works behind the scenes to place components in the correct locations. A layout manager is created using a layout manager class. Layout Managers

Layout Managers : FlowLayout FlowLayout is the simplest layout manager. The components are arranged in the container from left to right in the order in which they were added. When one row is filled, a new row is started. You can specify the way the components are aligned by using one of three constants: FlowLayout.RIGHT FlowLayout.CENTER FlowLayout.LEFT You can also specify the gap between components in pixels.

Layout Managers : GridLayout The GridLayout manager arranges components in a grid (matrix) formation. The components are placed in the grid from left to right, starting with the first row, then the second, and so on, in the order in which they are added.

Setting the Layout

Display images in labels

Display cards randomly

End of Lab 5