OBJECT ORIENTED ANALYSIS

AND DESIGN
LECTURE 06

Basics of GUI

Support for GUI
 Abstract Windowing Toolkit (AWT) & Swing packages
 Provides rich set of user interface components
 java.awt & javax.swing
 Old (AWT) VS. New(Swing)

 Components in awt & swing (start with J)





Frame, JFrame
Menu, JMenu
Button, JButton
TextField, JTextFiled
Label, JLabel
and many more….

Abstract Windowing Toolkit  The original GUI components  Referred as “Heavy Weight Components (HWC)”  Tied directly to the local platform’s GUI capabilities  Provides  robust event-handling model  Layout Managers .

 Allows uniform “look & feel” across all platforms . Names start with J can be identified  “replacement” to the AWT  Referred as “Light Weight Components (LWC)”  Swing components are written. manipulated and displayed completely in java  So they are not “weighed down” by the GUI capabilities of local platform  Several Swing components are still HWC like JFrame etc.Swing  Newest GUI components.

// Create a text field with text "Type Name Here" JTextField jtfName = new JTextField("Type Name Here"). // Create a check box with text bold JCheckBox jchkBold = new JCheckBox("Bold").Creating GUI Objects Label // Create a button with text OK JButton jbtOK = new JButton("OK"). 6 Combo Box Radio Button . and blue JComboBox jcboColor = new JComboBox(new String[]{"Red". "Blue"}). // Create a combo box with choices red. Text field Check Box Button // Create a label with text "Enter your name: " JLabel jlblName = new JLabel("Enter your name: "). // Create a radio button with text red JRadioButton jrbRed = new JRadioButton("Red"). "Green". green.

GUI Creation Steps .

// Create a combo box with choices red. and blue JComboBox jcboColor = new JComboBox(new String[]{"Red". // Create a label with text "Enter your name: " JLabel jlblName = new JLabel("Enter your name: "). "Green". "Blue"}). green.Creating GUI Objects // Create a button with text OK JButton jbtOK = new JButton("OK"). . // Create a radio button with text red JRadioButton jrbRed = new JRadioButton("Red"). // Create a text field with text "Type Name Here" JTextField jtfName = new JTextField("Type Name Here"). // Create a check box with text bold JCheckBox jchkBold = new JCheckBox("Bold").

EXIT_ON_CLOSE).setVisible(true). frame.setDefaultCloseOperation( JFrame. public class MyFrame { public static void main(String[] args) { JFrame frame = new JFrame("Test Frame").swing. frame.*.Creating Frame import javax. } } . 300).setSize(400. frame.

g. 2.*.awt.GUI Creation Steps 1. swing. JFrame myframe = new JFrame(). .  Import java.*. import required package  e. Setup the top level container  e. awt  Import javax.g.swing.

GUI Creation Steps (cont. Component Area .getContentPane(). Get the component Area of the top level Container Container c = myFrame.) System Area 3.

Apply layout to that Area  5.GUI Creation Steps (cont.add(b1).) 4. .setVisible(true). Set size of Frame and make it Visible   myFrame. c.200).setSize(200. c. JButton b1 = new JButton(“Hello”). myFrame.setLayout(new FlowLayout()). Create & add components   6.

Example GUI .

GUI: Example Code //Step 1: import packages import java.setLayout( new FlowLayout( ) ). public void initGUI ( ) { //method used for setting layout of GUI //Step 2: setup the top level container myFrame = new JFrame(). //Step 4: Apply layouts c.*. ….swing.awt. public class GUITest { JFrame myFrame .getContentPane(). JTextField tf. .*. //Step 3: Get the component area of top-level container Container c = myFrame. JButton b1. import javax.

//Step 6: set size of frame and make it visible myFrame.setDefaultCloseOperation(JFrame.GUI: Example Code (cont.EXIT_ON_CLOSE).) //Step 5: create & add components JTextField tf = new JTextField(10). myFrame.150).setSize(200.add(b1). myFrame.setVisible(true). JButton b1 = new JButton("My Button"). c.add(tf). c. } //end init method public GUITest () { // constructor initGUI (). } ……… .

) public static void main (String args[ ]) { GUITest gui = new GUITest(). } } // end of class .GUI: Example Code (cont.

