View
221
Download
0
Category
Preview:
Citation preview
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.
Recommended