Java Programming: Unit 5 - GUI programming with Java

UNIT 5 - GUI Programming with Java

Containers – Top level containers – JFrame, JApplet, JWindow, JDialog

Containers – Top level containers – JFrame, JApplet, JWindow, JDialog:


Swing provides these top-level container classes: JFrame, JApplet, JDialog and JWindow.

JFrame:

A Frame is a top-level window with a title and a border. The size of the frame includes any area designated for the border. 
A frame implemented as an instance of the JFrame class.
A frame is a window that has decorations such as a border, a title, and supports button components.
Applications with a GUI usually include at least one frame. Applets sometimes use frames, as well.

Ex:
import javax.swing.JFrame;
import javax.swing.JLabel;
class FrameDemo_Ex{
	public static void main(String a[]){
		JFrame f = new JFrame("Frame Demo");
		f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
		f.getContentPane().add(new JLabel("Hello world!"));
		f.pack();
		f.setVisible(true);
	}
}

JApplet:

JApplet is a top-level Swing container.
Each top-level container such as a JApplet has a single content pane.
The content pane makes Swing applets different from regular applets in the following ways:
We can add components to a Swing applet's content pane, not directly to the applet.
We can set the layout manager on a Swing applet's content pane, not directly on the applet.
The default layout manager for a Swing applet's content pane is BorderLayout.
This differs from the default layout manager for Applet, which is FlowLayout.
We should not put painting code directly in a JApplet object.

Ex:
create JApplet_Ex.java:

  import java.awt.*;
  import javax.swing.*;
  public class JApplet_Ex extends JApplet {
    public void init() {
      Container content = getContentPane();
      content.setBackground(Color.white);
      content.setLayout(new FlowLayout()); 
      content.add(new JButton("Button 1"));
      content.add(new JButton("Button 2"));
      content.add(new JButton("Button 3"));
    }
  }

compile the above file. Now create JApplet_Ex.html as below.



Now run with following command at command prompt.
  
  appletviewer JApplet_Ex.html

Output will be as shown below.


JDialogue:
A Dialog window is an independent subwindow meant to carry temporary notice apart from the main Swing Application Window.
 Most Dialogs present an error message or warning to a user,
but Dialogs can present images, directory trees, or just about anything compatible with the main Swing Application.
To create simple, standard dialogs, you use the JOptionPane class.
JOptionPane.showMessageDialog is used to show the message;
JOptionPane.showInputDialog is used to get input from the user.
Ex:
import javax.swing.JOptionPane;
class JOptionPane_Ex{
	public static void main(String a[]){
	String Str = " ";
	Str = JOptionPane.showInputDialog(null, "Enter Your Name:", "",JOptionPane.PLAIN_MESSAGE);
	if (Str.length()==0) Str = "Name not entered ";
	else if ((Str.charAt(Str.length()-1)=='a')||(Str.charAt(Str.length()-1)=='i'))
	{
	Str = "Hello Miss " + Str;
	}
	else{
	Str = "Hello Mr " + Str;
	}
	JOptionPane.showMessageDialog(null, Str, "", JOptionPane.PLAIN_MESSAGE);
	}
}
We can use JOptionPane.ERROR_MESSAGE, JOptionPane.WARNING_MESSAGE instead of JOptionPane.PLAIN_MESSAGE.
null indicates the default frame.

JWindow:
JWindow is a container that can be displayed anywhere on the user's desktop.
It does not have the title bar, window-management buttons, or other trimmings associated with a JFrame.
The JWindow component contains a JRootPane as its only child.
The contentPane should be the parent of any children of the JWindow.
using JWindow you would code:
window.getContentPane().add(child);

Ex:
    import javax.swing.JWindow;
    public class JWindow_Ex{
      public static void main(String[] args) {
        JWindow w = new JWindow();
        w.setSize(300, 300);
        w.setVisible(true);
      }
    }

A simple swing application

Overview of several swing components

Java Graphics capabilities – Introduction

Graphics contexts and Graphics objects

Color control, Font control, Drawing Lines, Rectangles, Ovals and Arcs

Layout management - Layout manager types – border, grid, flow, box

A simple swing application:


