Graphic User Interfaces Part 1

Typical GUI Screen from Microsoft Word What GUI “components” can you see? –Menus? Buttons? Labels? What else? –Anything that appears on the screen was programmed carefully to be there.. What do you notice about the layout of the screen? –Where are the exit buttons? Where is the empty sheet? What happens when I resize? What things can happen when you use the mouse –Go right around the screen and think carefully? –How do you think this is handled programmatically?

GUIs.. A lot of things to do Components.. –What do I need? Buttons? Menus? Etc –Where should I put them? Layouts? –What should they “do” when I use the mouse? Event handling/ listeners –Java Swing supports all of this

GUI – what makes a Graphic User Interface Windows User interaction –pressing buttons, choosing menu options Event driven programming

GUIs Two sets of components are available for GUIs in Java awt components (abstract windowing toolkit) package is java.awt Swing components package is javax.swing You’ll see both in the Java API documentation…

awt awt Components –original GUI components –tied directly to the local platforms GUI capabilities –local platform determines the “look and feel” –heavyweight components

Swing Swing components –“lightweight components” –not tied by the local capabilities of the platform do not rely on the operating system to render themselves draw themselves using standard features of the Graphics object –can specify same “look and feel” across all platforms –have much richer functionality than awt components

GUI Classes Types of classes –graphics - drawing shapes and lines, selecting fonts, colours etc… –components – buttons, labels, textfields, etc are placed in containers (e.g. in a panel) –layout managers – used to arrange the components in a container –event handling – handling external events, e.g. pushing buttons, mouse moves, uses event handlers, listeners and adapters –image manipulation – incorporate images in a number of formats

Class Hierarchy Object Component Container JComponent JButton JTextComponent JTextField JLabel JPanel Window Dialog JDialog Frame JFrame JWindow

Creating a Window Your window should instantiate or extend one of the main Swing containers –JFrame (top level window with title & border) –JWindow (window – no title or system menu) –JDialog (typically takes input from user)  all basic window functionality is available (resizing, moving...) Add components to the window –buttons, textfields, lists, etc… for normal GUI controls –panels for grouping The positioning of the components in the container is determined by the layout manager (see later)

JFrame Title Bar Content Pane Space for Menu Bar Border

A code example for a simple frame See MyFrame. Java This sets up a “window” or frame, with a label and a text field Things to note A subclass of JFrame Setting up a menu bar.. Add a menu and a menu item Setting up content on the content pane..setContentPane() which accepts a container… What does the createContentPane() return?

Creating a Window public SimpleFrame extends JFrame{…} Set up window –setTitle(String s) [can use super(“title text”) instead] –setSize(int w, int h) [or pack() fits to controls on frame] –setLocation(int x, int y) –setVisible(boolean b) Indicate what to happen when close is clicked setDefaultCloseOperation(WindowConstants.DISPOSE_ON_CLOSE); –3 possible operations [hide, nothing, dispose] Stop here

Designing the Window JComponent Java classes that represent GUI Controls include –JLabel –Icons –JButton –JTextField and JTextArea –JScrollbar and JSlider –JCheckbox and JRadioButton –JList –and many others…

Adding components JComponents are placed in Containers Most useful/common container is JPanel An instance of the required control is instantiated and added to the JPanel Container pane = new JPanel(); JButton myButton = new JButton(“Save”); pane.add(myButton); Components should grouped in separate containers (JPanels) on another container JPanel buttonPanel = new JPanel(); buttonPanel.add(saveButton); buttonPanel.add(cancelButton); pane.add(buttonPanel)

Adding components* In a JFrame components are added to the content pane –Content pane is a Container setContentPane(createContentPane()); … /* Then have a method to populate the contentPane container with whatever will be in it..*/ private Container createContentPane(){ JPanel pane = new JPanel(); JButton myButton = new JButton(“Save”); pane.add(myButton); … return pane; } setContentPane() Is a method in Jframe class

More GUI things that you can do. There are all sort of visual features that help the user when they are using a GUI to find what they want..e.g. –Tool tips –Borders (e.g. to help highlight a button) –Menus, and their various menu items –Fast keys (mneumics) on key itme –accelerator keys on menu items –Icons on things (e.g. picture on a button) –Fonts..

–Tool tips –Borders (e.g. to help highlight a button) –Menus, and their various menu items –Fast keys (mneumics) on key itme –accelerator keys on menu items –Icons on things (e.g. picture on a button) –Fonts.. * These ALL exist already in the Java API – as classes (and interfaces) - you just have to find them. * Illustrated for reference in following slides – you have to USE them to get familiar.. More GUI things that you can do.

Tooltips A tooltip is a context sensitive text string that is displayed in a popup window when the mouse rests over an object JButton myButton = new JButton(“Save”); myButton.setToolTipText(“Click this to save”); pane.add(myButton);

Borders javax.swing.Border package consists of several classes to draw borders around components b = new JButton ("ColorizedEtched"); b.setBorder (new EtchedBorder (Color.red, Color.green));

Menus There are 3 main classes that create menus –JMenuBar : creates the menu toolbar –JMenu : creates the dropdown menu on the menu bar –JMenuItem : creates the menu item on the menu – use setJMenuBar(JMenuBar menuBar) to set up the menu in the content pane JMenuBar bar = new JMenuBar(); JMenu fileMenu = new JMenu ("File"); bar.add(fileMenu); fileMenu.add (new JMenuItem ("New")); fileMenu.add (new JMenuItem (“Open")); fileMenu.addSeparator(); fileMenu.add (new JMenuItem (“Close”));

Using Menus Different kinds of menu item –Icon(JMenuItem) –Text and Icon (JMenuItem) –Radio Buttons(JRadioButtonMenuItem) Group in ButtonGroup() –Check boxes(JCheckBoxMenuItem) Submenu –add JMenu to a JMenu

Menu Shortcuts Mnemonics – underlines a character on the menu (to help navigate the menu in an alternative way – e.g. accessibility) Use the constructor of the menu item OR Use the setMnemonic method. Use the KeyEvent constant or the actual constant itself –menu.setMnemonic(KeyEvent.VK_N); –menuItem.setMnemonic(‘N’);

Menu Shortcuts Accelerator Keys Used to bypass navigating the menu to directly choose a menu item Use the setAccelerator method Must use a KeyStroke object – which combines a key and a modifier mask –menuItem.setAccelerator (KeyStroke.getKeyStroke( KeyEvent.VK_C, ActionEvent.CTRL_MASK)); Control key “C”

Icons Used to describe fixed size pictures Icons are typically embedded in a JComponent (e.g. JButton or JMenuItem) –not really a “component” as such… used with other components ImageIcon class is an implementation of Icon that creates an Icon from an image (e.g..gif file or URL) Icon myIcon = new ImageIcon(“myPicture.gif”); Using an Icon: JButton myButton = new JButton(“My Button”, myIcon); file.add(new JMenuItem(“menu item”, myIcon); –setHorizontalTextPosition(…) and setVerticalTextPosition positions the text in different area around the icon

Fonts Use Font class to set the font for a component… JLabel fancyLabel = new JLabel("Fancy Big Label"); // Instantiate a Font object to use for the label Font fancyFont = new Font("Serif", Font.ITALIC, 32); // Associate the font with the label fancyLabel.setFont(fancyFont); // Place the Icon in the label fancyLabel.setIcon(tigerIcon); // Align the text to the right of the Icon fancyLabel.setHorizontalAlignment(JLabel.RIGHT); Font name, Style, size

Lab First GUI

Part 1

Part 2

Part 3