Graphic User Interfaces

Graphic User Interfaces

Part 1

Typical GUIScreen 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 HierarchyObject

ComponentContainer

JComponentJButtonJTextComponent

JTextFieldJLabelJPanel

WindowDialog

JDialogFrame

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)

JFrameTitle 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 clickedsetDefaultCloseOperation(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 JPanelContainer 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 labelFont fancyFont =

new Font("Serif", Font.ITALIC, 32);

// Associate the font with the labelfancyLabel.setFont(fancyFont);

// Place the Icon in the labelfancyLabel.setIcon(tigerIcon);

// Align the text to the right of the IconfancyLabel.setHorizontalAlignment(JLabel.RIGHT);

Font name,Style, size

Lab First GUI

Part 1

Part 2

Part 3