Course Content‎ > ‎Session 7‎ > ‎

Closer Look at UI Components

Components are placed into a user interface by adding them to a container. A container is itself a component and it can also be added to the other containers. You can also add the component directly to the applet window, which in itself is a container. Swing is different from AWT because of its pluggable look and feel. What this means is that a user can use a default look and feel for the components in the application or they can change the look and feel. There are different components available in Swing package – javax.swing. As we have seen in the other sessions, in order to create a GUI swing application, first of all, you need to create a frame, using JFrame class. Thereafter, you add an intermediate container called the content pane. Components are added to the content pane. Each component in the Swing starts with JXxxxx. Let’s look at the different components available in Swing:

Adding Components to the Container 

    1. Create the component
    2. Call the container's add() method with the component. 
 
Creating the User Interface Component

Each AWT user-interface component is a class, therefore you can create a component by creating an object of that class.  For example to create a textfield t1, the statement is:

    // Create a TextField with width of 20
    TextField t1 = new TextField(20);  
    
Once you have created a component, the simplest way to add it to a container is to call the container's add() method with the component as the only argument to the add() method.  An applet is also a container.  To add the component to the Applet window:  
 
    add (t1);  

Label

Label is the simplest user-interface component, created from the Label class. Labels are used to identify the purpose of other components, to display the text, but it cannot be edited directly by the user.

To create a label, one of the following constructors can be used:

Label() creates an empty label, with its text aligned to the left.
 
Label(String) creates a label with the given text string, aligned to left.
 
Label(String, int) creates a label with the given text string and the alignment indicated by the integer argument.  The following class variables are used to set the alignment: Label.RIGHT, Label.LEFT, Label.CENTER.

Some of the important methods associated with a label are:

    1. setText(String) method can be used to change the label's text after it
       has been created.  
    2. setAlignment(String) method sets the alignment for this label to the
       specified alignment.
    3. getText() method returns the text of this label

Text field and Text area

Both text fields and text areas inherit from the TextComponent class, so a lot of the behavior of text fields and text areas is same.

Textfield 

Text fields allow you to enter and edit text. Text fields generally allow only single line of text and do not have any scroll bars. Text Areas also allow you to enter and edit text but they are used for larger amounts of text. They also have a scroll bar. To create a text field, one of the following constructors can be used for creating a text field:

TextField() creates an empty text field that is 0 characters wide. 
 
TextField(int) creates an empty text field.  The integer argument indicates the minimum number of characters to display.  It is used for Java 1.02 applets, replace it with TextField(String int) for non Java 1.02 applets
 
TextField(String) creates a text field initialized with the given string. The field will be automatically resized by the current layout manager.
 
TextField(String, int) creates a text field the width of which is equal to the integer argument passed to it and it contains the string passed to it. Width attribute of a text field should be specified, if the layout manager does not resize the components, such as FlowLayout manager. The following statement creates an empty text field that is 30 characters wide:

    TextField Name = new TextField(30);

The following statement creates a text field, that is 30 characters wide and contains the text "Rodger":

    TextField Name = new TextField("Rodger", 30);

The TextField class has several methods that can be used to control a text field:

    1. getText( ) method returns the text contained in the text field.
     
    2. setText(String) method fills the text field with the indicated text.
     
    3. setEditable(boolean) method determines whether the field can be edited.
       A false argument prevents a field from being edited and true(default)
       makes a field editable.
     
    4. isEditable( ) method returns a boolean value indicating whether field
       can be edited(true) or not (false).
     
    5. setEchoCharacter(char) method sets the echo character for the text field.
       Any character that the user types in the text field is echoed in this
       text field as the echo character.  An echo character is useful for
       fields where the user input shouldn't be echoed to the screen such as in
       the case of a text field for typing in a password.
     
    6. getSelectedText( ) method returns the selected text in this text field.
     
    7. getSelectionStart( ) method returns an integer value, which is the
       selected text's start position in this text field.
     
    8. getSelectionEnd( ) method returns an integer value, which is the
       selected text's end position in this text component.  

Text Area

Text Areas, which are created with TextArea class, are editable text fields that can handle more than one line of input.  Text areas have horizontal and vertical scroll bars that enable the user to scroll through the text contained in the component. To create a text area, one of the following constructors can be used:
TextArea() creates an empty text area of unspecified height and width.

TextArea(int, int) creates an empty text area with the indicated number of lines/rows(first argument)  and the indicated width/columns in characters(second argument).

TextArea(String) creates a text area containing the indicated string of unspecified height and width.

TextArea(String,int,int) creates a text area containing the indicated string, number of lines(first argument) and number of columns(second argument).

