first commit
This commit is contained in:
Jose Caban
336
CS1322/p6/Extra Credit/p6ex.intro.txt
Normal file
336
CS1322/p6/Extra Credit/p6ex.intro.txt
Normal file
@@ -0,0 +1,336 @@
|
||||
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.
|
||||
Reference in New Issue
Block a user