Author Archive: Stephen Gilson

Performance Improvements and New Features for Adobe ActionScript API Reference (ASDoc)

Use the ActionScript® 3.0 Reference for the Adobe® Flash® Platform as the API reference for many Adobe products, including Flash Player, AIR, and Flex. The November, 2011, release of the ActionScript Reference (http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/) contains major performance improvements and other new features:

  • Refresh right-pane only on selection, instead of entire page. This feature improves page-load performance by implementing a right-pane only refresh on selection. This feature improves page-load times in the range of 25-50% (not available in all versions of IE).
  • Improved linking to Adobe User Guides. Reorganized the See Also sections into three areas – More Examples, Learn More, and Related API Elements. This reorganization makes it easier to find examples and usage information for a class or class element. For example, see the ViewNavigator class.
  • The Show Packages and Classes option is now the default to address a frequent customer request.
  • Fixes for issues associated with localization and translation.

 

Adobe Cookbooks – Recipe Request Challenge

Write some Flex code and get a chance to win a Samsung 10.1 tablet.

With the help of the user community and several Adobe employees, we have identified a list of recipe requests that we feel would be valuable contributions to the Adobe Cookbooks as well as for the larger Adobe community.  All that these requests need now are answers…and that’s where the challenge comes in!

For every recipe request below, the community member who provides the solution will receive:

  1. An Adobe Developer Connection t-shirt
  2. A chance at a Samsung 10.1 tablet

Adobe Cookbook recipes are snippets of code that are shared by community members to assist fellow developers in overcoming specific development issues; example here.  If a developer cannot locate a recipe to solve their issue they may submit a recipe request, where they outline the issue they are having in the hopes that someone else in the community may have a code snippet to share.  When a recipe request gets answered, it gets published as a regular recipe, same as the example linked above.

See this page for more information: Adobe Cookbooks – Recipe Request Challenge

 

Stephen Gilson
Flex Doc Team

Add Chrome Search Extension for the ActionScript® 3.0 API Reference (ASDoc)

Use the ActionScript® 3.0 Reference as the API reference for many Adobe products, including Flash Player, AIR, Flex, and LiveCycle. To improve searching of the reference in Chrome, install the “ActionScript 3.0 Search” extension:

ActionScript 3.0 Search

 

Stephen Gilson
Flex Doc Team

New Features Added to Adobe ActionScript API Reference (ASDoc)

Use the ActionScript® 3.0 Reference for the Adobe® Flash® Platform as the API reference for many Adobe products, including Flash Player, AIR, and Flex. The new release of the ActionScript Reference (http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/) contains several new features:

  • Support for a quick search added to the Packages and Classes lists.The quick search lets you filter the content of the Packages and Classes lists as you type. This feature is not supported on IE 7 and IE 8.
  • When displaying all classes in the Classes list, selecting a class name in the list continues to display all classes.In the previous release, selecting a class name in the Classes list while displaying all classes changed the Classes list to display only the classes in the package of the selected class.
  • Added a Home link to the top of all pages.The Home link lets you navigate back to the index.html page from anywhere in the reference.
  • Fixes for issues associated with localization and translation.

 

Stephen Gilson
Flex Doc Team

Handle hardware keyboard events in a Flex mobile application

In a mobile application built in Flex, you can detect when the user presses a hardware key on a mobile device. For example, on an Android device you can detect when the user presses the Home button, Back button, or Menu button.

To detect when the user presses a hardware key, create an event handlers for the KEY_UP or KEY_DOWN event. Typically, you attach the event handlers to the application object as defined by the Application, ViewNavigatorApplication, or TabbedViewNavigatorApplication containers.

The Stage object defines the drawing area of a Flex application. Each application has one Stage object. Therefore, an application container is actually a child container of the Stage object.

The Stage.focus property specifies the component that currently has keyboard focus, or contains null if no component has focus. The component with keyboard focus is the one that receives event notification when the user interacts with the keyboard. Therefore, if Stage.focus is set to the application object, the application object’s event handlers are invoked.

On a mobile device, your application can be interrupted by another application. For example, the mobile device can receive a phone call while your application is running, or the user can switch to a different application.  When the user switches back to your application, the Stage.focus property is set to null. Therefore, event handlers assigned to the application object do not respond to the keyboard.

Because the Stage.focus property can be null on a mobile application, listen for keyboard events on the Stage object itself to guarantee that your application recognizes the event. The following example assigns keyboard event handlers to the Stage object:

