LiveCycle Mosaic Team

We have created some new instructional videos on working with Adobe LiveCycle Mosaic ES2 9.5:

Inter Tile Communications:

http://tv.adobe.com/watch/working-with-adobe-livecycle-es2/livecycle-mosaic-95-inter-tile-communications/

View and Panel Templates:

http://tv.adobe.com/watch/working-with-adobe-livecycle-es2/livecycle-mosaic-95-view-and-panel-templates/

Authorization and Policies:

http://tv.adobe.com/watch/working-with-adobe-livecycle-es2/livecycle-mosaic-es2-authorization-policies/

Skinning Applications:

http://tv.adobe.com/watch/working-with-adobe-livecycle-es2/livecycle-mosaic-es2-skinning-applications/

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:

Example of panel with DynamicColumn layout

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

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: