GUI Basics

Agenda What GUI How to make in java Creating frames Frequently used GUI components Layout Managers

What GUI

A graphical user interface (GUI) is a type of user interface item that allows people to interact with programs in more ways than typing. A GUI (pronounced “GOO-ee”). What is GUI? 5-4

What is GUI? 5-5

How to make in java

To make GUI in java we use AWT or Swing How to make in java 5-7

GUI Class Hierarchy (Swing) 5-8

Some basic GUI components 5-9

1.Create it Instantiate object: b = new JButton(“Press me”); 2.Configure it b.setText(“press me”); 3.Add it panel.add(b); 4.Listen to it Events: Listeners Press me Using a GUI Component 5-10

Creating frames

Frame is a window that is not contained inside another window. Frame is the basis to contain other user interface components in Java GUI applications. The Frame class can be used to create windows. For Swing GUI programs, use JFrame class to create widows. Frames 5-12

import javax.swing.*; public class MyFrame { public static void main(String[] args) { JFrame frame = new JFrame("Test Frame"); frame.setSize(400, 300); frame.setVisible(true); frame.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE); } import javax.swing.*; public class MyFrame extends JFrame { public MyFrame() { setSize(400, 300); setVisible(true); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); } public static void main(String[] args) { MyFrame frame = new MyFrame(); } Or: Creating Frames 5-13

By default, a frame is displayed in the upper-left corner of the screen. To display a frame at a specified location, you can use the setLocation(x, y) method in the JFrame class. This method places the upper-left corner of a frame at location (x, y). setLocationRelativeTo(null); Centering Frames 5-14

Centering Frames, cont. 5-15

// Add a button into the frame frame.add( new JButton("OK")); Adding Components to Frame // Create a button with text OK JButton jbtOK = new JButton("OK"); // Create a label with text "Enter your name: " JLabel jlblName = new JLabel("Enter your name: "); // Create a text field with text "Type Name Here" JTextField jtfName = new JTextField("Type Name Here"); 5-16

Adding Components to Frame // Create a check box with text bold JCheckBox jchkBold = new JCheckBox("Bold"); // Create a radio button with text red JRadioButton jrbRed = new JRadioButton("Red"); // Create a combo box with choices red, green, and blue JComboBox jcboColor = new JComboBox(new String[]{"Red", "Green", "Blue"}); 5-17

Frequently used GUI components

5-19

A button is a component that triggers an action event when clicked. Swing provides regular buttons, toggle buttons, check box buttons, and radio buttons. The common features of these buttons are represented in: –javax.swing.AbstractButton. Buttons 5-20

5-21

JButton inherits AbstractButton and provides several constructors to create buttons. JButton 5-22

text Icon mnemonic horizontalAlignment verticalAlignment horizontalTextPosition verticalTextPosition iconTextGap JButton Properties 5-23

An icon is a fixed-size picture; typically it is small and used to decorate components. To create an image, use its concrete class javax.swing.ImageIcon For example: ImageIcon icon = new ImageIcon("photo.gif"); Icons 5-24

Layout Managers

The UI components are placed in containers. Each container has a layout manager to arrange the UI components within the container. Layout managers are set in containers using the setLayout(LayoutManager) method in a container. Layout Managers 5-26

FlowLayout GridLayout BorderLayout Kinds of Layout Managers 5-27

The components are arranged in the container from left to right in the order in which they were added. When one row becomes filled, a new row is started. FlowLayout 5-28

public FlowLayout(int align, int hGap, int vGap) Constructs a new FlowLayout with a specified alignment, horizontal gap, and vertical gap. The gaps are the distances in pixel between components. public FlowLayout(int alignment) Constructs a new FlowLayout with a specified alignment and a default gap of five pixels for both horizontal and vertical. public FlowLayout() Constructs a new FlowLayout with a default center alignment and a default gap of five pixels for both horizontal and vertical. FlowLayout Constructors 5-29

Write a program that adds three labels and text fields into the content pane of a frame with a FlowLayout manager. FlowLayout Exercise 5-30

Questions

Thanks