GUI Programming I Practice Session

Exercise

User Name

Password

Please Log In

Let’s design a simple class that displays a login prompt.

No events will be handled; let’s just experiment with components, containers and layout managers.

Step 1: List Components

User Name

Password

Please Log In

Labels

Text Fields

Step 2: List Containers

User Name

Password

Please Log In

Panel (out container)

Panel (perhaps a grid?)

Step 3: Select Layouts

User Name

Password

Please Log In

Grid Layout

Step 3: Select Layouts (Cont’d)

User Name

Password

Please Log In

BorderLayout

Step 4: Codeimport java.awt.*;public class LoginPanel extends Panel { TextField password, username; Panel innerPanel; public LoginPanel () {

this.setLayout(new BorderLayout());innerPanel = new Panel();

innerPanel.setLayout(new GridLayout(2,2));innerPanel.add(new Label("User Name"));

username = new TextField(10);innerPanel.add(username);innerPanel.add(new Label("Password"));password = new TextField(10);innerPanel.add(password);this.add(innerPanel,

BorderLayout.CENTER);this.add(new Label("Please Log In"),

BorderLayout.NORTH); }

// class LoginPanel (con’td)…

public static void main(String[] args) {Frame f = new Frame();f.setSize(400,400);f.add(new LoginPanel());f.show();

} } // LoginPanel

Step 4: Code (Cont’d)

Demonstration

Whathappened?

Analysis

Recall that grid layout distorts, and stretches the cell contents to fit the maximum allowed space.

Revision #1

User Name

Password

Since the grid was distortive, we’ll wrap the contents in an inner panel. The wrapping panel will get stretched, but not its contents.

import java.awt.*;public class LoginPanel extends Panel { TextField password, username; Panel innerPanel; public LoginPanel () {

this.setLayout(new BorderLayout());innerPanel = new Panel();innerPanel.setLayout(new GridLayout(2,2));innerPanel.add(wrapInPanel(new Label("User Name")));

username = new TextField(10);innerPanel.add(wrapInPanel(username));innerPanel.add(wrapInPanel(new Label("Password")));password = new TextField(10);innerPanel.add(wrapInPanel(password));this.add(innerPanel, BorderLayout.CENTER);this.add(new Label("Please Log In"),

BorderLayout.NORTH); } public Panel wrapInPanel(Component c){

Panel pTemp = new Panel();pTemp.setLayout(new FlowLayout());pTemp.add(c); return pTemp;

}

Here, we wrapthe componentsbefore adding

Code Revision

/* Revised LoginPanel class (cont’d) */

public static void main(String[] args) {Frame f= new Frame();f.setSize(400,400);f.add(new LoginPanel());f.show();

} } // LoginPanel

Code Revision (Cont’d)

Demonstration

This time,it’s the BorderLayout

that’s distortingthe grid panel

Our solution so farhas been adequate for a basic

GUI. Butlet’s see how to really solve this

problem.

Fixing the Code

We want the components to have their natural size:

User Name

We also want the sets of widgets to take up their propervertical position, as if there weresprings forcing the componentsaway from the top/bottom.

User Name

Password

A box layout (X_AXIS) will do this.

Solution

myContainer.add(Box.createHorizontalGlue());

myContainer.add(new Button ("hi"));

As it turns out, there’s an API call for creating this‘spring’ effect:

Hi

Horizontal glue pushes the component away

import java.awt.*;import javax.swing.*;public class LoginBoxPanel extends Panel{ TextField password, username; public LoginBoxPanel () {

password = new TextField(10);username = new TextField(10);Panel pInner = new Panel();pInner.setLayout(new BoxLayout(pInner, BoxLayout.Y_AXIS));Panel pUser = getPanelPair(new Label("User Name"),

username);Panel pPass = getPanelPair(new Label("Password"),

password);pInner.add(pUser);pInner.add(pPass);

Solution (Cont’d)

// constructor (cont’d)... this.setLayout(new BoxLayout(this, BoxLayout.Y_AXIS)); Panel prompt = new Panel(); prompt.setLayout(new FlowLayout(FlowLayout.LEFT)); prompt.add(new Label ("Please Log In")); this.add(prompt); this.add(Box.createVerticalGlue()); this.add(pInner); this.add(Box.createVerticalGlue()); } public Panel getPanelPair (Component first,Component second){

Panel pTemp = new Panel();pTemp.setLayout

(new BoxLayout(pTemp, BoxLayout.X_AXIS));pTemp.add(first);pTemp.add(second);Panel pWrapper = new Panel();pWrapper.setLayout(new FlowLayout());pWrapper.add(pTemp);return pWrapper;

}

Solution (Cont’d)

public static void main(String[] args) {Frame f= new Frame();f.setSize(400, 200);f.add(new LoginBoxPanel());f.show();

}// main} // LoginBoxPanel

Solution (Cont’d)

Demonstration

Practice Summary & Wisdom

• Confused by the preceding? Well, it takes a lot of practice to master the concepts!

• BUT THE POINT IS THAT YOU CAN PLACE CONTAINERSINSIDE OTHER CONTAINERS, and thereby create a novel layout.

•For now, stick with the simple layouts (e.g., the simple BorderLayout/GridLayout), and become comfortable with components.