Creating Controls

Description

This example creates a button object that, when clicked by a user at runtime, displays the first panel in the Guide. Adding this control to a Guide layout creates the following experience:

• When the Guide renders, a button labeled First is dimmed. The user cannot interact with the button immediately.

• The user navigates to another panel in the Guide using the Next button or through the navigation supplied by the Guide layout. After this navigation, the First button is displayed normally and is available to the user. Clicking the button returns the user to the first panel in the Guide.

Source

package com.adobe.guides.controls 
{ 
    import mx.controls.Button; 
    import flash.events.Event; 
    import flash.events.MouseEvent; 
    import ga.model.GAEvent; 
    import ga.model.PanelManager; 
 
    public class FirstPanelButton extends Button 
    { 
 
        // The PanelManager class controls the organization and behavior 
        // of panel instances at runtime. The class contains 
        // convenience properties and methods that are useful for  
        // manipulating panels within a Guide. 
        private var _pm:PanelManager; 
         
        protected override function createChildren():void   
        { 
            super.createChildren(); 
            this.label = "First"; 
            _pm = PanelManager.instance; 
 
            // Adds event listeners for the three events that can cause a 
            // change in the state of this button, and reevaluates if the button 
            // should display as enabled. 
            _pm.addEventListener(GAEvent.PAGE_SELECTION_CHANGE, pageChange); 
            _pm.addEventListener(GAEvent.PAGE_REMOVE, pageChange); 
            _pm.addEventListener(GAEvent.PAGE_ADD, pageChange); 
 
            // Sets the default behavior when the Guide renders. In this 
            // case, on the initial panel, the button should be dimmed. 
            super.enabled = false; 
        } 
 
        // When the button is clicked by a user, the current panel displayed 
        // is set to be the first panel in the Guide. 
        override protected function clickHandler(event:MouseEvent):void  
        {  
            if (super.enabled)  
            {  
                _pm.currentPage = _pm.firstPage; 
            }  
        } 
 
        // Conditionally sets the button's enabled property dependent on 
        // whether the current panel is the first panel in the Guide. 
        private function pageChange(event:Event):void  
        {  
            super.enabled = _pm.previousPage!=null; 
        } 
    } 
}

For information about adding this control to a Guide layout, see Adding custom Guide layout controls to panel layouts and Guide layouts .

When creating custom navigation controls, be aware of the methods and properties of the PanelManager class. (See ActionScript Language Reference .)

Description

This example creates a button object that, when clicked by a user at runtime, displays the last panel in the Guide. Adding this control to a Guide layout creates the following experience:

• When the Guide renders, a button labeled Last is displayed. Clicking the button sends the user to the last panel in the Guide.

• If the user is on the last panel of the Guide, this button is dimmed and not available to the user.

Source

package com.adobe.guides.controls 
{ 
    import mx.controls.Button; 
    import flash.events.Event; 
    import flash.events.MouseEvent; 
    import ga.model.GAEvent; 
    import ga.model.PanelManager; 
 
    public class LastPanelButton extends Button 
    { 
        // The PanelManager class controls the organization and behavior 
        // of panel instances at runtime. The class contains 
        // convenience properties and methods that are useful for  
        // manipulating panels within a Guide. 
        private var _pm:PanelManager; 
         
        protected override function createChildren():void   
        { 
            super.createChildren(); 
            this.label = "Last"; 
            _pm = PanelManager.instance; 
 
            // Adds event listeners for the three events that can cause a 
            // change in the state of this button, and reevaluates whether 
            // the button should display as enabled. 
            _pm.addEventListener(GAEvent.PAGE_SELECTION_CHANGE, pageChange); 
            _pm.addEventListener(GAEvent.PAGE_REMOVE, pageChange); 
            _pm.addEventListener(GAEvent.PAGE_ADD, pageChange); 
 
            // Sets the default behavior when the Guide renders. In this 
            // case, on the initial panel, the button should be disabled. 
            super.enabled = true; 
        } 
 
        // When the button is clicked by a user, the current panel displayed 
        // is set to be the last panel in the Guide. 
        override protected function clickHandler(event:MouseEvent):void  
        {  
            if (super.enabled)  
            {  
                _pm.currentPage = _pm.lastPage; 
            }  
        } 
 
        // Conditionally sets the button's enabled property dependent on 
        // whether the current panel is the last panel in the Guide. 
        private function pageChange(event:Event):void  
        {  
            super.enabled = _pm.nextPage!=null; 
        } 
    } 
}

For information about adding this control to a Guide layout, see Adding custom Guide layout controls to panel layouts and Guide layouts .

Description

This example creates an HSlider control that you can use for mapping Guide items. This custom field control assumes that the original Guide item is used to specify integer values from 0 through 100 that indicate a percentage. Mapping a Guide item to this control creates the following experience:

• When the Guide renders, an HSlider control appears in place of the original Guide item. The HSlider has the same caption value as the original Guide item. The user can drag the slider to set a value from 0 through 100.

• When switching to the PDF view of the form, the value the user sets using the slider appears in the corresponding field. If the user changes the value on the PDF and then returns to the Guide, the slider value reflects the updated value.

Source

package com.adobe.guides.controls 
{ 
    import mx.controls.HSlider; 
 
    public class CustomHSlider extends HSlider  
    { 
 
        protected override function createChildren():void   
        { 
            super.createChildren(); 
 
            // Sets the minimum, maximum, and initial values for the range. 
            this.minimum = 0; 
            this.maximum = 100; 
            this.value = 0; 
 
            // The increment range for the slider, and the increments for the 
            // increment label. 
            this.snapInterval = 1; 
            this.tickInterval = 10; 
 
            // The label for the range represented by the slider. 
            this.labels=['0%', '100%']; 
 
            // Sets interaction properties allowing the slider to update in 
            //real-time in response to user interaction. 
            this.allowTrackClick = true; 
            this.liveDragging = true;  
        } 
    } 
}

For information about adding this control to a Guide layout, see Adding custom Guide layout controls to panel layouts and Guide layouts .

Reference your Flex library project in Workbench

1. Start Workbench.

2. Add your Flex library project to a LiveCycle ES2.5 application.

3. Switch to the Guide Design perspective, and open a Guide into which you want to incorporate the custom Guide layout.

4. In the Guide Tree view, select the root node.

5. In the Guide Properties view, in the Guide extensions option, click .

6. Go to the SWC file for your Flex library project, and then click OK .

   Your Guide extensions are now available in the Display as option in the Guide Properties view. Click Preview to render the Guide.

   Important: If you edit the Flex library project after you add the project to a LiveCycle ES2.5 application, remove the reference to the project. The reference is located in the Guide extensions option ( Guide Properties view). After you remove the reference, to make the changes available, add the reference again.

Map form design objects to custom field controls

1. Start Workbench and either open an existing Guide, or create a Guide.

2. Select the Guide object that you want to map in the Guide Tree view.

3. In the Guide Properties view, click Display as , and select the name of your custom control. For example, using the custom control created in the Example: CustomHSlider section, select Custom H Slider .

4. Save the Guide.

   Preview your Guide to view the new custom control.