[Myfaces Wiki] Update of "HtmlSelectManyCheckbox" by KenWeiner

[Apache Wiki <wi...@apache.org>]

Dear Wiki user,

You have subscribed to a wiki page or wiki category on "Myfaces Wiki" for change notification.

The following page has been changed by KenWeiner:
http://wiki.apache.org/myfaces/HtmlSelectManyCheckbox

New page:
= Overview =

The original HtmlSelectManyCheckbox offers a "layout" attribute that controls whether or not a set of checkboxes renders in a horizonal (layout="lineDirection") or vertical (layout="pageDirection") fashion.  However, in either case, the checkboxes render in a straight line.  There is no support for rendering the checkboxes in a grid formation.

The standard HtmlSelectManyCheckbox component has been enhanced to support an additional rendering-related attribute called "layoutWidth".  With this new attribute, the page author can specify how many rows or columns (depending on whether the "layout" is set to "lineDirection" or "pageDirection")  of checkboxes there should be.

= Usage =

The following would render a 2 X 2 grid of checkboxes.

{{{
<t:selectManyCheckbox id="myEnhancedSelectManyCheckbox" layout="lineDirection" layoutWidth="2">
    <f:selectItem itemLabel="1" itemValue="1"/>
    <f:selectItem itemLabel="2" itemValue="2"/>
    <f:selectItem itemLabel="3" itemValue="3"/>
    <f:selectItem itemLabel="4" itemValue="4"/>
</t:selectManyCheckbox>
}}}


= Description =

If layout=lineDirection and layoutWidth=3 and there are 13 checkboxes the checkboxes will be rendered as follows where each [xx] is a checkbox:

{{{
 [01] [04] [07] [10] [13]
 [02] [05] [08] [11]
 [03] [06] [09] [12]
}}}

You can see that for lineDirection layouts, the layoutWidth is interpreted as rows.

If the layout=pageDirection and layoutWidth=3 and there are 13 checkboxes, the rendering changes to:

{{{
 [01] [02] [03]
 [04] [05] [06]
 [07] [08] [09]
 [10] [11] [12]
 [13]
}}}

For pageDirection layouts, the layoutWidth is interpreted as columns.

If the layoutWidth is not specified, the width can be assumed to be 1 which would make the component render in a straight line like the original.

This example contains 13 checkboxes to demonstrate that the rendering can handle the case where the number of checkboxes isn't evenly divisible by the layoutWidth.  If, say 12 checkboxes were chosen, then the checkboxes would be rendered in a perfect X by X grid.