Lecture 3 Graphical User Interfaces Enterprise Application Development

Lecture 3: Graphical User Interfaces Enterprise Application Development

QUIZ • Why multiple inheritance is not allowed in java? • Explain the concept of abstract classes with the help of 2 examples. • Why do we need data storage and access layer in enterprise application development? How we can secure our data? • Explain the concept of polymorphism with the help of example code.

Graphical User Interfaces Objectives - by the end of this lecture, you should be able to do the following: – write a simple graphical user interface in Java using Swing; – find out how to use components by browsing the Swing Tutorial and the Java API; – program listeners to respond to user generated events; – use layout managers to arrange components attractively in windows

Introduction • Up till now you have written programs that communicate with the end user through a text -based interface – Using System. out for output – Using Keyboard for input. • Java provides three sets of facilities for developing GUIs: – The Abstract Window Toolkit (AWT): package java. awt – Swing: package javax. swing – Java. Fx: package javafx. ? ?

Understanding events Text-based interface • Predetermined sequence of events • The program pauses execution when it expects input from the user and continues on the same set path after it receives the input Graphical interface • No set sequence of events • The user can do any number of things at any time (type in a text box, resize the window, press a button) • These responses are called events. • We say the program is event-driven.

Java Swing 1. Java Swing is a lightweight Graphical User Interface (GUI) toolkit that includes a rich set of widgets. It includes package lets you make GUI components for your Java applications, and It is platform independent. 2. The Swing library is built on top of the Java Abstract Widget Toolkit (AWT), an older, platform dependent GUI toolkit. You can use the Java GUI components like button, textbox, etc. from the library and do not have to create the components from scratch.

A first Swing application import javax. swing. *; public class First. GUI { public static void main(String[] args) { JFrame f = new JFrame(); f. set. Visible(true); } Class for drawing a } Displays the window on window and the screen enters the event loop. When you run this program, a tiny window appears: The close button does not work (have to press “Stop” in Ready)

Shutting down the application properly Need to add a single statement to program the close button import javax. swing. *; public class First. GUI { public static void main(String[] args) { JFrame f = new JFrame( ); f. set. Default. Close. Operation(JFrame. EXIT_ON_CLOSE); f. set. Visible(true); } } • To give the application a title, give the constructor a string: JFrame f = new JFrame( “My first GUI”);

Components and containers • A component is any GUI element, such as a window, button or label. • A container is a type of component that has the purpose of containing other components. • Types of containers: – Top-level containers: Every Swing program contains at least one top-level container (e. g. JFrame). Top-level containers cannot be added to other containers. – Intermediate containers: used to group components so that they can be handled as a single component (e. g JPanel, JTabbed. Pane). – Atomic components (basic controls): cannot contain other components (e. g JButton, JText. Field).

Examples of Atomic Components Often called widgets: • Label – used to put a label next to another component • Button – used to make the program “do something” • Checkbox component – used for yes/no, true/false response from user • Choice component – drop-down list • Text. Field – used to type single line of text • … etc

Adding a button to the application import javax. swing. *; public class First. GUI { public static void main(String[] args) { JFrame f = new JFrame( ); JButton button = new JButton("Press me!"); // create a button f. get. Content. Pane(). add(button); // add the button to the frame f. set. Default. Close. Operation(JFrame. EXIT_ON_CLOSE); f. pack( ); f. set. Visible(true); } }

Organising the code in a better way • As we start adding more components, the main method will become too large and messy. • A better way: – Create a class that extends JFrame – Put all components into the class (as data members) – Do the rest in the constructor import javax. swing. *; public class Simple. Frame extends JFrame { private JButton button = new JButton("Press me!"); public Simple. Frame( ) { get. Content. Pane( ). add(button); set. Default. Close. Operation(JFrame. EXIT_ON_CLOSE); pack(); } }

Creating a Simple. Frame object public class First. GUI { public static void main(String[] args) { Simple. Frame s = new Simple. Frame( ); s. set. Visible(true); } } • Simple. Frame extends JFrame, therefore s is also a JFrame object (and so we can call the set. Visible method). • In the Simple. Frame class: – Simple. Frame defines a specialisation of JFrame by adding an additional component. – To call methods of JFrame (such as get. Content. Pane or pack), we no longer need an object handle, since these methods are now inherited from JFrame).

Adding a label • To add a label to our application: – Create a background, which has both components on it – Add this background to our frame Simple. Frame : (content. Pane) JPanel (background) • In Swing, such a “background” is a component called a panel (JPanel). JLabel (label) • The diagram on the right JButton (exit) is called a component hierarchy (shows how the components fit together)

Modified code JLabel used for placing plain text on a GUI import javax. swing. *; public class Simple. Frame extends JFrame { private JButton button = new JButton("Press me!"); private JLabel label = new JLabel("Go on, press the button"); private JPanel background = new JPanel(); JPanel is an intermediate public Simple. Frame() container { background. add(button); // add button to background. add(label); // add label to background } } get. Content. Pane(). add(background); // add background to frame set. Default. Close. Operation(JFrame. EXIT_ON_CLOSE); pack();

Getting the button to do something • Currently, if the user clicks on our button, nothing happens. • We would like to change the program, so that the label changes when the button is clicked: • The code that responds to that event of the user clicking the mouse on our button is called the listener for that button. • We would therefore like to program the listener of the button to have the code: label. set. Text(" Ouch. . . that hurt! ");

import javax. swing. *; Code related to event handling import java. awt. event. *; public class Simple. Frame extends JFrame { private JButton button = new JButton("Press me!"); private JLabel label = new JLabel("Go on, press the button"); private JPanel background = new JPanel(); public Simple. Frame() { button. add. Action. Listener( new Action. Listener() { public void action. Performed(Action. Event e) { // code to be executed when button is pushed label. set. Text(“This is modified …. t! "); } }); background. add(button); background. add(label); get. Content. Pane(). add(background); set. Default. Close. Operation(JFrame. EXIT_ON_CLOSE); pack(); } }

Event Handling • Every time the user types a character or pushes a mouse button, an event occurs. Any object can be notified of the event. All it has to do is implement the appropriate interface and be registered as an event listener on the appropriate event source. : • Act that results in the event Listener type: • User clicks a button, presses Return while typing in a text field, or chooses a menu item Action. Listener • User closes a frame (main window) Window. Listener • User presses a mouse button while the cursor is over a component Mouse. Listener • User moves the mouse over a component Mouse. Motion. Listener • Component becomes visible Component. Listener • Component gets the keyboard focus Focus. Listener • Table or list selection changes List. Selection. Listener

JButton b = new JButton("push me"); b. add. Action. Listener(new Action. Listener() { @Override public void action. Performed(Action. Event e) { //your actions } }); New Button Event examples • JButton b = new JButton("push me"); b. add. Action. Listener(new Action. Listener() { @Override public void action. Performed(Action. Event e) { //your actions } });

Text. Field Event example

Panels • • Container that can hold other components “miniature frame” – no title bar or border Panels can contain other panels Each panel can have its own layout Top Level Component JFrame get. Content. Pane()

Panels • • Container that can hold other components “miniature frame” – no title bar or border Panels can contain other panels Each panel can have its own layout JPanel (background) One main panel get. Content. Pane. add()

Panels Container that can hold other components “miniature frame” – no title bar or border Panels can contain other panels Each panel can have its own layout JPanel • • JPanel More panels for organisation background. add()

Panels • • Container that can hold other components “miniature frame” – no title bar or border Panels can contain other panels Each panel can have its own layout B B JText. Area Atomic components

Arranging components • Layout managers are used to control the size and position of components in containers. • The Java platform provides a number of layout managers, including Border. Layout, Flow. Layout and Grid. Layout. • To use layout mangers, you have to import java. awt. *. • To use a particular layout manager, you use the set. Layout method.

import javax. swing. *; import java. awt. *; public class Test. Flow. Layout extends JFrame { private JButton button 1 = new JButton("One"); private JButton button 2 = new JButton("Two"); private JButton button 3 = new JButton("Three"); private JButton button 4 = new JButton("Four"); private JPanel background = new JPanel(); Flow. Layout manager: Buttons are positioned from left to right as they are added. If you resize the window, the buttons are not resized. public Test. Flow. Layout() { background. set. Layout(new Flow. Layout()); background. add(button 1); background. add(button 2); background. add(button 3); background. add(button 4); get. Content. Pane(). add(background); set. Default. Close. Operation(JFrame. EXIT_ON_CLOSE); pack(); } }

import javax. swing. *; import java. awt. *; public class Test. Border. Layout extends JFrame { private JButton button. N = new JButton("North"); private JButton button. S = new JButton("South"); private JButton button. E = new JButton("East"); private JButton button. W = new JButton("West"); private JButton button. C = new JButton("Center"); private JPanel background = new JPanel(); } Border. Layout manager: When we add components, we specify a particular position. Not suitable for buttons, but is useful for positioning panels of components. public Test. Border. Layout() { background. set. Layout(new Border. Layout()); background. add(button. N, Border. Layout. NORTH); background. add(button. S, Border. Layout. SOUTH); background. add(button. E, Border. Layout. EAST); background. add(button. W, Border. Layout. WEST); background. add(button. C, Border. Layout. CENTER); get. Content. Pane(). add(background); set. Default. Close. Operation(JFrame. EXIT_ON_CLOSE); pack(); }

How Border. Layout resizes The size of the buttons change to fill up the entire area of the window. Note: you do not have to fill areas in a Border. Layout

Java Grid. Bag. Layout It is the more sophisticated of all layouts. It aligns components by placing them within a grid of cells, allowing components to span more than one cell.

Java Layout Example

Continue….

Component Hierarchy JFrame : (content. Pane) JPanel (background) Flow. Layout Border. Layout JPanel (panel. One) JButton button 1 JButton button 2 JButton button 3 JPanel (panel. Two) JButton button 4 JButton button 5 JButton button 6 JButton button 7 JButton button 8

Review • Java provides three sets of facilities for developing GUIs: – The Abstract Window Toolkit (AWT): package java. awt – Swing: package javax. swing – Java. Fx: package javafx. ? ? • Components, containers • Layouts • Event handling