Below is the Sample Saloon Application, which uses JFrame, JLabel, JPanel, JTextBox and some other components.
Total cost is calculated based on whether the customer is member or not.

  import java.awt.*;
  import java.awt.event.*;
  import javax.swing.*;
  import java.util.*;
  public class SaloonApp1{
     public static void main(String[]args){
	JFrame frame = new JFrame("The Saloon Center");
	frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
	JPanel panel = new JPanel(new GridLayout(30,20,10,10));
	panel.add(new JLabel(" Name:"));
	final JTextField jtf = new JTextField(); 
	panel.add(jtf);
	panel.add(new JLabel(" Member or non Member:"));
        final JRadioButton Yes=new JRadioButton(" Member (25% discount on Total Cost)");
	final JRadioButton No=new JRadioButton(" Non-member");
	ButtonGroup buttonGroup =new ButtonGroup();
	buttonGroup.add(Yes);
	panel.add(Yes);
	buttonGroup.add(No);
	panel.add(No);
	    
	panel.add(new JLabel(" Please select a type of treatment:"));
	final JCheckBox Body=new JCheckBox(" Body");
	final JCheckBox Hair=new JCheckBox(" Hair");
	panel.add(Body);
	panel.add(Hair);
	panel.add(new JLabel(" For Body treatment, please make your selection:"));
	final JRadioButton SeveralParts = new JRadioButton(" Several parts - Rs 320.00");
	final JRadioButton AllParts = new JRadioButton(" All parts - Rs 600.00");
	ButtonGroup BTreatment =new ButtonGroup();
	BTreatment.add(SeveralParts);
	panel.add(SeveralParts);
	BTreatment.add(AllParts);
	panel.add(AllParts);
	    
	panel.add(new JLabel(" For hair treatment, please make your selection:"));
	    
	final JCheckBox Rebonding = new JCheckBox(" Rebonding - Rs 250 ");
	panel.add(Rebonding);
	    
	final JCheckBox Cutting = new JCheckBox(" Cutting - Rs 50 ");
	panel.add(Cutting);
	    
	final JCheckBox Washing = new JCheckBox(" Washing - Rs 15 ");
	panel.add(Washing);
	    
	final JCheckBox Dyeing = new JCheckBox(" Dyeing - Rs 100 ");
	panel.add(Dyeing);
	       
	JButton button =new JButton("Submit");
		
	button.addActionListener(new ActionListener(){
	public void actionPerformed(ActionEvent ae){
	    double severalPartsOfBody= 320.00;
	    double allPartsOfBody= 600.00;
	    double rebondingPrice=250.00;
	    double cuttingPrice= 50.00;
	    double washingPrice=15.00;
	    double dyeingPrice=100.00;
	    double Member_Concession=0;
	    String str="Customer Name: "+jtf.getText()+"\n";
	    double TotalCost = 0;
	    if(Body.isSelected()==true){					
	     str=str+"Body treatment:\n";
	     if (SeveralParts.isSelected()==true){
		str=str+"Cost for Several Parts: Rs "+severalPartsOfBody+"\n";
		TotalCost = TotalCost + severalPartsOfBody;
	     }
	     if (AllParts.isSelected()==true){
	        str=str+"Cost for All Parts: Rs "+allPartsOfBody+"\n";
		TotalCost = TotalCost + allPartsOfBody;
	     }
	    }
	    if(Hair.isSelected()==true){
		str=str+"Hair treatment:\n";
		if(Rebonding.isSelected()==true) {
		str = str+"Cost for Rebonding: Rs "+rebondingPrice+"\n";
		TotalCost = TotalCost + rebondingPrice;
		}
	        if(Cutting.isSelected()==true) {
		str = str+"Cost for Cutting: Rs "+cuttingPrice+"\n";
		TotalCost = TotalCost + cuttingPrice;
		}
		if(Washing.isSelected()==true) {
		str = str+"Cost for Washing: Rs "+washingPrice+"\n";
		TotalCost = TotalCost + washingPrice;
		}
		if(Dyeing.isSelected()==true) {
		str = str+"Cost for Dyeing: Rs "+dyeingPrice+"\n";
		TotalCost = TotalCost + dyeingPrice;
		}
	     }
		str = str+"Total Cost: Rs "+TotalCost+"\n";
		if(Yes.isSelected()==true){ 
		  Member_Concession=TotalCost/4;
		  str = str+"Member Concession : Rs "+Member_Concession+"\nAmount to be paid: "+(TotalCost-Member_Concession);
		} 
		if(No.isSelected()==true){
		  str = str+"Member Concession : Rs "+Member_Concession+"\nAmount to be paid: "+(TotalCost-Member_Concession);
		}
		JOptionPane.showMessageDialog(null,str);
		}}); 
	   frame.add(panel);
	   panel.add(button);
	   frame.setSize(750, 750);
	   frame.setVisible(true);
      }
}

