Creating User Interfaces

1. Creating User Interfaces

2. Topics • Graphical user interfaces with various user-interface components: javax.swing.JButton, JCheckBox, JRadioButton, JLabel, JTextField, JTextArea, JComboBox, JList, JScrollBar, and JSlider. • Listeners for various types of events. • Borders to visually group user-interface components. • Image icons using the ImageIcon class. • Multiple windows in an application.

3. Components • GUI components • Borders and icons

5. Borders • Set a border on any object of the javax.swing.JComponent class. • Titled border new javax.swing.border.TitledBorder(String title). • Line border new javax.swing.border.LineBorder(Color color, int width), width specifies the thickness of the line. • Titled border on a panel: JPanel panel = new JPanel(); panel.setBorder(new TitleBorder(“My Panel”));

6. Swing Common Features JComponent Properties • toolTipText • border Component Properties • font • background • foreground • preferredSize • minimumSize • maximumSize TestSwingCommonFeatures Run

7. Buttons • Button is a component that triggers an action event when clicked. • Swing provides regular buttons, toggle buttons, check box buttons, and radio buttons. • Common features of these buttons are in javax.swing.AbstractButton.

9. JButton Javax.swing.JButton extends AbstractButton and provides several constructors to create buttons.

10. JButton Constructors The following are JButton constructors: JButton() JButton(String text) JButton(String text, Icon icon) JButton(Icon icon)

11. JButton Properties • text • icon • mnemonic • horizontalAlignment • verticalAlignment • horizontalTextPosition • verticalTextPosition • iconTextGap

12. Icons • Icon: small, fixed-size picture used to decorate components. • Interface: javax.swing.Icon • Create an icon, use javax.swing.ImageIcon. • Icon icon = new ImageIcon("photo.gif"); TestButtonIcons Run

13. Default, pressed, rollover Icons, • Regular button has a default icon, pressed icon, and rollover icon. • Pressed icon is displayed when button is pressed. • Rollover icon is displayed when the mouse is over the button. (A) Default icon (B) Pressed icon (C) Rollover icon

14. Horizontal Alignment • Horizontal alignment specifies icon and text horizontal placement on a button. • Five constants: LEADING, LEFT, CENTER, RIGHT, TRAILING. • LEADING and LEFT are the same • TRAILING and RIGHT are the same. • Default horizontal alignment is SwingConstants.TRAILING.

15. Vertical Alignment • Vertical alignment specifies icon and text vertical placement on a button. • Set the vertical alignment: TOP, CENTER, BOTTOM. • Default vertical alignment is SwingConstants.CENTER.

16. Horizontal Text Position • Horizontal text position specifies the horizontal position of the text relative to the icon. • Set the horizontal text position using one of the five constants: LEADING, LEFT, CENTER, RIGHT, TRAILING. Default horizontal text position is SwingConstants.RIGHT.

17. Vertical Text Position • Vertical text position specifies the vertical position of the text relative to the icon. • Set the vertical text position using one of the three constants: TOP, CENTER. • Default vertical text position is SwingConstants.CENTER.

18. Using Buttons Displays a message on a panel and uses two buttons “<= and =>” to move the message on the panel to the left or right. ButtonDemo Run

19. JCheckBox inherits text, icon, mnemonic, verticalAlignment, horizontalAlignment, horizontalTextPosition, verticalTextPosition, and others from AbstractButton.

20. Check Boxes • Add three check boxes named Centered, Bold, and Italic • User specifies whether the message is centered, bold, or italic. ButtonDemo CheckBoxDemo CheckBoxDemo Run

21. JRadioButton • Only one button is checked at a time.

22. Grouping Radio Buttons ButtonGroup btg = new ButtonGroup(); btg.add(jrb1); btg.add(jrb2);

23. Radio Buttons • Add three radio buttons named Red, Green, and Blue • User chooses the color of the message. ButtonDemo CheckBoxDemo RadioButtonDemo RadioButtonDemo Run

