Transcript Intro to creating a Java GUI

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
Space for Menu Bar
Content Pane
Border
Title Bar
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);
…
setContentPane()
Is a method in
return pane;
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..
More GUI things that you can do.
– 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..
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
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
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);
Font name,
Style, size
// Place the Icon in the label
fancyLabel.setIcon(tigerIcon);
// Align the text to the right of the Icon
fancyLabel.setHorizontalAlignment(JLabel.RIGHT);
Lab First GUI
Part 1
Part 2
Part 3