Intro to Swing - GEOCITIES.ws

skatechildrenSoftware and s/w Development

Nov 3, 2013 (4 years and 4 days ago)

91 views

MIT
-
AITI 2004


Lecture 16

Introduction to Swing

Lecture Summary


Over the next 2 lectures, we will introduce you to
the techniques necessary to build graphical user
interfaces (GUI) for your applications.


Learning Swing basic concepts: components and
containers, colors, layout;


Constructing Swing interfaces;


Using the Swing Event Model.



Style: Mixture of lecture and lab

WHAT IS SWING?


So far, our user interfaces have only been
textual
, meaning the user sees text and writes
text at the command prompt.


Today we will learn to make our interfaces
graphical
, so we can use our programs
through windows, click on buttons, etc.


Graphical User Interface (GUI)


Swing

is Java's graphical user interface library


You MUST import the following packages:

import java.awt.*;

import javax.swing.*;


Swing Example

import java.awt.*;

import javax.swing.*;


public class MyTest extends JFrame {



JLabel myLabel = new JLabel("Hello, World!");





public MyTest() {



super("MyTest");



setSize(350, 100);



getContentPane().add(myLabel);



setDefaultCloseOperation(EXIT_ON_CLOSE);



setVisible(true);




}




public static void main (String args[]) {



MyTest m = new MyTest();



}

}

Simple Swing Application

JFrame


JFrame

is the application window class


It is special; it draws the window and
interacts with the operating system


When a
JFrame

is created, an inner
container called the
contentPane

is
automatically created


We don't draw graphics directly on
JFrame;
we draw on the

contentPane


Anatomy of a JFrame

title bar

minimize

maximize

close

The

contentPane
holds your
content; created automatically
when a JFrame is created

Exercise 1: Empty Frame

package swinglab;


import java.awt.*;

import javax.swing.*;

// extends keyword makes Calc a JFrame

public class Calc extends JFrame{


public Calc() {


// get the contentPane and assign it to cp


Container cp = getContentPane();


// exit program when user closes the window


setDefaultCloseOperation(EXIT_ON_CLOSE);


// sets the layout; will be covered in later slide



cp.setLayout(new FlowLayout());


// sets title to "My Funky Calculator"



setTitle("My Funky Calculator");



setSize(1000,700);
// Frame has 0 default size

}

Exercise 1 continued


. . .



public static void main (String[] args){



Calc trial = new Calc();




// Frame is invisible by default



trial.setVisible(true);




// main method exits but user interface



// stays alive


}

}



Top Level Windows


Top Level Windows are containers that
are not contained by any other containers



They can be iconified or dragged and
interact with the native windowing system



Examples:
JFrame, JDialog

(not
JComponents

at all )

Categories of GUI classes


Swing has a large set of classes that inherit from a
super and abstract class
JComponent


JComponent:

The base class for all Swing
components except top
-
level containers


Its subclasses present information or interact with
the user


Examples:labels(
JLabels
), buttons(
JButtons
),
textfields(
JTextField
)

-

Containers are some JComponents that are designed to
hold other components (no interaction with the user)

-

Examples:
JPanel, JScrollPane

Coordinates


The upper left hand corner of the screen
has coordinates (0,0)


Like the cartesian system, the value of x
increases from left to right (the x
-
axis goes
from left to right)


However, the value of y increases from top
to bottom (the y
-
axis goes from top to
bottom)


Measured in pixels (such as 640 by 480)

Frames, Panes and Panels

Colors


There are 13 predefined colors


You can access them using

Color.x

where
x is


orange, pink, cyan, magenta, yellow, black, blue,
white, gray, lightGray, darkGray, red, green


You can define your own colors


Color ugly = new Color(30,90,120);


//RGB(red
-
green
-
blue); values between 0
-
255;

Exercise 2: JPanels with color


Set the background of the contentPane to white
using

<nameofobject>.setBackground(<color>);



Create two JPanels in the constructor of Calc


Set the background color of one to orange; set the
background color of the other to yellow


Add the two JPanels to the contentPane using

<nameofobject>.add(<objecttobeadded>)



add the orange JPanel first; NOTE: the order in
which you add your objects determine the way your
program looks

Exercise 2: Answer

package swinglab;


import java.awt.*;

import javax.swing.*;


