Masonry Pane

Languages: Dutch (Nederlands)

The masonry pane, similar to the Paginated Pane, takes in panes, rather than items. This pane is best compared to the Outline Pane in the sense that both determine the position of the underlying elements themselves. However, where the outline pane places items, this pane places panes.

The pane will place the panes in order, starting in the top-left corner and making it's way to the right and downwards, or downwards and to the right when the orientation is VERICAL, instead of HORIZONTAL. This pane will place a pane directly when possible, so it may be that, depending on the size of the panes, some panes may appear before other panes, even if they have been inserted the other way around.

To create a masonry pane, simply call the constructor for it:

MasonryPane pane = new MasonryPane(0, 0, 9, 6);

To add panes to it, simply call addPane with the desired pane.

pane.addPane(innerPane);

Keep in mind that any coordinates assigned to the innerPane, will be overridden when the masonry pane renders. For such panes, you can simply leave the coordinates out of the constructor or XML tag.

You can also change the orientation from HORIZONTAL to VERTICAL or vice versa, by setting it.

pane.setOrientation(Orientable.Orientation.VERTICAL);

This is by default set to HORIZONTAL. With HORIZONTAL the pane will position the panes per row, while with VERTICAL the pane will position them by column.

XML

Anything shown at Panes can be used for this pane as well.

When creating a masonry pane, use the masonrypane element name to denote this:

<masonrypane x="0" y="0" length="9" height="6"/>

Inside of this you can specify the panes this masonry pane should take in the usual way. Panes inside a masonry pane do not require coordinates, since they will be overridden anyway.

Optional attributes

You can specify the orientation of the masonry pane by adding the orientation tag to it and specifying either horizontal or vertical (both are case insensitive).

<masonrypane x="0" y="0" length="9" height="6" orientation="horizontal"/>