eXtropia: the open web technology company
Technology | Support | Tutorials | Development | About Us | Users | Contact Us
Resources
 ::   Tutorials
 ::   Presentations
Perl & CGI tutorials
 ::   Intro to Perl/CGI and HTML Forms
 ::   Intro to Windows Perl
 ::   Intro to Perl 5
 ::   Intro to Perl
 ::   Intro to Perl Taint mode
 ::   Sherlock Holmes and the Case of the Broken CGI Script
 ::   Writing COM Components in Perl

Java tutorials
 ::   Intro to Java
 ::   Cross Browser Java

Misc technical tutorials
 ::   Intro to The Web Application Development Environment
 ::   Introduction to XML
 ::   Intro to Web Design
 ::   Intro to Web Security
 ::   Databases for Web Developers
 ::   UNIX for Web Developers
 ::   Intro to Adobe Photoshop
 ::   Web Programming 101
 ::   Introduction to Microsoft DNA

Misc non-technical tutorials
 ::   Misc Technopreneurship Docs
 ::   What is a Webmaster?
 ::   What is the open source business model?
 ::   Technical writing
 ::   Small and mid-sized businesses on the Web

Offsite tutorials
 ::   ISAPI Perl Primer
 ::   Serving up web server basics
 ::   Introduction to Java (Parts 1 and 2) in Slovak

 

Introduction to Web Programming
Components  
  • Most modern interfaces are built around the concept of "components" which are reusable widgets that perform some user-interface function. You should be extremely familiar with the ideas of components though if you have worked on any computers since the mid-80s. Common components include Buttons, Scroll Bars, Menu Bars, etc which are all basic to the GUIs you use every day.

  • The JDK comes with a fairly diverse set of components already built in which you can easily use by working with the online documentation.

  • These components all derive from the abstract base class java.awt.Component. By abstract, I mean that you would never instantiate a Component object. instead, you would extend the Component class in order to build a functional component. The Component class is more of a "generic" Component which contains al of the methods which all components should have.

Perhaps an example will help clear up the whole abstract class issue. You can think of a mammal as an abstract class and a dog as an extended class from mammal. It is easy to see that you can instantiate a dog object and it should be easy to see that you cannot instantiate a mammal object. After all, there is not animal which is "just" a mammal. You can only have a "type" of mammal.

  • Specifically, the Component class defines such things as alignment, background and foreground colors, fonts, size and positioning etc. You should consult the online documentation for the entire list of methods and fields however, we will try to demonstrate most of the important ones in the examples to follow.

  • Let's take a look at some of the most often used components provided by the JDK.

Static Text with Label

  • The Label class gives you the ability to draw a single line of text in your application. There is not much to it, consider the following example:

In all of the following examples, we will use the add() method to add components to a Frame object in order to show them on the monitor. Frame and add() will be discussed in the next section. So don't worry about the specifics of baseFrame or add() for now. Instead, watch how the components are used within it!

import java.awt.*;

public class LabelExample
  {
  public static void main(String[] args)
    {
    Frame baseFrame = new Frame();
    baseFrame.setLayout(new GridLayout(3,1));
    baseFrame.reshape(10,10,200,200);
    baseFrame.setTitle("Label Example");

    Label labelLeft = new Label("Hello Cyberspace!");
    labelLeft.setForeground(Color.white);
    labelLeft.setBackground(Color.black);

    Label labelRight = new Label("Hello Cyberspace!",
				 Label.RIGHT);
    labelRight.setFont(new Font("Helvetica",
                                 Font.BOLD, 15));

    Label labelCenter = new Label("Hello Cyberspace!",
				  Label.CENTER);

    baseFrame.add(labelLeft);
    baseFrame.add(labelRight);
    baseFrame.add(labelCenter);

    baseFrame.show();
    }
  }

  • The previous code yields the following interface:

    [Example]

Text Entry Components

  • The JDK also provides the TextField and TextArea components which allow you to get user input. They are derived from TextComponent, so if you are looking for a method that should obviously be there, you should check TextComponent right away.

import java.awt.*;

public class TextEntryExample
  {
  public static void main(String[] args)
    {
    Frame baseFrame = new Frame();
    baseFrame.setLayout(new GridLayout(2,1));
    baseFrame.reshape(10,10,200,200);
    baseFrame.setTitle("Label Example");

    TextField myTextField = new TextField();
    myTextField.setText("Here is some " +
             "default and selected text");
    myTextField.setSelectionStart(0);
    myTextField.setSelectionEnd(4);
    myTextField.setEditable(false);

    TextArea myTextArea = new TextArea
        ("The Text Area widget \n" +
         "allows multiple line text entry." +
         "it is also worth \n noting that it " +
         "will dynamically create scroll " +
         "bars \n if the text goes beyond the " +
         "boundaries of the widget");
    baseFrame.add(myTextField);
    baseFrame.add(myTextArea);

    baseFrame.show();
    }
  }

  • When compiled and executed, the code above produces the following interface:

    [Example]

