Archive for August, 2010

Instructional videos on working with LiveCycle Mosaic 9.5

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/

Programmatically creating panels with layouts

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

Example of panel with DynamicColumn layout

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: