Question

• Is it possible, and how to do it ( if it is ) to have a multy row TabBar, based on the width of the container ?

Answer 1

It’s as simple as giving your TabBar a TileLayout. You don’t have to subclass TabBar and you don’t even have to create a custom skin class for it. Just do this:

<s:TabBar dataProvider="{dp}" left="0" right="0">
    <s:layout>
        <s:TileLayout horizontalGap="-1" verticalGap="-1" 
                      requestedRowCount="2" />
    </s:layout>
</s:TabBar>

Which will produce something like this:

The gap below the TabBar you saw, is produced because TileLayout will by default allocate a certain number of rows. You can override this by setting the requestedRowCount to the number of rows you expect (2 in this example).

If you want it to be truly dynamic, you can calculate the required number of rows by comparing the TabBar’s total width to the TileLayout’s columnWidth, and bind the resulting number to the requestedRowCount property.