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
Containers  

  • A container is a very special type of component that holds other components. A Container is a rectangular area which you can use as the background on which you build your interface. The basic definition of a container can be found in the java.awt.Container class.

  • The Container class defines methods for adding components, grouping components, laying itself out, and dealing with events which occur inside its boundaries. You should consult the online documentation for more information on the methods of the Container class.

  • In your every day code, however, the only method you will use with regularity is the add() method which adds things to a container. The add method is a great example of polymorphism in action. As you can see from the online documentation, there are actually 5 implementations of add() which all take different parameters allowing you to add all sorts of things in all sorts of ways.

  • However, the Container class is an abstract class which means that you can't really create Container objects. Instead the Container class is used as a base from which you can build subclasses. Actually, it is unlikely that you will need to build any subclasses of Container since the JDK provides several subclasses of Container which you will use in your application code to hold things.

  • The functional subclasses of Container include: Panel, Frame, Window, Dialog, FileDialog and in the JDK 1.1, ScrollPane.

  • Typically you place components inside a container and use a "layout manager" to arrange them. We will talk more about layout managers in a bit.

  • At this point, a picture is in order. Consider the following interface:

[Example]

  • In this case, we have placed a single Button component within a Frame Container.

  • Well, actually, that is not exactly true. In reality, because of the subtleties of layout managers, we have actually placed the button inside a panel and we have placed the panel inside the frame. In other words, you can easily place containers within containers.

  • Consider the schematic shown below in which we show the container hierarchy of the Figure above.

[Example]

  • A quick glance at the documentation for java.awt.Container shows that it has a motley of constructors and methods which you can use to modify its behavior.

Windows

  • A java.awt.Window is a top-level display area that pops up from the browser or applet base. Since the Window is rather drab as you can see in the Figure below, you will typically use subclasses of window such as Frame

    import java.awt.*;
    
    public class WindowExample
      {
      public static void main(String[] args)
        {
        Frame baseFrame = new Frame();
        baseFrame.reshape(10,10,100,100);
        baseFrame.setTitle("Window Example");
    
        Window myWindow = new Window(baseFrame);
        myWindow.reshape(30,30,100,100);
        myWindow.setBackground(Color.blue);
    
        baseFrame.show();
        myWindow.show();
        }
      }
    

[Example]

  • As you can see in the documentation, Windows include several methods to modify the appearance of the window object, manage events and deal with special situations

Frames

  • The java.awt.Frame object is a subclass of Window so it pops up from the main application interface. However, unlike a Window, the Frame comes adorned with a menu bar, window title and window gadgets (minimize, maximize, dispose). Frame objects have a motley of special methods which you can read about in the documentation.

import java.awt.*;

public class FrameExample
  {
  public static void main(String[] args)
    {
    Frame baseFrame = new Frame();
    baseFrame.reshape(10,10,100,100);
    baseFrame.setTitle("Frame Example");
    baseFrame.show();
    }
  }

[Example]

Panels

  • The java.awt.Panel subclass of Container is the most simple of containers which you can use in your applications. Essentially a Panel provides an area which you can use to place components, however, since a Panel has no visible appearance, you must place a Panel in some other container in order to see it in your interface.

  • Here is a very basic usage of a Panel in which two colored panels are placed inside a frame:
    import java.awt.*;
    
    public class PanelExample
      {
      public static void main(String[] args)
        {
        Frame baseFrame = new Frame();
        baseFrame.setLayout(new GridLayout(2,1));
        baseFrame.reshape(10,10,200,300);
        baseFrame.setTitle("Panel Example");
    
        Panel yellowPanel = new Panel();
        yellowPanel.setBackground(Color.yellow);
    
        Panel greenPanel = new Panel();
        greenPanel.setBackground(Color.green);
    
        baseFrame.add(yellowPanel);
        baseFrame.add(greenPanel);
    
        baseFrame.show();
        }
      }
    
    

  • Here is what it looks like when compiled and executed:

    [Example]

Dialogs

  • java.awt.Dialog creates a window that appears with its own title bar as a child of a top-level window. The most common dialogs are those used to get a filename for open or save operations, dialogs which allow a user to set various application options, and dialogs sued to present a simple message to a user.

Dialogs are associated with a top-level frame since a user should not be able to hide the dialog under the top-level application window. After all, we do not want the user to lose the dialog window underneath the main top-level frame because it is very likely that the dialog was popped up for a very good reason and contains information that the user should address immediately.

  • Most dialogs contain both "Ok" and "Cancel" buttons which allow a user to accept or cancel an operation or a "Close" button if the dialog is simply displaying a message.

    [Example]

  • Normally dialogs are dismissed after they get some data or give a message. However, dialogs can also be persistent. For example, a dialog acting as a floating toolbar or one displaying X, Y, Z coordinate information common to image processing applications may be displayed throughout the life on an application.

  • Dialogs come in two forms, modal or modeless. With modal dialogs, a user cannot enter data or activate other parts of the application while the dialog is displayed. A modeless dialog on the other hand, allows the user to interact with other parts of the application while it is displayed.

  • If you take a look at a few standard applications, you will probably find that most dialogs are modal. Modal dialogs are commonly used for "Open" and "Save As" File Dialogs, as well as font and color selectors. Modeless dialogs are not useless however. They are commonly used for floating toolbars and dialogs that display status information for example.

File Dialogs

  • Undoubtedly you are familiar with File Dialogs. Java has a convenience class which allows you to utilize the file dialog of the windowing system which the application is running on. Below is an example from mine:

[Example]

Previous Page | Next Page