public class Calc extends JFrame{



private JPanel entryPanel;



private JPanel answerPanel;


public Calc() {



Container cp = getContentPane();



setDefaultCloseOperation(EXIT_ON_CLOSE);



cp.setBackground(Color.white);



setTitle("My Funky Calculator");



setSize(1000,700);




entryPanel = new JPanel();



entryPanel.setBackground(Color.orange);



answerPanel = new JPanel();



answerPanel.setBackground(Color.yellow);



// . . .

Exercise 2: answer continued



cp.add(entryPanel);



cp.add(answerPanel);


}


public static void main (String[] args){


Calc trial = new Calc();


trial.setVisible(true);


}

}



JLabels, JButtons, JComboBox etc


These are subclasses of JComponent


You create them just as you create other
objects of a class:



JLabel sign = new JLabel ("Sign");



When created, you need to add them to
the panel:


panel.add(sign);


// panel is the name of a created JPanel

Exercise 3: Adding a JComboBox

JComboBox

We want to create a JComboBox (drop
-
down menu):

For items in the menu:
-

Declare and initialize the

following above the Calc constructor


private JComboBox operation;


public static String ADD_OP = "ADDITION";

public static String SUB_OP = "SUBTRACTION";

public static String MUL_OP = "MULTIPLICATION";

public static String DIV_OP = "DIVISION";



Exercise 3 continued

In Calc Constructor:


Create a JComboBox:


operation = new JComboBox();


Add the items in the menu using
addItem()

:


operation.addItem(ADD_OP);



operation.addItem(SUB_OP);



operation.addItem(MUL_OP);


operation.addItem(DIV_OP);


Set its background to blue:



operation.setBackground(Color.blue);


Add the JComboBox to the orange panel:


<nameofORANGEpanel>.add(operation);


Exercise 4: Adding labels, buttons etc

JLabels


Declare 2 JLabels: letLabel and answerLabel


Create the two labels in the constructor using
their constructor that takes a String as an
argument and then set the FOREGROUND color
as follows:


letLabel: "Let's Calculate!" , green


answerLabel: "Answer" , red


Add:


letLabel to the ORANGE JPanel


answerLabel to the ORANGE JPanel

Exercise 4 continued

JTextFields


Declare 2 JTextFields: num1 and num2



In the Calc constructor, create the 2 JTextFields
using their constructor that takes a String and an
int (for size) as arguments:


num1:"1st Number" , 10


num2:"2nd Number", 10



Set their background color to lightGray
(predefined)



Add them to the ORANGE JPanel

Exercise 4 continued

JButtons


Declare 2 JButtons: calculate and quit


In Calc constructor, create the two JButtons using their
constructor which takes a String as an argument


calculate: "Calculate"


quit : "Quit"


Set their background color as follows:


calculate:pink


quit : create your color


HINT: first create the color then use it



Color leaf = new Color(50,100,50);



<nameofbutton>.setBackground(leaf);


Add the buttons to the YELLOW JPanel;


Exercise 4 continued


Compile and run the program.



Note that the order in which you add objects to
the panel determine their positions



Go back through the code and make sure that
the objects are added in the following order:


ORANGE JPanel: JLabel letLabel, JTextField
num1, JTextField num2, JComboBox operation,
JLabel answerLabel



YELLOW JPanel: JButton calculate, JButton quit

Exercise 4: answer

package swinglab;


import java.awt.*;

import javax.swing.*;

import java.util.*;


