Working with Containers

Containers are elements that can hold other elements. A basic example is the <DIV> element, which can contain any other HTML item. More complex examples include table cells and, of course, the document itself. In most cases, containers can be arbitrarily nested, such as having a table inside a cell of another table.

Containers are like other elements. They are created with a new statement, and many can be positioned and sized on the page. You can position and size elements within a container and set up their z-order relationships. One of the powerful features of DHTML is that you can then change any of these attributes in your code.

Of course, you can also allow elements within a container to be positioned using the normal HTML layout rules. Call either the setLocation or setBounds method of an element to set its absolute position, or call resetLocation to let the HTML layout engine position it (immediately after the last element in the HTML flow layout).

Once you have created a container element, you can add elements to it using either the setNewElements or add method. This mechanism follows the regular pattern of parent-child relationships: the elements, which can also be other containers, added to the container become its children. None is actually attached to the document until the topmost container, which is not a part of any other container, is added to the document.

You can position and size a container using its setBounds method. For example, to create a container, type:

    
     DhForm myForm = new DhForm();
    

You can then set various attributes on the container, including the ToolTip that is shown when the mouse hovers over the panel:

    
   myForm.setToolTip("This text appears when the mouse hovers");
   myForm.setFont("Arial", 10);
   myForm.setBackColor(Color.RED);
   myForm.setBounds(5, 5, 100, 100);
   

Finally, you can add the container you've just created to the document in your DhDocument-derived class (such as Class1.java):

    
   this.add(myForm);
   

When adding elements to the container, you can specify where they go in the z-order using one of a set of constants provided by the com.ms.wfc.html package. Elements are added with a default size and position. You can call setBounds on the elements to specify a different size.

   DhForm myOverLay1 = new DhForm();
   DhForm myOverLay2 = new DhForm();
   myOverLay1.setBackColor(Color.BLACK); 
   myOverLay1.setBounds(10, 10, 50, 50);
   myOverLay2.setBackColor(Color.BLUE); 
   myOverLay2.setBounds(20,25, 50, 50);
   myForm.add(myOverLay1, null, DhInsertOptions.BEGINNING);
   // Black on top of blue
   myForm.add(myOverLay2, myOverLay1, DhInsertOptions.BEFORE);
   // Blue on top of black (uncomment below and comment above )
   // myForm.add(myOverLay2, myOverLay1, DhInsertOptions.AFTER);

   

You can also use the setZIndex method after the elements are added to move the elements around in the z-order. For example, the following syntax does not explicitly set a z-order on the added element but uses the default z-order (that is, on top of all other elements):

   myForm.add(myText);
   

You can set this explicitly as follows, where num is an integer representing the relative z-order of the element within its container:

    
   myText.setZIndex(num);
   

The element with the lowest number is at the bottom of the z-order (that is, everything else covers it). The element with the highest number is at the top (that is, it covers everything else).