In addition to the methods common for text fields and text areas  like setText( ),
getText( ), setEditable( ), isEditable( ) etc. , some other methods used for text areas are:

    1. getColumns( ) method returns the number of columns in this text area.
    
    2. getRows( ) method returns the number of rows in this text area.
    
    3. insertText(String,int) method inserts the specified string at the
       specified position indicated by integer argument, in this text area.
    
    4. replaceText(String, int, int) method replaces the text between the
       given integer positions with the indicated string.
    
    5. appendText(String) appends the given text to this text area's current text.

Buttons 

Buttons are the command buttons, which are clicked to trigger an action.  For example, a Quit button is clicked to exit the program.  To create a button, one of the following constructors is used:

Button() creates a button with no text label.

Button(String) creates a button with the given string as a label. This label indicates the function of the button.

Important methods associated with buttons are:

    1. getLabel( ) method returns the label's text.  
    
    2. setLabel(String) method sets the label of the button

When a button is pushed and released,  AWT sends an action event to the button. This event's target is the button, and its object is the string label of the button. An application should override the action method of the button or of one of its containing windows in order to cause some action to occur.

Check boxes

Check boxes are labeled or unlabeled boxes that can be either clicked off or empty. They are used to select or deselect some kind of option in a program. Check boxes are normally nonexclusive, which means that if you have five check boxes in a container, all the five can be checked or unchecked at the same time. Nonexclusive checkboxes are created using one of the following constructors:

Checkbox( ) creates an unlabeled check box that is not checked.

Checkbox(String) creates an unchecked check box with the given string as its label.

The check boxes can also be organized into check box groups, which are also called as radio buttons or option buttons.  These check boxes are exclusive.  To create several check boxes into a group, so that only one can be selected at a time, a CheckBoxGroup object is created with a statement:  

    CheckboxGroup cb1 = new CheckboxGroup();  

The CheckboxGroup object keeps track of all checkboxes in its group. Then you use this object as an extra argument to the Checkbox constructor:  

    Checkbox(String,CheckboxGroup, boolean);

creates a check box labeled with the given string that belongs to the CheckBoxGroup indicated by the second argument. The third argument equals true if the box is checked , false if unchecked. Given below is an example, which creates a checkbox group and adds three check boxes to it: 

    CheckboxGroup Payment = new CheckboxGroup();
    Checkbox cb1 = new Checkbox("Paid",Payment,false);
    Checkbox cb2 = new Checkbox("Unpaid",Payment,true);
    Checkbox cb3 = new Checkbox("Not specified",Payment,false);  

Some of the methods associated with check boxes are:

    1. getState() method determines if this check box is "on" or "off."
       This method returns   the state of this check box. The value true
       indicates "on", false indicates "off".
    
    2. setState(boolean) method sets this check box to the specifed boolean 
       state; true indicates "on"; false indicates "off."
    
    3. getCheckboxGroup() method determines this check box's group. This
       method returns this check box's group, or null if it is not part of a
       check box group.
    
    4. setCheckboxGroup(CheckboxGroup g) method sets the group of this check
       box to be the specified check box group. If this check box is already
       in a different check box group, it is first taken out of that group. 
       g is the new check box group, or null to remove the check box from any
       check box group.
    
    5. setCurrent(Checkbox) If the indicated check box argument belongs to
       this check box group, this method sets that check box to be "on", and 
       all other checkboxes in this group to be "off." If the check box 
       argument is null or belongs to a different check box group, then this 
       method does nothing.
    
    6. getCurrent() method returns the check box in this check box group that
       is currently "on", or null if all are "off."

Choice Lists

Choice lists are created from the Choice class. These components enable a single item to be picked from a pop-down list of choices. To create a choice list, first create an object of class Choice.  The Choice object will hold the list:  

    Choice CD = new Choice();

CD is an object of class Choice and it will hold the list of various CDs  available in the market.
 
addItem(String) method is used to add items to a choice list. The following statements add two items to the CD choice list:

    CD.addItem("Philips");
    CD.addItem("Gold");
    CD.addItem("Creative");

Some other important methods associated with choice lists are:  

    1. countItems() method returns the number of items in this choice list.  
    
    2. getItem(int index) method returns the string at the specified index
       in this choice list.
     
    3. getSelectedItem( ) returns a string representing the currently selected
       item in this choice list.
     
    4. getSelectedIndex() returns the integer representing the index of the
       currently selected item in this choice list.
     
    5. select(String) method sets the selected item in this choice menu to be
       the choice whose name is equal to the specified string. If more than one
       choice is equal to the specified string, the one with the smallest index
       whose name matches is selected.
     
    6. select(int) method sets the selected item in this choice menu to be the
       item at the specified position.  

Comments