LiveCycle Mosaic Team

Adobe LiveCycle Mosaic ES2 9.5 introduces a method of programmatically creating panels with a wide variety of layouts.  Layouts allow you to specify the absolute or relative positions of tiles within a panel.  This can be done with both the ActionScript and JavaScript versions of the APIs.

You first create a Layout object of one of these types:

• AbsoluteLayout
• ColumnLayout
• DynamicColumnLayout
• DynamicRowLayout
• FlowLayout
• HDividedBoxLayout
• HorizontalLayout
• RowLayout
• StackLayout
• TileLayout
• VDividedBoxLayout
• VerticalLayout

Then when you create the panel, you supply it with the Layout object.

To create a panel with “DynamicColumnLayout” layout in ActionScript:

    // Create a new layout for the panel
    var layoutPanel:ILayout = this.mosaicApp.createLayout("DynamicColumnLayout");

    // Modify the attributes of the panel layout from the default values
    layoutPanel.numColumns = 4;

    // Create a panel that use this layout
    var panelToAdd:IPanel = this.mosaicApp.createBlankPanel(layoutPanel);

    // Set the panel's label
    panelToAdd.nodeLabel = "DynamicColumnLayout Panel";

    // Add the panel to the view
    this.parentView.addPanel(panelToAdd);

    // Add tiles to the panel...

To create a panel with “DynamicColumnLayout” layout in JavaScript:

    // Create a new layout for the panel
    var layoutPanel = mosaicApp.createLayout("DynamicColumnLayout");

    // Modify the attributes of the panel layout from the default values
    layoutPanel.setNumColumns(4);

    // Create a panel that use this layout
    var panelToAdd = mosaicApp.createNode("panel", layoutPanel);

    // Set the panel's label
    panelToAdd.setNodeLabel("DynamicColumnLayout Panel");

    // Add the panel to the view
    parentView.addPanel(panelToAdd);

    // Add tiles to the panel...

The resulting panel looks like this:

Here is a table of which attributes are supported for each layout:

	Column Layout	Flow Layout	HDividedBox Layout	Horizontal Layout	Row Layout	Stack Layout	Tile Layout	VDividedBox Layout	Vertical Layout
columnAlign							X
columnWidth							X
horizontalAlign				X			X		X
horizontalGap		X		X			X		X
orientation							X
paddingBottom	X	X	X	X	X	X		X	X
paddingLeft	X	X	X	X	X	X		X	X
paddingRight	X	X	X	X	X	X		X	X
paddingTop	X	X	X	X	X	X		X	X
requestedColumnCount							X
requestedRowCount							X
rowAlign							X
rowHeight							X
verticalAlign				X			X		X
verticalGap		X		X			X		X

To save a little room I omitted from the table these layouts:

• AbsoluteLayout (no supported attributes)
• DynamicColumnLayout (supports only “numColumns“)
• DynamicRowLayout (supports only “numRows“)

Here are examples of some of the panel layouts: