Extending the blank panel layout

After you create the shell of the new panel layout, add Flex components. You add Flex components using the Flash Builder Source view based on the behavior you are trying to achieve. In addition, you can include other Guide and Flex components to suit your specific needs. However, panel layouts are not required to contain any specific Guide components. For example, you can create a panel that contains hardcoded text objects, that a user must read before filling the Guide. For example, you can include legal text or instructions.

In this example, the blank panel layout created in the section Creating a blank panel layout is extended. After it is modified, it mimics the functionality of the One Column panel layout that is included with the Guide Design perspective 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. The id attribute must be set to helpPanel , and the styleName attribute must be set 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 and repeatItemLimit .

  The itemInstancesPerCycle attribute indicates the number of Guide tree items that can fill a specified column. Therefore, setting itemInstancesPerCycle to the default value of 1 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. Setting itemInstancesPerCycle to a value of -1 indicates that additional instances of the current PanelItem , or column, are added until the repeatItemLimit value is met.

  The repeatItemLimit attribute indicates the maximum number of Guide tree items to add to the instance of PanelItem . In general, to have all the items you add to the Guide tree for a particular panel to appear in the output, set repeatItemLimit to -1 .

In addition, this example defines PanelItem declaratively. That is, it defines a PanelItem instance in MXML. As a result, the following <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 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>