Unit 091 Introduction to GUI Programming Introduction to User Interfaces Introduction to GUI Programming GUI Design Issues GUI Programming Issues Java GUI Library Evolution GUI Components and Containers Swing's Top-level Containers Learning Outcomes oExplain the motivation for, and usefulness of GUIs. oList and explain seven principles of good GUI design and their benefits. oDiscuss what GUI programming involves, and explain how Java's GUI library evolved.  Exercises

Unit 092 GUIs—Graphical User Interfaces In a text-based UI the commands are entered from the keyboard. In a console program, the system usually controls user actions. > Enter number of classes: 3 > Enter number of students: 15 > You have 45 students Most modern programs use a GUI (pronounced “gooey”): Graphical: Not just text or characters but windows, menus, buttons,.. User: Person using the program Interface: Way to interact with the program Graphical elements include: Window: Portion of screen that serves as a smaller screen within the screen Menu: List of alternatives offered to user Button: Looks like a button that can be pressed Text fields: The user can write something in

Unit 093 A New Approach to Programming Previous Style of Programming: List of instructions performed in order Next thing to happen is next thing in list Program performed by one agent— the computer Event-Driven Style of Programming: Objects that can fire events and objects that react to events Next thing to happen depends on next event Program is interaction between user and computer

Unit 094 Event-Driven Programming Programs with GUIs often use Event-Driven Programming A user interacts with the application by: –Clicking on a button to choose a program option. –Making a choice from a menu. –Entering text in a text field. –Dragging a scroll bar. –Clicking on a window's close button. Program waits for events to occur and then responds Firing an event: When an object generates an event Listener: Object that waits for events to occur Event handler: Method that responds to an event

Unit 095 Principles of GUI Design Give time for GUI design and integration. Have a simple and clear layout. Use graphics objects and terminology consistently. Be functionally intuitive and visually attractive. Provide visual and audible feedback. Be responsive. Be flexible and customizable.

Unit 096 Benefits of Good GUIs Facilitate higher user productivity and lower long-term costs. Improve integrity of underlying application. Improve the reliability and safety of mission-critical applications. Improve user confidence. Make software more marketable.

Unit 097 GUI Programming Issues What do I need to know to write good GUI applications? Writing GUI applications requires knowledge of: 1.Graphics 2.Media 3.Windows 4.Events 5.Multithreading

Unit 098 Three Parts of a GUI Program A GUI program consists of three types of software: 1.Graphical Components that make up the GUI. 2.Listener methods that receive the events and respond to them. 3.Application methods that do useful work for the user. In Java, you can get the GUI components you want by asking for them. Most of the work has already been done and is contained in the Swing/AWT packages. Swing/AWT contains windows, frames, buttons, menus and other components. You get graphical components by constructing Swing/AWT objects. Listener methods and application methods are Java methods that you write or invoke from JDK. To write a GUI application, keep the three types software separated (while keeping the big picture in mind).

Unit 099 Building a GUI Create: Frame/JFrame Panel/JPanel Components Listeners Add: Listeners into components Components into panel Panel into frame JPanel JButton Listener JFrame JLabel

Unit 0910 Using a GUI Component 1.Create it 2.Configure it 3.Add children (if container) 4.Add to parent (if not JFrame) 5.Add Listeners of events Order is importance

Unit 0911 Using a GUI Component 1.Create it Instantiate object: JButton b = new JButton(); 2.Configure it Methods: b.setText(“Press me”); 3.Add it panel.add(b); 4.Listen to it Events: Listeners Press me

Unit 0912 Application Code import javax.swing.*; class Hello { public static void main(String[] args){ JFrame f = new JFrame(“Hello World”); JPanel p = new JPanel(); JButton b = new JButton(“press me”); p.add(b);// add button to panel f.getContentPane().add(p); // add panel to frame f.show(); } press me

Unit 0913 Java GUI API Evolution Java provides classes representing UI items like windows, buttons, menus etc. The GUI toolkit in older versions of Java is called AWT. An enriched version the toolkit, Swing, was developed in later versions of Java. AWT and Swing are part of the Java Foundation Classes (JFC). Why was Swing developed in addition to AWT? Special library of classes that allows Java programs to have a windowing interface An improved version of older library called Abstract Window Toolkit (AWT). Standard part of all versions of Java 2 (JDK 1.2)

Unit 0914 Java GUI API Evolution (cont'd) AWT components: –Heavyweight components –Associated with native components called peers –Same behaviour, but platform-dependent look –Package java.awt By relying on native peers, AWT components are limited: Slow on some platforms. Portability problems. Swing components: –Lightweight components –Are rendered and controlled by the JVM. –Swing has more powerful options –Swing can be shipped with application as it is non-native. –Package javax.swing

Unit 0915 Swing is based on a composite design Top-Level Container –Example: JFrame –Holds all other swing components –Other options: JDialog and JApplet Intermediate Container –Example: JPanel –Used to control placement of GUI components –Acts as a middle person –Other options: JScrollPane, JTabbedPane, … Atomic Components –Example: JButton –Used for self-contained GUI components –Other options: JTextField, JTable, Swing Features and Concepts

Unit 0916 Containment hierarchy Top level containers: JFrame, JDialog, JApplet Basic controls: JButton, JComboBox, List, Menu, Slider, JTextField, JLabel, progress bar, tool tip Content pane: the main container in JApplet, JDialog, and JFrame Objects General purpose containers: Panel, scroll pane, split pane, tabbed pane, tool bar

Unit 0917 Review Exercises 1.Explain the advantages of graphics-based over text-based user interfaces. 2.What is a good and effective GUI? Why is it necessary to design GUI for all on-trivial applications? Explain.. 3.Explain the implications of good as well as badly designed GUIs. 4.What is JFC? What Swing? Why was the JFC enriched with Swing? 5.AWT components are said to be heavy weight while Swing components are said to be light weight. Explain what these notions mean. 6.Enumerate the major knowledge units that must be understood for developing effective GUI applications. Briefly explain each of these knowledge units.