Part 1

• 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?

• 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

• Windows
• User interaction
– pressing buttons, choosing menu options
• Event driven programming

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 Components
– original GUI components
– tied directly to the local platforms GUI capabilities
– local platform determines the “look and feel”
– heavyweight components

• 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

• 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

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

• 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)

Space for Menu Bar
Content Pane
Title Bar
Border

• 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?

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

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

• 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)

• 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
}

• 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..

• 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);

• 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));

• 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
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”));
– use setJMenuBar(JMenuBar menuBar) to set up the menu in the content pane

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

• 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’);

• 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”

• 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

• 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);
Font name,
Style, size
// Align the text to the right of the Icon fancyLabel.setHorizontalAlignment(JLabel.RIGHT);