Download Java GUI Programming

Java GUI Programming
An Introduction to Swing, Event Based
Programming, and more.
Administrative Stuff
●
●
●
●
Des Traynor ([email protected])
Website:
http://www.minds.may.ie/~dez/cs211/
2 hours per week lectures, 2 hours labs as
per usual.
Lecture slides will not be sufficient for
passing the course, alas.
Course Layout
●
●
In order...
–
Creating Basic GUIs using Swing
–
Creating Nice GUIs
–
Event Based Programming, to add functionality
–
File I/O in Java (briefly)
–
Writing Full Graphical Programs to solve
reasonable
size problems (size depends on time)
You'll need to be able to do all of these to
do well in the exam.
Java: The Background
●
●
●
Java is a new relatively new language, its original
popularity was due to two things, applets, and
platform independency.
The first few releases of Java contained the
Abstract Windows Toolkit (AWT), a slow primitive
poorly designed toolset for creating GUIs.
Netscape wrote their own version later on, and
Sun reacted by co-authoring JFC with Netscape.
The Java Foundation Classes updated Java and
made it a 'real' competitor in the desktop market.
Swing
●
●
●
The Swing toolkit contains 250 classes and
40 different UI components.
We will not be covering them all, we will
cover the most regularly used ones, and I
will show you how to go about learning the
other ones.
We will cover the components in a
reasonably structured order, starting with
the most necessary, the JFrame.
JFrame: Making a Window
public static void main(String args[])
{
JFrame jf = new JFrame(“This is my title”);
jf.setSize(800,600);
jf.setVisible(true);
}
That'll give you a big dirty grey Frame of size 800 x 600 pixels.
The title of the frame will be “This is my title”, and the frame will
be visible. Lets have a look at it... (code1.java)
Questions?
Side Note: Applets versus Applications
●
●
●
Applets, are basically Java applications embedded
into a web browser with more limited functionality.
They were “big news” back mid 90s , but these days
they are just big slow and ugly.
Applets are have effectively been replaced by Flash or
well coded XHTML, and as such they have limited uses
these days (This is my biased view).
It is very easy to convert an Application to an Applet,
so we will work with Applications because they are
less hassle. Thats all I'll be saying about Applets
Extending our JFrame
●
●
●
To create JFrames that do what want, we
create a new class that inherits from the
class JFrame.
Inheritance is when you create a class that
has all the methods/variables of another
class, but you add/remove attributes &
characteristics to it.
Inheritance is a pretty big concept, but I
can only touch on it, detailed exploration
would take too long.
Inheritance Examples
JFrame
Vehicle
White JFrame that closes
when you click X
Is a type of..
Helicopter
Car
Is a type of..
Apache
SpaceWagon
JFrame containing
functionality for a calendar
JPanels
●
●
When we create programs in Swing, we add
the GUI components to a JPanel, not
directly to the JFrame. (this is one of the
big differences between AWT and Swing)
So, to create a Simple GUI in Java, we...
1) Create the JFrame
2) Add a JPanel to it
3) Add everything we want to the JPanel.
Extending a JFrame
class mySecondFrame extends JFrame
{
JPanel mainPanel;
mySecondFrame(String nameOfFrame)
{
super(nameOfFrame);
/* Create the panel, and make it white */
mainPanel = new JPanel();
mainPanel.setBackground(Color.white);
Container contentPane = getContentPane();
contentPane.add(mainPanel);
setSize(400,300);
setVisible(true);
this.setDefaultCloseOperation(EXIT_ON_CLOSE);
}
public static void main(String args[])
{
mySecondFrame msf = new mySecondFrame(“White Frame!”);
}
}
// A complete version of this : MySecondFrame.java
Look at the inheritance
class mySecondFrame extends JFrame
{
JPanel mainPanel;
mySecondFrame(String nameOfFrame)
{
super(nameOfFrame);
/* Create the panel, and make it white */
mainPanel = new JPanel();
mainPanel.setBackground(Color.white);
Container contentPane = getContentPane();
contentPane.add(mainPanel);
setSize(400,300);
setVisible(true);
this.setDefaultCloseOperation(EXIT_ON_CLOSE);
}
public static void main(String args[])
{
mySecondFrame msf = new mySecondFrame(“White Frame!”);
}
}
// A complete version of this code is in
MySecondFrame.java
Setting up our JPanel
class mySecondFrame extends JFrame
{
JPanel mainPanel;
mySecondFrame(String nameOfFrame)
{
super(nameOfFrame);
/* Create the panel, and make it white */
mainPanel = new JPanel();
mainPanel.setBackground(Color.white);
Container contentPane = getContentPane();
contentPane.add(mainPanel);
setSize(400,300);
setVisible(true);
this.setDefaultCloseOperation(EXIT_ON_CLOSE);
}
public static void main(String args[])
{
mySecondFrame msf = new mySecondFrame(“White Frame!”);
}
}
// A complete version of this code is in
// MySecondFrame.java
TableCloth Analogy
●
●
●
●
Think of the JFrame as being the table, and
the JPanel as being the tablecloth.
You must/should have the JPanel on before
you can add anything else.
Secondly, everything you add will go onto
the JPanel.
We can (and should) of course, make our
own JPanels using inheritance. But first,
lets look at GUI components.
GUI Components 1
JButton
Buttons are used
to perform actions,
e.g. Print, Close,
etc
GUI Components 1
JTextField
TextFields are used
for receiving
arbitrary input
from the user.
GUI Components 1
JCheckBox
For boolean
options e.g.
Smoker?
Vegetarian?
GUI Components 1
JRadioButton
Each JRadioButton is
a member of the same
ButtonGroup.
This makes sure only
one of them can be
Radio Buttons are used for
picked at any time.
choosing one from few. E.g.
Windows, Linux , Apple
GUI Components 1
JLabel
Labels are used
to annotate
GUIs and
explain what
each
component
modifies
GUI Components 1
JScrollBar
Typically used
for choosing
percentages
etc. Popular in
Art programs.
So, lets see how do we use them
●
●
●
Thats the first set of GUI Components that
we'll get to grips with. What we are going to
do is create a subclass of JPanel that has
them all sitting inside it.
They each have their own constructors (all
pretty similar though)
Lets have a look at myFirstPanel.java (goto
text editor)
But des, they're all over the shop!!!
●
●
●
Yes, they are added in an ad-hoc fashion
alright.
To manage the Layout, we need a Layout
manager.
Again, there are several different types of
these we will only look at a few.
The FlowLayout Manager
●
●
●
●
FlowLayout just adds the component in a
left to right fashion, and wraps at the edge
of the frame. This is the one we have seen
thus far.
Just like text in an editor, you can also tell
it to left|right align or justify.
Useful only for small panels of components,
doesn't work for complicated arrangements.
this.setLayout(new FlowLayout());
The Grid Layout Manager
●
●
●
●
Arranges components in a grid fashion, you
specify the number of rows and columns.
It presumes all objects are of equal size,
this is usually a woeful presumption. Good
for splitting interfaces into 2 halves.
Has some nice uses, calendars, calculators
etc.
this.setLayout(new GridLayout(3,4));
// 3 rows, 4 columns etc
BorderLayout()
●
●
Arranges components based on the borders,
e.g. You can add to N,S,E,W and Center.
Has limited uses, handy for adding toolbars
etc.
GridBagLayout
●
●
●
●
Used for creating really complicated GUIs, is
as a result pretty tricky.
You can use it to set relative sizes etc. (e.g.
Make this JTextfield three times the size of
that one )
Can usually be avoided, or at least
simplified.
Automated GUI builders use it.
The best way to build GUIS
●
●
●
Break the GUI down into different parts,
and keep breaking them down until all subparts are simple enough.
Then build the individual components and
put the interface components.
We use JPanels for this, we've already seen
how to extend Panels, so we create the sort
of Panels we want, then add them all
together.
Calculator, a simple useful GUI
JPanel containing one big JTextField
JPanel containing 4 JButtons,
using FlowLayout
JPanel containing 24
JButtons arranged in a
4 x 6 GridLayout. (sort of)
Don't worry about the menu at the top, JMenu
(which we haven't seen yet) will always goto the
top , unless you tell it otherwise.
End Of Lecture
●
●
You should now know
–
What this course is all about
–
What Swing is
–
How to make a simple Frame
–
How we will be using inheritance for GUIs
–
The basic GUI components
–
How to place a panel in a frame and add stuff
–
Some Layout Managers, and what they do.
Next we will create a Calculator GUI from scratch