1CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. Lecture 15: Menus, Toolbars, and Text

CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.1 Menus A great GUI development! (Apple Lisa) Fit lots of functionality into a small space – requires overlapping & restoring of graphics Have become more standardized, more hierarchical, & just plain bigger

CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.1 Menus Menu bars – Use menu titles that make it easy for users to determine which menu contains the items of interest to them. e.g., “Format” typically contains commands that enable users to change the formatting of docs – Use a single word for each menu title. – Be sure to include mnemonics for every menu title in your menu bar. – Do not display menu bars in secondary windows. – For applets that runs in the user's current browser window, do not display your own menu bar in the applet.

CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.1 Menus Menu operation – (1) To post a menu (that is, to display it and have it stay open until the next click), users click the menu title. Users can then move the pointer over other menu titles to view other menus. – (2) To pull down a menu, users press the mouse button when the pointer is over the menu title. The menu title is highlighted, and the menu drops down. When users choose a command and release the mouse button, the menu closes. – Of course, Swing already handles this for you

CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.1 Submenus – sometimes, can help shorten or organize menus – Because many people (especially novice users, children, and older people) find submenus difficult to use, minimize the use of submenus. When possible, avoid using submenus at all. If you want to present a large or complex set of choices, display them in a dialog box. Menus

CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.1 Menus Menu items – Make your menu items brief — typically verb phrases (e.g., “Align Left”) or nouns (e.g., “Font”). – Never give a menu item the same name as its menu title. e.g., an “Edit” menu should not contain an “Edit” menu item – Use headline capitalization for menu items. – Include mnemonics for all menu items.

CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.1 Menus Menu items (cont.) – Offer keyboard shortcuts for frequently used menu items. – Use the same keyboard shortcut if a menu item appears in multiple menus. e.g., if a Cut item appears in a contextual menu as well as in a drop-down Edit menu, use Ctrl-X for both – Use the same mnemonic if a menu item appears in multiple menus. e.g., if a Copy item appears in a contextual menu as well as in a drop- down Edit menu, use the ‘C’ mnemonic for both

CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.1 Menus Menu items (cont.) – If a menu item does not fully specify a command and users need a dialog box to finish the specification, use an ellipsis (“...”) after the menu item. e.g., after choosing “Save As...”, users are presented with a file chooser to specify a file name and location – Do not use an ellipsis mark simply to indicate that a secondary or utility window will appear. e.g., choosing “Preferences” displays a dialog box — however, because that display is the entire effect of the command, “Preferences” is not followed by an ellipsis

CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.1 Separators – Use separators to group similar menu items in a way that helps users find items and better understand their range of choices. – Users can never choose a separator. – While separators serve important functions on menus, avoid using them elsewhere in your application. Instead, use blank space or an occasional titled border to delineate areas in dialog boxes or other components. Menus

CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.1 Menus Menu item graphics – Provide menu item graphics when there are corresponding toolbar button graphics in your application. The graphics help users associate the toolbar button with the corresponding menu command.

CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.1 Checkbox menu items – Use checkbox menu items with restraint. If users must set >2 related attributes, place the checkboxes in a dialog box (or provide a utility window or toolbar buttons for the attributes). – Use checkbox menu items instead of toggle menu items (e.g., “Italics On” and “Italics Off”) to indicate choices you can turn on or off. Toggle menu items confuse users — it is unclear if the commands are telling users the current state of the selected object, or the state they can change the object to by choosing the menu item. Menus

CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.1 Menus Radio button menu items – typically used for multiple values, except simple toggle on/off – To indicate that the radio button items are part of a set, group them and use separators to separate them from other menu items.

CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.1 File Menu – Place commands that apply to the document or the main object (or the application as a whole) in the File menu. – If your application manipulates “non-file” objects, give the File menu a different name. e.g., “Project”, “Mailbox” – When the Close item dismisses the active window, close any dependent windows at the same time. – Provide an Exit item, which closes all associated windows and terminates the application. Be sure to use Exit, not Quit! (by convention) Common menus

CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.1 Common menus Edit Menu – Place commands that modify the contents of documents or other data in the Edit menu.

CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.1 Common menus Format Menu – Place commands that change the format of objects, usually text, in the Format menu.

CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.1 View Menu – Place commands that change the view of the data in the View menu. – Ensure that commands in the View menu alter only the view/presentation of the underlying data without changing the data directly. Commons menus

CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.1 Help Menu – Place access to online information about the features of the application in the Help menu. – Include “About ” as the last item and place a separator before the item. “About ” should display a window with the product name, version number, company logo, product logo, legal notices, and names of contributors. Common menus

CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.1 Common menus Menu Bar – If your application needs the commonly used menus, place the menu titles in this order: File, Edit, Format, View, and Help. – If needed, insert other menus between the View and Help menus (and sometimes between Edit and View, as appropriate).

CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.1 Swing Menu Components Within the component hierarchy, can contain several types of components

CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.1 JMenuBar () JMenu add (JMenu) void setJMenuBar(JMenuBar) JMenuBar getJMenuBar() Menu Bar Represents the bar of top-level items Creating a menu bar Setting the bar in a frame, applet, etc.

CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.1 JMenu () JMenu (String) JMenuItem add (JMenuItem) JMenuItem add (String) void addSeparator () JMenuItem insert (JMenuItem, int) void insert (String, int) void insertSeparator(int) Menu Any item — in a menu bar or menu — that displays more options Creating the menu Adding items (options) to the menu

CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.1 JMenuItem() JMenuItem(S) JMenuItem(I) JMenuItem(S,I) JCheckBoxMenuItem() JCheckBoxMenuItem(S) JCheckBoxMenuItem(I) JCheckBoxMenuItem(S,I) JRadioButtonMenuItem() JRadioButtonMenuItem(S) JRadioButtonMenuItem(I) JRadioButtonMenuItem(S,I) Menu Items Terminal components of the menu, with actions associated with them Creating menu items (w/ Strings, Icons)

CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.1 Menu Items How do you handle menu item events? (this is, when the item is selected) Remember, menu items are buttons — treat them that way! So then… – JMenuItem --> action listener – JRadioButtonMenuItem --> action listener – JCheckBoxMenuItem --> item listener

CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.1 menuBar = new JMenuBar(); setJMenuBar(menuBar); menu = new JMenu("A Menu"); menu.setMnemonic(KeyEvent.VK_A); menu.getAccessibleContext().setAccessibleDescription( "The only menu in this program that has menu items"); menuBar.add(menu); menuItem = new JMenuItem("A text-only menu item", KeyEvent.VK_T); menuItem.setAccelerator(KeyStroke.getKeyStroke( KeyEvent.VK_1, ActionEvent.ALT_MASK)); menuItem.getAccessibleContext().setAccessibleDescription( "This doesn't really do anything"); menu.add(menuItem); menuItem = new JMenuItem("Both text and icon", new ImageIcon("images/middle.gif")); menuItem.setMnemonic(KeyEvent.VK_B); menu.add(menuItem); create menu bar create menu, with “A” mnemonic more menu items … MenuDemo.java

CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.1 menu.addSeparator(); ButtonGroup group = new ButtonGroup(); rbMenuItem = new JRadioButtonMenuItem ("A radio button menu item"); rbMenuItem.setSelected(true); rbMenuItem.setMnemonic(KeyEvent.VK_R); group.add(rbMenuItem); menu.add(rbMenuItem); rbMenuItem = new JRadioButtonMenuItem("Another one"); rbMenuItem.setMnemonic(KeyEvent.VK_O); group.add(rbMenuItem); menu.add(rbMenuItem); menu.addSeparator(); cbMenuItem = new JCheckBoxMenuItem ("A check box menu item"); cbMenuItem.setMnemonic(KeyEvent.VK_C); menu.add(cbMenuItem); add separator create radio button menu items w/ button group create check box menu items MenuDemo.java

CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.1 submenu = new JMenu("A submenu"); submenu.setMnemonic(KeyEvent.VK_S); menuItem = new JMenuItem("An item in the submenu"); menuItem.setAccelerator(KeyStroke.getKeyStroke( KeyEvent.VK_2, ActionEvent.ALT_MASK)); submenu.add(menuItem); menuItem = new JMenuItem("Another item"); submenu.add(menuItem); menu.add(submenu); menu = new JMenu("Another Menu"); menu.setMnemonic(KeyEvent.VK_N); menu.getAccessibleContext().setAccessibleDescription( "This menu does nothing"); menuBar.add(menu); add submenu add items to submenu add second menu in bar (no items!) MenuDemo.java

CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.1 Tips – Ensure that all features presented in contextual menus are also available in more visible and accessible places, such as drop-down menus. Users might not know contextual menus are available, especially if you do not use contextual menus consistently throughout your application. – Display keyboard shortcuts and mnemonics in contextual menus that are consistent with their usage in any corresponding drop-down menus. Contextual (or pop-up) menus

CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.1 Contextual (or pop-up) menus Tips (cont.) – If no object is selected when a contextual menu is displayed, select the object under the pointer and display the contextual menu appropriate to that object. e.g., if the object under the pointer is text, display the contextual menu with editing commands – If the pointer is over an existing selection at the time the user opens the contextual menu, display the menu that is associated with that selection. – If the user opens a contextual menu when the pointer is over an area that cannot be selected (e.g., container background), remove any existing selection and display the contextual menu for the container.

CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.1 //...where instance variables are declared: JPopupMenu popup; //...where the GUI is constructed, create the popup menu. popup = new JPopupMenu(); menuItem = new JMenuItem("A popup menu item"); menuItem.addActionListener(this); popup.add(menuItem); menuItem = new JMenuItem("Another popup menu item"); menuItem.addActionListener(this); popup.add(menuItem); MouseListener popupListener = new PopupListener(); output.addMouseListener(popupListener); menuBar.addMouseListener(popupListener);... class PopupListener extends MouseAdapter { public void mousePressed(MouseEvent e) { maybeShowPopup(e); } public void mouseReleased(MouseEvent e) { maybeShowPopup(e); } private void maybeShowPopup(MouseEvent e) { if (e.isPopupTrigger()) { popup.show(e.getComponent(), e.getX(), e.getY()); } Swing contextual menus

CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.1 Toolbars Provide quick & easy access to functions – often implement same functions as menus – often are buttons, but don’t have to be – often have iconic representations Flexible layout and positioning – attached vs. floating

CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.1 Toolbars General tips – Include commonly used menu items as buttons (or other components) in your toolbar. – Even if your window has a toolbar, make all toolbar commands accessible from menus. – Be sure to provide tool tips for all toolbar buttons. – Consider providing text on toolbar buttons as a user option. This makes the meaning of the button clear to new users, and enables low-vision users to use large fonts.

CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.1 Toolbars General tips – Because toolbars can be difficult for users with motor impairments and are not always regarded as a good use of space, provide a way to hide each toolbar in your application. – Provide large and small graphics (e.g., 24 x 24 and 16 x 16 pixels) in your application and enable users to select the large graphics in all parts of the application, including the toolbars.

CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.1 Toolbars Draggable toolbars

CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.1 Toolbars Toolbar buttons – Use button graphics that are either 16 x 16 or 24 x 24 pixels (but not both in the same toolbar), depending on the space available in your application. – Provide optional text-only toolbar buttons to enable viewing by low-vision users. – If you use text on the toolbar buttons, provide a user setting to display only the graphics. Using graphics only, you can conserve space and display more commands and settings in the toolbar. – Sometimes, to create functional groupings of toolbar buttons, provide a separate toolbar for each. however, often not needed and/or not practical

CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.1 Toolbar tool tips – Ensure that the keyboard shortcuts for toolbar buttons match the keyboard shortcuts for the corresponding menu items. – Attach tool tips to all toolbar components that do not include text identifiers. interesting: tips generally use an onset of 250 ms and stay on for 15 seconds – If your application does not have menus, attach tool tips to the toolbar buttons in order to display keyboard shortcuts. Toolbars

CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.1 Construct JToolbar Create panel with BorderLayout Add main panel to center, toolbar to one of outside areas JToolBar toolBar = new JToolBar(); button = new JButton(new ImageIcon("images/left.gif")); toolBar.add(button); button = new JButton(new ImageIcon("images/middle.gif")); toolBar.add(button);... contentPane.setLayout(new BorderLayout()); contentPane.add(toolBar, BorderLayout.NORTH); contentPane.add(scrollPane, BorderLayout.CENTER); Swing toolbars

CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.1 Swing handles the rest! – user can drag toolbar to other BorderLayout area – user can drag toolbar out to create floating bar toolBar.setFloatable (true); Swing toolbars

CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.1 Toolbars with shared actions Swing Action class – define Action, assign to multiple components e.g., assign “Paste” to menu item and toolbar button – features of an Action text and icon action listener various other associated states – why bother with an Action? single action listener for all components centralized text, icon centralized “enabled” state, tool tip, etc.

CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.1 leftAction = new AbstractAction("Go left", new ImageIcon("images/left.gif")) { public void actionPerformed(ActionEvent e) { displayResult("Action for first button/menu item", e); } }; button = toolBar.add (leftAction); button.setText ("");// an icon-only button button.setToolTipText ("This is the left button"); menuItem = mainMenu.add (leftAction); menuItem.setIcon (null);// arbitrarily, no icon in menu … leftAction.setEnabled (selected); Toolbars with shared actions Action example

CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.1 Text components GUIs may be graphical, but TEXT still forms the core of many interactions – reading text: help manuals, web pages, … – writing text: word processing, , … Some text comes in short bursts, some comes in long passages

CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.1 Label basics – can be read-only text, graphics, or both – serve two functions in an application to identify components and enable navigation to components that don't have their own text strings to communicate status and other information Labels that identify controls – Keep label text brief, and use terminology that is familiar to users. – Use headline capitalization in the label text and place a colon at the end of the text. Labels

CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.1 Labels that communicate status – Use sentence capitalization in the text of a label that communicates status. (Use a period only when text is a complete sentence.) Available vs. unavailable labels – Make a label unavailable when the component it describes is unavailable. Labels

CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.1 Swing text components Text controls – limited amount of information, then action (?) Plain text areas – unformatted text of unlimited length Styled text areas – display, edit text of many styles

CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.1 Text component components What does a text component consist of? – model / document : stores textual content – view : displays text – controller / “editor kit” : implements editing capabilities for read/write – keymap : binds keys to actions – support for undo/redo, carets

CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.1 Text model / document Text components = View Document = Model The document... – contains text in logical structure (paragraphs, styles, etc.) – provides low-level support for editing text with insert and remove – notifies document & undo listeners of changes – manages position of focus (e.g., cursor) – allows retrieval of text information / properties

CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.1 Text keymaps Associate keys with actions – classes: Keystroke --> Action – e.g., “Cmd-C” --> “copy” By default, text components use JTextComponent.DEFAULT_KEYMAP

CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.1 Split panes Two related panes, limited screen area – often, one pane for selecting, second pane for viewing selection – often, both panes are scroll panes

CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.1 splitPane = new JSplitPane(JSplitPane.HORIZONTAL_SPLIT, listScrollPane, pictureScrollPane); splitPane.setOneTouchExpandable(true); splitPane.setDividerLocation(150); (Be afraid. Be very afraid.) JSplitPane Example

CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.1 (Ok, better.) Split pane nesting Can create hierarchical split panes, just like all panels

CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.1 Tabbed panes Panes that share the same space – panes components appear, disappear with selection Each pane has a logical grouping of functions – lots of functions – small space

CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.1 ImageIcon icon = new ImageIcon("images/middle.gif"); JTabbedPane tabbedPane = new JTabbedPane(); Component panel1 = makeTextPanel("Blah"); tabbedPane.addTab("One", icon, panel1, "Does nothing"); tabbedPane.setSelectedIndex(0); Component panel2 = makeTextPanel("Blah blah"); tabbedPane.addTab("Two", icon, panel2, "Does twice as much nothing");... JTabbedPane Example Similar in functionality to card layout