Output of the above application:

Color control:

The AWT color system allows you to specify any color you want.
Color is encapsulated by the Color class.
Color defines several constants(ex: Color.black) to specify number of common colors.
You can also create your own colors using one of the color constructors.

Color(int red, int green, int blue)
Color(int rgbValue)
Color(float red, float green, float blue)

The Color class defines several methods that help manipulate colors.
Using Hue, Saturation and Brightness:

The Hue-Saturation-Brightness(HSB) color model is an alternative to RGB for specifying particular colors.
Color supplies 2 methods that let you convert between RGB and HSB.
static int HSBtoRGB(float hue, float saturation, float brightness)
static float[] RGBtoHSB(int red, int green, int blue, float values[])
 
getRed(), getGreen(), getBlue() methods:

Use getRGB() method to obtain RGB representation of a color.

Ex:
import java.awt.*;
import java.applet.*;
public class ColorDemo extends Applet{
  public void paint(Graphics g){
    Color c1 = new Color(255, 100, 100);
    Color c2 = new Color(100, 255, 100);
    Color c3 = new Color(100, 100, 255);

    g.setColor(c1);
    g.drawLine(0, 0, 100, 100);
    g.setColor(c2);
    g.drawLine(0, 100, 100, 0);

    g.setColor(Color.blue);
    g.drawOval(190, 10, 90, 30);
    g.drawRect(10, 10, 60, 50);
  }
}

Output:



Font control:

An instance of the Font class represents a specific font to the system.
Within AWT, a font is specified by its name, style, and point size.
Each platform that supports Java provides a basic set of fonts.
To find the fonts supported on any platform, call Toolkit.getDefaultToolkit().getFontList().
This method returns aString array of the fonts available.

There are four styles for displaying fonts in Java: plain, bold, italic, and bold italic. Three class constants are used to represent font styles:

public static final int BOLD 
public static final int ITALIC 
public static final int PLAIN 

The combination BOLD | ITALIC represents a bold italic font.

Constructors:

public Font (String name, int style, int size) 

There is a single constructor for Font. It requires a name, style, and size. name represents the name of the font to create,
setFont (new Font ("TimesRoman", Font.BOLD | Font.ITALIC, 20));

Characteristics:

public String getName() 

The getName() method returns the font's logical name.

public String getFamily() 

The getFamily() method returns the actual name of the font that is being used to display characters.

public int getStyle() 

The getStyle() method returns the current style of the font as an integer.
Compare this value with the constants Font.BOLD, Font.PLAIN, andFont.ITALIC to see which style is meant.
It is easier to use the isPlain(), isBold(), and isItalic() methods to find out the current style.
getStyle()is more useful if you want to copy the style of some font when creating another.

public int getSize() 

The getSize() method retrieves the point size of the font, as set by the size parameter in the constructor. The actual displayed size may be different.

Styles:

public boolean isPlain() 
The isPlain() method returns true if the current font is neither bold nor italic. Otherwise, it returns false.

public boolean isBold() 
The isBold() method returns true if the current font is either bold or bold and italic. Otherwise, it returns false.

public boolean isItalic() 
The isItalic() method returns true if the current font is either italic or bold and italic. Otherwise, it returns false.

public boolean equals(Object o) 
The equals() method overrides the equals() method of Object to define equality for Font objects.
Two Font objects are equal if their size, style, and name are equal.
The following example demonstrates why this is necessary.
  
  Font a = new Font ("TimesRoman", Font.PLAIN, 10);
  Font b = new Font ("TimesRoman", Font.PLAIN, 10);
  // displays false since the objects are different objects
  System.out.println (a == b);
  // displays true since the objects have equivalent settings


