Java the UML Way versjon 2002-04-17 Only to be used in connection with the book "Java the UML Way", by Else Lervik and.

Slides:



Advertisements
Similar presentations
Introduction to Java 2 Programming
Advertisements

Graphical User Interfaces (Part IV)
Graphic User Interfaces Layout Managers Event Handling.
F27SB2 Programming Languages
CMSC 341 Building Java GUIs. 09/26/2007 CMSC 341 GUI 2 Why Java GUI Development? Course is about Data Structures, not GUIs. We are giving you the opportunity.
Chapter 6 Graphical User Interface (GUI) and Object-Oriented Design (OOD)
Understanding SWING Architecture CS 4170 UI Design Hrvoje Benko Oct. 9, 2001.
Swing CS-328 Dick Steflik John Margulies. Swing vs AWT AWT is Java’s original set of classes for building GUIs Uses peer components of the OS; heavyweight.
1 Event Driven Programming with Graphical User Interfaces (GUIs) A Crash Course © Rick Mercer.
©The McGraw-Hill Companies, Inc. Permission required for reproduction or display. 4 th Ed Chapter Chapter 14 GUI and Event-Driven Programming.
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.
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.
Java the UML Way versjon Only to be used in connection with the book "Java the UML Way", by Else Lervik and.
1 Event Driven Programming wirh Graphical User Interfaces (GUIs) A Crash Course © Rick Mercer.
Java Programming: From Problem Analysis to Program Design, 4e Chapter 12 Advanced GUIs and Graphics.
Java the UML Way versjon Only to be used in connection with the book "Java the UML Way", by Else Lervik and.
MSc Workshop - © S. Kamin, U.Reddy Lect 5 – GUI Prog - 1 Lecture 5 – GUI Programming r Inner classes  this and super r Layout r Reading: m.
Applets and Frames CS 21a: Introduction to Computing I First Semester,
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,
Chapter 19 Designing the GUI front-end: the Model-View-Controller pattern.
Java the UML Way versjon Only to be used in connection with the book "Java the UML Way", by Else Lervik and.
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.
Java the UML Way version Only to be used in connection with the book "Java the UML Way", by Else Lervik and.
CSE 219 Patterns in Programming More Design Patterns.
Graphic User Interface. Graphic User Interface (GUI) Most of us interact with computers using GUIs. GUIs are visual representations of the actions you.
GUI Clients 1 Enterprise Applications CE00465-M Clients with Graphical User Interfaces.
Graphics and Event-Driven Programming in Java John C. Ramirez Department of Computer Science University of Pittsburgh.
Copyright © 2002, Systems and Computer Engineering, Carleton University c-Gui3.ppt * Object-Oriented Software Development Part 18-c Building.
Java Methods A & AB Object-Oriented Programming and Data Structures Maria Litvin ● Gary Litvin Copyright © 2006 by Maria Litvin, Gary Litvin, and Skylight.
Java the UML Way versjon Only to be used in connection with the book "Java the UML Way", by Else Lervik and.
Java Programming: Advanced Topics 1 Components and Facilities for Rich Graphical User Interfaces Chapter 7.
Java the UML Way version Only to be used in connection with the book "Java the UML Way", by Else Lervik and.
MT311 Java Application Development and Programming Languages Li Tak Sing ( 李德成 )
Applets and Frames. Copyright 2005, by the authors of these slides, and Ateneo de Manila University. All rights reserved L14: GUI Slide 2 Applets Usually.
OOP (Java): GUI Intro/ OOP Objectives – –use an image viewer application to introduce Java's GUI features Semester 2,
Java the UML Way versjon Only to be used in connection with the book "Java the UML Way", by Else Lervik and.
Introduction to GUI in 1 Graphical User Interface 2 Nouf Almunyif.
Introduction to Java Chapter 9 - Graphical User Interfaces and Applets1 Chapter 9 Graphical User Interfaces and Applets.
Swing - 2 Session 13. Swing - 2 / 2 of 38 Objectives (1) Discuss trees and tables Discuss progress bars Discuss MVC architecture Describe menus.
Java the UML Way version Only to be used in connection with the book "Java the UML Way", by Else Lervik and.
Computer Science 209 GUIs Model/View/Controller Layouts.
Java the UML Way versjon Only to be used in connection with the book "Java the UML Way", by Else Lervik and.
Creating a Window. A basic window in Java is represented by an object of the class Window in the package java.awt.
Java Programming, Second Edition Chapter Thirteen Understanding Swing Components.
1 Event Driven Programs with a Graphical User Interface Rick Mercer.
Programming with Java © 2002 The McGraw-Hill Companies, Inc. All rights reserved. 1 McGraw-Hill/Irwin Chapter 3 Designing the Interface with Layout Managers.
1 Layout Managers Layout managers –Provided for arranging GUI components –Provide basic layout capabilities –Processes layout details –Programmer can concentrate.
JAVA: An Introduction to Problem Solving & Programming, 6 th Ed. By Walter Savitch ISBN © 2012 Pearson Education, Inc., Upper Saddle River,
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,
©The McGraw-Hill Companies, Inc. Permission required for reproduction or display. Chapter Chapter 7-3 ( Book Chapter 14) GUI and Event-Driven Programming.
Chapter 10 - Writing Graphical User Interfaces1 Chapter 10 Writing Graphical User Interfaces.
Graphical User Interface (GUI)
View  view  presents the user with a sensory (visual, audio, haptic) representation of the model state  a user interface element (the user interface.
Introduction to GUI in 1 Graphical User Interface 3 Nouf Almunyif.
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.
1 A Quick Java Swing Tutorial. 2 Introduction Swing – A set of GUI classes –Part of the Java's standard library –Much better than the previous library:
GUIs & Event-Driven Programming Chapter 11 Review.
1 Event Driven Programming with Graphical User Interfaces (GUIs) A Crash Course © Rick Mercer.
©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
GUIs and Events Rick Mercer.
“Form Ever Follows Function” Louis Henri Sullivan
GUIs Model/View/Controller Layouts
University of Central Florida COP 3330 Object Oriented Programming
A Quick Java Swing Tutorial
A Quick Java Swing Tutorial
Presentation transcript:

Java the UML Way versjon Only to be used in connection with the book "Java the UML Way", by Else Lervik and Vegard B. Havdal. ISBN , John Wiley & Sons Ltd 2002 The Research Foundation TISIP, Chapter 15 Creating User Interfaces Menuespage 2-3 Tollbarspage 4 Dialog windows, introduction page 5-9 An ordinary OK-Cancel dialogpage 10 Trasferring data between parent window and dialog windowpage The renovation case, a new GUIpage 13 GridBagLayout as layout managerpage Is it possible to control the size of the components?page 17 The GUI component JTablepage The renovation case GUIpage 20

Only to be used in connection with the book "Java the UML Way", by Else Lervik and Vegard B. Havdal. ISBN , John Wiley & Sons Ltd 2002 The Research Foundation TISIP, Chapter 15, page 2 Menus in General You’ll find MenuLookDemo via JMenu(How to use Menus) in the online API documentation.

Only to be used in connection with the book "Java the UML Way", by Else Lervik and Vegard B. Havdal. ISBN , John Wiley & Sons Ltd 2002 The Research Foundation TISIP, Chapter 15, page 3 Menus in this book class WindowWithMenu extends JFrame { private Container guiContainer; public WindowWithMenu() { setTitle("MenuTest"); setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE); guiContainer = getContentPane(); MenuListener theListener = new MenuListener(); JMenu theMenu = new JMenu("Color"); JMenuItem menuItem = new JMenuItem("Yellow"); theMenu.add(menuItem); menuItem.addActionListener(theListener); //.. the same for red and blue… JMenuBar menuBar = new JMenuBar(); menuBar.add(theMenu); setJMenuBar(menuBar); } private class MenuListener implements ActionListener { public void actionPerformed(ActionEvent event) { String command = event.getActionCommand(); if (command.equals("Yellow")) guiContainer.setBackground(Color.yellow); else if (command.equals("Red")) guiContainer.setBackground(Color.red); else guiContainer.setBackground(Color.blue); } A menu choice generates an ActionEvent. Solve problem 1, page 457. JMenuBar JMenu JMenuItem

Only to be used in connection with the book "Java the UML Way", by Else Lervik and Vegard B. Havdal. ISBN , John Wiley & Sons Ltd 2002 The Research Foundation TISIP, Chapter 15, page 4 Toolbars class WindowWithToolbar extends JFrame { private Container guiContainer; private JButton yellowButton; private JButton redButton; private JButton blueButton; public WindowWithToolbar(){ setTitle("Toolbar Test"); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); guiContainer = getContentPane(); ButtonListener theListener = new ButtonListener(); JToolBar toolbar = new JToolBar(); Icon icon = new ImageIcon("yellow.gif"); yellowButton = new JButton(icon); yellowButton.addActionListener(theListener); toolbar.add(yellowButton); // ….the same for red and blue… guiContainer.add(toolbar, BorderLayout.NORTH); } private class ButtonListener implements ActionListener { public void actionPerformed(ActionEvent event) { JButton button = (JButton) event.getSource(); if (button == yellowButton) guiContainer.setBackground(Color.yellow); else if (button == redButton) guiContainer.setBackground(Color.red); else guiContainer.setBackground(Color.blue); } JToolBar JButton The toolbar is dragged away from its ordinary place, becoming a window of its own The toolbar in its ordinary place

Only to be used in connection with the book "Java the UML Way", by Else Lervik and Vegard B. Havdal. ISBN , John Wiley & Sons Ltd 2002 The Research Foundation TISIP, Chapter 15, page 5 Dialog Windows, an Example The new name is entered and sent to the primary window The name is edited, and the result is sent to the primary window

Only to be used in connection with the book "Java the UML Way", by Else Lervik and Vegard B. Havdal. ISBN , John Wiley & Sons Ltd 2002 The Research Foundation TISIP, Chapter 15, page 6 Dialog Windows A dialog window is a secondary window, that means it should always be connected to a parent window. A modal dialog window prevents the user access to other windows as long as this window is open. A nonmodal window is more practical to the user, but it demands more of the programmer because more than one window have to be kept updated synchronously. In this book we only look at modal dialog windows.

Only to be used in connection with the book "Java the UML Way", by Else Lervik and Vegard B. Havdal. ISBN , John Wiley & Sons Ltd 2002 The Research Foundation TISIP, Chapter 15, page 7 The Most Basic Dialog Window showDialog() 1 2

Only to be used in connection with the book "Java the UML Way", by Else Lervik and Vegard B. Havdal. ISBN , John Wiley & Sons Ltd 2002 The Research Foundation TISIP, Chapter 15, page 8 The Message Exchange Between the Parent Window and the Dialog Window

Only to be used in connection with the book "Java the UML Way", by Else Lervik and Vegard B. Havdal. ISBN , John Wiley & Sons Ltd 2002 The Research Foundation TISIP, Chapter 15, page 9 Summary: Making a Modal Dialog Window 1.A dialog window is always a subclass of JDialog. What we have to provide is a constructor that calls one of the JDialog’s constructors with modal parameter. If we do not do this, the constructor with empty parameter list will be used. And that constructor creates a nonmodal dialog window. The argument to the modal parameter has to be true, for example: super(parent, "Minidialog", true); 2.Each individual dialog has a method with the name showDialog() (or something similar). We find the call setVisible(true) inside the method. 3.All activity in the dialog has to end with the call setVisible(false). With this, the dialog is closed, and the program then goes on to the first statement after setVisible(true). 4.Let the dialog window be an instance variable in the parent window. Show program listing 15.3, pp Solve the problem, page 475.

Only to be used in connection with the book "Java the UML Way", by Else Lervik and Vegard B. Havdal. ISBN , John Wiley & Sons Ltd 2002 The Research Foundation TISIP, Chapter 15, page 10 An Ordinary OK Cancel Dialog ”OK” means that what the user has done in the window should apply. ”Cancel” means that what the user has done in the window should not apply. We make a class describing a dialog with these two buttons, and then our other dialogs may be subclasses of this class. The class is named MyDialog and put in the myLibrary package. Other functionality: –The class has a method okData(). A subclass may have its own version of this method. If the user presses OK, it will not be accepted unless okData() returns true. –If the user tries to close the window by pressing in the upper right corner, she will get a question ”Do you want input data to be saved?”. If the user answers yes, the window is closed only if okData() returns true. –Acceleration keys are linked to the buttons. The Enter key is linked to the OK-button (requires the OK button having focus). The Escape key is linked to the Cancel button (independent of focus). Show program listing 15.4, pp

Only to be used in connection with the book "Java the UML Way", by Else Lervik and Vegard B. Havdal. ISBN , John Wiley & Sons Ltd 2002 The Research Foundation TISIP, Chapter 15, page 11 Transferring Data Between a Parent Window and a Dialog Window Johnson, John Johnson, John Peter

Only to be used in connection with the book "Java the UML Way", by Else Lervik and Vegard B. Havdal. ISBN , John Wiley & Sons Ltd 2002 The Research Foundation TISIP, Chapter 15, page 12 Testing PersonDialog Show program listing 15.5, pp ParentWindow extends JFrame PersonDialog extends MyDialog JOptionPane, this box is displayed if user clicks the X in the upper right corner

Only to be used in connection with the book "Java the UML Way", by Else Lervik and Vegard B. Havdal. ISBN , John Wiley & Sons Ltd 2002 The Research Foundation TISIP, Chapter 15, page 13 The Last Version of the Renovation Case - the Classes From Chapter 12 With New GUI JTable JList

Only to be used in connection with the book "Java the UML Way", by Else Lervik and Vegard B. Havdal. ISBN , John Wiley & Sons Ltd 2002 The Research Foundation TISIP, Chapter 15, page 14 GridBagLayout as Layout Manager GridBagLayout is the most general of all the layout managers, and often the only applicable. It’s not suited for the trial end error method. To use it you have to do a careful planning. Use pen and paper! The manager has many parameters, and an error may give unpredictable results. First, create a sketch of the window: –Divide the window into rectangular cells by using vertical and horizontal lines. –Not more than one GUI component in every cell. –A GUI component may cover more than one cell. This sketch makes it possible to state the requirements of every component.

Only to be used in connection with the book "Java the UML Way", by Else Lervik and Vegard B. Havdal. ISBN , John Wiley & Sons Ltd 2002 The Research Foundation TISIP, Chapter 15, page 15 An Example toolbar table on the left list on the right backgr. text at the ottom text box at the bottom gridx00312 gridy01122 gridwidth43111 gridheight11111 fillNONEBOTH NONEHORIZONTAL anchorWESTCENTER EASTWEST

Only to be used in connection with the book "Java the UML Way", by Else Lervik and Vegard B. Havdal. ISBN , John Wiley & Sons Ltd 2002 The Research Foundation TISIP, Chapter 15, page 16 The Example, cont. Container guiContainer = getContentPane(); guiContainer.setLayout(new GridBagLayout()); // don’t forget this! GridBagConstraints constraints = new GridBagConstraints(); /* The following variables are fixed for all components */ constraints.insets = new Insets(5, 5, 5, 5); // space around and between the components constraints.weightx = 0.5; constraints.weighty = 0.5; /* Then each component has to be handled according to the table */ /* The Toolbar */ constraints.gridx = 0; constraints.gridy = 0; constraints.gridwidth = 4; constraints.gridheight = 1; constraints.fill = GridBagConstraints.NONE; constraints.anchor = GridBagConstraints.WEST; guiContainer.add(toolbar, constraints); //..and so on, for all the components

Only to be used in connection with the book "Java the UML Way", by Else Lervik and Vegard B. Havdal. ISBN , John Wiley & Sons Ltd 2002 The Research Foundation TISIP, Chapter 15, page 17 Is It Possible to Control the Size of the GUI Components? What about the setSize() method in the Component class? –It’s inherited by all the GUI components. –We’ve used it to set the size of windows. –For other components, the setSize() method is only effective if we don’t use any layout manager at all. Then the components are laid out according to given pixel values. What about the setMaximumSize(), setMinimumSize(), and setPreferredSize() methods in the JComponent class? –They are all inherited by every Swing component. –BorderLayout and GridLayout do not consider any of the wishes set up in these methods. –FlowLayout and GridBagLayout consider a component’s ”preferred size”. –BoxLayout (see the online API documentation) considers all these wishes. –All these methods take as argument an instance of the Dimension class. This class has the following constructor: Dimension(int width, int height). –An example: list.setPreferredSize(new Dimension(500, 300))

Only to be used in connection with the book "Java the UML Way", by Else Lervik and Vegard B. Havdal. ISBN , John Wiley & Sons Ltd 2002 The Research Foundation TISIP, Chapter 15, page 18 The GUI Component JTable A class with a lot of possibilities. We limit ourselves to the following: –The table has a fixed number of columns with fixed column names. –The user can adjust the width of the individual columns in the table. This results in the other columns becoming narrower. –The user can’t adjust the size of the table (the overall width and height of the table). –The user can’t change the data in the table. –The program can insert and delete rows in the table. In order to change the data, the program can delete a row and insert a new row in its place. –The user can select individual rows in the table. The program determines whether or not multiple rows can be selected, just as with lists. –The program handles the selection by having the user push a pushbutton, not by listening to row selections.

Only to be used in connection with the book "Java the UML Way", by Else Lervik and Vegard B. Havdal. ISBN , John Wiley & Sons Ltd 2002 The Research Foundation TISIP, Chapter 15, page 19 The ”Data Model” Behind If the contents of the table are to be changed, we have to update the ”data model” in the same way as we did for lists. –Repetition: DefaulListModel data = new DefaultlistModel(); JList list = new JList(data); data.add(object); // the toString() method is used when presenting the data For tables, we use the DefaultTableModel with a little correction: –The default model allows the user to edit the cells in the table; our programs do not handle this. –We create a subclass of the DefaultTableModel class where this is prevented: package myLibrary; import javax.swing.table.*; public class MyTableModel extends DefaultTableModel { public MyTableModel(String[] columnNames) { super(columnNames, 0); } public boolean isCellEditable(int row, int column) { return false; }

Only to be used in connection with the book "Java the UML Way", by Else Lervik and Vegard B. Havdal. ISBN , John Wiley & Sons Ltd 2002 The Research Foundation TISIP, Chapter 15, page 20 GUI For the Renovation Case The file named Dialogs.java: –One dialog window for each of the main objects in our problem: SurfaceDialog, PaintDialog, WallpaperDialog and FlooringDialog. The file named Constants.java: –An interface with named constants used in the different windows. –Examples are commands, menu items, and text field lengths. –Classes which need these constants implements the interface. The file named RenovationChap15.java: –The primary window –main() Show program listings 15.7, 15.8 and 15.9, from page 484 and so on.