Graphic User Interfaces

1. Graphic User Interfaces Part 1

2. 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?

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

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

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

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

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

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

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

10. 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)

11. JFrame Space for Menu Bar Title Bar Content Pane Border

12. 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?

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

14. 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…

15. 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(); JButtonmyButton = new JButton(“Save”); pane.add(myButton); • Components should grouped in separate containers (JPanels) on another container JPanelbuttonPanel = new JPanel();buttonPanel.add(saveButton);buttonPanel.add(cancelButton); pane.add(buttonPanel)

16. 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();JButtonmyButton = new JButton(“Save”);pane.add(myButton); • … • return pane; • } setContentPane() Is a method in Jframe class

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

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

19. 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);

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

21. 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”));

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

23. 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’);

24. 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”

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

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

27. Lab First GUI

28. Part 1

29. Part 2

30. Part 3