Posts in Category "Flex 4"

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

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

Using the Adobe Community Help Client in Flash Builder 4

Note: Before using the CHC, please read technote cpsid_83103 to ensure that context-sensitive help works correctly.

Flash Builder 4 and ColdFusion Builder are the first Adobe products to ship with the Adobe Community Help Client (CHC), which is an AIR application that is the platform for the next generation of Adobe help delivery. The CHC provides a portal to Flex documentation and a variety of Adobe and non-Adobe learning content. CHC features include:

  • Always online – If you have a network connection, the CHC accesses content from the web to ensure that you access the most up-to-date material. It can also work in local mode if there is no internet connection.
  • Search-centric – Use Community Help search (which searches aggregated resources, including select 3rd party sites), adobe.com search (including refinements to narrow your scope), or local search. This post focuses on the search features in the CHC.
  • In-context navigation – Provides a dynamically generated set of related links for key pages. Think of this as the replacement for the tree-based table of contents.

Our research indicates that most of you access content via search engines, and the CHC gives you a lot of control over search. For Flash Builder, you have the following search options:

  • Community help – Searches all of adobe.com along with a list of selected Flex blogs and sites.
  • Adobe.com>All Adobe Content – Searches all of adobe.com.
  • Adobe.com>Using Flash Builder 4 – Just the Using Flash Builder 4 book.
  • Adobe.com>Flex 4 – Searches all Flex and Flash Builder documentation.
  • Adobe.com>ActionScript 3.0 Reference – Searches the ActionScript 3.0 Platform Reference (use this option to restrict a search to ActionScript APIs only).
  • Adobe.com>Adobe reference only – Searches all Flex, ActionScript, and AIR documentation.
  • Code search – Uses the Blueprints engine to limit your search to code samples.
  • Local Help – Used when there is no network connection.

One nice feature of the CHC is that you can download a set of local content for use when you are offline. (An upcoming CHC update will let you run offline help even when connected to the Internet.)

I encourage you to try out the CHC and experiment with the UI and various search options. Also, Mallika Yelandur, one of the ColdFusion writers, has posted a series of informative posts that you might want to check them before beginning.

Please let us know how it goes. Because the CHC is an AIR app, we’ll be able to update it fairly easily and are already planning new features and enhancements, so your feedback is important.

-Randy

Check out the Flash Builder 4 and Flex 4 documentation!

Hi everyone,
Today we shipped Flex 4 and Flash Builder 4. This is a significant release with lots of new features and we are all proud of it. I’d like to take a minute to help you get started with the documentation and other learning resources.

You should start by reading the introductions from our Product Managers:

Also, if you are a Flex 3 customer, you should read Joan Lafferty’s Differences between Flex 3 SDK and Flex 4 SDK article.

We’ve provided a rich set of content for Flex 4 and Flash Builder 4:

And lightning will strike me down if it I don’t acknowledge and thank the Flex and Flash Builder Learning Resources team: Pam Araki, Janice Campbell, Linda Adler, Matt Horn, Shimi Rahim, Stephen Gilson, Vince Genovese, and Erich Champion. I also need to thank Akshay Madan, Mark Nichoson, Laura Kersell, Helen Whelan, JuLee Burdekin, Puny Sen, Debbie Chu, and Tanya Knoop for all the work they put into the Adobe Community Help client and the Platform Language Reference.

Stay tuned to this blog as the members of my team post tips and tricks to help you get started.

Regards,
Randy Nielsen

Why I love the ActionScript 3.0 Platform Reference

Six years ago, when I started managing the Flex documentation, we almost immediately started worrying about future proliferation of the ActionScript API content. You see, we were republishing very similar content to a new location for each product and each version. For example, http://livedocs.adobe.com/flex/2/langref, http://livedocs.adobe.com/flex/201/langref, and http://livedocs.adobe.com/flex/3/langref, while they have different Flex content, all have virtually identical content for the flash.* packages.

