1 / 30

Graphic User Interfaces

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?

Télécharger la présentation

Graphic User Interfaces

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.


Presentation Transcript

  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

More Related