GUI Basics Agenda What GUI How to make

  • Slides: 32
Download presentation
GUI Basics

GUI Basics

Agenda • • • What GUI How to make in java Creating frames Frequently

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

What GUI

What GUI

What is GUI? • A graphical user interface (GUI) is a type of user

What is 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”). 5 -4

What is GUI? 5 -5

What is GUI? 5 -5

How to make in java

How to make in java

How to make in java • To make GUI in java we use AWT

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

GUI Class Hierarchy (Swing) 5 -8

GUI Class Hierarchy (Swing) 5 -8

Some basic GUI components 5 -9

Some basic GUI components 5 -9

Using a GUI Component 1. Create it Instantiate object: b = new JButton(“Press me”);

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

Creating frames

Creating frames

Frames • Frame is a window that is not contained inside another window. •

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

Creating Frames import javax. swing. *; public class My. Frame { public static void

Creating Frames import javax. swing. *; public class My. Frame { public static void main(String[] args) { JFrame frame = new JFrame("Test Frame"); frame. set. Size(400, 300); frame. set. Visible(true); frame. set. Default. Close. Operation( JFrame. EXIT_ON_CLOSE); } Or: } import javax. swing. *; public class My. Frame extends JFrame { public My. Frame() { set. Size(400, 300); set. Visible(true); set. Default. Close. Operation(JFrame. EXIT_ON _CLOSE); } public static void main(String[] args) { My. Frame frame = new My. Frame(); } } 5 -13

Centering Frames • • By default, a frame is displayed in the upper-left corner

Centering Frames • • 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 set. Location(x, y) method in the JFrame class. This method places the upper-left corner of a frame at location (x, y). set. Location. Relative. To(null); 5 -14

Centering Frames, cont. 5 -15

Centering Frames, cont. 5 -15

Adding Components to Frame // Add a button into the frame. add( new JButton("OK"));

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

Adding Components to Frame // Create a check box with text bold JCheck. Box

Adding Components to Frame // Create a check box with text bold JCheck. Box jchk. Bold = new JCheck. Box("Bold"); // Create a radio button with text red JRadio. Button jrb. Red = new JRadio. Button("Red"); // Create a combo box with choices red, green, and blue JCombo. Box jcbo. Color = new JCombo. Box(new String[]{"Red", "Green", "Blue"}); 5 -17

Frequently used GUI components

Frequently used GUI components

5 -19

5 -19

Buttons • A button is a component that triggers an action event when clicked.

Buttons • 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. Abstract. Button. 5 -20

5 -21

5 -21

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

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

JButton Properties • • text Icon mnemonic horizontal. Alignment vertical. Alignment horizontal. Text. Position

JButton Properties • • text Icon mnemonic horizontal. Alignment vertical. Alignment horizontal. Text. Position vertical. Text. Position icon. Text. Gap 5 -23

Icons An icon is a fixed-size picture; typically it is small and used to

Icons 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. Image. Icon For example: Image. Icon icon = new Image. Icon("photo. gif"); 5 -24

Layout Managers

Layout Managers

Layout Managers • The UI components are placed in containers. Each container has a

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 set. Layout(Layout. Manager) method in a container. 5 -26

Kinds of Layout Managers • Flow. Layout • Grid. Layout • Border. Layout 5

Kinds of Layout Managers • Flow. Layout • Grid. Layout • Border. Layout 5 -27

Flow. Layout The components are arranged in the container from left to right in

Flow. Layout 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. 5 -28

Flow. Layout Constructors • public Flow. Layout(int align, int h. Gap, int v. Gap)

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

Flow. Layout Exercise Write a program that adds three labels and text fields into

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

Questions

Questions

Thanks

Thanks