Lab Manual 14 - GUI-1
Lab Manual 14 - GUI-1
MANUAL
Course: CSC241-Object Oriented Programming
Learning Procedure
1) Stage J (Journey inside-out the concept)
2) Stage a1 (Apply the learned)
3) Stage v (Verify the accuracy)
4) Stage a2 (Assess your work)
Statement Purpose:
The purpose of lab is to make students understand basic concepts of Layouts of GUI in Java.
The students will learn about the three basic types of layouts and understand the difference between them.
Activity Outcomes:
Students will be able to create frames with different layouts.
Students will be able to create simple to medium level complex GUI
Instructor Note:
The student should have understanding related to basic GUI components
1) Stage J (Journey)
Introduction
In many other window systems, the user-interface components are arranged by using
hardcoded pixel measurements. For example, put a button at location (10, 10) in the window
using hard-coded pixel measurements, the user interface might look fine on one system but
be unusable on another. Java’s layout managers provide a level of abstraction that
automatically maps your user interface on all window systems.
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
OK button in the frame, but Java knows where to place it, 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 are set in containers using the SetLayout(aLayoutManager) method. For
example, you can use the following statements to create an instance of XLayout and set it in a
container:
container.setLayout(layoutManager);
2) Stage a1 (apply)
Lab Activities:
Activity 1:
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, or FlowLayout.LEFT. You can also specify the
gap between components in pixels. The class diagram for FlowLayout is shown in Figure
below
Create the following frame using Flow Layout.
Solution:
Activity 2:
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. The class diagram for GridLayout is shown in Figure
below.
Solution:
The BorderLayout manager divides a container into five areas: East, South, West, North, and
Center. Components are added to a BorderLayout by using add(Component, index), where
index is a constant as mentioned below:
BorderLayout.EAST,
BorderLayout.SOUTH,
BorderLayout.WEST,
BorderLayout.NORTH,
BorderLayout.CENTER.
Suppose that you want to place ten buttons and a text field in a frame. The buttons are placed
in grid formation, but the text field is placed on a separate row. It is difficult to achieve the
desired look by placing all the components in a single container. With Java GUI
programming, you can divide a window into panels. Panels act as subcontainers to group
user-interface components.
You add the buttons in one panel, then add the panel into the frame. The Swing version of
panel is JPanel. You can use new JPanel() to create a panel with a default FlowLayout
manager or new JPanel(LayoutManager) to create a panel with the specified layout manager.
Use the add(Component) method to add a component to the panel. For example, the
following code creates a panel and adds a button to it:
p.add(new JButton("OK"));
Panels can be placed inside a frame or inside another panel. The following statement places
panel p into frame f:
f.add(p);
Run the below code and ensure that the output is similar to below:
3) Stage v (verify)
Home Activities:
Activity 1:
Create the following GUI. You do not have to provide any functionality.
Activity 2:
Create the following GUI. You do not have to provide any functionality.
4) Stage a2 (assess)
Assignment:
Activity 1:
Create the following GUI. You do not have to provide any functionality.
Activity 2:
Create the following GUI. You do not have to provide any functionality.
Activity 3:
Create the following GUI. You do not have to provide any functionality.
Note: Use JScrollPane class for the creating the scroll pane.