OrderedLayout inside a Table

I have a Table with eight columns. Three of those contain OrderedLayouts, each cell consisting of two Labels. All OrderedLayout cells are populated with the following method:

    private OrderedLayout putIntoOrderedLayout(Object o1, Object o2) {
        OrderedLayout ol = new OrderedLayout(
                OrderedLayout.ORIENTATION_HORIZONTAL);

        Label left = new Label(o1.toString());
        Label right = new Label(o2.toString());

        ol.addComponent(left);
        ol.addComponent(right);

        left.setWidth("100px");
        right.setWidth("20px");

        ol.setComponentAlignment(left,
                OrderedLayout.ALIGNMENT_HORIZONTAL_CENTER,
                OrderedLayout.ALIGNMENT_RIGHT);
        ol.setComponentAlignment(right,
                OrderedLayout.ALIGNMENT_HORIZONTAL_CENTER,
                OrderedLayout.ALIGNMENT_VERTICAL_CENTER);

        return ol;
    }

What this yields is quite slow. When the Table needs to replenish its cache, the rendering takes 3-4 seconds. This is even when the UIDL response is empty (apparently the data is already cached within the browser). This would seem like the delay is entirely due to the browser (FireFox 3) rendering those cells.

Is there a way to optimize this? The resulting HTML (for one single cell) looks like this:


<td style="width: 146px;">
 <div class="i-table-cell-content" style="width: 138px;">
  <div class="i-orderedlayout">
   <div>
    <table cellspacing="0" cellpadding="0">
     <tbody>
      <tr>
       <td style="vertical-align: top;">
        <table cellspacing="0" cellpadding="0" style="width: 100%;">
         <tbody>
          <tr>
           <td class="i_align" align="right">
            <div class="i-label" style="width: 100px;">0.00</div>
           </td>
          </tr>
         </tbody>
        </table>
       </td>
       <td style="vertical-align: top;">
        <table cellspacing="0" cellpadding="0" style="width: 100%;">
         <tbody>
          <tr>
           <td class="i_align" align="right">
            <div class="i-label" style="width: 20px;">[x]
</div>
           </td>
          </tr>
         </tbody>
        </table>
       </td>
      </tr>
     </tbody>
    </table>
   </div>
  </div>
 </div>
</td>

PS: Another thing I noted is that the widths of individual Labels (100+20=120) don’t add up to the cell’s total width (146px). Firebug clearly shows that the cell’s background shines through, so to say, after the two Labels. Is there a way to remove that unnecessary whitespace? (I assume that the 138px in the second line takes paddings/margins into account.)

One simple way to optimize the resulting HTML, would be to use a CustomLayout instead of the OrderedLayout. By using a CustomLayout you can create your own XHTML template for the layout.

See the IT Mill Toolkit manual chapter on Custom Layouts for more information and examples.

Thanks, this seems to do what I want!

This seems to be only for div-tags. Is there a special reason why only divs, why not span-tags also?

This is probably because span is an inline element and if you follow XHTML rules it’s not allowed to put block elements inside an inline element. Div element on the other hand allows anything inside it and allows rendering of any Toolkit component.

A good point indeed.

Thanks for your help.

Have you set an explicit width for the Table? Try setting the column width explicitly as well, since the Table adds the extra space (table width minus total row width) relatively among all the columns.