<?xml version="1.0" encoding="utf-8"?>
<s:ViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark" firstView="views.View1"
    applicationComplete="appCompleteHandler(event);">

    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;

            // Add the hardware key event handlers to the stage.
            protected function appCompleteHandler(event:FlexEvent):void {
                stage.addEventListener("keyDown", handleButtons, false,1);
                stage.addEventListener("keyUp", handleButtons, false, 1);
            }

            // Event handler to handle hardware keyboard keys.
            protected function handleButtons(event:KeyboardEvent):void
            {
                if (event.keyCode == Keyboard.HOME) {
                    // Handle Home button.
                }
                else if (event.keyCode == Keyboard.BACK) {
                    // Hanlde back button.
                }
            }
        ]]>
    </fx:Script>
</s:ViewNavigatorApplication>

 

Stephen Gilson
Flex Doc Team

Getting Started Resources for Flex 4.5, Flash Builder 4.5, and Flex Mobile

The Flex 4.5 release introduced many new features, including support for mobile devices and tablets. The following links will help you get started with the Flex 4.5 release:

And don’t forget about the Flex documentation at http://www.adobe.com/devnet/flex/documentation.html. In particular, there is new content that focuses on mobile app development with Flex

 

Stephen Gilson
Flex Doc Team

Creating Flex View States in ActionScript

In Flex 4, Adobe introduced new MXML language improvements that make it much easier to work with states. This support includes the dot (.) delimiter for specifying state overrides, and the new MXML excludeFrom and includeIn attributes.

The following item renderer, MySimpleCustomItemRendererMXML.mxml in the myComponents subdirectory, uses view states to control the appearance of the items in a SkinnableDataContainer container:

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:mx="library://ns.adobe.com/flex/mx"
    xmlns:s="library://ns.adobe.com/flex/spark">

    <s:states>
        <s:State name="normal"/>
        <s:State name="hovered"/>
    </s:states>

    <s:Label id="labelDisplay"
        verticalCenter="0"
        left="3" right="3" top="6" bottom="4"
        fontSize.hovered='14' fontStyle.hovered="italic"/>
</s:ItemRenderer>

The following application uses this item renderer:

<?xml version="1.0" encoding="utf-8"?>
 <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
     xmlns:s="library://ns.adobe.com/flex/spark"
     xmlns:mx="library://ns.adobe.com/flex/mx">

    <s:SkinnableDataContainer
        itemRenderer="myComponents.MySimpleCustomItemRendererMXML">
        <s:layout>
            <s:VerticalLayout/>
        </s:layout>

    <mx:ArrayList>
        <fx:String>Bill J Smith</fx:String>
        <fx:String>Dave Jones</fx:String>
        <fx:String>Mary Davis</fx:String>
        <fx:String>Debbie Cooper</fx:String>
        </mx:ArrayList>
    </s:SkinnableDataContainer>
</s:Application>

However, you might also want to create view state in ActionScript, either in an MXML file or in an ActionScript file. The following example uses the creationComplete event to define the view states in ActionScript:

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:mx="library://ns.adobe.com/flex/mx"
    xmlns:s="library://ns.adobe.com/flex/spark"
    creationComplete="creationCompleteHandler(event);">

    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;
            import mx.states.SetStyle;
            import mx.states.State;

            protected function creationCompleteHandler(event:FlexEvent):void {
                states = [
                    new State({name:"normal"}),
                    new State({name:"hovered",
                        overrides:[
                            new SetStyle(labelDisplay, "fontSize", 14),
                            new SetStyle(labelDisplay, "fontStyle", "italic")]
                        })
                ];
            }
        ]]>
    </fx:Script>

    <s:Label id="labelDisplay"
        verticalCenter="0"
        left="3" right="3" top="6" bottom="4"/>
</s:ItemRenderer>

In this example, you import the mx.states.State and mx.states.SetStyle classes. Every Flex component inherits the mx.core.UIComponent.states property. This property contains an Array of State objects that define the supported view states of the component. In the event handler for the creationComplete event, create an Array of State objects. The name property of the State objects defines the name of the view state.

The State.overrides property contains an Array of objects that implement the mx.states.IOverride interface. The AddChild, AddItems, RemoveChild, SetEventHandler, SetProperty, and SetStyle classes all implement this interface. In this example, you create two instances of SetStyle that override the fontSize and fontStyle styles of the Label control. You can mix objects of type AddChild, AddItems, RemoveChild, SetEventHandler, SetProperty, and SetStyle in the overrides Array.

Note that manipulating at runtime view states, containers that use view states, or properties of components that are controlled by view states can be problematic. For example, when you use view states to control the children of a container, do not add or remove container children, or change the order of children in the container, at runtime. The following container defines a Button control that appear only in State2:

<s:Group>
    <s:Button/>
    <s:Button includeIn="State2"/>
    <s:Button/>
</s:Group>

The view states infrastructure relies on the structure of the container as defined by the MXML file. Changing the child order of the container at runtime can cause your application to fail. Therefore, do not call the addElement(), removeElement(), or setElementIndex() method on the Group container at runtime, or any other method that changes the child order of the container.

