337 lines
10 KiB
Plaintext
337 lines
10 KiB
Plaintext
CS1322: Lab #15 - Spring 2002.
|
|
|
|
|
|
Basic GUI Information
|
|
========================================================================
|
|
|
|
It has probably been covered in class how Swing differs from AWT
|
|
(Abstract Windowing Toolkit). The basic idea is that java handles its
|
|
components more in Swing instead of relying so much on the underlying
|
|
operating system. Swing offers an object oriented approach to GUI
|
|
creation by having base classes for all of the GUI components and then
|
|
extending those classes in order to make specialized components. All
|
|
swing components (except JFrame) inherit from Object->Component->
|
|
Container->JComponent (JFrame doesn't extend from JComponent). Open
|
|
up the java API and look at some of these classes. Some of these
|
|
function names might not make sense to you, but there are many like
|
|
Component.isVisible that you can probably guess what they do. For a
|
|
list of Swing components, goto the J's in the API. Some examples are
|
|
JButton, JPanel, JLabel, JMenu, etc...
|
|
|
|
Now you have a basic idea that there are some classes that exist and
|
|
you use these classes to make GUIs. To actually use these classes,
|
|
you must import java.awt.* (for classes like Component) and
|
|
javax.swing.* (for the Swing components). You will also need to
|
|
import java.awt.event.*, but this will be covered in lab18. Importing
|
|
is a way of including classes that are not normally loaded. All of
|
|
your programs up to this point have not needed the GUI classes, so it
|
|
was more efficient to not ask java to include the GUI files. Now that
|
|
you need these classes, you must ask java to look for them. Here's an
|
|
example of how you would include:
|
|
|
|
/**
|
|
* My class, bla bla bla...
|
|
*/
|
|
|
|
import javax.swing.*;
|
|
import java.awt.*;
|
|
import java.awt.event.*;
|
|
|
|
public class MyGUI
|
|
{
|
|
....
|
|
|
|
The basic starting point for all Swing GUIs -- that are not applets --
|
|
use JFrame. The JFrame class is the actual window. It will contain
|
|
all other GUI components. The basic order of operations is to create
|
|
a JFrame, add and customize the JFrame, and then make the JFrame
|
|
visible. Some people choose to subclass from JFrame and then override
|
|
the constructor when they create a GUI. While others choose to treat
|
|
the JFrame as an independent component.
|
|
|
|
(These are "working" examples, but you will need to kill them with
|
|
Ctrl-C, because we haven't specified a way to close them nicely. You
|
|
need to type this at the command line in order to close the GUI.)
|
|
|
|
imports...
|
|
|
|
public class MyGUI1 extends JFrame
|
|
{
|
|
public MyGUI1()
|
|
{
|
|
super( "Hello cs1322 Students" );
|
|
setSize( 240, 100 );
|
|
setVisible( true );
|
|
}
|
|
|
|
public static void main( String[] args )
|
|
{
|
|
MyGUI1 mg = new MyGUI1();
|
|
}
|
|
}
|
|
|
|
The other way:
|
|
|
|
public class MyGUI1
|
|
{
|
|
private JFrame frame;
|
|
|
|
public MyGUI1()
|
|
{
|
|
frame = new JFrame( "Hello cs1322 Students" );
|
|
frame.setSize( 240, 100 );
|
|
frame.setVisible( true );
|
|
}
|
|
|
|
public static void main( String[] args )
|
|
{
|
|
MyGUI1 mg = new MyGUI1();
|
|
}
|
|
}
|
|
|
|
Both of these examples will create a window that is 240 pixels wide
|
|
and 100 pixels long. The title will say "Hello cs1322 Students". The
|
|
frame isn't visible until its set visible.
|
|
|
|
Now that there is a window, its time to be able to add and populate
|
|
the window. All frames have a content pane. This content pane is a
|
|
Container (or any subclass of Container).
|
|
|
|
frame = new JFrame();
|
|
Container = frame.getContentPane();
|
|
|
|
or
|
|
|
|
frame = new JFrame();
|
|
Container c = new JPanel();
|
|
frame.setContentPane( c );
|
|
|
|
One of the important functions that exists in Container is setLayout(
|
|
LayoutManager ). A LayoutManager is a class that implements
|
|
LayoutManager and allows the programmer to layout components in an
|
|
easy manner. Anyone can make a LayoutManager, but this info file will
|
|
discuss how to use 4 common types. It would be to you advantage to
|
|
try these examples.
|
|
|
|
BorderLayout:
|
|
|
|
public MyGUI1()
|
|
{
|
|
frame = new JFrame( "Hello" );
|
|
Container c = new JPanel();
|
|
frame.setContentPane( c );
|
|
|
|
c.setLayout( new BorderLayout() );
|
|
c.add( new JButton( "CENTER" ) );
|
|
// or c.add( new JButton( "CENTER" ), BorderLayout.CENTER );
|
|
|
|
c.add( new JButton( "NORTH" ), BorderLayout.NORTH );
|
|
c.add( new JButton( "SOUTH" ), BorderLayout.SOUTH );
|
|
c.add( new JButton( "EAST" ), BorderLayout.EAST );
|
|
c.add( new JButton( "WEST" ), BorderLayout.WEST );
|
|
|
|
frame.setSize( 400, 400 );
|
|
frame.setVisible( true );
|
|
}
|
|
|
|
Creates this:
|
|
|
|
----------------------------------
|
|
| NORTH |
|
|
|----------------------------------|
|
|
| | | |
|
|
| | | |
|
|
| EAST | CENTER | WEST |
|
|
| | | |
|
|
| | | |
|
|
|----------------------------------|
|
|
| SOUTH |
|
|
----------------------------------
|
|
|
|
Basically, The BorderLayout allows you to have a main content area
|
|
(CENTER) and allows for secondary content areas. Also, you can embed
|
|
content areas:
|
|
|
|
public MyGUI1()
|
|
{
|
|
frame = new JFrame( "Hello" );
|
|
Container c = new JPanel();
|
|
JPanel embed = new JPanel();
|
|
frame.setContentPane( c );
|
|
|
|
c.setLayout( new BorderLayout() );
|
|
embed.setLayout( new BorderLayout() );
|
|
c.add( embed, BorderLayout.CENTER );
|
|
|
|
embed.add( new JButton( "CENTER" ), BorderLayout.CENTER );
|
|
embed.add( new JButton( "E. NORTH" ), BorderLayout.NORTH );
|
|
embed.add( new JButton( "E. SOUTH" ), BorderLayout.SOUTH );
|
|
embed.add( new JButton( "E. EAST" ), BorderLayout.EAST );
|
|
embed.add( new JButton( "E. WEST" ), BorderLayout.WEST );
|
|
|
|
c.add( new JButton( "NORTH" ), BorderLayout.NORTH );
|
|
c.add( new JButton( "SOUTH" ), BorderLayout.SOUTH );
|
|
c.add( new JButton( "EAST" ), BorderLayout.EAST );
|
|
c.add( new JButton( "WEST" ), BorderLayout.WEST );
|
|
|
|
frame.setSize( 500, 250 );
|
|
frame.setVisible( true );
|
|
}
|
|
|
|
(run the code to see what it actually looks like).
|
|
|
|
GridLayout:
|
|
|
|
public MyGUI1()
|
|
{
|
|
frame = new JFrame( "Hello" );
|
|
Container c = new JPanel();
|
|
frame.setContentPane( c );
|
|
|
|
c.setLayout( new GridLayout( 2, 3 ) );
|
|
|
|
c.add( new JButton( "1" ) );
|
|
c.add( new JButton( "2" ) );
|
|
c.add( new JButton( "3" ) );
|
|
c.add( new JButton( "4" ) );
|
|
c.add( new JButton( "5" ) );
|
|
c.add( new JButton( "6" ) );
|
|
|
|
frame.setSize( 500, 250 );
|
|
frame.setVisible( true );
|
|
}
|
|
|
|
Creates this:
|
|
|
|
-----------------
|
|
| | | |
|
|
| 1 | 2 | 3 |
|
|
| | | |
|
|
|-----------------|
|
|
| | | |
|
|
| 4 | 5 | 6 |
|
|
| | | |
|
|
-----------------
|
|
|
|
c.add( new JButton( "1" ), 0 );
|
|
c.add( new JButton( "2" ), 0 );
|
|
c.add( new JButton( "3" ), 0 );
|
|
c.add( new JButton( "4" ), 0 );
|
|
c.add( new JButton( "5" ), 0 );
|
|
c.add( new JButton( "6" ), 0 );
|
|
|
|
Creates this( it inserts into slot 0 and pushes everything back):
|
|
|
|
-----------------
|
|
| | | |
|
|
| 6 | 5 | 4 |
|
|
| | | |
|
|
|-----------------|
|
|
| | | |
|
|
| 3 | 2 | 1 |
|
|
| | | |
|
|
-----------------
|
|
|
|
The GridLayout allows the programmer to make a grid that scales in
|
|
size and can have a component embedded into each grid location.
|
|
|
|
BoxLayout:
|
|
|
|
public MyGUI1()
|
|
{
|
|
frame = new JFrame( "Hello" );
|
|
Container c = new JPanel();
|
|
frame.setContentPane( c );
|
|
|
|
c.setLayout( new BoxLayout( c, BoxLayout.X_AXIS ) );
|
|
|
|
c.add( new JButton( "1" ) );
|
|
c.add( new JButton( "2" ) );
|
|
c.add( new JButton( "3" ) );
|
|
c.add( new JButton( "4" ) );
|
|
c.add( new JButton( "5" ) );
|
|
c.add( new JButton( "6" ) );
|
|
|
|
frame.setSize( 500, 250 );
|
|
frame.setVisible( true );
|
|
}
|
|
|
|
Creates this:
|
|
|
|
-----------------------------------------------------
|
|
| |
|
|
| |
|
|
| |
|
|
|----------------------------------- |
|
|
| | | | | | | |
|
|
| 1 | 2 | 3 | 4 | 5 | 6 | |
|
|
| | | | | | | |
|
|
|----------------------------------- |
|
|
| |
|
|
| |
|
|
| |
|
|
-----------------------------------------------------
|
|
|
|
Basically, the BoxLayout adds components in order, but doesn't do the
|
|
same kind of resizing like Border and Grid. Try BoxLayout.Y_AXIS
|
|
too.
|
|
|
|
FlowLayout:
|
|
|
|
FlowLayout is the default layout used by components. To test this,
|
|
take the code from BoxLayout and delete the line c.setLayout. Be sure
|
|
to resize the window. You will notice how the flow layout just seems
|
|
to add other components and places them in order. If your resize to a
|
|
smaller window, some buttons move down to different lines.
|
|
|
|
JLabel, JButton, and Customizations
|
|
========================================================================
|
|
|
|
A JLabel is a GUI Component that displays text, but does not allow the
|
|
user to modify the information.
|
|
|
|
public MyGUI1()
|
|
{
|
|
frame = new JFrame( "Hello" );
|
|
Container c = new JPanel();
|
|
frame.setContentPane( c );
|
|
|
|
JLabel jl = new JLabel( "This is a test." );
|
|
// Or
|
|
// jl = new JLabel();
|
|
// jl.setText( "This is a test." );
|
|
|
|
c.add( jl );
|
|
|
|
frame.setSize( 250, 250 );
|
|
frame.setVisible( true );
|
|
}
|
|
|
|
JLabels can have their information changed by the program through
|
|
setText and you can also get the text through getText. Like all Swing
|
|
components JLabels have all the functions from Component, Container,
|
|
JComponent, as well as the functions JLabel adds. These functions
|
|
allow for many customizations and options. for example this code
|
|
below takes the default font from the Jlabel jl and increases the size
|
|
by 2.5:
|
|
|
|
font = jl.getFont();
|
|
font = font.deriveFont( (float)( font.getSize2D() * 2.5 ) );
|
|
jl.setFont( font );
|
|
|
|
If you want to customize a java component, there usually is a very
|
|
good chance that someone else has wanted that customization also.
|
|
Check the API, the java tutorial, and search the internet.
|
|
|
|
The JButton is a GUI component that can be clicked and the click often
|
|
signafies an action to the program (covered in lab 18). This lab is
|
|
concerned with your ability to create, add to layouts, and customize
|
|
JButtons.
|
|
|
|
JButton jb = new JButton();
|
|
jb.setText( "My Button" );
|
|
jb.setBackground( java.awt.Color.red );
|
|
jb.setFocusPainted( false ); // Doesn't draw that box around the
|
|
// button, when clicked.
|
|
jb.setEnabled( false ); // disables the button.
|