At that time, we anticipated customers would have trouble locating the ActionScript API content for their product/version and/or google into the wrong version and miss seeing up-to-date information. And this has turned out to be true.

Obviously, the right thing to do is create one version of this content covering all the Adobe products that feature ActionScript APIs. However, it turns out that this is a non-trivial task, given all the products that use ActionScript, including Flex, Flash Pro, LiveCycle, LiveCycle Data Services, Flash Lite, FMS, and ColdFusion.

So I hope everyone realizes just how happy I am to say that we have released the ActionScript 3.0 Platform Reference and that it includes content for all released Adobe products that feature ActionScript APIs.

Now you have one-stop shopping for all your favorite Flex APIs, including DataGrid, ComboBox, and Button, as well as Flash, AIR, and ColdFusion APIs.

So when you get a minute, please open and bookmark ActionScript 3.0 Platform Reference. It has an updated look and feel, including content filtering by product, runtime, and version, so you can exclude classes for the products you don’t use.

Stay tuned to this blog and other Adobe Learning Resources blogs for more details on the ActionScript 3.0 Reference for the Adobe Flash Platform and tips on how to get the most out of it.

And remember that we’re running on help.adobe.com these days, and no longer use livedocs.adobe.com.

Thanks,
Randy Nielsen

Server-side typing for Flash Builder data access tools (PHP)

Flash Builder 4 introduces a rich set of tools for configuring access to data services. The Flash Builder documentation and tutorials can help you get started with writing PHP and ColdFusion services as well as configuring your applications to access these services.

However, the Flash Builder documentation examples and tutorials use client-side typing. You can also write PHP and ColdFusion services that implement server-side typing. Server-side typing simplifies the workflow in Flash Builder, and also provides server code that is easier to understand and maintain.

Client-side typing

Flash Builder uses client-side typing for services that do not specify data types for arguments or return values. To implement access to these services, Flash Builder needs to know the data types for the arguments and return values. Flash Builder tools introspects the services, prompting you to configure the necessary custom data types.

Here are links to the Flash Builder tutorials that use client-side typing:

This article provides documentation and an example for server-side typing in PHP. Later, I’ll provide a separate example for server-side typing in ColdFusion.

Server-side typing

Both PHP and ColdFusion allow you to define custom data types in server code. Flash Builder recognizes the custom data type during introspection of services. This simplifies the access to the service – you do not have to walk through wizard screens to configure custom data types.

This blog post contains an example for PHP that shows how to implement server-side typing. This basic application lists employees from a database. It also includes an input form to add new employees. This blog post contains the full source listing for both the client and server, plus a mini-tutorial.

StrongTypePHPApp.jpg

Continue reading…

Can you chip in on open-source Flex documentation?

Hi all,
As most of you know, the Flex SDK has been open-source for quite a while now. We in the doc group have spent quite a bit of time struggling with what that means for the documentation/core content. The thing that seems most practical to me is to expose our code examples as open-source content, but (for whatever reason) this hasn’t really taken off.

Meanwhile, our old friend Ed Sullivan has brought the new DevCenter cookbook to life and it seems like a good place to advertise for some Flex code examples. To that end, I just posted the following recipe requests:

* Spark custom layout class example
* Custom list control
* Spark VideoDisplay control
* FXG/MXML blend mode examples
* FXG/MXML Transform examples

Now I have a great team and we are fully capable of creating great code examples, but Flex is a big animal and we could really use your help rounding out our examples, so please check out these recipe requests and chip in if you feel so inclined.

Thanks!
Randy

Any ColdFusion developers out there who are new to Flex?

Hi all,
The documentation group is conducting a brief survey to learn more regarding how customers get information about using Flex. In particular, we’re studying how ColdFusion developers get started learning Flex. So, if you’re a ColdFusion developer who is new to Flex, we’d like your feedback. Please click the link below to take a brief survey on the following topic:

Creating data-driven applications in Flash Builder 4

Thanks in advance,
-Randy