GUI Programming I Practice Session. Exercise User Name Password Please Log In Let’s design a...
-
date post
20-Dec-2015 -
Category
Documents
-
view
221 -
download
0
Transcript of GUI Programming I Practice Session. Exercise User Name Password Please Log In Let’s design a...
![Page 1: 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.](https://reader037.fdocuments.in/reader037/viewer/2022102800/56649d4c5503460f94a2a27c/html5/thumbnails/1.jpg)
GUI Programming I Practice Session
![Page 2: 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.](https://reader037.fdocuments.in/reader037/viewer/2022102800/56649d4c5503460f94a2a27c/html5/thumbnails/2.jpg)
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.
![Page 3: 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.](https://reader037.fdocuments.in/reader037/viewer/2022102800/56649d4c5503460f94a2a27c/html5/thumbnails/3.jpg)
Step 1: List Components
User Name
Password
Please Log In
Labels
Text Fields
![Page 4: 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.](https://reader037.fdocuments.in/reader037/viewer/2022102800/56649d4c5503460f94a2a27c/html5/thumbnails/4.jpg)
Step 2: List Containers
User Name
Password
Please Log In
Panel (out container)
Panel (perhaps a grid?)
![Page 5: 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.](https://reader037.fdocuments.in/reader037/viewer/2022102800/56649d4c5503460f94a2a27c/html5/thumbnails/5.jpg)
Step 3: Select Layouts
User Name
Password
Please Log In
Grid Layout
![Page 6: 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.](https://reader037.fdocuments.in/reader037/viewer/2022102800/56649d4c5503460f94a2a27c/html5/thumbnails/6.jpg)
Step 3: Select Layouts (Cont’d)
User Name
Password
Please Log In
BorderLayout
![Page 7: 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.](https://reader037.fdocuments.in/reader037/viewer/2022102800/56649d4c5503460f94a2a27c/html5/thumbnails/7.jpg)
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); }
![Page 8: 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.](https://reader037.fdocuments.in/reader037/viewer/2022102800/56649d4c5503460f94a2a27c/html5/thumbnails/8.jpg)
// 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)
![Page 9: 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.](https://reader037.fdocuments.in/reader037/viewer/2022102800/56649d4c5503460f94a2a27c/html5/thumbnails/9.jpg)
Demonstration
Whathappened?
![Page 10: 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.](https://reader037.fdocuments.in/reader037/viewer/2022102800/56649d4c5503460f94a2a27c/html5/thumbnails/10.jpg)
Analysis
Recall that grid layout distorts, and stretches the cell contents to fit the maximum allowed space.
![Page 11: 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.](https://reader037.fdocuments.in/reader037/viewer/2022102800/56649d4c5503460f94a2a27c/html5/thumbnails/11.jpg)
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.
![Page 12: 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.](https://reader037.fdocuments.in/reader037/viewer/2022102800/56649d4c5503460f94a2a27c/html5/thumbnails/12.jpg)
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
![Page 13: 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.](https://reader037.fdocuments.in/reader037/viewer/2022102800/56649d4c5503460f94a2a27c/html5/thumbnails/13.jpg)
/* 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)
![Page 14: 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.](https://reader037.fdocuments.in/reader037/viewer/2022102800/56649d4c5503460f94a2a27c/html5/thumbnails/14.jpg)
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.
![Page 15: 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.](https://reader037.fdocuments.in/reader037/viewer/2022102800/56649d4c5503460f94a2a27c/html5/thumbnails/15.jpg)
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.
![Page 16: 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.](https://reader037.fdocuments.in/reader037/viewer/2022102800/56649d4c5503460f94a2a27c/html5/thumbnails/16.jpg)
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
![Page 17: 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.](https://reader037.fdocuments.in/reader037/viewer/2022102800/56649d4c5503460f94a2a27c/html5/thumbnails/17.jpg)
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)
![Page 18: 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.](https://reader037.fdocuments.in/reader037/viewer/2022102800/56649d4c5503460f94a2a27c/html5/thumbnails/18.jpg)
// 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)
![Page 19: 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.](https://reader037.fdocuments.in/reader037/viewer/2022102800/56649d4c5503460f94a2a27c/html5/thumbnails/19.jpg)
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)
![Page 20: 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.](https://reader037.fdocuments.in/reader037/viewer/2022102800/56649d4c5503460f94a2a27c/html5/thumbnails/20.jpg)
Demonstration
![Page 21: 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.](https://reader037.fdocuments.in/reader037/viewer/2022102800/56649d4c5503460f94a2a27c/html5/thumbnails/21.jpg)
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.