agenda graphical user interfaces -- overview -- essential elements containers -- overview --...
TRANSCRIPT
AgendaAgenda
Graphical User Interfaces-- overview-- essential elements
Containers-- overview-- composition vs. inheritance
Components-- examples
Layout Managers-- examples
AgendaAgenda
Graphical User Interfaces-- overview-- essential elements
Containers-- overview-- composition vs. inheritance
Components-- examples
Layout Managers-- examples
Graphical User InterfaceGraphical User Interface• A Graphical User Interface (GUI) is one variety of user interface. .• User interacts with objects on the screen (icons, buttons, scroll-bars, etc.) via mouse clicks or keyboard actions.
EnterFile Edit
Open
Save
Save As...
Quit
Downloading libcrypt ...
40%
CancelCancel
Ok
GUI PopularityGUI Popularity
• Popularized in 1980s by the Macintosh.Popularized in 1980s by the Macintosh.
• Now state of the practice, and not final word in UINow state of the practice, and not final word in UI
• Intended to replace text-based "command line" and Intended to replace text-based "command line" and "function key" interfaces."function key" interfaces.
• Despite similarities, GUIs are typically platform-Despite similarities, GUIs are typically platform-specific (Windows 95/98/NT/1900, MacOS, X specific (Windows 95/98/NT/1900, MacOS, X Windows look-and-feel standards).Windows look-and-feel standards).
• Some graphical toolkits now provide cross-platform Some graphical toolkits now provide cross-platform APIs. E.g. wxWindows, GTK+, Java.APIs. E.g. wxWindows, GTK+, Java.
1.1.1.1.
2.2.2.2.
Java’s GUI CapabilitiesJava’s GUI Capabilities
Java provides essentially two related toolkits for making GUIs:
The Abstract Windowing Toolkit ("AWT"), and
The Java Foundation Classes ("Swing")
Swing is merely an expanded version of the AWT,and provides greater control and convenience.
Why Two Toolkits in Java?Why Two Toolkits in Java?
AWT, thenJFCJFC or "Swing"
MFCMFC and always "BSoD"
Well, it’s a long story. In short, JFC (swing) is Sun’s answer to Microsoft’s MFC--a detailed toolkit library.
Cautionary NoteCautionary NoteWe’ve noted that Java has two flavors of toolkits: Swing and AWT. It is not always wise to mix AWT and Swing Components. For your first programs, stick with one toolkit or the other.
In the following slides, we will use AWT Components to show the basics. Then, we will switch to Swing Components.
How do you tell them apart? Generally, but not always, Swing Components will have a "J" in front of the class name:
JButtonButton
AWT Swing
Keep in MindKeep in Mind
• We are going to be describing graphical elements in source code (text).– There are drag and drop systems but usually
there is an underlying text-based system– Eventually you need to get down to the text
level
• Java is designed to work across different platforms.– This poses special challenges
Steps to GUI ConstructionSteps to GUI Construction
In Java, to create a GUI, you (1):
• Specify a Container, using . . .• a Layout Manager to . . . • place Components and/or Containers of Components . . .
• on the screen as desired.
In Java, to make a GUI act as the interface for a program, you (2)
• Design human/computer dialog, using Listeners and component-generated events
I.e. UI form andappearance
I.e. UI interactionand behavior
We will learn GUI creation in two steps: the "view", and then the "controls" or event handling.
1.1.1.1.
2.2.2.2.
TODAY
LATER
AgendaAgenda
Graphical User Interfaces-- overview-- essential elements
Containers-- overview-- composition vs. inheritance
Components-- examples
Layout Managers-- examples
GUI Design & CreationGUI Design & Creation
CLICK ME
File Edit Help
There are three essential constructs in any GUI:
ContainersContainers -- used to hold items (e.g., the frame)
ComponentsComponents -- the widgets or interactors (e.g., buttons)
LayoutManagersLayoutManagers -- the hidden algorithm used to organize the widgets inside the container
offset
offset
Pop Quiz Pop Quiz (hint)(hint)
What are the three basic constructsthree basic constructs used in every GUI?
File Edit Help
CLICK ME
Containers1.1.1.1.
Components2.2.2.2.
LayoutManagers3.3.3.3.
offset
offset
AgendaAgenda
Graphical User Interfaces-- overview-- essential elements
Containers-- overview-- composition vs. inheritance
Components-- examples
Layout Managers-- examples
ContainersContainers
Containers are special components that may contain other components.
STEP 1
STEP 1
Note: Containment is not the same as inheritance extension.A Frame may contain buttons,but buttons are not subclasses of Frame.
• Panel• Frame• Applet• Window
• JPanel• JFrame• Japplet• JWindow
AWT Swing
Examples of Containers:
ContainersContainers
A Container is a class that extends from java.awt.Container
As it turns out, the class "Container" is itself a Component.
Containers can have:
• Layouts set on them
• Other components or containers added to them.
Object
Component
Container
ExampleExampleLet’s make a simple Frame.
When working withGUIs, you often have to consult the API.
Note the inheritance structure of your classes.
ExampleExampleSo far, we’ve used the API to learn how to make a Frame.
We found constructors for:
public Frame ();
public Frame (String strTitle);
Now, how can we set the size of the Frame?
We again return to the API.
ExampleExampleThe class java.awt.Frame does not contain a method to set its size. But such a method was inherited from java.awt.Component:
ExampleExampleLikewise, there’s no method in java.awt.Frame to make the Frame visible. Instead, we find the method "show()" was inherited from java.awt.Window
Hello GUIHello GUI
import java.awt.*;public class HelloGUI {
public static void main (String[ ] arg) { System.out.println ("About to make GUI"); Frame f = new Frame ("Hello GUIs"); f.setSize( 200, 200 ); f.show(); System.out.println ("Finished making GUI"); }// main
}// class HelloGUI
What?What?Our program runs, and the frame never goes away. When we reach the end of main (as our print statement indicates) why doesn’t the program end?
ExplanationExplanationWhen the Java VM created our Frame, it entered into a kind of ‘infinite loop’, waiting for input and events. (This is commonof graphical toolkits.)
import java.awt.*;public class HelloGUI { public static void main (String[ ] arg) { System.out.println ("About to make GUI"); Frame f = new Frame ("Hello GUIs"); f.setSize( 200, 200 ); f.show(); System.out.println ("Finished making GUI"); }// main}// class HelloGUI
while(true){ //get user input // handle event}
Since we didn’t write any event handlers, not even the "window disposal" button will work.
SolutionSolutionTo fix this problem, we’ll have to write some event handling code. But in order to write some event handling code, we have to create some components…
So, for now, you’ll just have to use Ctrl-C to end the program. Once the basics of GUI construction are covered, we’ll return to this problem.
AgendaAgenda
Graphical User Interfaces-- overview-- essential elements
Containers-- overview-- composition vs. inheritance
Components-- examples
Layout Managers-- examples
Design IdeaDesign Idea
We really have two choices when working with top-level containers:
Inheritance -- our class extends a container
1.1.1.1.
Composition -- our class holds a container
2.2.2.2.
MyGUI
java.awt.Frame
MyGUI
java.awt.Frame
Design NoteDesign Note
IS-AIS-A
HASHAS-A-A
But the tension between inheritance and composition has been with us….
ExampleExample
import java.awt.*;public class HelloComposition{ Frame f; public HelloCompositionHelloComposition(){
f = new Frame("Composition Test"); f.setSize(200,200); f.setBackground(Color.red); f.show(); } public static void mainmain (String[] arg) {
HelloComposition h = new HelloComposition(); }}
We save oursingle inheritance
Check the API
Will call constructor,so the show() method gets called
ExampleExample
import java.awt.*;public class HelloInheritance extends Frameextends Frame{ Frame f; public HelloInheritance(){
f = new Frame supersuper("Composition Test"); f this.setSize(200,200); f this.setBackground (Color.red); f this.show(); } public static void main (String[] arg) {
HelloInheritance h = new HelloInheritance(); h.show();h.show(); }}
A few changesallows us to
convert betweenthe two
Who’s Kung-Fu is BetterWho’s Kung-Fu is Better
InheritanceInheritance CompositionComposition
Use up our singleinheritance
"Wasted inheritance" occurs where we subclass, but fail to override anything.
Easier to change basic GUI behavior
Often requires more code, more references
Useful when you want the "factory settings" for a GUI, with no changed behavior
Saves the single inheritance
Container SummaryContainer Summary Creating containers requires careful study of the API. Watch the inheritance structure of the classes.
A top-level container, like a Frame, requires event handlers (covered later).
There are many useful methods for customizing containers. Just look them up in the API. E.g.:
An inheritedmethod
A class, also in the API
myFrame.setBackground(Color.red);
Container SummaryContainer Summary
We may often use "composition" where:
-- We don’t anticipate changing behaviors -- We need to save our single inheritance
We may often use "inheritance" where: -- We need to change basic GUI behaviors
AgendaAgenda
Graphical User Interfaces-- overview-- essential elements
Containers-- overview-- composition vs. inheritance
Components-- examples
Layout Managers-- examples
ComponentsComponentsSTEP 2
STEP 2
Most interactions in a Java GUI are with Components.
Another generic term for Component is other GUIs (e.g. XWindows) is "widget".
Different types of components for different types ofinteraction (e.g. buttons, etc.)
User interactions with components create events (thus, event- driven programming)
As a rule, a Component cannot have other components inside
Exceptions to rule: pop up menus may have menu items added to them. And Containers are themselves components due to inheritance.
Component ExamplesComponent Examples
Component - generic widget that you can interact with
Button - a widget that you can press
Canvas - a widget that you can draw on
Checkbox - a widget that is checked or not checked
Choice - an option menu that drops down
Container - a generic class that contains Components
Panel - a Container to be used inside another container; used to split an existing window
Label - a single line of read-only text
List - a list of Strings
Scrollbar - a horizontal or vertical scrollbar
TextComponent
TextArea - multi-line editable text
TextField - single-line editable text
Recall:A Container
"is a"Component
CanvasCanvas::
• typically a drawing surface on which shapes, graphs, pictures, etc can be drawn.
• utilize mouse events and mouse motion events to interact with the user to accomplish the drawing tasks.
TextField:TextField:
• a one-line data entry area
• theoretically infinite in length
• can generate Key events to indicate that the user has typed a key
• more typically, it generates an Action event when the user finishes the data entry and hits Return in the TextField.
Components--ExamplesComponents--Examples
ButtonButton:: • simply a clickable component
• appears as a standard button on whatever graphical environment the user happens to be running at the time
• generates an Action event when clicked
Label:Label:• a one-line field of text.
• user cannot change this text directly; program changes text with setText( ) method.
• usually not used to capture events (but could)
• usually used as a one-way information source to provide a message to the user.
Components--ExamplesComponents--Examples
Joining Components & ContainersJoining Components & Containers
Containers have a method:
public void add (Component c)
that allows us to place items inside. Thus:
Panel p = new Panel();Button b1 = new Button ("Example 1");Button b2 = new Button ("Example 2");p.add (b1); p.add(b2);
In this example, two buttons are added to the panel.
ExampleExampleimport java.awt.*;public class HelloComponent{ Frame f; public HelloComponent(){
f = new Frame("Component Test"); f.setSize(200,200); f.setBackground (Color.red); Panel p = new Panel(); Button b = new Button ("Hello Components"); p.add(b); f.add(p); f.show(); } public static void main (String[] arg) {
new HelloComponent(); }}
AgendaAgenda
Graphical User Interfaces-- overview-- essential elements
Containers-- overview-- composition vs. inheritance
Components-- examples
Layout Managers-- examples
LayoutManagersLayoutManagersSTEP 3
STEP 3
We can now create Components and Containers.
But how can they be organized? We might be tempted to call methods that set the x, y location of a component in a container.
Consulting the API, we find some likely methods:
public void setLocation (int x, int y);
public void setSize (int width, int height);
• To arrange items, one could specify the location of a Component by specific x and y coordinates. The Component class contains the method setLocation(int width, int height):
Frame f = new Frame(); f.setSize(500,500);Button myButton = new Button ("Click");add(myButton);myButton.setLocation(25, 75);
Layout Managers -- MotivationLayout Managers -- Motivation
NOTE: Origin 0,0 at top left
Note: Button’s x and y coordinate starts from top left
Click
75 pixels down
25 pixels over
What’swrong
with thisapproach?
Layout Managers -- MotivationLayout Managers -- MotivationProblems with specifying x, y coordinates for Component:Problems with specifying x, y coordinates for Component:
• This becomes tedious for even mildly complex GUIs.
• Addition of more components requires recalculation of every component’s x, y coordinate
• If container resizes (e.g., user expands window), calculations have to be redone!
Solution:Solution:
• Position components based on a percentage of available container size. Or create an algorithm to place components . . .
But Java already does this for you . . .
• Java provides several layout managers.
• We will concentrate here on several of them:• BorderLayout• GridLayout• FlowLayout•BoxLayout
• To tell a container which layout manager to use, invoke the method:
setLayout( );
and specify a type of layout.
For example:
To specify a BorderLayout:
setLayout (new BorderLayout());
Layout Managers -- AWT BasedLayout Managers -- AWT Based
LayoutManagers:LayoutManagers: Two General Flavors Two General Flavors
• One can conceptually divide layout managers into two types:
– Those that attach constraints to their components.
– Those that do not.
• What does this mean, "attach constraints"?
If a manager attaches constraints to a component, then information about a component’s location (e.g., compass points) is stored with the object.
LayoutManagers: ConstraintsLayoutManagers: Constraints
• BorderLayout specifies constraints corresponding to compass regions of a container:
NORTH
SOUTH
CENTER EASTWEST
LayoutManagers: ConstraintsLayoutManagers: Constraints
• BorderLayout then appends constraint information on all components, e.g.:
this.setLayout (new BorderLayout()); Button e = new Button ("East");
Button w = new Button ("West");
Button n = new Button ("North");
add(e, "East"); // deprecated
add("West", w); // works; deprecated
add(n, BorderLayout.NORTH); // better
LayoutManagers: LayoutManagers: Another ExampleAnother Example
import java.awt.*;public class Test extends Frame {
public Test() { super ("BorderLayout Demo"); this.setSize(200,200); this.setLayout(new BorderLayout()); this.add (new Button ("North"), BorderLayout.NORTH); this.add (new Button ("South"), BorderLayout.SOUTH); this.add (new Button ("East"), BorderLayout.EAST); this.add (new Button ("West"), BorderLayout.WEST); this.add (new Button ("Center"), BorderLayout.CENTER); }
public static void main (String[ ] args) { new Test().show(); }
} // test
BorderLayout specifies the arrangement:
NORTH
SOUTH
CENTER
WE
ST E
AS
T
• To add components to a BorderLayout, specify the position in which the component will reside.
• Only one component (or container) can go in each of the five positions.
BorderLayoutBorderLayout
setLayout (new BorderLayout()); add(new Label ("Hello!"), "North");Canvas myCanvas = new Canvas();// more about Canvas in a momentadd (myCanvas, "Center");
Hello!
{ a fresh canvas for drawing here}
BorderLayout--ExampleBorderLayout--Example
Simple ExampleSimple Example
import java.awt.*;public class HelloLayout { public static void main(String[] args) {
Frame f = new Frame();f.setSize(400,400);BorderLayout bord = new BorderLayout();f.setLayout(bord);
Button b = new Button ("Hello");f.add(b, BorderLayout.SOUTH);
}} // HelloLayout
Will this work?
Let’s run it and find out...
Simple ExampleSimple Example
import java.awt.*;public class HelloLayout { public static void main(String[] args) {
Frame f = new Frame();f.setSize(400,400);BorderLayout bord = new BorderLayout();f.setLayout(bord);
Button b = new Button ("Hello");f.add(b, BorderLayout.SOUTH);
f.show();f.show(); }} // HelloLayout Ahh.. We forgot to set our Frame
visible. Now it works. Welcome to the exciting world
of GUI debugging.
LayoutManager: LayoutManager: No ConstraintsNo Constraints
• The second type of LayoutManager does not specify constraints for the objects it holds.
• Examples:
– GridLayout()– FlowLayout()
• Without constraints, you cannot accurately predict layout behavior across platforms
LayoutManager: No ConstraintsLayoutManager: No Constraints
import java.awt.*;
public class FlowTest extends Frame {
String Labels[] = {"Short", "Short", "Long Label",
"Really Long Label", "Really, really long"};
public FlowTest(){
this.setSize(400,200);
setLayout(new FlowLayout());
for (int i = 0; i < Labels.length; i++){
Button temp = new Button (Labels[i]);
add (temp);
}
}
public static void main (String arg[]){
new FlowTest().show();
}
} //class test
LayoutManager: LayoutManager: No ConstraintsNo Constraints
• Note:
– Since pixels, fonts and insets vary with each platform, layout without constraints will vary greatly.
• Lesson:
– Use layout managers without constraints only when you have few components, or you’ve anticipated their possible movement.
LayoutManager: LayoutManager: No ConstraintsNo Constraints
• Don’t think that layout managers without constraints are not useful!
• One of the most useful constraint-free layout manager is "GridLayout".
public GridLayout();
public GridLayout(int rows, int cols);
public GridLayout
(int rows, int cols, int hgap, int vgap);
GridLayout specifies a grid pattern via:
setLayout (new GridLayout (rows, columns));
For example:
setLayout (new GridLayout(2,3));
generates:
GridLayoutGridLayout
• To add components (or containers) to a GridLayout, particular locations are not specified (unlike BorderLayout).
• Instead, the components (or containers) are positioned by the sequence in which they are added, as indicated by numerals below.
• Significantly, GridLayout is distortive(değiştirilebilir), meaning components are stretched to fill the available space in the grid.
1 2 3
4 5 6
GridLayoutGridLayout
setLayout (new GridLayout (rows, columns, hspace, vspace));
where hspace specifies horizontal size, and vspace specifies vertical size, e.g.,
setLayout (new GridLayout (2, 2, 7, 5));
Optionally, two additional parameters may be used with GridLayout to specify the horizontal and vertical spacing (in pixels) between grid elements:
GridLayoutGridLayout
GridLayout: ExampleGridLayout: Exampleimport java.awt.*;
public class CalcPad extends Frame {
public CalcPad() {
setLayout(new GridLayout(5,3));
int off[]={-2,2,0};
for (int i=9; i >= 1; i--)
add (new Button (""+(i+off[i%3])));
add (new Button ("."));
add (new Button ("0"));
add (new Button ("+/-"));
add (new Panel());
}
public static void main (String[] arg){
CalcPad ti = new CalcPad();
ti.setSize(150,150);
ti.show();
}
}//CalcPad
Often, it is desirable to place items in horizontalor vertical direction. A grid layout may not be the best choice, since grid components are resized to fit the available space--it distorts its contents.
Box Layout: MotivationBox Layout: Motivation
A (3, 1) grid forcessize changes
Desired look
container
component
BoxLayoutBoxLayoutA BoxLayout provides this feature. It resemblesa FlowLayout, but with directional control, and otherfeatures
Horizontal and vertical flow control
BoxLayout: HowBoxLayout: HowThe BoxLayout has a single constructor:
BoxLayout(Container target, int axis);
The ‘target’ is the container we wish to layout.The ‘axis’ is a static field:
BoxLayout.X_AXIS; BoxLayout.Y_AXIS;
JPanel buttonPanel = new JPanel();BoxLayout bLayout = new BoxLayout
(buttonPanel, BoxLayout.X_AXIS);buttonPanel.setLayout(bLayout);
ExerciseExercise
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 2: List ContainersStep 2: List Containers
User Name
Password
Please Log In
Panel (out container)
Panel (perhaps a grid?)
Step 3: Select Layouts (cont’d)Step 3: Select Layouts (cont’d)
User Name
Password
Please Log In
BorderLayout
Step 4: CodeStep 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
AnalysisAnalysis
Recall that grid layout distorts, and stretches the cell contents to fit the maximum allowed space.
Revision #1Revision #1
User Name
Password
Since the grid was distortive, we’ll wrap the contentsin 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 components
before adding
/* 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
Result: Hmmm.Result: Hmmm.
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.
The FixThe Fix
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.
SolutionSolution
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);
// 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;
}
public static void main(String[] args) {Frame f= new Frame();f.setSize(400, 200);f.add(new LoginBoxPanel());f.show();
}// main} // LoginBoxPanel
Ulcer CheckUlcer Check
Confused by the preceding? Yea, it’s a lot to take in.
BUT THE POINT IS THAT YOU CAN PLACE CONTAINERSINSIDE OTHER CONTAINERS, and thereby create a novellayout.
For now, stick with the simple layouts (e.g., the simpleBorderLayout/GridLayout), and become comfortable with components.