Graphic User Interface

Graphic User Interface (GUI) Most of us interact with computers using GUIs. GUIs are visual representations of the actions you can perform on a computers ­Mouse click, buttons, menus etc.. Java has a set of built in tools that enable the creation of Graphic User Interfaces. Java uses two main packages: 1.Abstract Windows Toolkit –awt 2.Java Foundation Classes called Swing 3.The event handler from the awt

Using GUIs in Java Step 1: Import the swing and awt packages. import javax.swing.*: import java.awt.*; Import java.awt.event; The “.* “ imports all the files associated with the package. Step 2: Work with the classes and components of the package.

Swing Components When you use a Swing component, you work with objects of that component’s class. You create the component by calling its constructor and then calling methods of the component.. All Swing components are subclasses of the abstract class Jcomponent Before components can be displayed in a user interface, they must be added to a container component. The container component is a window called a frame which belongs to the Jframe class.

Creating a Swing App Make the interface a subclass of Jframe public class FirstFrame extends JFrame {... The constructor of the class should handle the following tasks: Call a superclass constructor to give the frame a title and handle other setup procedures. Set the size of the frame’s window, either by specifying the width and height in pixels or by letting Swing choose the right size. Decide what to do if a user closes the window. Display the frame The constructor of the JFrame class: JFrame()

Simple frame import javax.swing.*; import java.awt.*; class FirstFrame extends JFrame { public FirstFrame() { setTitle("Messages Please"); setSize(400,100); setVisible(true); } public static void main(String[] args) { new FirstFrame(); } Libraries Size of Frame Jframe Class Title of Frame call

Drawing Text Example 1,13.1 import javax.swing.JFrame; import javax.swing.JPanel; import java.awt.Container; import javax.swing.JComponent; import java.awt.Graphics; class GUIGreet { public static void main (String[] args) { JFrame frame = new JFrame("Message Please"); frame.setSize(400,100); JPanel pane = (JPanel) frame.getContentPane(); pane.add(new Greeting()); frame.setVisible(true); } class Greeting extends JComponent { public Greeting () { repaint(); } public void paint (Graphics g) { g.drawString("Hello, world",150,50); } Classes from Packages Jframe Class Main Method Window Size Method Content Manager Method Greeting Object Make frame visible inheritance Paint method constructor Drawing text method

What does it all mean? Importing classes from swing and awt packages Main method always must be included in this case it will set up a window to display the output of the program Constructing the top level holder or container JFrame and name in frame import javax.swing.JFrame; import javax.swing.JPanel; import java.awt.Container; import javax.swing.JComponent; import java.awt.Graphics public static void main (String[] args) JFrame frame = new JFrame("Message Please")

The setSize method creates the dimensions of the window (width, height) in pixels getContentPane() method manages the contents inside the Frame. Returns reference to JFrame via JPanel a subclass of Jframe Construct a new Greeting object using the add method Make Frame visible Greeting inherits all of JComponent’s methods frame.setSize(400,100); JPanel pane = (JPanel) frame.getContentPane(); pane.add(new Greeting()); frame.setVisible(true); class Greeting extends JComponent

Create constructor of class Greeting to call paint method Paint method to be able to “paint” or fill frame with images and text. The parameter of the method is a Graphics object that is created by Java and assigned to object g which stores the paint properties (i.e. color) Property of what will be drawn in the frame Text “Hello World” which is 150 px from the left and 50 px from the top public Greeting () { repaint(); } public void paint (Graphics g) g.drawString("Hello, world",150,50);

Layout Managers The position and size of the components in a frame can be controlled by a layout manager The objects are constructed form the class FlowLayout in the package java.awt To construct a flow layout use the object called pane from Jpanel pane.setLayout(new FlowLayout()); Example 1 Section 13.3 uses the Flowlayout with buttons

Border Layout To create a structure with different regions use BorderLayout Use a version of the overloaded method add with two parameters In Example 2 section 13.3 they use JButton and BorderLayout This type of layout creates moveable regions

Grid Layout This type of layout enables the creation of rows and columns to create a table or grid This uses the class GridLayout with two parameters indicating the row and column Pane.setLayout(new GridLayout(3,2)); 3 rows, 2 columns Example 3 in section 13.3 provides an example Example 5 in section 13.3 combines the layout components with graphical displays

Button Events Buttons enable interactions with the user When a button is pressed, an action event occurs The button object is the source of the action event If you want to know if the action occurred you need to register as a listener Objects that can produce events maintain a list of listeners Explained in the following example (Example 1, 13.4)

Button Event Text Example 1, 13.4 import java.awt.*; import java.awt.event.*; import java.swing.*; class ButtonColour{ public static void main (String[] args) { ColourFrame frame = new ColourFrame(); } class ColourFrame extends JFrame implements Action Listener{ private Jpanel pane; public ColourFrame (){ super(“Button Events”); Jbutton colourButton=new Jbutton(“Change Colour”); colourButton.addActionListener(this); pane=(Jpanel) getContentPnae(); pane.setLayout(new FlowLayout()); pane.add(colourButton); setSize(300,100); setVisible(trure); } Packages ColourFrame constructor Call constructor Jframe with title “Button Events Create Button and Listeners Sets size and makes it visible Set Listener Object Creation ColourFrame Class Create content pane and add buttons

Button Event Text Example 1, 13.4 public void actionPerformed(ActionEvent e){ pane.setBackground(new Color(strength(),strength(),strength())) } public static int strength(){ return(int)(256*Math.random()); } Automatic call of pressed button Method generates a random value in the range of 0 to 255 which controls the colour of the background component 3 To generate more colours Selection structures can be used on action events (Example 2, 13.4)

Mouse Events Mouse events are handled in the same way as Button events – with more activities Two kinds of listener interfaces ­MouseMotionListener ­MouseListener MouseMotionListener requires implementation of the following 3 methods ­ mouseMoved - called when moving a mouse ­ mouseDragged - called when mouse is dragged over more than one component

Mouse Listener Events MouseListener requires implementation of the following 5 methods ­ mousePressed - called when mouse is pressed ­ mouseReleased -called when mouse is released or let go ­ mouseClicked -called when mouse is pressed & released quickly ­ mouseEntered -called when mouse enters area of interest ­ mouseExited -called when mouse exists area of interest

Mouse Event instance class Mouse event object e provide two instance methods ­ int getX() – method returns horizontal coordinate of the mouse when event occurred ­ int getY() – method returns vertical coordinate of the mouse when event occurred

Using Mouse Events Example 1, 13.5 class CircleFrame extends Jframe implements MouseListener{ private int x; private iny y; private static final int RADIUS=10; public CircleFrame(){ super(“Mouse Droppings”); addMouseListener(this); setSize(300,100); setVisible(true); } public void mousePressed (MouseEvent e){ x=e.getX() y=e.getY() } public void mousePressed(MouseEvent e){ } public void mouseReleased(MouseEvent e){ } public void mouseEntered(MouseEvent e){ } public void mouseExited(MouseEvent e){ } Public void paint(Graphics g){ g.fillOval(x-RADIUS,y-RADIUS,2*RADIUS,2*RADIUS); }} Region must listen to events occurring within itself coordinates of the centres of the circle CircleFrame class implements MouseListener methods sets size of circle Obtains coordinates of the location of any mouse click and asks Java to paint to implement methods Displaying the graphic

The Adapter class The adapter class includes the MouseListener methods for simple versions ­Implementation of MouseListener is done in MouseAdaptor ­Constructor of CircleFrame calls on the constructor of the ClickHandler class ­ClikcHandler class creates object Puts object on the mouse listener’s list of objects of events. class ClickHandler()extendsMouseAdapter{ public void mouseClicked (MouseEvent e){ x=e.getX(); y=e.getY(); repaint(); }

Text Input and Output Use the JTextField class: JTextField inField= new JTextField(20); Creates a component that holds 20 characters JTextField outField= new JTextField(“result”,10); outField.setEditable(false); Creates a field to display output only Example 7, 13.6 provides more details