1 lecture 14 GUI PROGRAMMING IVLecture 15 Graphical User Interfaces (cont.) Overview  GUI Programming (cont.)  Example 1: Creating Multi-layout GUIs.

Slides:



Advertisements
Similar presentations
Chapter 11 Creating User Interfaces F What is JavaBean? F JComponent F JButton  ImageIcon  JLabel  JTextField  JTextArea  JComboBox  JList  JCheckBox.
Advertisements

Graphical User Interfaces (Part IV)
Unit 3 Graphical User Interface (GUI) Dr. Magdi AMER.
Fall 2007CS 225 Graphical User Interfaces Event Handling Appendix C.
Java GUI Libraries Swing Programming. Swing Components Swing is a collection of libraries that contains primitive widgets or controls used for designing.
Event Handling Events and Listeners Timers and Animation.
Liang, Introduction to Java Programming, Fifth Edition, (c) 2005 Pearson Education, Inc. All rights reserved Chapter 29 Menus, Toolbars,
1 Chapter 23 Menus, Toolbars, Dialogs, and Internal Frames.
1 lecture 12Lecture 15 Graphical User Interfaces (cont.) Overview  GUI Programming (cont.)  Example 1: Creating Multi-layout GUIs with Tooltips.  Example.
©The McGraw-Hill Companies, Inc. Permission required for reproduction or display. 4 th Ed Chapter Chapter 14 GUI and Event-Driven Programming.
Unit 141 Further GUI Programming Learning Outcomes oExtend examples presented to write more useful applications. oWrite non-trivial, event-driven GUI applications.
CPSC150 Week 12 Graphical User Interfaces Chapter 11.
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.
GUI and Event-Driven Programming Part 2. Event Handling An action involving a GUI object, such as clicking a button, is called an event. The mechanism.
1 L46 Advanced GUI Component (1). 2 OBJECTIVES  To create and manipulate sliders, and menus,
CPSC150 Week 12 Graphical User Interfaces Chapter 11.
More on Creating GUIs in Java using Swing David Meredith Aalborg University.
CC1007NI: Further Programming Week 5 Dhruba Sen Module Leader (Islington College)
Graphic User Interfaces Part 1. Typical GUI Screen from Microsoft Word What GUI “components” can you see? –Menus? Buttons? Labels? What else? –Anything.
Chapter 8: Graphical User Interfaces Objectives - by the end of this chapter, you should be able to do the following: –write a simple graphical user interface.
MIT AITI 2003 Lecture 17. Swing - Part II. The Java Event Model Up until now, we have focused on GUI's to present information (with one exception) Up.
עקרונות תכנות מונחה עצמים תרגול 4 - GUI. Outline  Introduction to GUI  Swing  Basic components  Event handling.
1 Event Driven Programs Rick Mercer. 2 So what happens next?  You can layout a real pretty GUI  You can click on buttons, enter text into a text field,
Liang, Introduction to Java Programming, Fifth Edition, (c) 2005 Pearson Education, Inc. All rights reserved
Chapter 9: Creating User Interfaces What is JavaBean? What is JavaBean? JComponent JComponent JButton JButton JLabel JLabel JTextField JTextField JTextArea.
Chapter 13 Creating User Interfaces F What is JavaBeans?  Component and JComponent F JButton  ImageIcon  JLabel  JTextField  JTextArea  JComboBox.
SWING. AbstractButton Swing Buttons are subclasses of the AbstractButton class, which extends JComponent. Abstract class javax.swing.AbstractButton AbstractButton.
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.
FEN IntroJava2006 AAU1 GUI: Graphical User Interface AWT/SWING: Components Drag and Drop in NetBeans Events Listeners.
Graphics and Event-Driven Programming in Java John C. Ramirez Department of Computer Science University of Pittsburgh.
Chapter 9: Creating User Interfaces What is JavaBean? What is JavaBean? JComponent JComponent Jbutton Jbutton ImageIcon ImageIcon JLabel JLabel JTextField.
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.
Graphical User Interfaces (Part 2) 1. View  view  presents the user with a sensory (visual, audio, haptic) representation of the model state  a user.
Liang, Introduction to Java Programming, Seventh Edition, (c) 2009 Pearson Education, Inc. All rights reserved Chapter 34 Menus, Toolbars,
OOP (Java): GUI Intro/ OOP Objectives – –use an image viewer application to introduce Java's GUI features Semester 2,
1 / 67 COP 3503 FALL 2012 SHAYAN JAVED LECTURE 14 Programming Fundamentals using Java 1.
AGDER COLLEGEFACULTY OF ENGINEERING & SCIENCE GUI Components ikt403 – Object-Oriented Software Development.
CS1054: Lecture 21 - Graphical User Interface. Graphical User Interfaces vs. Text User Interface.
Java GUI. Graphical User Interface (GUI) a list a button a text field a label combo box checkbox.
Ch13 Creating windows and applets. Short overview AWT (Abstract Windowing Toolkit) Early Java development used graphic classesEarly Java development used.
Computer Science 209 GUIs Model/View/Controller Layouts.
Chapter 11 Creating User Interfaces
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.
Sadegh Aliakbary Sharif University of Technology Fall 2011.
Computer Science [3] Java Programming II - Laboratory Course Lab 4 -1 : Introduction to Graphical user interface GUI Components Faculty of Engineering.
Slides prepared by Rose Williams, Binghamton University ICS201 Lecture 15 : Swing III King Fahd University of Petroleum & Minerals College of Computer.
Lecture 08 Abstract Windows Toolkit (AWT) and Swing Jaeki Song.
Chapter 10 - Writing Graphical User Interfaces1 Chapter 10 Writing Graphical User Interfaces.
Swing GUI Components So far, we have written GUI applications which can ‘ draw ’. These applications are simple, yet typical of all Java GUI applications.
Lesson 28: More on the GUI button, frame and actions.
Graphical User Interface (GUI)
1 Lecture 8: User Interface Components with Swing.
Menus and Toolbars CSCI 201L Jeffrey Miller, Ph.D. HTTP :// WWW - SCF. USC. EDU /~ CSCI 201 USC CSCI 201L.
View  view  presents the user with a sensory (visual, audio, haptic) representation of the model state  a user interface element (the user interface.
Menus Pull-downs and popups. Tooltips –a ToolTip is a context-sensitive text string that is displayed in a popup window when the mouse rests over a particular.
Objects First With Java A Practical Introduction Using BlueJ Building Graphical User Interfaces (GUIs) Week
MIT AITI 2004 Swing Event Model Lecture 17. The Java Event Model In the last lecture, we learned how to construct a GUI to present information to the.
5-1 GUIs and Events Rick Mercer. 5-2 Event-Driven Programming with Graphical user Interfaces  Most applications have graphical user interfaces to respond.
Chapter 6 Building Java GUIs. MVC Model View Controller The model passes its data to the view for rendering The view determines which events are passed.
©The McGraw-Hill Companies, Inc. Permission required for reproduction or display. Chapter Chapter 7 ( Book Chapter 14) GUI and Event-Driven Programming.
A Quick Java Swing Tutorial
CSC 205 Programming II Lecture 5 AWT - I.
Christopher Budo, Davis Nygren, spencer franks, Luke miller
·  Chapter 29 Menus.
Advanced User Interfaces
GUIs Model/View/Controller Layouts
Course Outcomes of Advanced Java Programming AJP (17625, C603)
Graphical User Interface
Advanced Programming in Java
Presentation transcript:

1 lecture 14 GUI PROGRAMMING IVLecture 15 Graphical User Interfaces (cont.) Overview  GUI Programming (cont.)  Example 1: Creating Multi-layout GUIs with Tooltips.  Example 2: Creating Menus with Mnemonics.  Example 3: Event Handling with Menus and File Dialogs.  Preview: Introduction to Threads and Concurrency.

2 lecture 14 GUI PROGRAMMING IVLecture 15 GUI Programming (cont.).  From the preceding lectures, it is clear that to design a GUI, we have to think carefully about:  What Containers & Components are required in the application.  What layout to use to arrange the Components in the Container(s).  What actions the Components should perform.  When developing non-trivial GUIs, it is necessary to think about these issues carefully before venturing into development.  In Example 1 that follows we make use of JPanels to illustrate how multi-layout windows can be built.  Multi-layout windows are pervasive in all interesting applications. For example in a graphics application one requires a multi-grid panel as part of the main graphics window in order to keep and make easily accessible the graphics toolbox items like brushes, ‘erasers’ etc.

3 lecture 14 GUI PROGRAMMING IVLecture 15 The JPanel Container  Can be used as a dedicated drawing area  Receives mouse events  Extended to create new components  Combining Swing GUI and drawing in one window can lead to errors  Fix problem by separating GUI and graphics 

4 lecture 14 GUI PROGRAMMING IVLecture 15 Example 1: Multi-Layout GUIs import javax.swing.*;import java.awt.*; class MultiLayout extends JFrame{ private JPanel westPanel = new JPanel(); private JPanel southPanel = new JPanel(); private JButton b1, b2, b3, b4; MultiLayout(){ Container cp = getContentPane(); cp.add("North", new JButton("North")); cp.add("East", new JButton("East")); cp.add("Center", new JButton("Center")); westPanel.setLayout(new GridLayout(3,2)); westPanel.add(new JButton("Grid 1")); westPanel.add(new JButton("Grid 2")); westPanel.add(new JButton("Grid 3")); westPanel.add(new JButton("Grid 4")); westPanel.add(new JButton("Grid 5")); cp.add("West", westPanel); southPanel.setLayout(new FlowLayout()); southPanel.add(b1=new JButton("Flow 1")); southPanel.add(b2=new JButton("Flow 2")); southPanel.add(b3=new JButton("Flow 3")); southPanel.add(b4=new JButton("Flow 4")); b1.setToolTipText("I'm a button labeled "+b1.getText()); cp.add("South", southPanel); setTitle("Multi-Layout GUI-building Sample"); setSize(400,400); show(); } public static void main(String args[]){ new MultiLayout(); }}

5 lecture 14 GUI PROGRAMMING IVLecture 15 Menus Java provides several classes— JMenuBar, JMenu, JMenuItem, JCheckBoxMenuItem, and JRadioButtonMenuItem —to implement menus in a frame. l A JFrame or JApplet can hold a menu bar to which the pull-down menus are attached. Menus consist of menu items that the user can select (or toggle on or off). Menu bars can be viewed as a structure to support menus.

6 lecture 14 GUI PROGRAMMING IVLecture 15 Menus with Frames  Menus  Important part of GUIs  Perform actions without cluttering GUI  Attached to objects of classes that have method setJMenuBar  JFrame and Japplet  ActionEvent s  Classes used to define menus  JMenuBar - container for menus, manages menu bar  JMenuItem - manages menu items  Menu items - GUI components inside a menu  Can initiate an action or be a submenu  Method isSelected

7 lecture 14 GUI PROGRAMMING IVLecture 15 Classes used to define menus (continued)  JMenu - manages menus  Menus contain menu items, and are added to menu bars  Can be added to other menus as submenus  When clicked, expands to show list of menu items  JCheckBoxMenuItem (extends JMenuItem )  Manages menu items that can be toggled  When selected, check appears to left of item  JRadioButtonMenuItem (extends JMenuItem )  Manages menu items that can be toggled  When multiple JRadioButtonMenuItem s are part of a group ( ButtonGroup ), only one can be selected at a time  When selected, filled circle appears to left of item

8 lecture 14 GUI PROGRAMMING IVLecture 15 Using Menus with Frames (cont.)  Mnemonics  Quick access to menu items (File)  Can be used with classes that have subclass  javax.swing.AbstractButton  Method setMnemonic() JMenu fileMenu = new JMenu("File") fileMenu.setMnemonic('F'); Press Alt + F to access menu  Method setSelected(true)  Of class AbstractButton  Sets button/item to selected state  addSeparator()  Of class Jmenu  Inserts separator line into menu

9 lecture 14 GUI PROGRAMMING IVLecture 15 The JMenuBar Class JFrame f = new JFrame(); f.setSize(300, 200); f.setVisible(true); JMenuBar mb = new JMenuBar(); f.setJMenuBar(mb); A menu bar holds menus; the menu bar can only be added to a frame. Following is the code to create and add a JMenuBar to a frame:

10 lecture 14 GUI PROGRAMMING IVLecture 15 The Menu Class JMenu fileMenu = new JMenu("File", false); JMenu helpMenu = new JMenu("Help", true); mb.add(fileMenu); mb.add(helpMenu); You attach menus onto a JMenuBar. The following code creates two menus, File and Help, and adds them to the JMenuBar mb :

11 lecture 14 GUI PROGRAMMING IVLecture 15 The JMenuItem Class fileMenu.add(new JMenuItem("new")); fileMenu.add(new JMenuItem("open")); fileMenu.add(new JMenuItem("-")); fileMenu.add(new JMenuItem("print")); fileMenu.add(new JMenuItem("exit")); fileMenu.add(new JMenuItem("-")); You add menu items on a menu. The following code adds menu items and item separators in menu fileMenu :

12 lecture 14 GUI PROGRAMMING IVLecture 15 Submenus JMenu softwareHelpSubMenu = new JMenu("Software"); JMenu hardwareHelpSubMenu = new JMenu("Hardware"); helpMenu.add(softwareHelpSubMenu); helpMenu.add(hardwareHelpSubMenu); softwareHelpSubMenu.add(new JMenuItem("Unix")); softwareHelpSubMenu.add(new JMenuItem("NT")); softwareHelpSubMenu.add(new JMenuItem("Win95")); You can add submenus into menu items. The following code adds the submenus “Unix,” “NT,” and “Win95” into the menu item “Software.”

13 lecture 14 GUI PROGRAMMING IVLecture 15 Example 2: Creating Menus with Mnemonics import javax.swing.*; class DemonstratingMenus extends JFrame { private JMenuBar menuBar = new JMenuBar(); private JMenu fileMenu = new JMenu("File"); private JMenuItem neW, opeN, closE, savE, prinT; private JMenuItem saveCurrent, saveAs, saveAll; DemonstratingMenus(String title){ super(title); setJMenuBar(menuBar); menuBar.add(fileMenu); fileMenu.setMnemonic('F'); fileMenu.add(neW = new JMenuItem ("New")); fileMenu.add(opeN = new JMenuItem ("Open")); opeN.setMnemonic('o'); fileMenu.add(savE = new JMenu ("Save")); savE.add(saveCurrent = new JMenuItem ("Save Current")); savE.add(saveAs = new JMenuItem ("Save As")); savE.add(saveAll = new JMenuItem ("Save All"));

14 lecture 14 GUI PROGRAMMING IVLecture 15 Example 2: Creating Menus with Mnemonics (cont.) fileMenu.add(savE); fileMenu.add(prinT = new JCheckBoxMenuItem ("Print")); fileMenu.addSeparator(); fileMenu.add("Quit"); setSize(400,400); show(); } public static void main(String args[]){ new DemonstratingMenus("Demonstrating Menus using Swing Components."); }

15 lecture 14 GUI PROGRAMMING IVLecture 15 Example 3: Event Handling with Menus and FileDialogs import javax.swing.*; import java.awt.*; import java.awt.event.*; class HandlingMenuEvents extends JFrame { private JMenuBar menuBar = new JMenuBar(); private JMenu fileMenu = new JMenu("File"); private JMenuItem neW, opeN, closE, savE, prinT, quiT; private JMenuItem saveCurrent, saveAs, saveAll; private JTextField jtxf;

16 lecture 14 GUI PROGRAMMING IVLecture 15 Example 3: Event Handling with Menus and FileDialogs HandlingMenuEvents(String title){ super(title); setJMenuBar(menuBar); menuBar.add(fileMenu); fileMenu.setMnemonic('F'); fileMenu.add(neW = new JMenuItem ("New")); fileMenu.add(opeN = new JMenuItem ("Open")); opeN.setMnemonic('o'); fileMenu.add(savE = new JMenu ("Save")); savE.add(saveCurrent = new JMenuItem ("Save Current")); savE.add(saveAs = new JMenuItem ("Save As")); savE.add(saveAll = new JMenuItem ("Save All")); fileMenu.add(savE); fileMenu.add(prinT = new JCheckBoxMenuItem ("Print")); fileMenu.addSeparator(); fileMenu.add(quiT = new JMenuItem("Quit")); quiT.setMnemonic('q');

17 lecture 14 GUI PROGRAMMING IVLecture 15 Example 3: Event Handling with Menus and FileDialogs prinT.addActionListener( new ActionListener() { public void actionPerformed(ActionEvent e ) { JFrame fp = new JFrame("Printing Assistant"); JPanel f = new JPanel(); Container cp = fp.getContentPane(); cp.setLayout(new FlowLayout()); f.add(jtxf = new JTextField(23)); jtxf.setText("Sorry, no printer."); cp.add(f); fp.setSize(400,400); fp.show(); } }); opeN.addActionListener( new ActionListener() { public void actionPerformed( ActionEvent e ) { JFrame f = new JFrame(); FileDialog fd = new FileDialog (f, "Select File To Open."); fd.show(); } }); quiT.addActionListener(new ActionListener(){ public void actionPerformed(ActionEvent ae){ System.exit(0); }}); setSize(400,400); show(); } public static void main(String args[]){ new HandlingMenuEvents("Demonstrating Menus using Swing Components."); } /* Java generates events when the user selects a menu item, presses a key, pushes a command buttom, etc. */

18 lecture 14 GUI PROGRAMMING IVLecture 15 Example 4: A Useful Exercise. Q. Write a Java application MultiplicationTutor which repeatedly generates simple multiplication questions that can be used by children for self-assisted learning. The GUI of this application consists of three text field components where the questions are displayed, where the user types his answer and where the application responds to the user’s answer (telling him whether he is right or wrong. If the user types a wrong answer, the response box should tell the user to try again and the question should not change. If the user types the correct answer, the response filed should display this and another random question should be generated immediately. Write the program so that the user can stop the exercise appropriately. The figure below gives a sample GUI for this application.