Drawing Lines:

Lines are drawn using drawLine() method.
void drawLine(int startX, int startY, int endX, int endY)

drawLine() displays a line in the current drawing color that begins at (startX, startY) and ends at (endX, endY)

Ex:
import java.awt.*;
import java.applet.*;
public class Lines extends Applet{
	public void paint(Graphics g){
		g.drawLine(0, 0, 100, 100);
		g.drawLine(0, 100, 100, 0);
		g.drawLine(40, 25, 250, 180);
	}
}

Output:


Drawing Rectangles:

The drawRect() and fillRect methods display an outlined and filled rectangle.
void drawRect(int top, int left, int width, int height)
void fillRect(int top, int left, int width, int height)
The upper left corner of the rectangle is at (top, left).

To draw a rounded rectangle, use drawRoundRect() or fillRoundRect() methods.
void drawRoundRect(int top, int left, int width, int height, int xDiam, int yDiam)
void drawRoundRect(int top, int left, int width, int height, int xDiam, int yDiam)
The diameter of rounding arc along X-axis is specified by xDiam and the diameter of rounding arc along Y-axis is specified by yDiam.

import java.awt.*;
import java.applet.*;
public class Rectangles extends Applet{
	public void paint(Graphics g){
		g.drawRect(10, 10, 60, 50);
		g.fillRect(100, 10, 60, 50);
		g.drawRoundRect(190, 10, 60, 50, 15, 15);
		g.fillRoundRect(70, 90, 140, 100, 30, 40);
	}
}  

Output:


Drawing Ellipses and Circles:

To draw an ellipse use drawOval(), to fill an ellipse, use fillOval().
void drawOval(int top, int left, int width, int height)
void fillOval(int top, int left, int width, int height)
The ellipse is drawn within a bounding rectangle whose upper-left corner is specified by (top, left) and 
whose width, height are specified by width and height.

import java.awt.*;
import java.applet.*;
public class Ellipses extends Applet{
	public void paint(Graphics g){
		g.drawOval(10, 10, 50, 50);
		g.fillOval(100, 10, 75, 50);
		g.drawOval(190, 10, 90, 30);
		g.fillOval(70, 90, 140, 100);
	}
}  

Output:


Drawing Arcs:

Arcs can be drawn with drawArc() and fillArc() methods.
void drawArc(int top, int left, int width, int height, int startAngle, int sweepAngle)
void fillArc(int top, int left, int width, int height, int startAngle, int sweepAngle)
The arc is bounded by the rectangle whose upper-left corner is specified by (top, left) and width and height are specified by width and height.
The arc is drawn from startAngle through the angular distance specified by sweepAngle.

import java.awt.*;
import java.applet.*;
public class Arcs extends Applet{
	public void paint(Graphics g){
		g.drawArc(10, 40, 70, 70, 0, 75);
		g.fillArc(100, 40, 70, 70, 0, 75);
		g.drawArc(10, 100, 70, 80, 0, 175);
		g.fillArc(100, 100, 70, 90, 0, 270);
	}
}  

Output:

Layout Management:

Java technology uses Layout Managers to define the location and size of GUI components.
Java technology does not encourage programmers to use absolute location and size of components.
Java technology instead places components based on specified Layout Manager.
A Layout Manager implements a layout policy that defines constraints between components in a container.

Types of Layout Managers:

Java technology provides the following Layout Managers, each of which implements the LayoutManager interface.
FlowLayout:

FlowLayout is the default layout manager.
FlowLayout implements a simple layout style which is similar to a text editor.
Below are the constructors for FlowLayout:

FlowLayout()- creates default layout.

FlowLayout(int how)- allows specifies how each line is aligned.
Valid values for how:
	FlowLayout.LEFT
	FlowLayout.CENTER
	FlowLayout.RIGHT

FlowLayout(int how, int horz, int vert)- allows you to specify the horizontal and vertical space left  between components.

Ex:

import java.awt.*;
import java.awt.event.*;
import java.applet.*;

