Panel Layouts for Guides (deprecated)

Creating a simple panel layout familiarizes you with the basic concepts, including the structure and MXML definition of a panel layout.

1. In Flash Builder, create a Flex library project and the required folder structure.

   See Flex library Projects for Guide (deprecated with LiveCycle ES3) extensions and Folder structure for Guide extensions.

   Note: To display custom panel layouts in the list of panel layouts, create all panel layouts in the layouts folder of your Flex library project. After you add the Flex library project in Workbench, the list of panel layouts appears in the Guide Properties view.

2. Right-click the layouts folder, and then click New > MXML Component.

3. Type a unique filename.

   Workbench modifies the name of your custom panel layout when it displays it. It adds a space immediately before each uppercase character and number in the name to make it easier to read. For example, an MXML component named MyPanel.mxml appears as My Panel in Workbench.

4. From the Based On list, select LayoutTemplate.

5. (Optional) Set the values for Width and Height to 100%.

6. Click Finish.

The MXML source for your new panel layout looks like the following:

<?xml version="1.0" encoding="utf-8"?> 
<model:LayoutTemplate xmlns:fx="http://ns.adobe.com/mxml/2009" 
                    xmlns:s="library://ns.adobe.com/flex/spark" 
                    xmlns:mx="library://ns.adobe.com/flex/mx" 
                    xmlns:model="ga.model.*" width="100" height="100">     
</model:LayoutTemplate>

This panel layout project compiles with no warnings or errors. However, this panel layout in its current state does not display any objects or content. You need to extend the blank panel layout to display Guide objects and Flex components.

After you create the shell for the new panel layout, add Flex or Guide components in Flash Builder. However, panel layouts are not required to contain any specific Guide components. For example, you can create a panel that contains text objects, such as legal text or instructions, which a user must read before filling the Guide.

After you create a blank panel layout (see Create a blank panel layout for a Guide), you can extend it.

For example, extend the blank panel layout to mimic the functionality of the One Column panel layout that is included in Workbench. Add the following to the blank panel layout:

• xmlns:gc="ga.controls.*"

  Defines the namespace for the HelpPanel class.

• <mx:VBox width="100%" height="100%" styleName="layoutobjects" />

  A standard Flex component for organizing objects into a vertical list.

• <gc:HelpPanel id="helpPanel" styleName="panelhelp" />

  A region of the panel layout for displaying panel help text. Set the id attribute to helpPanel, and set the styleName attribute to the class name for the corresponding panel help CSS style.

• <ga:PanelItem itemInstancesPerCycle="-1" repeatItemLimit="-1" width="100%" />

  By default, an instance of PanelItem requires two attributes:

  • itemInstancesPerCycle

    Indicates the number of Guide tree items that can fill a specified column:

    • 1 (default) indicates that only one Guide tree item appears in the output. The layout then moves on to the next instance of PanelItem to continue laying out Guide tree items.

    • -1 indicates that additional instances of the current PanelItem, or column, are added until the repeatItemLimit value is met.

  • repeatItemLimit

    Indicates the maximum number of Guide tree items to add to the instance of PanelItem. To have all the items that you add to the Guide tree for a particular panel to appear in the output, set repeatItemLimit to -1.

The example defines PanelItem declaratively. That is, it defines a PanelItem instance in MXML. As a result, the <mx:Script> ActionScript is required for Guide tree objects to correctly display:

    <mx:Script> 
        <![CDATA[ 
            import mx.core.UIComponentDescriptor; 
            import ga.controls.Wrapper; 
 
            override public function get documentDescriptor( ):UIComponentDescriptor { return Object(this)._documentDescriptor_; } 
            override public function set documentDescriptor( oDescriptor:UIComponentDescriptor ):void { Object(this)._documentDescriptor_ = oDescriptor; } 
        ]]> 
    </mx:Script>

Ensure that your MXML source looks like the following snippet:

<?xml version="1.0" encoding="utf-8"?> 
<ga:LayoutTemplate xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns:ga="ga.model.*" 
    xmlns:gc="ga.controls.*" > 
 
    <mx:Script> 
        <![CDATA[ 
            import mx.core.UIComponentDescriptor; 
            import ga.controls.Wrapper; 
 
            override public function get documentDescriptor( ):UIComponentDescriptor { return Object(this)._documentDescriptor_; } 
            override public function set documentDescriptor( oDescriptor:UIComponentDescriptor ):void { Object(this)._documentDescriptor_ = oDescriptor; } 
        ]]> 
    </mx:Script> 
 
    <mx:VBox width="100%" height="100%" styleName="layoutobjects"> 
        <gc:HelpPanel id="helpPanel" styleName="panelhelp" /> 
        <ga:PanelItem itemInstancesPerCycle="-1" repeatItemLimit="-1" width="100%" /> 
    </mx:VBox> 
     
</ga:LayoutTemplate>

Ensure that the Flex library project builds with no warnings or errors.