(Deprecated) Guide Layouts

After you create the shell of the new Guide layout, add Flash Builder components using the Flash Builder Source view. Use the components that provide the behavior you are trying to achieve. You can also include other Guide and Flex components to suit your needs.

For example, extend the Guide layout to include an area for displaying Guide content. You can also include some navigation buttons to move between panels and to submit the Guide data.

Add the following components to the Guide layout:

• A standard Flex component for organizing objects into a vertical list. The padding settings provide a margin around the Guide content:

  <mx:VBox width="100%" height="100%"> 
          paddingTop="5" paddingBottom="5" paddingLeft="5" paddingRight="5">

  Note: Alternatively, create margins using the setting and value styleName="guide". This method derives the margins from the CSS values.

• The region of the Guide layout for displaying the current data entry panel and the associated layout:

  <gc:PanelContent width="100%" height="100%" />

• A standard Flex component for organizing objects into a horizontal list:

  <mx:HBox>

• A button object that goes to the previous panel in the Guide. This object is inactive if the current panel is the first panel in the Guide. The label attribute controls the button caption text:

  <gc:PreviousPanelButton id="previous" label="{'Back'}"/>

  Note: The curly brackets and single quotation mark that enclose the button text prevent the component from using resource strings. This text is applied after the component is initialized.

• A button object that goes to the next panel in the Guide. This object is inactive if the current panel is the last panel in the Guide:

  <gc:NextPanelButton id="next" label="{'Forward'}"/>

• A button object that submits the Guide data. This object is inactive if the current panel is not the last panel in the Guide:

  <gc:SubmitButton label="{'Submit Data'}"/>

  Note: Specifying a value for the label attribute overwrites the default SubmitButton labels. The default SubmitButton labels are added based on the submission option selected in Workbench.

  The SubmitButton component behaves differently depending on the submission options the Guide author sets for the Guide in Workbench:

  Submit option	SubmitButton behavior	Default SubmitButton label
  Guide (Default)	Guide fillers click the submit button on the Guide to submit the data.	Submit
  Interactive PDF	Clicking the submit button opens the interactive PDF form. The Guide filler clicks the submit button in the interactive PDF form to submit the data. This option is available when the Guide is based on an XDP form that includes an interactive PDF form. When you select this option, a Submit From PDF button appears in the navigation button area. Clicking this button switches the view to the interactive PDF document, which must include a Submit button. The Submit From PDF button appears in all environments where the Guide runs, such as Workspace or a browser. No other submit button appears in the navigation button area of the Guide or in the Workspace chrome.	Submit from PDF
  User Button	Submits the data from a button that you add to a panel in the Guide. This submit button appears in all environments where the Guide runs. No other submit button appears in the navigation button area of the Guide or in the Workspace chrome.	N/A
  Host	The SubmitButton component does not appear on the Guide. The hosted application, such as Workspace, must extract the data from the Guide and perform the data submission.	N/A

Your MXML source looks like the following snippet:

<?xml version="1.0" encoding="utf-8"?> 
<gc:Wrapper width="100%" height="100%" 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns:gc="ga.controls.*" > 
     
    <mx:VBox width="100%" height="100%"> 
            paddingTop="5" paddingBottom="5" paddingLeft="5" paddingRight="5"> 
        <gc:PanelContent width="100%" height="100%" /> 
        <mx:HBox> 
            <gc:PreviousPanelButton id="previous" label="{'Back'}"/> 
            <gc:NextPanelButton id="next" label="{'Forward'}"/> 
            <gc:SubmitButton id="submit" label="{'Submit Data'}"/> 
        </mx:HBox> 
    </mx:VBox> 
</gc:Wrapper>

View full size graphic

A.

Content selected for Guide in Workbench

B.

Buttons generated by Guide layout

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

Set up a function that references whenever the underlying data model item changes. The function uses the binding value of the data model item to obtain the value of the item. For example, the following MXML demonstrates a reference to the value of a data model item, empName, that stores an employee name:

<?xml version="1.0" encoding="utf-8"?> 
<gc:Wrapper width="100%" height="100%" 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns:gc="ga.controls.*" > 
     
    <mx:Script> 
        <![CDATA[ 
 
            Wrapper.instance.bindSetter("Services.employee.empName", empNameSetter); 
 
            private function empNameSetter( value:Object ):void 
            { 
                var empName:String = value as String;  // cast to appropriate type 
                If ( empName == "Tony Blue" ) { 
                    // do something here 
                } 
            } 
        ]]> 
    </mx:Script> 
 
    <mx:VBox width="100%" height="100%"> 
        <gc:PanelContent width="100%" height="100%" /> 
        <mx:HBox> 
            <gc:PreviousPanelButton label="Back" /> 
            <gc:NextPanelButton label="Forward" /> 
            <gc:SubmitButton label="Submit Data" /> 
        </mx:HBox> 
    </mx:VBox> 
</gc:Wrapper>

Each time the Services.employee.empName data item changes value, the named function executes with the value of the item. For example, you could save the value locally and have MXML controls use that local variable as their {data provider}.