Check Boxes and Check Box Groups

  • The Check Box and Check Box Groups are very familiar components which allow a user to make a choice between several options. The Check Box component is used to give the user the ability to select or unselect some choice. The Check Box group allows the developer to group a set of check boxes in such a way that only one check box can be selected at any one time (On day one, we saw this type of widget in HTML FORM programming under the name "RADIO"). In the following example we create both single check boxes and checkboxes in a group. Notice that you can select or unselect AFC or JDK without affecting any other check boxes. However, you can choose only male or female from the sex group.

    import java.awt.*;
    
    
    public class CheckExample
      {
      public static void main(String[] args)
        {
        Frame baseFrame = new Frame();
        baseFrame.setLayout(new GridLayout(4,1));
        baseFrame.reshape(10,10,200,200);
        baseFrame.setTitle("Check Example");
    
        Checkbox jdkChoice = new Checkbox("JDK");
        Checkbox afcChoice = new Checkbox("AFC");
    
        CheckboxGroup sexGroup = new CheckboxGroup();
        Checkbox maleChoice = new Checkbox("male",
             sexGroup, false);
        Checkbox femaleChoice = new Checkbox("Female",
    	 sexGroup, false);
    
        baseFrame.add(jdkChoice);
        baseFrame.add(afcChoice);
        baseFrame.add(maleChoice);
        baseFrame.add(femaleChoice);
    
        baseFrame.show();
        }
      }
    

    [Example]

Choices

  • One of the problems with Check Boxes and Check Box Groups is that they take up a lot of space in your interface. If you have a lot of choices, it may be better to present them in a Choice control (similar to the SELECT widget in HTML FORM programming)

    import java.awt.*;
    
    public class ChoiceExample
      {
      public static void main(String[] args)
        {
        Frame baseFrame = new Frame();
        baseFrame.setLayout(new GridLayout(4,1));
        baseFrame.reshape(10,10,200,200);
        baseFrame.setTitle("Choice Example");
    
        Choice choice = new Choice();
        choice.addItem("Selena");
        choice.addItem("Eric");
        choice.addItem("Mark");
    
    
        baseFrame.add(choice);
    
        baseFrame.show();
        }
      }
    

    [Example]

Lists

  • You will recall that in the SELECT widget in HTML programming, you could select how many choices were visible at any one time using the SIZE attribute. Well, since the Choice widget does not have such an attribute, you need to use a different component if you want that functionality. In the JDK, the List component is used for such circumstances.

    import java.awt.*;
    
    public class ListExample
      {
      public static void main(String[] args)
        {
        Frame baseFrame = new Frame();
        baseFrame.reshape(10,10,200,200);
        baseFrame.setTitle("List Example");
    
        List list = new List(3, true);
        list.addItem("Selena");
        list.addItem("Eric");
        list.addItem("Mark");
        list.addItem("Bob Frog");
    
        baseFrame.add(list);
    
        baseFrame.show();
        }
      }
    
    

    [Example]

Menus and Menu Bars

  • Menus allow you to organize many related functions in your application in one centralized, easy-to-use interface object. Although Menus come in many forms, the most common menu types are "menu bars".

  • Menu bars are particularly common and part of just about every application interface around today. Specifically, most applications will have a menu bar at the top of the screen that allows a user to choose among the major functions.

    import java.awt.*;
    
    public class MenuExample
      {
      public static void main(String[] args)
        {
        Frame baseFrame = new Frame();
        baseFrame.reshape(10,10,200,200);
        baseFrame.setTitle("Menu Example");
    
        MenuBar bar = new MenuBar();
    
        Menu fileMenu = new Menu("File");
        Menu editMenu = new Menu("Edit");
        Menu specialMenu = new Menu("Special");
    
        fileMenu.add(new MenuItem("Open"));
        fileMenu.add(new MenuItem("Save"));
        fileMenu.addSeparator();
        fileMenu.add(new MenuItem("Exit"));
        bar.add(fileMenu);
        bar.add(editMenu);
        bar.add(specialMenu);
    
        baseFrame.setMenuBar(bar);
        baseFrame.show();
        }
      }
    

    [Example]

Scrollbars

  • Almost without doubt and before you know it, your users will be filling your application with more data than it can possibly display on one screen.

  • When this occurs, most programmers rely on some form of scrolling control to allow the user to manipulate the currently viewable portion of an interface object. Scrolling is handled in the JDK by the Scrollbar class. Scrollbars take a little more coding than is realistic for this tutorial. However, you can certainly consult the online documentation and any one of the 200 zillion books on Java for more info.

Buttons

  • Buttons are probably the most common interface control in modern user interfaces. They appear in toolbars, in menus, as the up and down arrows in scrollbars, and in all sorts of other places. In fact, it is hard to imagine any interface without a button somewhere.

  • The Button class defines a standard push button that uses 3D effects. When the user clicks on the button with the mouse, the button visually depresses and then pops back up when the mouse button is released.

  • We have already seen plenty of examples of Buttons and Button code so we won't duplicate it here.

Canvases

  • Finally, the Canvas class prepares an area upon which you can draw. We will discuss drawing later. So for now, we will just mention this component.

Previous Page | Next Page