public class FlowLayoutDemo extends Applet implements ItemListener{
	Checkbox WIP_Item, BOM_Item;
	public void init(){
		setLayout(new FlowLayout(FlowLayout.LEFT));
		WIP_Item = new Checkbox("WIP Item", null, true);
		BOM_Item = new Checkbox("BOM Item");
		add(WIP_Item);
		add(BOM_Item);

		WIP_Item.addItemListener(this);
		BOM_Item.addItemListener(this);
	}
	public void itemStateChanged(ItemEvent ie){
		repaint();
	}
	public void paint(Graphics g){
		String str1="WIP_Item "+WIP_Item.getState();
		String str2="BOM_Item "+BOM_Item.getState();

		g.drawString("Current State: ", 6, 80);
		g.drawString(str1, 6, 100);
		g.drawString(str2, 6, 120);
	}
}

Output:


GridLayout:

The components in a GridLayout are in a two-dimensional grid.
The constructors defined by GridLayout are shown here:
GridLayout()- creates single column grid layout.
GridLayout(int numRows, int numCols)- creates a grid layout with specified number of rows and columns.
GridLayout(int numRows, int numCols, int horz, int vert)-
allows you to specify horizontal and vertical space left between components. 

Here is sample program that creates 4X4 grid and fills it with 15 buttons, each labeled with its index.

import java.awt.*;
import java.applet.*;
public class GridLayoutDemo extends Applet{
  static final int n=4;
  public void init(){
    setLayout(new GridLayout(n,n));
    setFont(new Font("sansSerif", Font.BOLD, 24));
    for(int i=0;i< n;i++){
      for(int j=0;j< n;j++){
        int k=i*n+j;
        if(k>0) add(new Button("" + k));
      }
    }
  }
}

Output:

BorderLayout:

The BorderLayout class implements a common layout style for top_level windows.
It has four narrow, fixed-width components at the edges and one large area in the center.
The four sides are reffered as north, south, east and west.

Constructors defined by BorderLayout:
BorderLayout() – creates default border layout.
BorderLayout(int horz, int vert) – allows you to specify horizontal and vertical space left between components.

BorderLayout defines following constants:
BorderLayout.CENTER
BorderLayout.NORTH
BorderLayout.EAST
BorderLayout.WEST
BorderLayout.SOUTH

To add these constants, use add() method.
void add(Component compObj, Object region);

Ex:

import java.awt.*;
import java.applet.*;
import java.util.*;
public class BorderLayoutDemo extends Applet{
	public void init(){
		setLayout(new BorderLayout());
		add(new Button(“This is Top”), BorderLayout.NORTH);
		add(new Label(“This is Bottom”), BorderLayout.SOUTH);
		add(new Button(“This is Right”), BorderLayout.EAST);
		add(new Button(“This is Left”), BorderLayout.WEST);
		String msg=”This is BorderLayout demo program.”;
		add(new TextArea(msg), BorderLayout.CENTER);
	}
} 



BoxLayout:

The BoxLayout class puts components in a single row or column.
It respects the components' requested maximum sizes and also lets you align components.
Constructor:

BoxLayout(Container target, int axis)
Creates a layout manager that will lay out components along the given axis.
The value of axis can be one of the following:

BoxLayout.X_AXIS
BoxLayout.Y_AXIS
BoxLayout.LINE_AXIS
BoxLayout.PAGE_AXIS

import javax.swing.BoxLayout;
import javax.swing.JButton;
import javax.swing.JFrame;

public class BoxLayoutTest {
  public static void main(String[] args) {
    JFrame.setDefaultLookAndFeelDecorated(true);
    JFrame frame = new JFrame("BoxLayout Test");
    frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    BoxLayout boxLayout = new BoxLayout(frame.getContentPane(), BoxLayout.Y_AXIS); // top to bottom
    frame.setLayout(boxLayout);
    frame.add(new JButton("Button 1"));
    frame.add(new JButton("Button 2"));
    frame.add(new JButton("Button 3"));
    frame.pack();
    frame.setVisible(true);
  }
}

Output:

Event Handling - Events

Event sources, Event classes and Event Listeners, Relationship between Event sources and Listeners

Delegation event model

Semantic and Low-level events

Examples: handling a button click,handling mouse and keyboard events

Adapter classes

Handling a button click:

In the program code given below, the Frame contains three buttons named - "GudMng", "GudAftn", "GudNyt".
The purpose of these three buttons need to be preserved within a command associated with the button.
That is, a different action takes place on the click of each button.

