Creating User Interfaces Event-Driven Programming

Frequently used GUI components

Borders You can set a border on any object of the JComponent class. Swing has several types of borders. To create a titled border, use new TitledBorder(String title) To create a line border, use new LineBorder(Color color, int width) For example: JPanel panel = new JPanel(); TitleBorder t = new TitleBorder(“MyPanel”); panel.setBorder(t);

TitledBorder example You can change the it’s properties –Change Title color using setTitleColor(Color); –Change Title font using setTitleFont(Font);

LineBorder example You can Create it using: –LineBorder(Color); –LineBorder(Color, thickness); –LineBorder(Color, thickness, rounded);

Buttons A button is a component that triggers an action event when clicked. Swing provides regular buttons, toggle buttons, check box buttons, and radio buttons. The common features of these buttons are represented in: –javax.swing.AbstractButton.

JButton JButton inherits AbstractButton and provides several constructors to create buttons.

JButton Properties text Icon mnemonic horizontalAlignment verticalAlignment horizontalTextPosition verticalTextPosition iconTextGap

Icons An icon is a fixed-size picture; typically it is small and used to decorate components. To create an image, use its concrete class javax.swing.ImageIcon For example: ImageIcon icon = new ImageIcon("photo.gif");

JCheckBox

JRadioButton Radio buttons are variations of check boxes. They are often used in the group, where only one button is checked at a time.

Grouping Radio Buttons ButtonGroup btg = new ButtonGroup(); btg.add(jrb1); btg.add(jrb2);

JLabel A label is a display area for a short text, an image, or both.

Using Labels // Create an image icon from image file ImageIcon icon = new ImageIcon("image/grapes.gif"); // Create a label with text, an icon, // with centered horizontal alignment JLabel jlbl = new JLabel("Grapes", icon, SwingConstants.CENTER); // Set label's text alignment and gap between text and icon jlbl.setHorizontalTextPosition(SwingConstants.CENTER ); jlbl.setVerticalTextPosition(SwingConstants.BOTTOM); jlbl.setIconTextGap(5);

JTextField A text field is an input area where the user can type in characters. Text fields are useful in that they enable the user to enter in variable data (such as a name or a description).

JTextArea If you want to let the user enter multiple lines of text, you cannot use text fields unless you create several of them. The solution is to use JTextArea, which enables the user to enter multiple lines of text.

JComboBox A combo box is a simple list of items from which the user can choose. It performs basically the same function as a list, but can get only one value.

JList A list is a component that performs basically the same function as a combo box, but it enables the user to choose a single value or multiple values.

21 Procedural vs. Event-Driven Programming Procedural programming is executed in procedural order. In event-driven programming, code is executed upon activation of events.

Event-Driven Programming code is executed upon activation of events. An event can be defined as a type of signal to the program that something has happened. The event is generated by external user actions such as mouse movements, mouse clicks, and keystrokes, or by the operating system, such as a timer.

Event-Driven Programming The component on which an event is fired or generated is called the source object or source component. For example, a button is the source object for a button-clicking action event.

Event Classes The root class of the event classes is java.util.EventObject.

Event Information An event object contains whatever properties are pertinent to the event. You can identify the source object of the event using : getSource() instance method in the EventObject class.

Selected User Actions User ActionSource ObjectEvent Type Generated Click a buttonJButtonActionEvent Press return on a text fieldJTextFieldActionEvent Select a new itemJComboBoxItemEvent, ActionEvent Select item(s)JListListSelectionEvent Click a check boxJCheckBoxItemEvent, ActionEvent Click a radio buttonJRadioButtonItemEvent, ActionEvent Select a menu itemJMenuItemActionEvent Move the scroll barJScrollBarAdjustmentEvent Window opened, closed, etc.WindowWindoEvent Component added or removed from the container ContainerContainerEvent Component moved, resized, etc. ComponentComponentEvent Component gained or lost focus ComponentFocusEvent Key released or pressedComponentKeyEvent Mouse pressed, released, clicked, etc. ComponentMouseEvent Mouse moved or draggedComponentMouseEvent

The Delegation Event Model Model used by Java to handle user interaction with GUI components Describes how your program can respond to user interaction Three important players  Event Source  Event Listener/Handler  Event Object

Event Source  GUI component that generates the event  Example: button Event Listener/Handler  Receives and handles events.  Contains business logic.  Example: displaying information useful to the user, computing a value. The Delegation Event Model

Event Object  Created when an event occurs (i.e., user interacts with a GUI component).  Contains all necessary information about the event that has occurred  Type of event that has occurred  Source of the event  Represented by an Event class The Delegation Event Model

A listener should be registered with a source Once registered, listener waits until an event occurs. When an event occurs –An event object created by the event source –Event object is fired by the event source to the registered listeners (method of event listener is called with an event object as a parameter). Once the listener receives an event object from the source –Deciphers the event. –Processes the event that occurred. Event Listener Registers to Event Source

Control Flow of Delegation Event Model

Steps for Creating GUI Applications with Event Handling 1.Create a GUI class –Describes and displays the appearance of your GUI application. 2.Create Event Listener class (a class implementing the appropriate listener interface) –Override all methods of the appropriate listener interface. –Describe in each method how you would like the event to be handled. –May give empty implementations for methods you don't need.

Steps for Creating GUI Applications with Event Handling 3.Register the listener object with the event source –The object is an instantiation of the listener class in step 2. –Use the add Listener method of the event source.

Selected Event Handlers

java.awt.event.ActionEvent

Handling Simple Action Events Example Write a program that displays two buttons OK and Cancel in the window. A message is displayed on the console to indicate which button is clicked and when a button is clicked.

MouseEvent

Handling Mouse Events Java provides two listener interfaces, MouseListener and MouseMotionListener, to handle mouse events. The MouseListener listens for actions such as when the mouse is pressed, released, entered, exited, or clicked. The MouseMotionListener listens for actions such as dragging or moving the mouse.

Handling Mouse Events

Example Moving Message Using Mouse Objective: Create a program to display a message in a panel. You can use the mouse to move the message. The message moves as the mouse drags and is always displayed at the mouse point.

Example Handling Complex Mouse Events Objective: Create a program for drawing using a mouse. Draw by dragging with the left mouse button pressed; erase by dragging with the right button pressed.

Handling Keyboard Events keyPressed(KeyEvent e) Called when a key is pressed. keyReleased(KeyEvent e) Called when a key is released. keyTyped(KeyEvent e) Called when a key is pressed and then released. To process a keyboard event, use the following handlers in the KeyListener interface:

The KeyEvent Class Methods: getKeyChar() method getKeyCode() method Keys: Home VK_HOME End VK_End Page Up VK_PGUP Page Down VK_PGDN etc...

The KeyEvent Class, cont.

Example Keyboard Events Demo Objective: Display a user-input character. The user can also move the character up, down, left, and right using the arrow keys.

Thank You