1

G54PRG ProgrammingLecture

1

Amadeo Ascó Adam Moore

22

GUI Programming I

2Amadeo Ascó , Adam Moore

Previously

• Threads– Thread class– Runnable interface– Priority

3Amadeo Ascó , Adam Moore

Overview

• Hello World as GUI• Layout Design• Criteria In GUI• Human Interface Concepts• Requirements• Use Cases• Design GUI• Java Foundation Classes

4Amadeo Ascó , Adam Moore

Hello World as GUIimport javax.swing.JFrame;import javax.swing.JLabel;

public class HelloWorldGUI extends JFrame { public static void main(String[] args) { new HelloWorldGUI(); } // main()

HelloWorldGUI() { super("Hello World"); // the title JLabel jlbHelloWorld = new JLabel(" Hello World!");

add(jlbHelloWorld); // add label to the GUI setSize(150, 80); // size of the window setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); setVisible(true); // show the GUI } // Constructor ()} // end class HelloWorldGUI

import javax.swing.JFrame;import javax.swing.JLabel;

public class HelloWorldGUI extends JFrame { public static void main(String[] args) { new HelloWorldGUI(); } // main()

HelloWorldGUI() { super("Hello World"); // the title JLabel jlbHelloWorld = new JLabel(" Hello World!");

add(jlbHelloWorld); // add label to the GUI setSize(150, 80); // size of the window setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); setVisible(true); // show the GUI } // Constructor ()} // end class HelloWorldGUI

5Amadeo Ascó , Adam Moore

Layout Design

• Layout design concerns with the presentation of information in a clear and concise manner

• Users should be able to process presented information with little effort– Use already in use layout or similar

Exit GUIMaximize GUIMinimize GUI

Logo of the application

Application GUI data area

Title

6Amadeo Ascó , Adam Moore

Criteria In GUI

• All data is presented in the minimum amount of space without been cluttered or disorganized

• User been able to locate desired information quickly

• Scale to fit more or less data

7Amadeo Ascó , Adam Moore

Human Interface Concepts

• Organize the user’s flow of events when attempting to complete a task

• Human interface decisions determine how users interact with the system

• Abstracting the actual functions of the system away from the user

• Approach the application from the point of view of the user

8Amadeo Ascó , Adam Moore

Requirements

• Reread the requirements for the application• Look for certain interaction information

– Who are the primary users of the system?– What do users employ the system for?

• What tasks must it allow the users to execute?

– What actions are required by the system in order to complete these tasks?

• These means to create a set of simple use cases

9Amadeo Ascó , Adam Moore

Use Cases

• Use cases spell out– How all the actors interact with the system– What the system will allow the actors to execute

• Specify steps required to complete a taskAdd record

View record

Edit record

Save record

Delete recordactor

UserDatabase

actor

10Amadeo Ascó , Adam Moore

Use Cases

• Fill in the details of each action– Break the steps further into sub-steps– Add extra information, i.e. requirement to

proceed with the step

• Plan interface that requires the minimum number of steps for user to complete task

11Amadeo Ascó , Adam Moore

Sample• Possible sub-steps to shown Use Cases

– To Add a record first one has to be created and filled – maybe using the same code than Edit. Should we add a new action "New“ or called New instead of Add

– To View records they have to exist and be selected. • What happens if no records exist?

– To Edit a record the record has to exist and must be selected

– To Save a record the record has to exist, has to be selected and should have been changed

– To Delete a record the record has to exist and has to be selected before deleting it

12Amadeo Ascó , Adam Moore

Design GUI• Use components commonly used, e.g. menu bar

with menu items, popup menus, fast keys,...– Improve usability– Speed the learning process for users of your

application– Reduce implementation; most of the time they are

well defined and there are available with plenty of examples

• Minimise steps to complete operation– Do not compromise usability

13Amadeo Ascó , Adam Moore

Model-View-Controller Pattern

• MRV main propose is to separate responsibilities for the various tasks involved in the user interface (UI)

• Responsibilities– Interface to the system– Display of the data to the end user– Accepting input from the user, parsing and

processing it

• Allows to change the UI rapidly

GUI Process data

Process data

file system

14Amadeo Ascó , Adam Moore

Java Foundation Classes• JFC stands for Java Foundation Classes• An extension to the original Abstract Window

Toolkit (AWT) contained in java.awt and sub-packages

• Includes swing• Pluggable look and feel designs• Java Accessibility API• All implemented without native code

– Code that refers to the functions of a specific operating system or is compiled for a specific processor

15Amadeo Ascó , Adam Moore

Java Foundation Classes• Pluggable Look-and-Feel Support

void UIManager.setLookAndFeel(String nameOfLookAndFeel)String UIManager.getSystemLookAndFeelClassName()

– Already some of them providedcom.sun.java.swing.plaf.nimbus.NimbusLookAndFeel

com.sun.java.swing.plaf.metal.MetalLookAndFeel

– You can add you own ones

NimbusLookAndFeel

16Amadeo Ascó , Adam Moore

Swing

• Part of the Java SE platform• Provides a rich set of GUI component, also

called controls• Some controls offer sophisticated functionality

– Text fields provide formatted text input or password field behaviour

– You can increase their functionality by creating your own from an existing one

• Package for controls is javax.swing