Aqua Phoenix
     >>  Research >>  OOP  


11. The Java Applet as an object

11.1 Summary

  • Applet is an object to which other objects can be added
  • Layout Managers; BorderLayout, GridLayout
  • Assigning a LayoutManager
  • Adding objects to a LayoutManager

11.2 Contents

11.2.1 Applet is an object to which other objects can be added

Think back to the Java Applet framework a few lectures ago. You will find a very similar declaration to the one we have learned a lecture ago: extends Applet. Even the applet framework extended something, namely an Applet. This would suggest that even an applet is an object by itself, and this assumption is correct. An applet serves the purpose of laying out and managing objects. But instead of simply declaring that an applet contains a button, two textfields, and a canvas, we instead lay them out in a particular order.

11.2.2 Layout Managers; BorderLayout, GridLayout

This order is achieved by using what is called "Layout Managers". These Layout Managers are object in themselves, but they only serve the purpose of providing some kind of gridwork, into which we may place objects. Layouts are pretty much invisible, which is why we need to think about how we want our objects to appear in an applet. Some popular and very useful layout managers are the BorderLayout and the GridLayout.

11.2.3 BorderLayout

The BorderLayout divides the screen into 5 areas: North, South, East, West, and Center. These areas, if and when they are all utilized, are arranged as follows:

Figure 1.3
The size of each of the 5 regions is not pre-defined at all. Should you add a larger object to the East and a smaller one to the West, then each region would take on the appropriate size and the center region would adjust automatically. You may recall that in one of the previous lectures we used a method called "setSize(int, int)". This size would eventually propagate to the layout manager, making sure that enough space is set aside for the object. This is one of the greatest features of layout managers: Regardless of the size of the applet, the layout manager adjusts itself to the applet size, and all objects are resized in an appropriate fashion to fit the layout manager.

Moreover, you do not need to use all of the five possible regions. If your applet only uses two regions that are next to another, you may decide to go for the Center and East or Center and West regions. By not specifying a particular region, it is simply not used. We will see an example below.

11.2.4 GridLayout

While the BorderLayout is constrained to at most 5 regions and distributes the regions regardless of size, the GridLayout lays out components in a 2-dimensional grid like fashion, where all cells have the same size, and are generally ordered from left to right, then top to bottom:

Figure 1.4
Layouts are not necessarily constrained to an applet, that is, you do not need to pick one particular layout for an applet. Instead, you can pick a general layout, and then lay out each cell with a different layout. In effect, you could have a GridLayout that contains smaller GridLayouts and BorderLayouts. Moreover, there are some layouts, other than BorderLayout and GridLayout that you can chose from, for example FlowLayout, GridBagLayout, etc.

11.2.5 Assigning a LayoutManager

Layout initiation is performed in the constructor of objects; in the case of an applet it is done in the "init()" constructor. Let's assign a BorderLayout to an applet, and add a few buttons to the layout:

  public init() {

    BorderLayout bl = new BorderLayout();

    Button b1 = new Button("Hello");
    add(b1, BorderLayout.EAST);

    Button b2 = new Button("World");
    add(b2, BorderLayout.SOUTH);

Let's look at each line in the constructor individually. The very first line creates a particular Layout, namely the BorderLayout. The second line then assigns the layout to the applet. The method "setLayout" is part of the applet object.

11.2.6 Adding objects to a LayoutManager

In the next line, we create a button with the label "Hello". The word Hello is placed in quotes, because it denotes a string, as opposed to a variable. The next line then assigns the button object to the layout. Since the layout has already been set for the applet, we merely need to call the add method, and the applet object knows to what type of layout the button is added. In order to correctly place the button, we need to specify one of the 5 regions (NORTH, SOUTH, EAST, WEST, or CENTER). We then repeat the exercise for a second button. Note, that you cannot place two different objects in the same region. In order to do that, you would need to create another, separate layout for that region. Let's look at an example that does exactly that with a GridLayout. Our goal is to create two buttons that are in the same region, one on top of the other, and a TextField that is located in a different region:

  public init() {

    BorderLayout bl = new BorderLayout();

    Panel p = new Panel();
    p.setLayout(new GridLayout(2, 1));

      Button b1 = new Button("Hello");

      Button b2 = new Button("Ciao");

    add(p, BorderLayout.EAST);

    Button b3 = new Button("World");
    add(b3, BorderLayout.SOUTH);

The assignment of objects follows a very systematic approach. Let's analyze it in more detail. Again, we assign a BorderLayout to the applet itself. We then create a Panel. A Panel is an empty area, which can serve several purposes. For one thing, you can draw on it; something that we will discuss in a future lecture. For the other thing, you can assign layouts and objects to it. Panels are very useful, and are oftentimes extended. For example, if you were to create a personal information component that asks for Name, Address, etc. inputs, you may wish to make a specific panel, that you can then use as an object in all sorts of applets. In our case, the panel will hold 2 buttons. But first, we need to assign a Layout Manager to the applet. Because we want both buttons to use up the same amount of space, as well as being located in a vertical alignment, we decide to use a GridLayout. GridLayout, unlike BorderLayout, takes two arguments, i.e. number of rows, and number of columns. In our case, we are creating a GridLayout with 2 rows and 1 column. We now proceed with creating our first button. This button is then added to the panel via the add() method. Notice that the add() method is the same for BorderLayouts and GridLayouts. You may wonder how the applet knows to place the objects in their respective layouts. Since we have declared the layout to be of a specific type beforehand, the objects are now placed depending on our declaration. Instead of adding the button to the applet background, we want to add it to the panel, which is why we write p.add(..), as opposed to just add(..). Note, that whenever we do not specifically reference an object, we refer to the current object. Taking the example from above, p.add(..) references the object p, which is a Panel; however, by writing add(..) we do not reference an object explicitely, but rather reference the current object implicitely. We have learned that the keyword this references the current object as well. For that reason, add(..) is equivalent to writing this.add(..).

After setting up the panel with a layout and objects, we need to add the panel to the bigger layout. Just as we have added a button to the BorderLayout before, we can now add the panel to the BorderLayout. Both panels and buttons share the notion of being graphical objects of some sort, which means that both share the feature of being able to add themselves to layouts. There is no specific "add" feature that adds buttons differently to layouts than panels. This key concept of inheritance in Object Oriented Programming is so inherent that we will see it in almost everything we learn about OOP.