1 / 62

Chapter 18 GUI Programming - Component Layout, Additional GUI Components

Chapter 18 GUI Programming - Component Layout, Additional GUI Components. Layout Managers Assigning the Layout Manager FlowLayout Manager FlowLayout Alignment validate Method BoxLayout Manager BorderLayout Manager Label Alignment GridLayout Manager Tic-Tac-Toe Program

kris
Download Presentation

Chapter 18 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 18GUI Programming - Component Layout, Additional GUI Components 1 • Layout Managers • Assigning the Layout Manager • FlowLayout Manager • FlowLayout Alignment • validate Method • BoxLayout Manager • 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 five most common layout manager classes: • FlowLayout • BoxLayout • BorderLayout • GridLayout • GridBagLayout • Except for BoxLayout, all of these layout manager classes are in the java.awt package. The BoxLayout class is in the javax.swing package. Import the appropriate 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>(<arguments>); • In the above code template, replace <layout­manager­class> by one of the layout manager classes (e.g., FlowLayout, BoxLayout, BorderLayout, GridLayout), and replace <arguments> by zero or more arguments. • 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. validate Method 7 • According to the Java API 7 documentation, after a program's initial display, if the program attempts to change a container's layout (e.g., adding or removing a component, calling setLayout, or calling setSize), the change might not take place immediately. • To ensure that the change takes place immediately, call JFrame's validate method like this: add(new JLabel("Congratulations! You win!")); validate(); • The validate method causes the layout manager to regenerate the window's layout.

  8. BoxLayout Manager 8 • The BoxLayout manager arranges components in either a single row or a single column. • There is no wrap around (long components will be partially cutoff), so take care to assign appropriate window dimensions. • The BoxLayout class is in the javax.swing package (unlike FlowLayout, BorderLayout, and GridLayout, which are in the java.awt package), so import javax.swing . • To specify the use of a BoxLayout manager for a container, call setLayout like this: setLayout( new BoxLayout(frame.getContentPane(), BoxLayout.orientation)); frame is an instance of JFrame. Replace frame with this or a local variable, depending on the rest of the program. Replace orientation with BoxLayout.Y_AXIS. for a vertical container or BoxLayout.X_AXIS. for a horizontal container.

  9. BoxLayout Manager 9 • The upcoming program creates the window at the right by using a BoxLayout manager and adding the five circled JLabel components to it. • Normally, JLabel components are instantiated by passing a string to the JLabel constructor. However, the second JLabel component was instantiated by passing an ImageIcon to the constructor like this: new JLabel( new ImageIcon(filename));

  10. BoxLayout Manager 10 • In all of our prior GUI programs, we added the clause extends JFrame to the program's class heading. By extending JFrame, that means that when the class is instantiated, a GUI window is generated. • That technique works great when you know that you want a GUI window displayed initially. But in the dance recital program, we want to generate the GUI window only when the driver calls the program's printPoster method. To do that, call the JFrame constructor within the printPoster method. • The printPoster method relies on the following 5 instance variables, which are used to create the window's 5 JLabel components: private String performance; // name of the performance private String image; // name of image file private String date; // dance recital's date private String time; // dance recital's time private String venue; // dance recital's location

  11. DanceRecital’sdisplayPoster Method 11 Instantiate a JFrame window. public void displayPoster() { JFrame frame = new JFrame("Dance Recital"); // the window JLabel pictureLabel; // container for dancer picture frame.setSize(480, 640); // pixel width, height frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.setLayout( new BoxLayout(frame.getContentPane(), BoxLayout.Y_AXIS)); addLabel(frame, this.performance, Font.ITALIC, 75); pictureLabel = new JLabel(new ImageIcon(image)); pictureLabel.setAlignmentX(Component.CENTER_ALIGNMENT); frame.add(pictureLabel); addLabel(frame, this.date, Font.BOLD, 25); addLabel(frame, this.time, Font.BOLD, 25); addLabel(frame, this.venue, Font.BOLD, 25); frame.setVisible(true); } // end displayPoster Assign a vertical layout to the window. Create a JLabel component with an embedded image.

  12. DanceRecital’saddLabelMethod 12 // This method instantiates a label and adds it to the window. private void addLabel( JFrame frame, String labelText, int style, int size) { JLabel label = new JLabel(labelText); label.setAlignmentX(Component.CENTER_ALIGNMENT); label.setFont(new Font("Serif", style, size)); frame.add(label); } // end addLabel } // end class DanceRecital

  13. BorderLayout Manager 13 • 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.

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

  15. BorderLayout Manager 15 • 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?

  16. BorderLayout Manager 16 • 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.

  17. AfricanCountries Program with Buttons 17 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() { setTitle("African Countries"); setSize(WIDTH, HEIGHT); setLayout(new BorderLayout()); setDefaultCloseOperation(EXIT_ON_CLOSE); 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

  18. Label Alignment 19 • 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);

  19. Label Alignment 20 • 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.

  20. GridLayout Manager 21 • 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 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.

  21. Adding Components 22 • 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.

  22. GridLayout Manager 23 • 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")); vertical gap = 5 pixels horizontal gap = 5 pixels

  23. Specifying Number of Rows and Number of Columns 24 • 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.

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

  25. Specifying Number of Rows and Number of Columns 26 • 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 buttons to the container, here's the resulting display:

  26. Common Errors 27 • 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:

  27. Tic-Tac-Toe Program 28 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 an alternating sequence. import javax.swing.*; import java.awt.*; import java.awt.event.*; public class TicTacToe extends JFrame { private static final int WIDTH = 200; private static final int HEIGHT = 220; // keeps track of whether it's X's turn or O's turn private booleanxTurn = true; //*************************************** public TicTacToe() { setTitle("Tic-Tac-Toe"); setSize(WIDTH, HEIGHT); setDefaultCloseOperation(EXIT_ON_CLOSE); createContents(); setVisible(true); } // end TicTacToe constructor

  28. Tic-Tac-Toe Program 29 //************************************** // 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

  29. Tic-Tac-Toe Program 30 //*************************************** // 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().isEmpty()) { 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.

  30. Embedded Layout Managers 31 • 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.

  31. JPanel Class 33 • 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.

  32. JPanel Class 34 • 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. The default is FlowLayout with center alignment. If the JPanel object uses a BorderLayout, then add a region argument. If the JFrame object uses a BorderLayout, then add a region argument.

  33. JPanel Class 35 • 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);

  34. This MathCalculator program uses embedded layout managers to display square root and logarithm calculations. 36 import javax.swing.*; import java.awt.*; import java.awt.event.*; public class MathCalculator extends JFrame { private static final int WIDTH = 380; 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

  35. MathCalculator Program 37 //************************************** // 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);

  36. MathCalculator Program 38 // 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);

  37. MathCalculator Program 39 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 }

  38. MathCalculator Program 40 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.

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

  40. JTextArea Component 42 • 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

  41. JTextArea Component 43 • 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 no initial text. • The size of a JTextArea component is the size of the container that contains it. • In the license program, the JTextArea component was placed in a border layout’s center region. If the user enlarges the window size, the center region expands, and the JTextArea box expands also.

  42. JTextArea Component 44 • 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.

  43. JTextArea Component 45 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

  44. JCheckBox Component 46 • JCheckBox component interface: • A JCheckBox component displays a small square with a label at 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.

  45. JCheckBox Component 47 • 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, a Boolean value, specifies whether the check box is initially selected. If the selected argument is omitted, then the check box is initially unselected.

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

  47. JCheckBox Component 49 • Installation Options Example:

  48. JCheckBox Component 50 • 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.

  49. JRadioButton Component 51 • JRadioButton component interface: • A JRadioButton component displays a small circle with a label at 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).

  50. JRadioButton Component 52 • 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, a Boolean value, 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 the standard and custom radio buttons were created in the installation-options program: standard = new JRadioButton("Standard (recommended)", true); custom = new JRadioButton("Custom");

More Related