How to create checkboxes from ArrayCollection

I have an ArrayCollection [{category: "fiction", title: "The Time Machine", author: "H.G. Wells"},...] of objects from which I want to create checkboxes that:

1. Are divided into sections with section headers
2. Are displayed horizontally, i.e. the checkboxes appear left to right and continue onto the following line

Anyone know how to achieve the following display?

FICTION
[] The Sleeper Awakes -- H.G. Wells [] The Time Machine -- H.G. Wells 
[] The Invisible Man -- H.G. Wells  [] War of the Worlds -- H.G. Wells

I tried using an itemRenderer, but it didn't quite achieve what I want:

<s:Panel id="catalogPanel" width="487" minHeight="300" title="Books">
        <s:lay开发者_Python百科out>
            <s:HorizontalLayout/>
        </s:layout>
        <s:List dataProvider="{catalog}" width="100%" height="300">
            <s:layout>
                <s:HorizontalLayout/>
            </s:layout>
            <s:itemRenderer>
                <fx:Component>
                    <s:ItemRenderer>
                        <s:CheckBox id="book" label="{data.title}"/>
                    </s:ItemRenderer>
                </fx:Component>
            </s:itemRenderer>
        </s:List>
    </s:Panel>

2.) The flexLib project provides a FlowBox component for this.