24. JLabel • label is a display area for a short text, an image, or both.

25. JLabel Constructors JLabel() JLabel(String text, int horizontalAlignment) JLabel(String text) JLabel(Icon icon) JLabel(Icon icon, int horizontalAlignment) JLabel(String text, Icon icon, int horizontalAlignment)

26. JLabel Properties • JLabel inherits all the properties from JComponent • Has many properties similar to the ones in JButton, including text, icon, horizontalAlignment, verticalAlignment, horizontalTextPosition, verticalTextPosition, and iconTextGap.

27. Using Labels // Create an image icon from image file ImageIcon icon = new ImageIcon("image/grapes.gif"); // Create a label with text, an icon, // with centered horizontal alignment JLabel jlbl = new JLabel("Grapes", icon, SwingConstants.CENTER); // Set label's text alignment and gap between text and icon jlbl.setHorizontalTextPosition(SwingConstants.CENTER); jlbl.setVerticalTextPosition(SwingConstants.BOTTOM); jlbl.setIconTextGap(5);

28. JTextField • User can type in characters.

29. JTextField Constructors • JTextField(int columns) Creates an empty text field with the specified number of columns. • JTextField(String text) Creates a text field initialized with the specified text. • JTextField(String text, int columns) Creates a text field initialized with thespecified text and the column size.

30. JTextField Properties • text • horizontalAlignment • editable • columns

31. JTextField Methods • getText() Returns the string from the text field. • setText(String text) Puts the given string in the text field. • setEditable(boolean editable) Enables or disables the text field to be edited. By default, editable is true. • setColumns(int) Sets the number of columns in this text field.The length of the text field is changeable.

32. Text Fields • Add a text field. TextFieldDemo Run

33. JTextArea • JTextArea enables the user to enter multiple lines of text.

34. JTextArea Constructors • JTextArea(int rows, int columns) Creates a text area with the specified number of rows and columns. • JTextArea(String s, int rows, int columns) Creates a text area with the initial text andthe number of rows and columns specified.

35. JTextArea Properties • text • editable • columns • lineWrap • wrapStyleWord • rows • lineCount • tabSize

36. Text Areas • Displays an image in a label, a title in a label, and text in a text area.

37. TextAreaDemo Run

38. JComboBox Simple list of items from which the user can choose only one value.

39. JComboBox Methods • To add an item to a JComboBox jcbo, use jcbo.addItem(Object item) • To get an item from JComboBox jcbo, use jcbo.getItem()

40. itemStateChanged Handler public void itemStateChanged(ItemEvent e) { // Make sure the source is a combo box if (e.getSource() instanceof JComboBox) String s = (String)e.getItem(); } • When a choice is checked or unchecked, itemStateChanged() for ItemEvent is called as well as the actionPerformed() handler for ActionEvent.

41. Combo Boxes • View an image and a description of a country's flag by selecting the country from a combo box. ComboBoxDemo Run

42. JList • A list is a component that performs basically the same function as a combo box, but it enables the user to choose a single value or multiple values.

43. JList Constructors • JList() Creates an empty list. • JList(Object[] stringItems) Creates a new list initialized with items.

44. JList Properties • selectedIndexd • selectedIndices • selectedValue • selectedValues • selectionMode • visibleRowCount

45. Lists • Users select countries in a list and display the flags of the selected countries in the labels. ListDemo Run

46. JScrollBar • A scroll bar is a control that enables the user to select from a range of values. Styles: horizontal and vertical.

47. Scroll Bar Properties

48. Scrollbars • Uses horizontal and vertical scrollbars to control a message displayed on a panel. • The horizontal scrollbar is used to move the message to the left or the right, and the vertical scrollbar to move it up and down. ScrollBarDemo Run

49. JSlider JSlider is similar to JScrollBar, but JSlider has more properties and can appear in many forms.

50. Sliders • Control a message displayed on a panel instead of using scroll bars. SliderDemo Run