Java Programming (By Rama Bhadra Rao M) You can Trace me in Day 5

Session Plan Day 5 –Designing GUI –Event Handling –Applets

The java.awt Package Java helps the programmer to create GUI with the classes in java.awt AWT stands for Abstract Window Toolkit

Class Hierarchy Component Button Label Window Scrollbar Canvas Checkbox Choice Container TextComponent Applet Panel Dialog Frame TextField TextArea ScrollPane

Container Classes Container classes are classes that can have other components on it So for creating a GUI, we need at least one Container object Three types of containers –Panel : It is a pure container and is not a window in itself. The sole purpose of a Panel is to organize the components on to a window. –Frame : It is a fully functioning window with its own title and icons. –Dialog : It can be thought of as a pop-up window that pops out when message has to be displayed. It is not a fully functioning window like the Frame.

A Simple GUI Program Just creating a Frame container without any components added to it import java.awt.*; class SimpleGUI{ public static void main(String args[]) { Frame f = new Frame(“Simple GUI”); f.setSize(300, 400); f.setVisible(true); } Making the Frame visible, without this statement, nothing will be seen and should be the last statement after all components have been added Setting the size of the Frame Calling the constructor of the Frame class and passing the title of the Frame as a String argument

import java.awt.*; class SimpleGUI{ public static void main(String args[]){ Frame myFrame= new Frame(“Simple GUI”); myFrame.setSize(300, 400); myFrame.setBackground(Color.pink); Button myButton = new Button(“Ok”); myFrame.add(myButton); myFrame.setVisible(true); } Adding Components We can add Components to a Container Creating a Button object and adding onto the container

Layout Managers Each Container has a Layout Manager that will decide the size and position of the Components placed on it ie each container has its default layout The programmer can change the default Layout of the Container using the method setLayout (which layout to follow) The programmer can also cancel the default Layout of a Container by calling the method setLayout (null)

Different Layouts (1 of 2) There are 5 different layouts available FlowLayout –The components are placed horizontally one after another and then move to the next line GridLayout –The components are placed in a grid (rows, columns) BorderLayout –5 components can be added at the most –The 5 borders are North, South, East, west and Center –If not specified the default position is center in Border Layout

Please find more explanation of the previous slide in the notes page (This slide is intentionally left blank)

Please find more explanation of the previous slide in the notes page (This slide is intentionally left blank)

Please find more explanation of the previous slide in the notes page (This slide is intentionally left blank)

Please find more explanation of the previous slide in the notes page (This slide is intentionally left blank)

Different Layouts (2 of 2) CardLayout –The CardLayout places components/containers on top of each other like a deck of cards –Only one is visible at a time –Every card is made visible using the method show() GridBagLayout –Most powerful and flexible –It is a more advanced form of GridLayout where components can be placed horizontally and vertically –Components can be of different sizes and they can span multiple cells in the grid

Please find more explanation of the previous slide in the notes page (This slide is intentionally left blank)

Please find more explanation of the previous slide in the notes page (This slide is intentionally left blank)

Please find more explanation of the previous slide in the notes page (This slide is intentionally left blank)

Absolute Positioning The programmer may take full control of positioning the components on the container by doing absolute positioning –setLayout(null); –setBounds(x-cord, y-cord, width, height);

Checkbox Checkboxes are used when you want to select 0 or more items from a set of items The method getState() will return true if the Checkbox is selected … Checkbox c1 = new Checkbox(“English”); Checkbox c2 = new Checkbox(“German”); Checkbox c3 = new Checkbox(“French”); … if (c1.getState()) System.out.println(“The user knows English”);

CheckboxGroup CheckboxGroup can be used to group some Checkbox objects together, so that they become Radio Buttons Radio Buttons are used when we want to select one and only one from a set of items … CheckboxGroup cg = new CheckboxGroup(); Checkbox c1 = new Checkbox(“Morning”, cg, true); Checkbox c2 = new Checkbox(“Evening”, cg, false); Checkbox c3 = new Checkbox(“Night”, cg, false); …

Choice Choice is a Drop Down List This is used to select 0 or more items from a set of items The method getSelectedItem() will return the item selected by the user –System.out.println(c.getSelectedItem()); … Choice c = new Choice(); c.add(“Sunday”); c.add(“Monday”); …

List List is a scrollable list of items A list can be used to select 0 or more items from a set of items The method getSelectedItem will return the item selected by the user –System.out.println(l.getSelectedItem()); –getSelectedItems() returns a String[] if multiple items are selected … List list = new List(); List list = new List(5,true); list.add(“Sunday”); list.add(“Monday”); …

Please find more explanation in the notes page (This slide is intentionally left blank)

Label Label is a simple control used to display some message –Label l = new Label(“Hello”) The method setText can be used to set the message on the label –l.setText(“Hello World”); The method getText can be used to get the message from the label –System.out.println(l.getText());

Scrollbar Scrollbar is used to increment or decrement some value The method getValue is used to get the current value of the Scrollbar –System.out.println(s.getValue()); Scrollbar s = new Scrollbar(Scrollbar.HORIZONTAL, 25, 10, 0, 100);

TextField and TextArea TextField and TextArea permits the user to type in some input TextField is single line whereas TextArea is multi line The method getText gets the text typed in by the user –System.out.println(tf.getText()); … TextField tf = new TextField(10); TextArea ta = new TextArea(10, 20); …

Please find more explanation in the notes page (This slide is intentionally left blank)

MenuBar, Menu and MenuItem (1 of 3) The classes MenuBar, Menu and MenuItem help us to create a menu system for the window MenuBar is the area in the window where the menu system appears –MenuBar mb = new MenuBar(); A menu system can be added to a window by setting a MenuBar to this window –f.setMenuBar(mb); (where f is the Frame reference)

MenuBar, Menu and MenuItem (2 of 3) The different items that appear on the MenuBar are represented by the class Menu A Menu can be added to a MenuBar using the add method … Menu m1 = new Menu(“File”); Menu m2 = new Menu(“Edit”); Menu m3 = new Menu(“Help”); … mb.add(m 1); mb.add(m 2); …

MenuBar, Menu and MenuItem (3 of 3) The items that drop down when you select a Menu are objects of MenuItem A MenuItem can be added to a Menu using the method add … MenuItem menuitem1 = new MenuItem(“Open”); MenuItem menuitem2 = new MenuItem(“New”); … m1.add(mi 1); m1.add(mi 2); …

Panel Panel is a Container and can contain other Components Generally we do not use Panel as the main Container since it is not a Window Panel can be used to logically group some Components together We can add three Panels to a Frame, each Panel can have a different Layout and Components can be added to the Panels

Dialog Dialog is a Window that is used to display some message and get a response from the user For example, a small window that asks the user “Are you sure?” can be implemented using Dialog The Dialog can have two Buttons also that says “Yes” and “No” The method dispose() helps to dispose the dialogbox

Events Events correspond to : – Physical actions (E.g.: mouse button down, Key press/release) – Logical events (E.g.: gotfocus - receiving focus on a component) Event is an encapsulation of some input delivered asynchronously to the application The java.awt.event package defines classes to represent different type of events.

Event Handling Mechanisms Delegation event model – The new approach Concept : –Source generates the events and sends them to one or more listeners –Listener waits until it receives an event –Once received, the listener processes the event and then returns Event handling is totally separated from UI component A UI is able to "delegate" the event handling procedure to a separate piece of code

Hierarchy of Event Classes in java.awt.event EventObject AWTEvent Action EventAdjustmentEventComponentEvent ContainerEventFocusEventInputEvent KeyEventMouse Event PaintEventWindowEvent ItemEventTextEvent

Main Event Classes in java.awt.event (1 of 2) EVENT CLASSDESCRIPTIONLISTENER ActionEventGenerated when a button is pressed.ActionListener AdjustmentEventGenerated when a scroll bar is used.AdjustmentListener ComponentEvent Generated when a component is moved, resized, shown or hidden. ComponentListener ContainerEvent Generated when a component is added or removed from the container. ContainerListener FocusEvent Generated when a component gains or loses keyboard focus FocusListener InputEvent Abstract superclass for all component input event classes.

Main Event Classes in java.awt.event (1 of 2)-(Contd..) Please find more explanation of the previous slide in the notes page (This slide is intentionally left blank)

Main Event Classes in java.awt.event (1 of 2)-(Contd..) Please find more explanation of the previous slide in the notes page (This slide is intentionally left blank)

Main Event Classes in java.awt.event(1 of 2)-(Contd..) Please find more explanation of the previous slide in the notes page (This slide is intentionally left blank)

Main Event Classes in java.awt.event(1 of 2) -(Contd..) Please find more explanation of the previous slide in the notes page (This slide is intentionally left blank)

Main Event Classes in java.awt.event(1 of 2)-(Contd..) Please find more explanation of the previous slide in the notes page (This slide is intentionally left blank)

Main Event Classes in java.awt.event (2 of 2) EVENT CLASSDESCRIPTIONLISTENER ItemEventGenerated when a check box or list item is clickedItemListener KeyEventGenerated when input is received from the keyboard.KeyListener MouseEvent Generated when the mouse is moved, dragged, clicked, or released. MouseListener TextEvent Generated when the value of a text area or text field is changed. TextListener WindowEvent Generated when a window is activated, closed, deactivated, deiconified, iconified, opened. WindowListener

Main Event Classes in java.awt.event (2 of 2)-(Contd…) Please find more explanation of the previous slide in the notes page (This slide is intentionally left blank)

Main Event Classes in java.awt.event (2 of 2)-(Contd…) Please find more explanation of the previous slide in the notes page (This slide is intentionally left blank)

Main Event Classes in java.awt.event (2 of 2)-(Contd…) Please find more explanation of the previous slide in the notes page (This slide is intentionally left blank)

Main Event Classes in java.awt.event (2 of 2)-(Contd…) Please find more explanation of the previous slide in the notes page (This slide is intentionally left blank)

Using the delegation event model Create a Listener object which implements the listener interface. Associate a Listener with the source public class MyApplication{... Button button = new Button("I'm a button!"); button.addActionListener(new MyHandler()); } public class MyHandler implements ActionListener{ public void actionPerformed(ActionEvent e){ numClicks++; } } Method in the interface (ActionListener)

Adapter Classes (1 of 2) While implementing an interface, we must implement all the methods listed in the interface E.g., the MouseListener interface contains five methods: mousePressed, mouseReleased, mouseEntered, mouseExited, and mouseClicked If you don’t want to implement some methods, you must have empty bodies of code for those methods Difficult to read the code, and maintain it !

Adapter Classes (2 of 2) Adapter classes help you avoid implementing empty method bodies The Java API includes an adapter class for each listener interface with more than one method. For example, the MouseAdapter class implements the MouseListener interface. An adapter class implements empty versions of all its interface's methods. Instead of implementing the listener interface, one can extend the corresponding adapter class and implement only the necessary method(s)

Anonymous inner class Sometimes, anonymous inner classes are used for event handling The general syntax for an anonymous inner class is: … b.addActionListener( new ActionListener(){ public void actionPerformed(ActionEvent ae){ System.out.println(“Button Clicked”); } }); … Declaring a class without a name which implements the ActionListener interface. The class declaration and instantiation is happening in the same step new (){ //method implementations }

Applets A Java class that can be embedded within a HTML page and downloaded and executed by a web browser An applet can be used to enhance the features of a Web Page The applet runs on JVM embedded in the browser

Applets Applet is a container class that is available in java.applet package We can create our own Applets by extending the Applet class

Lifecycle of an Applet (1 of 3) Applet Working Applet Displayed Idle State Applet Destroyed start( ) paint( ) stop( ) destroy( ) Draw/Redraw Applet Destroy Applet init( ) Start State

Lifecycle of an Applet (2 of 3) The browser calls the init method of the Applet, followed by the start method If the users leaves the web page, the browser will call the stop method of the Applet

Lifecycle of an Applet (3 of 3) If the user comes back to the page the browser will call the start method of the Applet again The destroy method is called just before the applet is finally unloaded from memory

Execution of an applet (1 of 2) Compile the applet program, say MyApplet.java, to get the.class file, MyApplet.class Embed the tags in a html file as follows –Code, width and height are mandatory attributes for the applet tag Use any java compatible browser to run the html file

Execution of an applet (2 of 2) For testing an Applet, we can use the appletviewer tool which is in \bin directory Type the applet tag alone in a file, say applet.txt, and type the following command –appletviewer applet.txt Instead of creating a separate file, the applet tag can be included as a comment in MyApplet.java file itself. The command will now be as follows –appletviewer MyApplet.java The appletviewer tool will open a window to display the Applet

Parameter passing to an applet Parameters are passed into an applet as name-value pair using the param tag within applet tag – The values are passed as String values getParameter (String parameterName) returns the value

Summary Abstract Window Toolkit basics Abstract Window Toolkit controls Layout Managers Event Handling Mechanisms Event Model APIs to handle events Applets

Thank You!