1. 1 G54PRG Programming Lecture 1 Amadeo Ascó Adam Moore 22 GUI Programming I

2. 2 Amadeo Ascó, Adam Moore Previously Threads – Thread class – Runnable interface – Priority

3. 3 Amadeo Ascó, Adam Moore Overview Hello World as GUI Layout Design Criteria In GUI Human Interface Concepts Requirements Use Cases Design GUI Java Foundation Classes

4. 4 Amadeo Ascó, Adam Moore Hello World as GUI 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 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

5. 5 Amadeo 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 GUI Maximize GUI Minimize GUI Logo of the application Application GUI data area Title

6. 6 Amadeo 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

7. 7 Amadeo Ascó, Adam Moore Human Interface Concepts Organize the users 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

8. 8 Amadeo 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

9. 9 Amadeo 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 task Add record View record Edit record Save record Delete record actor User Database actor

10. 10 Amadeo 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

11. 11 Amadeo 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

12. 12 Amadeo 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

13. 13 Amadeo 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 file system

14. 14 Amadeo 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

15. 15 Amadeo Ascó, Adam Moore Java Foundation Classes Pluggable Look-and-Feel Support void UIManager.setLookAndFeel(String nameOfLookAndFeel) String UIManager.getSystemLookAndFeelClassName() – Already some of them provided com.sun.java.swing.plaf.nimbus.NimbusLookAndFeel com.sun.java.swing.plaf.metal.MetalLookAndFeel – You can add you own ones NimbusLookAndFeel

16. 16 Amadeo 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