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, one-dimensional (1D) and two-dimensional (2D) regions, and, of course, the document itself. In most cases, containers can be arbitrarily nested, such as having a 2D region inside a 1D region inside a 1D region.

Containers are like other elements. They are created with a new statement, and many can be positioned and sized on the page. When you have a 2D region, known as a DhPanel in this library, you can position and size elements within it 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. You can also create regular 1D regions using the DhSection object. A DhSection represents an area in which regular 1D HTML layout rules are followed (that is, inline flow within the area). In addition, the area can be sized and positioned within a page or another container.

Once you have created a container element, you can add elements to it using the 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. If the container is a 2D container, you can size and position any elements you place within it using the elementÆs SetBounds() methods.

For example, to create a 2D container, type:

    
    DhPanel myPanel = new DhPanel();
    

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

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

Finally, you can add the panel you've just created to the document in the usual way:

    
   document.add(myPanel);
   

When adding elements to the panel, you can specify where they go in the z-order using one of a set of constants provided by the wfc.html package. Elements are added with a default size and position. Therefore, you should always call setBounds() on them before adding them to the container.

    
   DhText myText = new DhText("I'm adding this in 2D space");
   DhText myOtherText = new DhText("This, too!");
   myText.setBounds(10, 10, 50, 50);
   myOtherText.setBounds(10, 15, 50, 50);
   myPanel.add(myText, null, DhInsertEnum.INSERT_BEGINNING);
   myPanel.add(myOtherText, myText, DhInsertEnum.INSERT_BEFORE);
   

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):

   myPanel.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).