1 / 57

Chapter 17 GUI Programming - Component Layout, Additional GUI Components

Chapter 17 GUI Programming - Component Layout, Additional GUI Components. Layout Managers Assigning the Layout Manager FlowLayout Manager FlowLayout Alignment Layout Changes BorderLayout Manager Label Alignment GridLayout Manager Tic-Tac-Toe Program Embedded Layout Managers

adelle
Télécharger la présentation

Chapter 17 GUI Programming - Component Layout, Additional GUI Components

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. Chapter 17GUI Programming - Component Layout, Additional GUI Components 1 • Layout Managers • Assigning the Layout Manager • FlowLayout Manager • FlowLayout Alignment • Layout Changes • BorderLayout Manager • Label Alignment • GridLayout Manager • Tic-Tac-Toe Program • Embedded Layout Managers • JPanel Class • MathCalculator Program • JTextArea Component • JCheckBox Component • JRadioButton Component • JComboBox Component • Job Application Example

  2. Layout Managers 2 • Layout managers automate the positioning of components within containers. • They free the programmer from the difficult task of figuring out the space needed for each component and the pixel coordinate positions for each component. • The layout manager looks at the size of its container and the sizes of the container's components. It then tries to fit the components neatly into the container. • If a user resizes the window, the layout manager takes that into account and adjusts the layout accordingly. • If a programmer adjusts a component's size (e.g., by changing a label's font size), the layout manager takes that into account and adjusts the layout accordingly.

  3. Layout Managers 3 • The four most common layout manager classes: • FlowLayout • BorderLayout • GridLayout • GridBagLayout • All of these layout manager classes are in the java.awt package so import that package.

  4. Assigning the Layout Manager 4 • To assign a particular layout manager to a JFrame window, call the setLayout method as follows: setLayout(new <layout-manager-class>()); • In the above code template, replace <layout­manager­class> by one of the layout manager classes (e.g., FlowLayout, BorderLayout, GridLayout). • If setLayout is not called, then the BorderLayout manager is used (because that's the default layout manager for a JFrame window).

  5. FlowLayout Manager 5 • The FlowLayout class implements a simple one-compartment layout scheme that allows multiple components to be inserted into the compartment. • When a component is added to the compartment, it is placed to the right of any components that were previously added to the compartment. • If there is not enough room to add a component to the right of previously added components, then the new component is placed on the next line (i.e., it "flows" to the next line).

  6. FlowLayout Alignment 6 • By default, components are placed in a FlowLayout container using top, center alignment. • There's no way to change the vertical alignment. But there is a way to change the horizontal alignment. To do so, insert one of the FlowLayout alignment constants (FlowLayout.LEFT, FlowLayout.CENTER, FlowLayout.RIGHT) in the FlowLayout constructor call. For example, here's how to specify left alignment: setLayout(new FlowLayout(FlowLayout.LEFT));

  7. Layout Changes 7 • Normally, setLayout is called just once - when the program initially lays out its components. But if there's a need to dynamically adjust the layout scheme, call setLayout again. For example, if you need to move a container's components to the right, reassign the layout like this: setLayout(new FlowLayout(FlowLayout.RIGHT)); validate(); • The validate method causes the layout manager to regenerate the component layout. If your window is visible (i.e., you've called setVisible(true)), and you attempt to change its layout in some way, you'll need to call validate to make the change take effect. • These method calls attempt to change the layout: • setLayout - to adjust the layout scheme • add - to add a component • setSize - to change the window's size

  8. BorderLayout Manager 8 • The BorderLayout manager provides five regions/compartments in which to insert components. • The sizes of the five regions are determined at run time, and they're based on the contents of each region. • Thus, if the west region contains a long label, the layout manager attempts to widen the west region. • Likewise, if the west region contains a short label, the layout manager attempts to narrow the west region.

  9. BorderLayout Manager 9 • More specifically, the sizes of the five regions are determined as shown below. West's contents determines this divider's position. East's contents determines this divider's position. North's contents determines this divider's position. South's contents determines this divider's position.

  10. BorderLayout Manager 10 • If an outer region (North, South, East, West) is empty, it collapses so that it does not take up any space. • For example: • What happens if the north region is empty? • What happens if the east and south regions are both empty? • What happens if the center region is empty?

  11. BorderLayout Manager 11 • To add a component to a BorderLayout region, call the container's add method like this: add(<component>, <region>); • Replace <component> by a component (a JLabel object, a JButtonobject, etc.) and replace <region> by one of these named constants: • BorderLayout.NORTH, BorderLayout.SOUTH, BorderLayout.WEST, BorderLayout.EAST, BorderLayout.CENTER • In the add method call, if the region argument is omitted, then the center region is used (because that's the default region). • With a BorderLayout container, you can add only five components total, one for each of the five regions. If you add a component to a region that already has a component, then the new component overlays the old component.

  12. AfricanCountries Program with Buttons 12 import javax.swing.*; import java.awt.*; public class AfricanCountries extends JFrame { private static final int WIDTH = 325; private static final int HEIGHT = 200; public AfricanCountries() { setSize(WIDTH, HEIGHT); setTitle("African Countries"); setDefaultCloseOperation(EXIT_ON_CLOSE); setLayout(new BorderLayout()); add(new JButton("Tunisia"), BorderLayout.NORTH); add(new JButton("<html>South<br>Africa</html>"), BorderLayout.SOUTH); add(new JButton("Western Sahara"), BorderLayout.WEST); add(new JButton("Central African Republic"), BorderLayout.CENTER); add(new JButton("Somalia"), BorderLayout.EAST); setVisible(true); } // end AfricanCountries constructor //************************************** public static void main(String[] args) { new AfricanCountries(); } // end main } // end class AfricanCountries

  13. Label Alignment 14 • To specify a label's alignment within a BorderLayout region, instantiate the label with an alignment constant like this: new JLabel(<label's-text>, <alignment-constant>) • Replace <alignment-constant> by one of these named constants: • SwingConstants.LEFT, SwingConstants.CENTER, SwingConstants.RIGHT • Here's an example that adds a center-aligned label to a BorderLayout north region: add(new JLabel("Tunisia", SwingConstants.CENTER), BorderLayout.NORTH);

  14. Label Alignment 15 • SwingConstants is an interface, defined in the javax.swing package. • SwingConstants stores a set of GUI-related constants that are commonly used by many different GUI programs. • To access a named constant in an interface, prefix it with the interface name. For example, to access the LEFT alignment constant, prefix LEFT with SwingConstants like this: SwingConstants.LEFT.

  15. GridLayout Manager 16 • The GridLayout manager lays out a container's components in a rectangular grid. The grid is divided into equal-sized cells. Each cell can hold only one component. • To specify the use of a GridLayout manager for a particular container, call setLayout like this: setLayout(new GridLayout(rows, cols, hGap, vGap)); # of rows Gap between columns, in pixels. Default value = 0. # of columns Gap between rows, in pixels. Default value = 0.

  16. Adding Components 17 • To add a component to one of the container's cells, call the add method like this: add(<component>); • The GridLayout manager positions components within the container using left-to-right, top-to-bottom order. The first added component goes in the top-left-corner cell, the next added component goes in the cell to the right of the first component, etc.

  17. GridLayout Manager 18 • Here's an example that displays a two-row, three-column table with six buttons: setLayout(new GridLayout(2, 3, 5, 5)); add(new JButton("1")); add(new JButton("2")); add(new JButton("3")); add(new JButton("4")); add(new JButton("5")); add(new JButton("6"));

  18. Specifying Number of Rows and Number of Columns 19 • Case 1: • If you know the number of rows and columns in your table and the table is completely filled in (i.e., there are no empty cells), call the GridLayout constructor with the actual number of rows and the actual number of columns. • Case 2: • Sometimes, you might want a row-oriented display. • If that's the case, call the GridLayout constructor with the actual number of rows for the rows argument and 0 for the columns argument. • A 0 for the columns argument indicates that you're leaving it up to the GridLayout manager to determine the number of columns.

  19. Specifying Number of Rows and Number of Columns 20 • Case 2 (continued): • Assume that you assign a container's layout like this: setLayout(new GridLayout(2, 0)); • Assume that you add 5 components to the container. • Here's the resulting display:

  20. Specifying Number of Rows and Number of Columns 21 • Case 3: • Sometimes, you might want a column-oriented display. • If that's the case, call the GridLayout constructor with the actual number of columns for the columns argument and 0 for the rows argument. • Assume that you assign a container's layout like this: setLayout(new GridLayout(0, 4)); • After adding 5 components to the container, here's the resulting display:

  21. Common Errors 22 • If you call the GridLayout constructor with 0's for both the rows and columns arguments, you'll get a compilation error; i.e., this generates a compilation error: setLayout(new GridLayout(0, 0)); • If you call the GridLayout constructor with non-0's for both the rows and columns arguments and your table is not completely filled, you may get unexpected results. • For example, the previous slide's four-column window is not completely filled. Suppose you accidentally specify a value for the rows argument: setLayout(new GridLayout(2, 4)); • After adding 5 components to the container, here's the resulting display:

  22. Tic-Tac-Toe Program 23 This program displays a 3x3 grid of blank buttons. When the first blank button is clicked, its label changes to an X. Subsequent clicked blank buttons change their labels to O and X in alternating sequence. import javax.swing.*; import java.awt.*; import java.awt.event.*; public class TicTacToe extends JFrame { private boolean xTurn = true; // keeps track of whether // it's X's turn or O's turn //*************************************** public TicTacToe() { setSize(200, 220); setTitle("Tic-Tac-Toe"); setDefaultCloseOperation(EXIT_ON_CLOSE); createContents(); setVisible(true); } // end TicTacToe constructor

  23. Tic-Tac-Toe Program 24 //************************************** // Create components and add to window. private void createContents() { JButton button; // re-instantiate this button and use // to fill entire board setLayout(new GridLayout(3, 3)); for (int i=0; i<3; i++) { for (int j=0; j<3; j++) { button = new JButton(); button.addActionListener(new Listener()); add(button); } // end for j } // end for i } // end createContents

  24. Tic-Tac-Toe Program 25 //*************************************** // If user clicks a button, change its label to "X" or "O". private class Listener implements ActionListener { public void actionPerformed(ActionEvent e) { JButton btn = (JButton) e.getSource(); if (btn.getText().equals("")) { btn.setText(xTurn ? "X" : "O"); xTurn = !xTurn; } } // end actionPerformed } // end class Listener //************************************** public static void main(String[] args) { new TicTacToe(); } } // end class TicTacToe getSource's return type is Object. The JButton cast operator is necessary to prevent a compilation error.

  25. Embedded Layout Managers 26 • What layout manager scheme should be used for this math-calculator window? • The GridLayout manager is usually pretty good at positioning components in an organized tabular fashion, but it's limited by the fact that each of its cells must be the same size.

  26. JPanel Class 28 • A JPanel container object is a generic storage area for components. • If you have a complicated window with lots of components, you may want to compartmentalize them by storing groups of components in JPanel containers. • JPanel containers are particularly useful with GridLayout and BorderLayout windows because each compartment in those layouts can store only one component. If you need a compartment to store more than one component, let that one component be a JPanel container, and put multiple components into the JPanel container.

  27. JPanel Class 29 • When using a JPanel container, do these things: • Since JPanel is in the javax.swing package, import that package. • Instantiate a JPanel object: JPanel <JPanel-reference> = new JPanel(<layout-manager>) • Add the components to the JPanel object: <JPanel-reference>.add(<component>) • Add the JPanel object to the window: add(<JPanel-reference>) Optional argument. Default = FlowLayout with center alignment.

  28. JPanel Class 30 • For example, to create the top-left cell's panel in the math-calculations program, do this: • In the createContents method: xPanel = new JPanel(new FlowLayout(FlowLayout.CENTER)); xPanel.add(xLabel); xPanel.add(xBox); add(xPanel);

  29. This MathCalculator program uses embedded layout managers to display square root and logarithm calculations. 31 import javax.swing.*; import java.awt.*; import java.awt.event.*; public class MathCalculator extends JFrame { private static final int WIDTH = 350; private static final int HEIGHT = 110; private JTextField xBox; // user's input value private JTextField xSqrtBox; // generated square root private JTextField xLogBox; // generated logarithm //*************************************** public MathCalculator() { setTitle("Math Calculator"); setSize(WIDTH, HEIGHT); setDefaultCloseOperation(EXIT_ON_CLOSE); createContents(); setVisible(true); } // end MathCalculator constructor

  30. MathCalculator Program 32 //************************************** // Create components and add to window. private void createContents() { JPanel xPanel; // holds x label and its text box JPanel xSqrtPanel; // holds "sqrt x" label and its text box JPanel xLogPanel; // holds "log x" label and its text box JLabel xLabel; JButton xSqrtButton; JButton xLogButton; Listener listener; setLayout(new GridLayout(2, 2)); // Create the x panel: xLabel = new JLabel("x:"); xBox = new JTextField(8); xPanel = new JPanel(new FlowLayout(FlowLayout.CENTER)); xPanel.add(xLabel); xPanel.add(xBox);

  31. MathCalculator Program 33 // Create the square-root panel: xSqrtButton = new JButton("sqrt x"); xSqrtBox = new JTextField(8); xSqrtBox.setEditable(false); xSqrtPanel = new JPanel(new FlowLayout(FlowLayout.RIGHT)); xSqrtPanel.add(xSqrtButton); xSqrtPanel.add(xSqrtBox); // Create the logarithm panel: xLogButton = new JButton("log x"); xLogBox = new JTextField(8); xLogBox.setEditable(false); xLogPanel = new JPanel(new FlowLayout(FlowLayout.RIGHT)); xLogPanel.add(xLogButton); xLogPanel.add(xLogBox); // Add panels to the window: add(xPanel); add(xSqrtPanel); add(new JLabel()); // dummy component add(xLogPanel);

  32. MathCalculator Program 34 listener = new Listener(); xSqrtButton.addActionListener(listener); xLogButton.addActionListener(listener); } // end createContents //*************************************** // Inner class for event handling. private class Listener implements ActionListener { public void actionPerformed(ActionEvent e) { double x; // numeric value for user entered x double result; // calculated value try { x = Double.parseDouble(xBox.getText()); } catch (NumberFormatException nfe) { x = -1; // indicates an invalid x }

  33. MathCalculator Program 35 if (e.getActionCommand().equals("sqrt x")) { if (x < 0) { xSqrtBox.setText("undefined"); } else { result = Math.sqrt(x); xSqrtBox.setText(String.format("%7.5f", result)); } } // end if else // calculate logarithm { if (x < 0) { xLogBox.setText("undefined"); } else { result = Math.log(x); xLogBox.setText(String.format("%7.5f", result)); } getActionCommand retrieves the label of the button that was clicked.

  34. MathCalculator Program 36 } // end else } // end actionPerformed } // end class Listener //************************************** public static void main(String[] args) { new MathCalculator(); } // end main } // end class MathCalculator

  35. JTextArea Component 37 • The JLabel component works great for displaying a single line of text. But for displaying multiple lines of text, you should use a JTextArea component. JTextArea component JCheckBox component

  36. JTextArea Component 38 • To create a JTextArea component, call the JTextArea constructor like this: JTextArea <JTextArea-reference> = new JTextArea(<display-text>); • The display-text is the text that appears in the JTextArea component. If the display-text argument is omitted, then the JTextArea component displays nothing.

  37. JTextArea Component 39 • The JTextArea class, like all the GUI component classes, has quite a few methods. Here are the API headings and descriptions for some of the more popular JTextArea methods: String getText() Returns the text area's text. void setText(String text) Assigns the text area's text. void setEditable(boolean flag) Makes the text box editable or non-editable. void setLineWrap(boolean flag) Turns line wrap on or off. void setWrapStyleWord(boolean flag) Specifies whether word boundaries are used for line wrapping.

  38. JTextArea Component 40 This code creates the components in the previously shown license agreement window. private void createContents() { JTextArea license; JCheckBox confirmBox; setLayout(new BorderLayout()); license = new JTextArea( "SOFTWARE END-USER LICENSE AGREEMENT\n\n" + "READ CAREFULLY: This Software End-User License Agreement" + " is a legal agreement between us, the software provider, and" + " you, the end user of a software product legitimately" + " purchased from us. You must accept this agreement to" + " complete the sale of the software license. If you do not" + " accept this agreement, you forfeit all rights to your" + " current and future property and progeny."); license.setEditable(false); license.setLineWrap(true); license.setWrapStyleWord(true); confirmBox = new JCheckBox( "I accept the terms of this agreement.", true); add(license, BorderLayout.CENTER); add(confirmBox, BorderLayout.SOUTH); } // end createContents

  39. JCheckBox Component 41 • JCheckBox component interface: • A JCheckBox component displays a small square with a label to its right. • When the square is blank, the check box is unselected. When the square contains a check mark, the check box is selected. • Users click on the check box in order to toggle it between selected and unselected.

  40. JCheckBox Component 42 • To create a JCheckBox component, call the JCheckBox constructor like this: JCheckBox <JCheckBox-reference> = new JCheckBox(<label>, <selected>); • The label argument specifies the text that appears at the right of the check box's square. If the label argument is omitted, then no text appears at the right of the check box's square. • The selected argument specifies whether the check box is initially selected. If the selected argument is omitted, then the check box is initially unselected.

  41. JCheckBox Component 43 • Here are the API headings and descriptions for some of the more popular 6 methods: boolean isSelected() Returns true if the check box is selected and false otherwise. String setVisible(boolean flag) Makes the check box visible or invisible. void setSelected(boolean flag) Makes the check box selected or unselected. void setEnabled(boolean flag) Makes the check box enabled or disabled. void addActionListener(ActionListener listener) Adds a listener to the check box.

  42. JCheckBox Component 44 • Installation Options Example:

  43. JCheckBox Component 45 • With a standard JButton button, you'll almost always want to have an associated listener. • However, you may or may not want to have an associated listener for a check box. • Use a listener if you want something to happen immediately, right when the user checks or unchecks the check box. • If there's no listener, then the check box simply serves as an input entity. If that's the case, then the check box's value (checked or unchecked) would typically get read and processed when the user clicks a button.

  44. JRadioButton Component 46 • JRadioButton component interface: • A JRadioButton component displays a small circle with a label to its right. • When the circle is blank, the radio button is unselected. • When the circle contains a large dot, the radio button is selected. • Almost always, radio buttons come in groups. • Within a radio-button group, only one radio button can be selected at a time. • If an unselected button is clicked, the clicked button becomes selected, and the previously selected button in the group becomes unselected. • If a selected button is clicked, no change occurs (i.e., the clicked button remains selected).

  45. JRadioButton Component 47 • To create a JRadioButton component, call the JRadioButton constructor like this: JRadioButton <JRadioButton-reference> = new JRadioButton(<label>, <selected>); • The label argument specifies the text that appears at the right of the radio button's circle. If the label argument is omitted, then no text appears at the right of the radio button's circle. • The selected argument specifies whether the radio button is initially selected. If the selected argument is omitted, then the radio button is initially unselected. • This example shows how we created the standard and custom radio buttons in the installation-options program: standard = new JRadioButton("Standard (recommended)", true); custom = new JRadioButton("Custom");

  46. JRadioButton Component 48 • To enable the only-one-button-selected-at-a-time functionality of a radio button group, create a ButtonGroup object and add individual radio button components to it. Here's how: ButtonGroup <ButtonGroup-reference> = new ButtonGroup(); <ButtonGroup-reference>.add(<first-button-in-group>); ... <ButtonGroup-reference>.add(<last-button-in-group>); • This example shows how we created the radio button group for the standard and custom radio buttons in the installation-options program: ButtonGroup rbGroup = new ButtonGroup(); rbGroup.add(standard); rbGroup.add(custom);

  47. JRadioButton Component 49 • Here are the API headings and descriptions for some of the more popular JRadioButton methods: boolean isSelected() Returns true if the radio button is selected and false otherwise. String setVisible(boolean flag) Makes the radio button visible or invisible. void setSelected(boolean flag) Makes the radio button selected if the argument is true. Does nothing if the argument is false. void setEnabled(boolean flag) Makes the radio button enabled or disabled. void addActionListener(ActionListener listener) Adds a listener to the radio button.

  48. JComboBox Component 50 • A combo box allows the user to select an item from a list of items. • Combo boxes are sometimes called drop-down lists because when you click the combo box's down arrow, a list of selection items drops down. • After a selection is made, the item list disappears and only the selected item is displayed. • Combo boxes are called "combo boxes" because they are a combination of a text box (normally, they look just like a text box) and a list (when the down arrow is clicked, they look like a list). • Combo boxes and radio-button groups are similar in that they both allow the user to select one item from a list of items. But a combo box takes up less space on the window. So if you have a long list of items to choose from, and you want to save space, use a combo box rather than a group of radio buttons.

  49. JComboBox Component 51 • Note this example where the user selects a day from among the five week days: 1. Initial display: 2. After user clicks on down arrow: 3. After user clicks on Thursday:

  50. JComboBox Component 52 • How to implement a combo box: • Create an array of list options: private String[] days = {"Monday", "Tuesday", "Wednesday", "Thursday", "Friday"}; • Create a combo-box object by passing the array to the JComboBox constructor: JComboBox daysBox = new JComboBox(days);

More Related