The following program demonstrates the event generated by each button.

import java.awt.*; 
import java.awt.event.*; 
 
public class ButtonPressDemo { 
  public static void main(String[] args){ 
  Button b; 
  ActionListener a = new MyActionListener(); 
  Frame f = new Frame("Java Applet"); 
  f.add(b = new Button("GudMng"), BorderLayout.NORTH); 
  b.setActionCommand("Good Morning"); 
  b.addActionListener(a); 
  f.add(b = new Button("GudAftn"), BorderLayout.CENTER); 
  b.addActionListener(a); 
  f.add(b = new Button("GudNyt"), BorderLayout.SOUTH); 
  b.setActionCommand("Exit"); 
  b.addActionListener(a); 
  f.pack(); 
  f.show(); 
  } 
} 
 
class MyActionListener implements ActionListener { 
  public void actionPerformed(ActionEvent ae) {
  String s = ae.getActionCommand(); 
  if (s.equals("Exit")) { 
  System.exit(0); 
  } 
  else if (s.equals("GudMng")) { 
  System.out.println("Good Morning"); 
  } 
  else { 
  System.out.println(s + " clicked"); 
  } 
  } 
} 
Output:Click on GudNyt to exit.





Handling Mouse Clicks:

The following program simply implements the left click event of the mouse.
When you click "Click Me" button then the text of the label will change from "Sudheer Kumar" to the text
of the generated event source and vice versa.

import java.awt.*;
import java.awt.event.*;

public class MouseClick {
  Label lbl;
  public static void main(String[] args) {
  MouseClick MC = new MouseClick();
  }

  public MouseClick(){
  Frame f = new Frame("Checking the mouse click");
  Panel p = new Panel();
  Button button = new Button("Click Me");
  button.addMouseListener(new MyMouseListener());
  p.add(button, BorderLayout.NORTH);
  f.add(p,BorderLayout.NORTH);
  lbl = new Label("Sudheer Kumar K.");
  f.add(lbl, BorderLayout.CENTER);
  f.addWindowListener(new WindowAdapter(){
  public void windowClosing(WindowEvent we){
  System.exit(0);
  }
  });
  f.setSize(400,400);
  f.setVisible(true);
  }
  public class MyMouseListener extends MouseAdapter{
  public void mouseClicked(MouseEvent me){
  String str = lbl.getText();
  if (str.equals("Sudheer Kumar K.")){
  lbl.setText("You have clicked the button.");
  }
  else if (str.equals("You have clicked the button.")){
  lbl.setText("Sudheer Kumar K.");
  }
  }
  }
}

Output:


Handling Key Events:

All the key events are handled through the KeyListener Interface.

In the following program, you will see how to display the specific message on the frame according to the event.
When you press the key then the message "Key Pressed" will be seen on the frame
and when you stop pressing keys then the message "Key Released" will be seen.

This is possible by using the KeyListener interface.
It will generate the KeyEvent and you can then check the exact event by using different method
like keyTyped(), keyPressed() and keyReleased() method which are used for retrieving the generated specific event.

import java.awt.*; 
import java.awt.event.*;
public class KeyListenerTester extends Frame implements KeyListener{  
  	TextField t1;
  	Label l1;
  	public KeyListenerTester(String s ) {  
  	super(s); 
  	Panel p =new Panel();
  	l1 = new Label ("Key Listener!" ) ;
  	p.add(l1);  
  	add(p);
  	addKeyListener ( this ) ; 
  	setSize ( 200,100 );
  	setVisible(true);
  	addWindowListener(new WindowAdapter(){
 		public void windowClosing(WindowEvent e){
  		System.exit(0);
 		}
 	});
 	}  
 public void keyTyped ( KeyEvent e ){  
  	l1.setText("Key Typed");
 }  
 public void keyPressed ( KeyEvent e){  
 	l1.setText ( "Key Pressed" ) ; 
 }  
 public void keyReleased ( KeyEvent e ){  
 	l1.setText( "Key Released" ) ; 
 }  
 public static void main (String[]args ){  
 	new KeyListenerTester ( "Key Listener Tester" ) ; 
 }  
 }

Output: