Creating GUIs in Java using Swing Medialogy, Semester 7, 2010 Aalborg University, Aalborg David Meredith.

Slides:



Advertisements
Similar presentations
Introduction to Java 2 Programming
Advertisements

Graphical User Interfaces (Part IV)
Graphic User Interfaces Layout Managers Event Handling.
Java Swing Recitation – 11/(20,21)/2008 CS 180 Department of Computer Science, Purdue University.
Understanding SWING Architecture CS 4170 UI Design Hrvoje Benko Oct. 9, 2001.
© The McGraw-Hill Companies, 2006 Chapter 18 Advanced graphics programming.
1 Event Driven Programming with Graphical User Interfaces (GUIs) A Crash Course © Rick Mercer.
CS102--Object Oriented Programming Lecture 19: – The Swing Package (II) Copyright © 2008 Xiaoyan Li.
©The McGraw-Hill Companies, Inc. Permission required for reproduction or display. 4 th Ed Chapter Chapter 14 GUI and Event-Driven Programming.
1 GUI Elements in Java Nelson Padua-Perez Chau-Wen Tseng Department of Computer Science University of Maryland, College Park.
1 CMSC 132: Object-Oriented Programming II Nelson Padua-Perez William Pugh Department of Computer Science University of Maryland, College Park.
Chapter 13: Advanced GUIs and Graphics J ava P rogramming: From Problem Analysis to Program Design, From Problem Analysis to Program Design, Second Edition.
Scott Grissom, copyright 2006Ch 11: GUI Slide 1 Graphical User Interfaces (Ch 11) Careful design of a graphical user interface is key to a viable software.
More on Creating GUIs in Java using Swing David Meredith Aalborg University.
Creating GUIs in Java using Swing David Meredith Aalborg University.
Graphic User Interfaces Part 1. Typical GUI Screen from Microsoft Word What GUI “components” can you see? –Menus? Buttons? Labels? What else? –Anything.
Introduction to Java Swing “We are the sultans of swing” – Mark Knopfler.
Introduction to Java GUI Creating Graphical User Interfaces © copyright Bobby Hoggard / material may not be redistributed without permission.
Java Programming Chapter 10 Graphical User Interfaces.
Chapter 13 Advanced GUIs and Graphics. Chapter Objectives Learn about applets Explore the class Graphics Learn about the class Font Explore the class.
Welcome to CIS 083 ! Events CIS 068.
1 Event Driven Programming wirh Graphical User Interfaces (GUIs) A Crash Course © Rick Mercer.
Java Software Solutions Lewis and Loftus Chapter 10 1 Copyright 1997 by John Lewis and William Loftus. All rights reserved. Graphical User Interfaces --
Java Programming: From Problem Analysis to Program Design, 4e Chapter 12 Advanced GUIs and Graphics.
Introduction to GUI in Java 1. Graphical User Interface Java is equipped with many powerful,easy to use GUI component such as input and output dialog.
3461A Readings from the Swing Tutorial. 3461A Overview  The follow is the Table of Contents from the trail “Creating a GUI with JFC/Swing” in the “The.
Java Programming: Advanced Topics 1 Common Elements of Graphical User Interfaces Chapter 6.
Graphical User Interface Components Chapter What You Will Learn Text Areas Text Areas Sliders Sliders Menus Menus –With frames –Pop up menus Look.
GUIs in Java Swing, Events CS2110, SW Development Methods Readings: MSD, Chapter 12 Lab Exercise.
Ch 3-4: GUI Basics Java Software Solutions Foundations of Program Design Sixth Edition by Lewis & Loftus Coming up: GUI Components.
1 Outline 1 Introduction 2 Overview of Swing Components 3 JLabel 4 Event Handling 5 TextFields 6 How Event Handling Works 7 JButton 8 JCheckBox and JRadioButton.
Graphic User Interface. Graphic User Interface (GUI) Most of us interact with computers using GUIs. GUIs are visual representations of the actions you.
Graphics and Event-Driven Programming in Java John C. Ramirez Department of Computer Science University of Pittsburgh.
MSc Workshop - © S. Kamin, U. ReddyLect 3 - GUI -1 Lecture 3 - Graphical User Interfaces r GUI toolkits in Java API r JFrame r GUI components.
Java Methods A & AB Object-Oriented Programming and Data Structures Maria Litvin ● Gary Litvin Copyright © 2006 by Maria Litvin, Gary Litvin, and Skylight.
Timer class and inner classes. Processing timer events Timer is part of javax.swing helps manage activity over time Use it to set up a timer to generate.
Concurrent Programming and Threads Threads Blocking a User Interface.
Object Oriented Programming Engr. M. Fahad Khan Lecturer, Software Engineering Department University of Engineering & Technology, Taxila.
Object-Oriented Program Development Using Java: A Class-Centered Approach, Enhanced Edition.
1 / 67 COP 3503 FALL 2012 SHAYAN JAVED LECTURE 14 Programming Fundamentals using Java 1.
CS324e - Elements of Graphics and Visualization Java GUIs - Event Handling.
Creating a GUI with JFC/Swing. What are the JFC and Swing? JFC –Java Foundation Classes –a group of features to help people build graphical user interfaces.
The Abstract Window Toolkit (AWT) supports Graphical User Interface (GUI) programming. AWT features include: a rich set of user interface components; a.
Java GUI. Graphical User Interface (GUI) a list a button a text field a label combo box checkbox.
Object Oriented Programming.  Interface  Event Handling.
Swing - 2 Session 13. Swing - 2 / 2 of 38 Objectives (1) Discuss trees and tables Discuss progress bars Discuss MVC architecture Describe menus.
Creating a Window. A basic window in Java is represented by an object of the class Window in the package java.awt.
Ajmer Singh PGT(IP) JAVA IDE Programming - I. Ajmer Singh PGT(IP) GUI (Graphical User Interface) It is an interface that uses a graphic entities along.
JAVA: An Introduction to Problem Solving & Programming, 6 th Ed. By Walter Savitch ISBN © 2012 Pearson Education, Inc., Upper Saddle River,
Chapter 10 - Writing Graphical User Interfaces1 Chapter 10 Writing Graphical User Interfaces.
1 Lecture 8: User Interface Components with Swing.
View  view  presents the user with a sensory (visual, audio, haptic) representation of the model state  a user interface element (the user interface.
Jozef Goetz Credits: Copyright  Pearson Education, Inc. All rights reserved. expanded by J. Goetz, 2016.
Introduction to GUI in 1 Graphical User Interface 3 Nouf Almunyif.
5-1 GUIs and Events Rick Mercer. 5-2 Event-Driven Programming with Graphical user Interfaces  Most applications have graphical user interfaces to respond.
CIS 270—Application Development II Chapter 11—GUI Components: Part I.
Introduction to Swing Mr. Crone. What is Swing? a collection of pre-made Java classes used to create a modern graphical user interface.
1 Event Driven Programming with Graphical User Interfaces (GUIs) A Crash Course © Rick Mercer.
Provision for GUIs in Java
University of Central Florida COP 3330 Object Oriented Programming
Provision for GUIs in Java
Ellen Walker Hiram College
Chap 7. Building Java Graphical User Interfaces
Chapter 13: Advanced GUIs and Graphics
Graphical User Interfaces -- Introduction
PC02 Term 1 Project Basic Messenger. PC02 Term 1 Project Basic Messenger.
Constructors, GUI’s(Using Swing) and ActionListner
Advanced GUIs and Graphics
Graphical User Interface
Presentation transcript:

Creating GUIs in Java using Swing Medialogy, Semester 7, 2010 Aalborg University, Aalborg David Meredith

Resources The Sun Java Tutorial on “Creating a GUI with JFC/Swing”, available here:

Java Foundation Classes (JFC) JFC is a group of Java packages for –building GUIs –adding rich graphics –adding interactivity JFC defined to provide the following features: –Swing GUI Components From buttons to split panes and tables Components capable of sorting, printing, drag-and-drop, etc. –Pluggable look-and-feel Support So the same program can use different look-and-feels (e.g., Java look, Windows look, GTK+ and many more) –Accessibility API Enables assistive technologies like screen readers and Braille displays to get information from the UI –Java 2D API Enables easy incorporation of high-quality 2D graphics, text, and images in applications and applets. Java 2D includes extensive APIs for generating and sending high-quality output to printing devices. –Internationalization Allows developers to build applications that interact with users using many different languages and alphabets

Swing packages Swing API has 18 packages: –javax.swing –javax.swing.event –javax.swing.plaf –javax.swing.text –... Most of the time we use only two: –javax.swing –javax.swing.event

Concurrency in Swing In Swing, you use three different kinds of thread –Initial threads In a normal application, there will be only one initial thread: the main thread –Event dispatch thread Most code that interacts with the Swing framework executes on this thread –Worker threads “Background” threads on which time-consuming tasks are executed You don’t need to create these threads explicitly –They are provided by the runtime or the Swing framework

Initial threads In Swing, initial thread (main thread) usually just creates a Runnable object (the GUI) which is passed to the event dispatch thread to be executed Once the GUI is running, GUI events cause short tasks to be carried out on the event dispatch thread Longer tasks should be scheduled for execution on Worker threads

invokeLater Main thread schedules the GUI creation task by invoking javax.swing.SwingUtilities.invokeLater –This takes a single Runnable object as its argument and schedules it to be executed on the event dispatch thread –Can also use invokeAndWait (synchronous) Main thread does not create and run the GUI itself because almost all code that interacts with Swing must run on the event dispatch thread

The event dispatch thread Event handling code is code that is executed when some GUI event occurs (e.g., the user clicks a button or moves a slider) All event handling code in Swing must run on the event dispatch thread Most code that calls Swing methods should also run on the event dispatch thread –This is because most Swing object methods are not thread safe Invoking these methods from different threads can lead to interference Think of the code running on the event dispatch thread as a series of short tasks, most of which are carried out in response to GUI events If longer events are run on the event dispatch thread, unhandled GUI events build up and the interface becomes unresponsive

HelloWorld in Swing Use invokeLater to create a Runnable to be executed on the event dispatch thread The run method starts by creating a JFrame object which is the main window of the application (l.10) Set the default close operation to be “EXIT_ON_CLOSE” which means the app exits when the close button is pressed (l.11) Create a label object containing the “Hello World” message (l.12) We get the content pane for the JFrame object and put the label in it (l.13) –The content pane contains all the Swing components for a JFrame We invoke the “pack” method on the JFrame to set the size of the window so that it is just big enough to hold all the components in the content pane (l.14) We make the JFrame visible (l.15)

HelloWorldSwing.java

A visual index to the Swing components

JFrame The main window of the application is a JFrame object A JFrame contains a JRootPane object The JRootPane object contains –a Container object called contentPane and –a JMenuBar object called menuBar All the components in a window (e.g., buttons, text fields, labels, sliders) but not the menubar must be contained in the JFrame’s contentPane The window’s menubar is stored separately in the menuBar object The menuBar field of a JFrame can be null –menu bars are optional The contentPane field of a JFrame cannot be null –throws an exception

Accessing the content pane of a JFrame To retrieve the content pane of a JFrame: frame.getContentPane(); To add a component to the content pane: frame.getContentPane().add(yellowLabel); To remove a component from the content pane: frame.getContentPane().remove(yellowLabel);

ContentPanes.java

Layout managers A layout manager is an object that implements the LayoutManager interface Determines size and position of components within a container Each component can request to have a certain size and alignment –But layout manager has final say The only containers with layout managers that you need to worry about are content panes and JPanels –A JPanel is simply a rectangular region within a window’s content pane into which you can put Swing components, just as you would put them into a content pane –It’s a region of the window where you can control layout independently from the rest of the window

A Visual Guide to Layout Managers

BorderLayout See BorderLayoutDemo.java Add components using pane.add(new JLabel(“Hello”), BorderLayout.PAGE_START) Gaps between areas can be specified using layout.setVgap() and layout.setHgap() Can leave regions empty If try adding second component to a region, it replaces the first Center region expands to fill space available By default, components added to center region –i.e. as if with BorderLayout.CENTER

JPanels and FlowLayout See FlowLayoutDemo.java JPanel is a container that can be used inside another container such as a content pane JPanel uses FlowLayout layout manager Put a JPanel in one area of BorderLayout so that you can put more than one component into that area (by putting the components in the JPanel) FlowLayout puts components in a row If container is not wide enough, FlowLayout starts a new row If container is more than wide enough, components are centered –Can change alignment using FlowLayout.setAlignment() Change the padding using setHgap() and setVgap()

BoxLayout See BoxLayoutDemo.java BoxLayout stacks components on top of each other or places them in a row –To get them in a row, use panel1.setLayout(new BoxLayout(panel1, BoxLayout.X_AXIS)) –To get them in a column, use panel1.setLayout(new BoxLayout(panel1, BoxLayout.Y_AXIS)) Like FlowLayout but with greater functionality

GroupLayout GroupLayout developed for GUI builders like the one in NetBeans But also works for manual coding of GUIs Works with horizontal and vertical layouts separately –Can forget about horizontal layout when defining vertical and vice-versa –But need to define each component twice in the layout –If forget to define a component twice, GroupLayout generates an exception

Layout Organization in GroupLayout: Hierarchical Groups GroupLayout uses two different types of groups, arranged into a hierarchy –Sequential groups Components placed one after the other as in BoxLayout or FlowLayout –Parallel groups Next to each other in the same dimension Parallel group usually an element in a sequential group in the other dimension A group may contain components or other groups

An example of GroupLayout Layout three components in a row Sequential horizontal group of 3 components Parallel vertical group of the same 3 components with same (vertical) location, size and baseline In pseudo-code: horizontal_layout = sequential_group { c1, c2, c3 } vertical_layout = parallel_group (BASELINE) { c1, c2, c3 }

Another example of GroupLayout C4 is left-aligned with C3 –C4 and C3 have the same horizontal position –C4 and C3 form a parallel horizontal group Vertically, there is a sequential group consisting of the parallel group, {C1,C2,C3} followed by C4 In pseudo-code: horizontal_layout = sequential_group { c1, c2, parallel_group (LEFT) { c3, c4 } } vertical_layout = sequential_group { parallel_group (BASELINE) { c1, c2, c3 }, c4 }

Gaps in GroupLayout Gap is an invisible component that controls distance between other components GroupLayout defines automatic gaps –Give preferred distances between neighbouring components and between components and container borders –Size computed based on look-and-feel Need to turn on automatic gaps using layout.setAutoCreateGaps(true); layout.setAutoCreateContainerGaps(true);

Writing code in GroupLayout See GroupLayoutDemo.java

Convert.java Convert class extends JFrame –run() method in GUI runnable simply instantiates the Convert class –components stored as instance variables in the Convert class –GUI created and shown in the Convert constructor –uses GroupLayout as the LayoutManager –layout.linkSize(Components... ) method used to make sizes of text field, fahrenheit value label and button the same

Convert.java When button clicked, emits an ActionEvent that will be responded to by any object that –implements the ActionListener interface has to implement the ActionPerformed method –is registered as a listener with the button using button.addActionListener(listenerObject) When press enter in the text field, also generates an ActionEvent which will be responded to by an ActionEventListener that is registered with the text field –using textField.addActionListener(listenerObject) uses java.awt.Frame.setResizable(boolean resizable) to define window to be not resizable See Convert.java

SquareSliders.java Again, run() method of GUI Runnable simply instantiates the SquareSliders class which extends JFrame All GUI setup done in SquareSliders constructor Components stored as instance variables in SquareSliders object so that they can be accessed by event handlers defined in inner Event Listener classes Two ChangeListeners required – one for each slider, because effect of moving one slider is different from effect of moving the other one –implies different listeners must be registered with the different sliders See SquareSliders.java

Menus Menus aren’t placed with the other components in the UI –either in the menu bar or popup menu Menubar usually across the top of the main window –though in Mac OS X, it’s across the top of the screen Popup menus are invisible until user makes a platform- specific mouse action (e.g., right-click) MenuLookDemo has –a menu bar, menus, menu items, radio button menu items, checkbox menu items and separators Menu item can have image, text or both Can also specify font and colour

Menu Component Hierarchy Menu items (JMenuItem) and menus (JMenu) are buttons When a menu item is pressed, it brings up a popup menu (JPopupMenu) which contains the menu’s menu items

Creating Menus See createMenuBar method in MenuLookDemo.java To set menu bar for a JFrame, use frame.setJMenuBar(menuBar) To add a JMenu to a JMenuBar, use menuBar.add(menu) To add a JMenuItem to a JMenu, use menu.add(menuItem) We’ll deal later with setAccelerator, setMnemonic and setAccessibleDescription

Handling Events from Menu Items To detect when a user selects a JMenuItem, need to listen for action events (just as for a JButton), so register with an ActionListener: menuItem.addActionListener(this) –define an actionPerformed method JRadioButtonMenuItems emit either action events or item events –have to register with an ActionListener: rbMenuItem.addActionListener(this) –add an actionPerformed method JCheckBoxMenuItems emit item events –have to register with an ItemListener: cbMenuItem.addItemListener(this) –need to define an itemStateChanged method See MenuDemo.java

Enabling Keyboard Operation Menus can use mnemonics and accelerators –Mnemonics are usually single letter abbreviations for a menu item (e.g., “A” for the “Save As” menu item in the File menu), accessible only from within the menu hierarchy –Accelerators are keyboard shortcuts that bypass the menu hierarchy allows access to menu item even if not visible (e.g., Ctrl-F for the Find dialog) Specify mnemonic either in constructor: menuItem = new JMenuItem(“Save As...”,KeyEvent.VK_A); –or using setMnemonic method: menuItem.setMnemonic(KeyEvent.VK_A); Specify accelerator using setAccelerator method: menuItem.setAccelerator(KeyStroke.getKeyStroke(KeyEvent.VK_A, ActionEvent.ALT_MASK); KeyEvent constant is a constant corresponding to a particular key (just static variables in the KeyEvent class) Modifier key required for accelerator specified using a constant defined in ActionEvent class