1 / 20

Creating User Interfaces

Creating User Interfaces. Menues page 2-3 Tollbars page 4 Dialog windows, introduction page 5-9 An ordinary OK-Cancel dialog page 10 Trasferring data between parent window and dialog window page 11-12 The renovation case, a new GUI page 13

senta
Download Presentation

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

E N D

Presentation Transcript

  1. Creating User Interfaces Menues page 2-3 Tollbars page 4 Dialog windows, introduction page 5-9 An ordinary OK-Cancel dialog page 10 Trasferring data between parent window and dialog window page 11-12 The renovation case, a new GUI page 13 GridBagLayout as layout manager page 14-16 Is it possible to control the size of the components? page 17 The GUI component JTable page 18-19 The renovation case GUI page 20 Only to be used in connection with the book "Java the UML Way", by Else Lervik and Vegard B. Havdal. ISBN 0-470-84386-1, John Wiley & Sons Ltd 2002The Research Foundation TISIP, http://tisip.no/engelsk/

  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 0-470-84386-1, John Wiley & Sons Ltd 2002The Research Foundation TISIP, http://tisip.no/engelsk/

  3. 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); } } } Menus in this book JMenu JMenuBar JMenuItem A menu choice generates an ActionEvent. Solve problem 1, page 457. Only to be used in connection with the book "Java the UML Way", by Else Lervik and Vegard B. Havdal. ISBN 0-470-84386-1, John Wiley & Sons Ltd 2002The Research Foundation TISIP, http://tisip.no/engelsk/

  4. Toolbars JButton JToolBar 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); } } } The toolbar in its ordinary place The toolbar is dragged away from its ordinary place, becoming a window of its own Only to be used in connection with the book "Java the UML Way", by Else Lervik and Vegard B. Havdal. ISBN 0-470-84386-1, John Wiley & Sons Ltd 2002The Research Foundation TISIP, http://tisip.no/engelsk/

  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 0-470-84386-1, John Wiley & Sons Ltd 2002The Research Foundation TISIP, http://tisip.no/engelsk/

  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 0-470-84386-1, John Wiley & Sons Ltd 2002The Research Foundation TISIP, http://tisip.no/engelsk/

  7. The Most Basic Dialog Window 1 2 showDialog() Only to be used in connection with the book "Java the UML Way", by Else Lervik and Vegard B. Havdal. ISBN 0-470-84386-1, John Wiley & Sons Ltd 2002The Research Foundation TISIP, http://tisip.no/engelsk/

  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 0-470-84386-1, John Wiley & Sons Ltd 2002The Research Foundation TISIP, http://tisip.no/engelsk/

  9. Summary: Making a Modal Dialog Window Show program listing 15.3, pp. 464-466. • 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); • Each individual dialog has a method with the name showDialog() (or something similar). We find the call setVisible(true) inside the method. • 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). • Let the dialog window be an instance variable in the parent window. 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 0-470-84386-1, John Wiley & Sons Ltd 2002The Research Foundation TISIP, http://tisip.no/engelsk/

  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. 468-470. Only to be used in connection with the book "Java the UML Way", by Else Lervik and Vegard B. Havdal. ISBN 0-470-84386-1, John Wiley & Sons Ltd 2002The Research Foundation TISIP, http://tisip.no/engelsk/

  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 0-470-84386-1, John Wiley & Sons Ltd 2002The Research Foundation TISIP, http://tisip.no/engelsk/

  12. Testing PersonDialog ParentWindow extends JFrame PersonDialog extends MyDialog JOptionPane, this box is displayed if user clicks the X in the upper right corner Show program listing 15.5, pp. 471-475. Only to be used in connection with the book "Java the UML Way", by Else Lervik and Vegard B. Havdal. ISBN 0-470-84386-1, John Wiley & Sons Ltd 2002The Research Foundation TISIP, http://tisip.no/engelsk/

  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 0-470-84386-1, John Wiley & Sons Ltd 2002The Research Foundation TISIP, http://tisip.no/engelsk/

  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 0-470-84386-1, John Wiley & Sons Ltd 2002The Research Foundation TISIP, http://tisip.no/engelsk/

  15. toolbar table on the left list on the right backgr. text at the ottom text box at the bottom gridx 0 0 3 1 2 gridy 0 1 1 2 2 gridwidth 4 3 1 1 1 gridheight 1 1 1 1 1 fill NONE BOTH BOTH NONE HORIZONTAL anchor WEST CENTER CENTER EAST WEST An Example Only to be used in connection with the book "Java the UML Way", by Else Lervik and Vegard B. Havdal. ISBN 0-470-84386-1, John Wiley & Sons Ltd 2002The Research Foundation TISIP, http://tisip.no/engelsk/

  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 0-470-84386-1, John Wiley & Sons Ltd 2002The Research Foundation TISIP, http://tisip.no/engelsk/

  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 0-470-84386-1, John Wiley & Sons Ltd 2002The Research Foundation TISIP, http://tisip.no/engelsk/

  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 0-470-84386-1, John Wiley & Sons Ltd 2002The Research Foundation TISIP, http://tisip.no/engelsk/

  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 0-470-84386-1, John Wiley & Sons Ltd 2002The Research Foundation TISIP, http://tisip.no/engelsk/

  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. Only to be used in connection with the book "Java the UML Way", by Else Lervik and Vegard B. Havdal. ISBN 0-470-84386-1, John Wiley & Sons Ltd 2002The Research Foundation TISIP, http://tisip.no/engelsk/

More Related