For more infomration, see:

 

Stephen Gilson
Flex Doc Team

New View State Syntax for Flex 4

Flex 4 lets you specify view states using a new inline MXML syntax, rather than the syntax used in previous releases. In the new syntax, the AddChild, RemoveChild, SetProperty, SetStyle, and SetEventHandler classes have been deprecated and replaced with MXML keywords.

To create view states, you use the <s:states> tag. In the body of the <s:states> tag, add one or more <s:State> tags, one for each additional view state. However, there is no longer a base view state, as defined in Flex 3 by the currentState property being set to the empty string (“”). The default view state is now the first view state defined in the <s:states> tag.

The AddChild and RemoveChild classes are replaced by the includeIn and excludeFrom MXML attributes. Use these attributes to specify the set of view state in which a component is included.

The includeIn attribute takes a comma delimited list of view state names, all of which must have been previously declared within the application’s <s:states> Array. The excludeFrom attribute takes a comma delimited list of view state names where the component in not included. The excludeFrom and includeIn attributes are mutually exclusive; it is an error to define both on a single MXML tag.

The following example uses view states to add components to the application based on the current state:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<s:layout>
<s:VerticalLayout/>
</s:layout>

<s:states>
<s:State name="default"/>
<s:State name="addCheckBox"/>
<s:State name="addTextInput"/>
<s:State name="addCheckBoxandButton"/>
</s:states>

<!-- Included in the addCheckBox and
addCheckBoxandButton view states. -->
<s:CheckBox id="myCB" label="Checkbox"
includeIn="addCheckBox, addCheckBoxandButton"/>
<!-- Included in the addTextInput view state. -->
<s:TextInput id="myTI"
includeIn="addTextInput"/>
<!-- Included in the addCheckBoxandButton view state. -->
<s:TextInput id="myB"
includeIn="addCheckBoxandButton"/>

<s:Button label="Add CB"
click="currentState='addCheckBox'"/>
<s:Button label="Add TI"
click="currentState='addTextInput'"/>
<s:Button label="Add CB and Button"
click="currentState='addCheckBoxandButton'"/>
<s:Button label="Restore Default"
click="currentState='default'"/>
</s:Application>

You no longer use the SetProperty, SetStyle, and SetEventHandler classes in the <s:states> tag to define overrides for a view state. Instead, define state-specific property values using the dot operator on any writable MXML attribute. The dot notation has the following format:

propertyName.stateName

Use the same syntax for overriding a property, style, or event. For example, you can specify the value of the label property of a Button control for the default view state and for the State1 view state, as the following example shows:

<s:Button label="Default State" label.State1="New State"
label.State2="Newer State"/>

The unqualified property, meaning the one that does not use the dot notation to specify a view state, defines the default value.

The following example sets the enabled property of a Button control based on the current view state:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<s:layout>
<s:VerticalLayout/>
</s:layout>

<s:states>
<s:State name="default"/>
<s:State name="addCheckBox"/>
<s:State name="addTextInput"/>
<s:State name="addCheckBoxandButton"/>
</s:states>

<!-- Included in the addCheckBox and
addCheckBoxandButton view states. -->
<s:CheckBox id="myCB" label="Checkbox"
includeIn="addCheckBox, addCheckBoxandButton"/>
<!-- Included in the addTextInput view state. -->
<s:TextInput id="myTI"
includeIn="addTextInput"/>
<!-- Included in the addCheckBoxandButton view state. -->
<s:TextInput id="myB"
includeIn="addCheckBoxandButton"/>

<s:Button label="Add CB"
click="currentState='addCheckBox'"
enabled.addCheckBox="false"/>
<s:Button label="Add TI"
click="currentState='addTextInput'"
enabled.addTextInput="false"/>
<s:Button label="Add CB and Button"
click="currentState='addCheckBoxandButton'"
enabled.addCheckBoxandButton="false"/>
<s:Button label="Restore Default"
click="currentState='default'"
enabled.default="false"/>
</s:Application>

For more information, see the Flex 4 documentation on view states.

 

Stephen Gilson
Flex Doc Team

New Doc on Creating Flex Gumbo Components in ActionScript

Here is new documentation on creating Flex Gumbo components in ActionScript. This document is for those who want to override commitProperties(), partAdded(), partremoved(), or getCurrentSkinState(), or want to create custom states in their skin classes.

Download the PDF: Advanced Spark Visual Components in ActionScript

 

Stephen Gilson
Flex Doc Team

New Doc on Flex Gumbo List, DropDownList, and ButtonBar Controls Available

Here is new documentation on Flex Gumbo List, DropDownList, and ButtonBar controls.

Download the PDF: Spark list-based controls