Compile & Execute .

frame. cc==getContentPane(). public GUITest ( ) { public GUITest ( ) { frame = new JFrame ( ).setVisible(true). Container c. } cc==frame. getContentPane().GUI Creation Approaches Composition class GUITest{ Inheritance class GUITest extends JFrame{ JFrame frame.getContentPane().getContentPane(). } } ……… ……… } . Container c. …… …… frame. setVisible(true).

Layout Managers .

Layout Manager  The UI components are placed in containers.  Layout managers are set in containers using the setLayout(LayoutManager) method in a container. . Each container has a layout manager to arrange the UI components within the container.

Five commonly used are:  FlowLayout  GridLayout  BorderLayout  BoxLayout  GridBagLayout .Layout Managers Layout Managers  Java supplies many layout managers.

Centers by default. .  Lets each component assume its natural (preferred) size. then starts the next line.  Often used for placing buttons on panels.  Uses “best judgement” in spacing components.Layout Managers Layout Managers  FlowLayout  Places components in a line as long as they fit.

add(b2). c. new JButton(“Previous Slide”).add(b3). }//end of main } new JButton(“Next Slide”). c. c. JButton JButton JButton JButton JButton b1 = b2 = b3 = b4 = b5 = c. new JButton(“Exit”). c.GUI: Example Code FlowLayout ….add(b4).add(b1).setLayout (new FlowLayout() ). new JButton(“Back to Start”). new JButton(“Last Slide”).add(b5). c. .

 Places components into the grid cells.  Allows additional spacing between cells. .Layout Managers Layout Managers  GridLayout  Splits the panel into a grid with given number of rows and columns.  Forces the size of each component to occupy the whole cell.

add(b4). c. c. b5 = new JButton(“Exit”).add(b2). c. c.add(b1). JButton JButton Slide”). c. b2 = new JButton(“Previous b3 = new JButton(“Back to b4 = new JButton(“Last Slide”).add(b3).GUI: Example Code GridLayout ….add(b5). JButton Start”). JButton JButton b1 = new JButton(“Next Slide”). 2) ). c.setLayout (new GridLayout(3 . …… .

JButton JButton JButton JButton JButton b1 = b2 = b3 = b4 = b5 = new JButton(“Next Slide”). new JButton(“Last Slide”). 20 ) ). c.add(b4). size(200. new JButton(“Exit”).add(b5). new JButton(“Back to Start”).add(b3). 200) }//end of main } Extra space between the cells .GUI: Example Code GridLayout …. c. c.add(b1). c. 2.setLayout (new GridLayout(3 . c. c. 10. new JButton(“Previous Slide”).add(b2).

NORTH WEST CENTER SOUTH EAST .Layout Managers Layout Managers  BorderLayout  Divides the area into five regions  Adds a component to the specified region  Forces the size of each component to occupy the whole region.

new JButton(“Last Slide”).add(b1. c.NORTH).GUI: Example Code BorderLayout …. c.add(b5.WEST).EAST). BorderLayout.setLayout (new BorderLayout( ) ). BorderLayout.SOUTH). c. BorderLayout. new JButton(“Previous Slide”).CENTER). new JButton(“Back to Start”). c. c.add(b2. BorderLayout. new JButton(“Exit”). JButton JButton JButton JButton JButton b1 = b2 = b3 = b4 = b5 = new JButton(“Next Slide”). }//end of main } . BorderLayout.add(b3. c.add(b4.

which remains in effect until the component’s setLayout method is called.Layout Managers  Layout Managers  Default Layouts   Each container has a default layout manager. Some of the defaults are:  Content pane  BorderLayout  JPanel  FlowLayouts .

More Swing Components  JCheckBox  Note uppercase B (vs. Checkbox in AWT)  JRadioButton  Use a ButtonGroup to link radio buttons  JFileChooser .