Graphical User Interfaces (Part IV) Overview GUI Programming (Cont’d). Example 1: Creating Multi-layout GUIs with Tooltips. Example 2: Creating Menus with Mnemonics. Example 3: Event Handling with Menus and File Dialogs. Coming Next: Introduction to Threads and Concurrency. GUI Programming (Part IV) 12

GUI Programming (Cont’d) From the preceding lectures, it is clear that to design a GUI, we have to think carefully about: What Containers & Components are required in the application. What layout to use to arrange the Components in the Container(s). What actions the Components should perform. When developing non-trivial GUIs, it is necessary to think about these issues carefully before venturing into development. In Example 1 that follows we make use of JPanels to illustrate how multi-layout windows can be built. Multi-layout windows are pervasive in all interesting applications. For example in a graphics application one requires a multi-grid panel as part of the main graphics window in order to keep and make easily accessible the graphics toolbox items like brushes, ‘erasers’ etc. GUI Programming (Part IV)

GUI Programming (Part IV) The JPanel Container Can be used as a dedicated drawing area Receives mouse events Extended to create new components Combining Swing GUI and drawing in one window can lead to errors Fix problem by separating GUI and graphics GUI Programming (Part IV) 12

Example 1: Multi-Layout GUIs import javax.swing.*;import java.awt.*; class MultiLayout extends JFrame{ private JPanel westPanel = new JPanel(); private JPanel southPanel = new JPanel(); private JButton b1, b2, b3, b4; MultiLayout(){ Container cp = getContentPane(); cp.add("North", new JButton("North")); cp.add("East", new JButton("East")); cp.add("Center", new JButton("Center")); westPanel.setLayout(new GridLayout(3,2)); westPanel.add(new JButton("Grid 1")); westPanel.add(new JButton("Grid 2")); westPanel.add(new JButton("Grid 3")); westPanel.add(new JButton("Grid 4")); westPanel.add(new JButton("Grid 5")); cp.add("West", westPanel); southPanel.setLayout(new FlowLayout()); southPanel.add(b1=new JButton("Flow 1")); southPanel.add(b2=new JButton("Flow 2")); southPanel.add(b3=new JButton("Flow 3")); southPanel.add(b4=new JButton("Flow 4")); b1.setToolTipText("I'm a button labeled "+b1.getText()); cp.add("South", southPanel); setTitle("Multi-Layout GUI-building Sample"); setSize(400,400); show(); } public static void main(String args[]){ new MultiLayout(); }} GUI Programming (Part IV)

GUI Programming (Part IV) Menus Java provides several classes—JMenuBar, JMenu, JMenuItem, JCheckBoxMenuItem, and JRadioButtonMenuItem —to implement menus in a frame. A JFrame or JApplet can hold a menu bar to which the pull-down menus are attached. Menus consist of menu items that the user can select (or toggle on or off). Menu bars can be viewed as a structure to support menus. GUI Programming (Part IV) 12

GUI Programming (Part IV) Menus with Frames Menus Important part of GUIs Perform actions without cluttering GUI Attached to objects of classes that have method setJMenuBar JFrame and Japplet ActionEvents Classes used to define menus JMenuBar - container for menus, manages menu bar JMenuItem - manages menu items Menu items - GUI components inside a menu Can initiate an action or be a submenu Method isSelected GUI Programming (Part IV)

GUI Programming (Part IV) Menu Classes JMenu - manages menus Menus contain menu items, and are added to menu bars Can be added to other menus as submenus When clicked, expands to show list of menu items JCheckBoxMenuItem (extends JMenuItem) Manages menu items that can be toggled When selected, check appears to left of item JRadioButtonMenuItem (extends JMenuItem) When multiple JRadioButtonMenuItems are part of a group (ButtonGroup), only one can be selected at a time When selected, filled circle appears to left of item GUI Programming (Part IV)

GUI Programming (Part IV) Menu Classes (Cont’d) Mnemonics Quick access to menu items (File) Can be used with classes that have subclass javax.swing.AbstractButton Method setMnemonic() JMenu fileMenu = new JMenu("File") fileMenu.setMnemonic('F'); Press Alt + F to access menu Method setSelected(true) Of class AbstractButton Sets button/item to selected state addSeparator() Of class Jmenu Inserts separator line into menu GUI Programming (Part IV)

GUI Programming (Part IV) The JMenuBar Class A menu bar holds menus; the menu bar can only be added to a frame. Following is the code to create and add a JMenuBar to a frame: JFrame f = new JFrame(); f.setSize(300, 200); f.setVisible(true); JMenuBar mb = new JMenuBar(); f.setJMenuBar(mb); GUI Programming (Part IV) 12

GUI Programming (Part IV) The Menu Class You attach menus onto a JMenuBar. The following code creates two menus, File and Help, and adds them to the JMenuBar mb: JMenu fileMenu = new JMenu("File", false); JMenu helpMenu = new JMenu("Help", true); mb.add(fileMenu); mb.add(helpMenu); GUI Programming (Part IV) 12

GUI Programming (Part IV) The JMenuItem Class You add menu items on a menu. The following code adds menu items and item separators in menu fileMenu: fileMenu.add(new JMenuItem("new")); fileMenu.add(new JMenuItem("open")); fileMenu.add(new JMenuItem("-")); fileMenu.add(new JMenuItem("print")); fileMenu.add(new JMenuItem("exit")); GUI Programming (Part IV) 12

GUI Programming (Part IV) Submenus You can add submenus into menu items. The following code adds the submenus “Unix,” “NT,” and “Win95” into the menu item “Software.” JMenu softwareHelpSubMenu = new JMenu("Software"); JMenu hardwareHelpSubMenu = new JMenu("Hardware"); helpMenu.add(softwareHelpSubMenu); helpMenu.add(hardwareHelpSubMenu); softwareHelpSubMenu.add(new JMenuItem("Unix")); softwareHelpSubMenu.add(new JMenuItem("NT")); softwareHelpSubMenu.add(new JMenuItem("Win95")); GUI Programming (Part IV) 12

Example 2: Creating Menus with Mnemonics import javax.swing.*; class DemonstratingMenus extends JFrame { private JMenuBar menuBar = new JMenuBar(); private JMenu fileMenu = new JMenu("File"); private JMenuItem neW, opeN, closE, savE, prinT; private JMenuItem saveCurrent, saveAs, saveAll; DemonstratingMenus(String title){ super(title); setJMenuBar(menuBar); menuBar.add(fileMenu); fileMenu.setMnemonic('F'); fileMenu.add(neW = new JMenuItem ("New")); fileMenu.add(opeN = new JMenuItem ("Open")); opeN.setMnemonic('o'); fileMenu.add(savE = new JMenu ("Save")); savE.add(saveCurrent = new JMenuItem ("Save Current")); savE.add(saveAs = new JMenuItem ("Save As")); savE.add(saveAll = new JMenuItem ("Save All")); GUI Programming (Part IV)

Example 2: Creating Menus with Mnemonics (Cont’d) fileMenu.add(savE); fileMenu.add(prinT = new JCheckBoxMenuItem ("Print")); fileMenu.addSeparator(); fileMenu.add("Quit"); setSize(400,400); show(); } public static void main(String args[]){ new DemonstratingMenus("Demonstrating Menus using Swing Components."); GUI Programming (Part IV)

Example 3: Event Handling with Menus and FileDialogs import javax.swing.*; import java.awt.*; import java.awt.event.*; class HandlingMenuEvents extends JFrame { private JMenuBar menuBar = new JMenuBar(); private JMenu fileMenu = new JMenu("File"); private JMenuItem neW, opeN, closE, savE, prinT, quiT; private JMenuItem saveCurrent, saveAs, saveAll; private JTextField jtxf; GUI Programming (Part IV)

Example 3: Event Handling with Menus and FileDialogs (Cont’d) HandlingMenuEvents(String title) { super(title); setJMenuBar(menuBar); menuBar.add(fileMenu); fileMenu.setMnemonic('F'); fileMenu.add(neW = new JMenuItem ("New")); fileMenu.add(opeN = new JMenuItem ("Open")); opeN.setMnemonic('o'); fileMenu.add(savE = new JMenu ("Save")); savE.add(saveCurrent = new JMenuItem ("Save Current")); savE.add(saveAs = new JMenuItem ("Save As")); savE.add(saveAll = new JMenuItem ("Save All")); fileMenu.add(savE); fileMenu.add(prinT = new JCheckBoxMenuItem ("Print")); fileMenu.addSeparator(); fileMenu.add(quiT = new JMenuItem("Quit")); quiT.setMnemonic('q'); GUI Programming (Part IV)

Example 3: Event Handling with Menus and FileDialogs prinT.addActionListener( new ActionListener() { public void actionPerformed(ActionEvent e ) { JFrame fp = new JFrame("Printing Assistant"); JPanel f = new JPanel(); Container cp = fp.getContentPane(); cp.setLayout(new FlowLayout()); f.add(jtxf = new JTextField(23)); jtxf.setText("Sorry, no printer."); cp.add(f); fp.setSize(400,400); fp.show(); } }); opeN.addActionListener( new ActionListener() { public void actionPerformed( ActionEvent e ) { JFrame f = new JFrame(); FileDialog fd = new FileDialog(f, "Select File To Open."); fd.show(); quiT.addActionListener(new ActionListener(){ public void actionPerformed(ActionEvent ae){ System.exit(0); }}); setSize(400,400); show(); public static void main(String args[]){ new HandlingMenuEvents("Demonstrating Menus using Swing Components."); /* Java generates events when the user selects a menu item, presses a key, pushes a command buttom, etc. */ GUI Programming (Part IV)

Example 4: A Useful Exercise. Q. Write a Java application MultiplicationTutor which repeatedly generates simple multiplication questions that can be used by children for self-assisted learning. The GUI of this application consists of three text field components where the questions are displayed, where the user types his answer and where the application responds to the user’s answer (telling him whether he is right or wrong. If the user types a wrong answer, the response box should tell the user to try again and the question should not change. If the user types the correct answer, the response filed should display this and another random question should be generated immediately. Write the program so that the user can stop the exercise appropriately. The figure below gives a sample GUI for this application. GUI Programming (Part IV)