public class Calc extends JFrame{





private JLabel letLabel;



private JLabel answerLabel;



private JTextField num1;



private JTextField num2;



private JComboBox operation;



private JButton calculate;



private JButton quit;



private JPanel entryPanel;



private JPanel answerPanel;




static final String ADD_OP = "ADDITION";



static final String SUB_OP = "SUBTRACTION";



static final String MUL_OP = "MULTIPLICATION";



static final String DIV_OP = "DIVISION";




private static final int XSIZE = 1000;


private static final int YSIZE = 700;





public Calc() {



Container cp = getContentPane();



setDefaultCloseOperation(EXIT_ON_CLOSE);


cp.setLayout(new FlowLayout());



cp.setBackground(Color.WHITE);



setTitle("My Funky Calculator");



setSize(XSIZE,YSIZE);





entryPanel = new JPanel();



entryPanel.setBackground(Color.ORANGE);





answerPanel = new JPanel();


answerPanel.setBackground(Color.YELLOW);



letLabel = new JLabel("Let's Calculate!");



entryPanel.add(letLabel);



letLabel.setForeground(Color.GREEN);





num1 = new JTextField("1st Number", 10);



entryPanel.add(num1);



num1.setBackground(Color. LIGHT_GRAY);





num2= new JTextField("2nd Number", 10);



entryPanel.add(num2);



num2.setBackground(Color.LIGHT_GRAY);





operation = new JComboBox();



operation.addItem(ADD_OP);



operation.addItem(SUB_OP);



operation.addItem(MUL_OP);



operation.addItem(DIV_OP);



entryPanel.add(operation);



operation.setBackground(Color.BLUE);





answerLabel = new JLabel("Answer");



entryPanel.add(answerLabel);



answerLabel.setForeground(Color.red);





calculate = new JButton("Calculate");



calculate.setBackground(Color.pink);



answerPanel.add(calculate);





quit = new JButton("Quit");



answerPanel.add(quit);



Color quitter = new Color(50,100,50);



quit.setBackground(quitter);





cp.add(entryPanel);



cp.add(answerPanel);





}


public static void main(String[] args){



Calc trial = new Calc();



trial.setVisible(true);



}



}

Layout Manager


Layout management is the process of
determining the size and location of a
container's components.



Java containers do not handle their own layout.
They delegate that task to their layout manager,
an instance of another class.



If you do not like a container's default layout
manager, you can change it.



Container content = getContentPane();


content.setLayout( new FlowLayout() );

Layout Managers


Layout management proceeds bosttom up
through the containment hierarchy.



If a container encloses another container, the
enclosing container can not position the inner
container nor size itself until it knows how big
the inner container needs to be.



And the inner container can not size itself until
it queries its contents



Swing provides 6 Layout manager classes

FlowLayout


FlowLayout
, the simplest of the managers,
simply adds components left to right until it
can fit no more within its container's width.



It then starts a second line of components,
fills that, starts a third, etc.



Each line is centered in the container



FlowLayout

respects each component's
preferred size and will use it to override a
size set by
setSize
.



FlowLayout

is the default layout manager
for
JPanel

BorderLayout Zones


A border layout divides the container into five regions;
each region may contain only one component












BorderLayout is the default LayoutManager for the
contentpane of a JFrame

North

South

West

East

Center

Using Layout Managers

BorderLayout

<nameofcontainer>.setLayout(new BorderLayout());

When adding components to the container:

<nameofcontainer>.add(<nameofcomponent>,






BorderLayout.REGION);



where REGION is either NORTH, SOUTH, WEST,


CENTER OR EAST.


JPanel panel = new JPanel(); // default


// FlowLayout


panel.setLayout(new BorderLayout());


panel.add(button,BorderLayout.NORTH);

Using Layout Managers

FlowLayout

<nameofcontainer>.setLayout(new FlowLayout());


When adding components to the container:

<nameofcontainer>.add(<nameofcomponent>);



JPanel panel = new JPanel(); // default


// FlowLayout



//following line is redundant


panel.setLayout(new FlowLayout());


panel.add(button);

Exercise 5: Setting Layouts


Set the layout of the contentpane to
BorderLayout



Add the ORANGE panel to the north
region of the contentpane



Add the YELLOW panel to the south
region of the contentpane

Exercise 5: Answer

. . .

public Calc() {



Container cp = getContentPane();



setDefaultCloseOperation(EXIT_ON_CLOSE);


cp.setLayout(new BorderLayout());


cp.setBackground(Color.white);



setTitle("My Funky Calculator");


setSize(XSIZE,YSIZE);


. . .


cp.add(entryPanel, BorderLayout.NORTH);


cp.add(answerPanel,BorderLayout.SOUTH);

}

pack()


pack() method rearranges components
such that any unused space is not shown



Add
pack();
to the constructor of Calc.
Make it the last statement in the
constructor



Have you noticed a difference?

Summary


When creating GUI, a JFrame is used; it interacts
with the native system



A contentPane is automatically created when a
JFrame is created. It has 5 zones where you can
add a component (default layout is BorderLayout)



JPanel

is the workhorse of most complicated
interfaces. It is


a good all purpose container


the standard drawing surface



Swing containers have default layout managers but
you can always change them



Swing is HUGE! You must explore it further.