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

2. Lab 5
Introduction to GUI

3. GUI stands for Graphical User Interface

4. 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

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

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

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

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

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

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

11. 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

12. 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

13. Displaying Three Cards
Example

14. 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

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

16. 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

17. 2- create a frame & adjust its properties

18. Title bar
Content pane
Output…

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

20. Adding Components to a Frame

21. 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

22. 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.

23. 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.

24. Setting the Layout

25. Display images in labels

26. Display cards randomly

27. End of Lab 5