Posts in Category "Flex 4.1"

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

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

Layout mirroring feature now live

The latest release of Flex and Flash Builder include the new layout mirroring feature. This feature aims to make it simple for you to create RTL (right-to-left) applications with just a couple of settings. Read all about it in Mirroring and bidirectional text.

You can download the new releases here: