Graphical User Interface (GUI) - 1

2,026 views
1,774 views

Published on

Chapter 11

Published in: Education, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,026
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
108
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Graphical User Interface (GUI) - 1

  1. 1. Graphical User Interface (GUI)
  2. 2. Objectives  After you have read and studied this chapter, you should be able to  Define a subclass of JFrame to implement a customized frame window.  Write event-driven programs using Java's delegation-based event model  Arrange GUI objects on a window using layout managers and nested panels  Write GUI application programs using JButton, JLabel, ImageIcon, JTextField, JTextArea, JCheckBox, JR adioButton, JComboBox, JList, and JSlider objects from the javax.swing package  Write GUI application programs with menus
  3. 3. Graphical User Interface  In Java, GUI-based programs are implemented by using classes from the javax.swing and java.awt packages.  The Swing classes provide greater compatibility across different operating systems. They are fully implemented in Java, and behave the same on different operating systems.
  4. 4. Various Java GUI Components from the javax.swing package Button Label Text field Check Box Radio Button Combo Box
  5. 5. Sample GUI Objects  Various GUI components from the javax.swing package.
  6. 6. AWT Class Hierarchy (java.awt package) AWTEvent Font FontMetrics Component Graphics Object Color Canvas Button TextComponent Label List CheckBoxGroup CheckBox Choice Container Panel Applet Frame Dialog FileDialog Window TextField TextArea MenuComponent MenuItem MenuBar Menu Scrollbar LayoutManager
  7. 7. Swing Class Hierarchy (javax.swing) Dimension Font FontMetrics Component Graphics Object Color Container Panel Applet Frame Dialog Window JComponent JApplet JFrame JDialog Swing Components in the javax.swing package Lightweight Classes in the java.awt package 1 LayoutManager *
  8. 8.  Can be classified into three groups  Container classes  Ex: JFrame, JPanel, JApplet  To contain other components  Helper classes  Graphics, Color, Font, etc  Used by components and containers to draw and place objects  Component classes  JButton, JTextField, ETC are subclasses of JComponent GUI Classes
  9. 9. Container Classes Dimension Font FontMetrics Component Graphics Object Color Container Panel Applet Frame Dialog Window JComponent JApplet JFrame JDialog Swing Components in the javax.swing package Lightweight Heavyweight Classes in the java.awt package 1 LayoutManager * JPanel Container classes can contain other GUI components.
  10. 10.  Used to contain other GUI components  Window, Panel, Frame, Dialog and Applet are the container classes for AWT components  To work with Swing components, use Component, Container, JFrame, JPanel,JDialog and JApplet  Container  Used to group components.  A layout manager is used to position and place components in container  Ex. Frames, panels and applets Container Classes
  11. 11.  JFrame  Is a window not contained inside another window. It is the container that holds other swing UI components  JPanel  An invisible container that holds UI components  Panel can be nested  Can place panels inside a container that includes a panel  JDialog  A pop-up windows or message box to receive additional information from the user or provide notification that an event has occurred  JApplet – a subclass of Applet. Must extend JApplet to create a Swing-based applet Container Classes
  12. 12. GUI Helper Classes Dimension Font FontMetrics Component Graphics Object Color Container Panel Applet Frame Dialog Window JComponent JApplet JFrame JDialog Swing Components in the javax.swing package Lightweight Heavyweight Classes in the java.awt package 1 LayoutManager * JPanel The helper classes are not subclasses of Component. They are used to describe the properties of GUI components such as graphics context, colors, fonts, and dimension.
  13. 13.  Component is a superclass of all the UI classes  JComponent is a superclass of all the lightweight Swing components  JComponent is an abstract class, cannot use new JComponent to create an instance of JComponent  Use the constructor of subclasses of JComponent to create JComponent instances.  An instance of a subclass can invoke the accessible method defined in its superclass Swing GUI Components
  14. 14. wing GUI Components – class hierarchy JMenuItem JCheckBoxMenuItem AbstractButton JComponent JMenu JRadioButtonMenuItem JToggleButton JCheckBox JRadioButton JComboBox JInternalFrame JLayeredPane JList JMenuBar JOptionPane JPopupMenu JProgressBar JFileChooser JScrollBar JScrollPaneJSeparatorJSplitPane JSlider JTabbedPane JTable JTableHeader JTextFieldJTextComponent JTextArea JToolBar JToolTip JTree JRootPane JPanel JPasswordField JColorChooser JLabel JEditorPane JSpinner JButton
  15. 15. Frames  Frame is a window that is not contained inside another window.  Frame is the basis to contain other user interface components in Java GUI applications.  The Frame class can be used to create windows. The Frame class contains rudimentary functionalities to support features found in any frame window.  For Swing GUI programs, use JFrame class to create windows.
  16. 16. Two Ways to Create a Window Using JFrame  First approach  Declare & Create object of type JFrame  Use various methods to manipulate window  Second approach  Create class containing application program by extending definition of class JFrame  Utilizes mechanism of inheritance
  17. 17. Creating Frames 1) First approach: import javax.swing.*; public class MyFrame { public static void main(String[] args) { JFrame frame = new JFrame(“MyFrame"); frame.setSize(400, 300); frame.setVisible(true); frame.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE); } }
  18. 18. Creating Frames import javax.swing.*; public class MyFrame { public static void main(String[] args) { JFrame frame = new JFrame(“MyFrame"); frame.setSize(400, 300); frame.setVisible(true); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); } } 300 400 setVisible() and setSize() – methods in Component class setDefaultCloseOperation (EXIT_ON_CLOSE) - terminate when the frame is closed
  19. 19. Creating Frames 2) Second approach : import javax.swing.*; public class MyFrame extends JFrame { public MyFrame() { setTitle(“MyFrame"); setSize(400, 300); setVisible(true); setDefaultCloseOperation(EXIT_ON_CLOSE); } public static void main(String[] args) { MyFrame myFrame = new MyFrame(); } }
  20. 20. The Content Pane of a Frame  The content pane is where we put GUI objects such as buttons, labels, scroll bars, and others.  We access the content pane by calling the frame’s getContentPane method. This gray area is the content pane of this frame.
  21. 21. Changing the Background Color  Here's how we can change the background color of a content pane to blue: Container contentPane = getContentPane(); contentPane.setBackground(Color.BLUE);
  22. 22. Placing GUI Objects on a Frame There are two ways to put GUI objects on the content pane of a frame:  Use a layout manager ○ FlowLayout ○ BorderLayout ○ GridLayout ○ others  Use absolute positioning ○ null layout manager
  23. 23. Placing a Button  A JButton object a GUI component that represents a pushbutton.  Here's an example of how we place a button with FlowLayout. contentPane.setLayout( new FlowLayout()); JButton okButton = new JButton("OK"); JButton cancelButton = new JButton("CANCEL"); contentPane.add(okButton); contentPane.add(cancelButton);
  24. 24. Layout Managers  The layout manager determines how the GUI components are added to the container (such as the content pane of a frame)  Layout managers are set in containers using the setLayout(LayoutManager) method in a container
  25. 25. FlowLayout  In using this layout, GUI components are placed in left-to-right order.  When the component does not fit on the same line, left-to-right placement continues on the next line.  As a default, components on each line are centered.  When the frame containing the component is resized, the placement of components is adjusted accordingly.
  26. 26. FlowLayout Sample This shows the placement of five buttons by using FlowLayout.
  27. 27. FlowLayout The components are arranged in the container from left to right in the order in which they were added. When one row becomes filled, a new row is started. FlowLayout can be aligned in 3 ways: FlowLayout.LEFT – left aligned FlowLayout.RIGHT – right aligned FlowLayout.CENTER – center aligned
  28. 28. FlowLayout Constructors  public FlowLayout(int align, int hGap, int vGap) Constructs a new FlowLayout with a specified alignment, horizontal gap, and vertical gap. The gaps are the distances in pixel between components.  public FlowLayout(int alignment) Constructs a new FlowLayout with a specified alignment and a default gap of five pixels for both horizontal and vertical.  public FlowLayout() Constructs a new FlowLayout with a default center alignment and a default gap of five pixels for both horizontal and vertical.
  29. 29. import java.awt.*; import javax.swing.*; //import java.awt.event.*; public class TestFlowLayout extends JFrame { public TestFlowLayout() { super(“Using flowLayout"); Container cpane = getContentPane(); cpane.setLayout(new FlowLayout(FlowLayout.LEFT,20,10)); for (int i=1; i<7;i++) cpane.add(new JButton("button "+i)); setSize(300,200); setVisible(true); } public static void main(String[] arg) { TestFlowLayout teks = new TestFlowLayout(); teks.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); } } 10 20
  30. 30. BorderLayout  This layout manager divides the container into five regions: center, north, south, east, and west.  The north and south regions expand or shrink in width only  The east and west regions expand or shrink in height only  The center region expands or shrinks on both height and width.  Not all regions have to be occupied.
  31. 31. BorderLayout Sample
  32. 32. GridLayout  This layout manager placesGUI components on equal-size N by M grids.  Components are placed in top-to- bottom, left-to-right order.  The number of rows and columns remains the same after the frame is resized, but the width and height of each region will change.
  33. 33. GridLayout Sample
  34. 34. Using Panels as Containers  Panels act as smaller containers for grouping user interface components.  It is recommended that you place the user interface components in panels and place the panels in a frame. You can also place panels in a panel.  To add a component to JFrame, you actually add it to the content pane of JFrame. To add a component to a panel, you add it directly to the panel using the add method.
  35. 35. Create a JPanel example : Container cpane = getContentPane(); JPanel pan = new JPanel(); // create a panel pan.add(new JButton(“Click”)); // add a button in the panel cpane.add(pan) // add the panel in the container
  36. 36. label TextField Text Area button button There are 3 panels : top panel – has 2 components that are label, textfield - 2 components are arranged with flowLayout middle panel – has a component: text area. It is arranged with Gridlayout bottom panel – has 2 components that are buttons - 2components are arranged with Flowlayout All panels are arrranged with borderlayout top panel –north middle panel –center bottom panel –South Top panel Middle panel Bottom panel
  37. 37. import java.awt.*; import javax.swing.*; public class UjiPanel extends JFrame { public UjiPanel() { super("Membuat BorderLayout"); Container bekas = getContentPane(); bekas.setLayout(new BorderLayout()); JPanel panelAtas = new JPanel(); bekas.add(panelAtas,BorderLayout.NORTH); JLabel label = new JLabel("Nama"); JTextField txtField = new JTextField(10); panelAtas.setLayout(new FlowLayout()); panelAtas.add(label); panelAtas.add(txtField); JPanel panelTengah = new JPanel(); bekas.add(panelTengah,BorderLayout.CENTER); JTextArea txtArea = new JTextArea(); panelTengah.setLayout(new GridLayout()); panelTengah.add(txtArea); JPanel panelBawah = new JPanel(); bekas.add(panelBawah,BorderLayout.SOUTH); JButton btg1 = new JButton("Hantar"); JButton btg2 = new JButton("Batal"); btg2.setMnemonic('B'); panelBawah.setLayout(new FlowLayout()); panelBawah.add(btg1); panelBawah.add(btg2);
  38. 38. setSize(300,200); setVisible(true); } // konstruktor public static void main(String[] arg) { UjiPanel teks = new UjiPanel(); teks.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); } }
  39. 39. Step in Creating Panel  Set a layout manager for a container (frame).  Create a panel  Set a layout for the panel.  Add the panel in the container (frame)  Create a component that to be added in the panel  Add the component in the panel
  40. 40. GUI Classes for Handling Text  The Swing GUI classes JLabel, JTextField, and JTextArea deal with text.  A JLabel object displays uneditable text (or image).  A JTextField object allows the user to enter a single line of text.  A JTextArea object allows the user to enter multiple lines of text. It can also be used for displaying multiple lines of uneditable text.
  41. 41. JLabel  We use a JLabel object to display a label.  A label can be a text or an image.  When creating an image label, we pass ImageIcon object instead of a string. JLabel textLabel = new JLabel("Please enter your name"); contentPane.add(textLabel); JLabel imgLabel = new JLabel(new ImageIcon("cat.gif")); contentPane.add(imgLabel);
  42. 42. JTextField  We use a JTextField object to accept a single line to text from a user. An action event is generated when the user presses the ENTER key.  The getText method of JTextField is used to retrieve the text that the user entered.JTextField input = new JTextField( ); contentPane.add(input);
  43. 43. JLabel (with an image) JLabel (with a text) JTextField
  44. 44. JTextArea  We use a JTextArea object to display or allow the user to enter multiple lines of text.  The setText method assigns the text to a JTextArea, replacing the current content.  The append method appends the text to the current text. JTextArea textArea = new JTextArea( ); . . . textArea.setText("Hellon"); textArea.append("the lost "); textArea.append("world"); Hello the lost world JTextArea
  45. 45.  TextArea containing six words.
  46. 46. Adding Scroll Bars to JTextArea  By default a JTextArea does not have any scroll bars. To add scroll bars, we place a JTextArea in a JScrollPane object. JTextArea textArea = new JTextArea(); . . . JScrollPane scrollText = new JScrollPane(textArea); . . . contentPane.add(scrollText);
  47. 47.  A sample window when a JScrollPane is used.
  48. 48. Other Common GUI Components  JCheckBox  JRadioButton  JComboBox  JList
  49. 49. Menus  The javax.swing package contains three menu- related classes: JMenuBar, JMenu, and JMenuItem.  JMenuBar is a bar where the menus are placed. There is one menu bar per frame.  JMenu (such as File or Edit) is a group of menu choices. JMenuBar may include many JMenu objects.  JMenuItem (such as Copy, Cut, or Paste) is an individual menu choice in a JMenu object.  Only the JMenuItem objects generate events.
  50. 50. Menu Components Edit View Help JMenuBar Edit View HelpFile JMenu JMenuItem separator
  51. 51. Sequence for Creating Menus 1. Create a JMenuBar object and attach it to a frame. 2. Create a JMenu object. 3. Create JMenuItem objects and add them to the JMenu object. 4. Attach the JMenu object to the JMenuBar object.

×