Author Archive: Matthew J. Horn

Flex 3.x Examples Source Code

Previously, I blogged with a link to a ZIP file for the 4.5 samples code that is used in the core documentation. This blog entry was pretty popular and a lot of folks downloaded the ZIP file. However, many users are still using Flex and Flash Builder 3.x, so here is a link to a ZIP file that contains the source code and assets for the Flex 3.x examples:

Flex36CodeExamples.zip (8.9MB)

As with the 4.5 examples, this includes the *.mxml and *.as files, as well as the stylesheets, images, videos, audio files, and other assets that they use. This ZIP file does not include the compiled SWF files for these examples, but it should be useful to you if you like to search for and look at source code for the Flex 3.x examples.

The ZIP file is organized into 4 main groups:

  • devapps: Core examples including the MX component set and containers, effects, validators, and item renderers.
  • buildapps: Examples that focus on topics such as logging, deploying, and optimizing apps.
  • createcomps: Examples that focus on custom component development.
  • datavis: Data visualization examples including the charting examples as well as the OLAPDataGrid and AdvancedDataGrid components.

NOTE: If you found this blog post but are actually looking for the Flex 4.5 examples, you can get them here:
flex45_using_examples_source (30MB)

-Matthew J. Horn
Flex docs

Migrating from Flex 3 to Flex 4/4.5

There are lots of benefits to be had from migrating from Flex 3 to Flex 4.5, but it can be a pretty daunting task if you have a large or complicated application. We’ve collected a list of good resources that can help you:

-Matthew J. Horn
Flex doc team

What’s not to like?

About 8 months ago, we added a pair of radio buttons to all the Flex 4.5 doc and ActionScript language reference pages that asks you is the content was helpful:

What we were hoping for was a large amount of data, good or bad, that would tell us where weaknesses and strengths exist in the documentation. This would give us much more insight into the efficacy of individual pages, or into groups of pages. It would also help us decide where to put our resources when updating the documentation. Unfortunately, the number of ratings has been extremely low. Like lower than many banner ad click through rates. Like lower than my Angry Birds score kind-of-low.

So, why aren’t you rating the pages?

Are you too busy as a developer to rate the page?
Maybe you’ve got a lot on your mind when you end up at a Flex doc page, and don’t want to distract from your thought process, especially if you’re copying/pasting a code example or trying to grok something.

Are you worried about privacy?
There is absolutely no way for us to track your rating or any comments you add with that rating. It is completely anonymous.

Is the location of the rating “widget” inconvenient?
The widget currently appears at the top of the page. But Flex doc pages tend to be long and dense with material, so maybe you see it and then just forget about it. We’ve thought about moving the widget to the bottom of the page, or adding it multiple times to the pages, but we don’t want to get in your way, either.

Do you think we ignore this data?
We don’t. We look at it very closely, and even read the comments.

We’d love to get your feedback (here, and, of course, on the help pages)!

-Matthew J. Horn
Flex doc team

Tips for creating mobile applications

Adobe evangelist Mike Jones posted some advice for creating mobile applications with the mobile workflow in Flash Builder 4.5. These are a great collection of tips that come from someone who has hands-on experience developing real-world applications.

My 10 Tips When Developing For Multiple Devices

I suggest you check them out before you start your next project!

-Matthew J. Horn
Flex doc team

Flex 4.5 Example Source Code

Below is a link to a ZIP file that contains all the source code and assets for the Flex 4.5 examples that are used in the core documentation. This includes the *.mxml and *.as files, as well as the stylesheets, images, videos, audio files, and other assets that they use. This ZIP file also includes the mobile examples. It does not include the compiled SWF files for these examples, but it should be useful to you if you like to search for and look at source code for the Flex 4.5 examples.

The ZIP file is organized roughly by topic. For example, the Spark DataGrid examples are in the code\dpcontrols\sparkdpcontrols\ directory of the ZIP file. The mobile skinning examples are in code\mobile_skins.

flex45_using_examples_source (30MB)

Adding links to MX and Spark DataGrids using inline item renderers

While working on a recent project, I couldn’t find examples of adding inline links to the Spark and MX DataGrids. There were lots of examples of item renderers, but nothing that did exactly what I wanted: just a hyperlink in the DataGrid cell.

Below are two examples: one shows the Spark DataGrid and the other shows the MX DataGrid with inline links.

There are some subtle differences between how to define an inline item renderer. There are also some subtleties to the way you define the links. I’ll let the code speak for itself, but note that there are some things to keep in mind:

  • The cursor changes to a hand when you mouse over the link (without embedding a new cursor image or invoking the CursorManager)
  • The links are styled blue and underlined like real web links
  • For the MX DataGrid, it’s mx:DataGridColumn > mx:itemRenderer > fx:Component > mx:Label
  • For the Spark DataGrid, it’s s:GridColumn > s:itemRenderer > fx:Component > s:GridItemRenderer > s:Label
<?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">
    
    <fx:Declarations>
        <!-- Define the data -->
        <fx:XMLList id="siteList">
            <site>
                <name>IMDB</name>
                <url>http://www.imdb.com</url>
            </site>
            <site>
                <name>BoardgameGeek</name>
                <url>http://www.boardgamegeek.com</url>
            </site>
            <site>
                <name>Yahoo! Finance</name>
                <url>http://finance.yahoo.com</url>
            </site>
        </fx:XMLList>
        <!-- Use an XMLListCollection for the Spark DataGrid -->
        <s:XMLListCollection id="siteList2" source="{siteList}"/>
    </fx:Declarations>
    
    <s:layout>
        <s:VerticalLayout/>
    </s:layout>
    
    <s:Panel title="Spark DataGrid Links"
             width="75%" height="75%" 
             horizontalCenter="0" verticalCenter="0">
            <s:DataGrid id="sparkDataGrid" 
                        width="100%" height="100%" 
                        dataProvider="{siteList2}">
                <s:columns>
                    <s:ArrayList>
                        <s:GridColumn dataField="name" headerText="Name"/>
                        <s:GridColumn dataField="url" headerText="URL">
                            <s:itemRenderer>
                                <fx:Component>
                                    <s:GridItemRenderer>                                  
                                        <s:Label text="{data.url}" 
                                            color="0x336699" 
                                            verticalCenter="0" paddingLeft="5" 
                                            textDecoration="underline" 
                                            buttonMode="true" 
                                            click="navigateToURL(new URLRequest(data.url))"/>
                                    </s:GridItemRenderer>
                                </fx:Component>
                            </s:itemRenderer>                 
                        </s:GridColumn>
                    </s:ArrayList>
                </s:columns>      
            </s:DataGrid>
    </s:Panel>

    <s:Panel title="MX DataGrid Links"
             width="75%" height="75%" 
             horizontalCenter="0" verticalCenter="0">
        <mx:DataGrid id="mxDataGrid" 
                     width="100%" height="100%" 
                     dataProvider="{siteList}">
            <mx:columns>
                <mx:DataGridColumn headerText="Name" dataField="name"/>
                <mx:DataGridColumn headerText="URL" dataField="url">
                    <mx:itemRenderer>
                        <fx:Component>
                            <mx:Label text="{data.url}" 
                                      textDecoration="underline" 
                                      color="0x336699" 
                                      buttonMode="true" 
                                      useHandCursor="true" 
                                      mouseChildren="false"
                                      click="navigateToURL(new URLRequest(data.url))"/>
                        </fx:Component>
                    </mx:itemRenderer>
                </mx:DataGridColumn>              
            </mx:columns>
        </mx:DataGrid>
    </s:Panel>    
</s:Application>

Optimizing FXG

FXG is a popular declarative XML syntax for defining vector graphics in applications built with Flex. FXG can also be used as an interchange format with other Adobe tools such as Illustrator or Photoshop. Here are some techniques for improving the quality of your FXG graphics and making working with FXG easier.

Composite path versus rounded rectangle
Composite paths create a cleaner look because there are no extra pixels inside the corners. Rounded rectangles, on the other hand, have extra pixels due to anti-aliasing. Rounded rectangles convert to a <Rect> element in FXG, which is preferable because a <Rect> element is easier to manipulate than a compex path.

Move alpha values from the element to the fill or stroke
When exporting FXG files from a graphics editor, the alpha property is sometimes placed on the graphic element tag. If you convert the FXG to MXML, this element uses its own DisplayObject, which can be computationally expensive. To avoid this, move any alpha properties from the element tag down to the stroke or fill. If both the stroke/fill and the element have alpha values, multiply the stroke and fill alpha values by the element’s alpha value. For example, if the stroke and element alpha values are both .5, then remove the element’s alpha property and set the stroke’s alpha to .25 (.5 x .5).

Round alpha values to 2 decimal places
Exported FXG files sometimes use percentage values for alpha values. The visual difference between an alpha value with two decimal places and a rounded alpha value is negligible. To make your code more readable, round off alpha values to 2 decimal places. For example, round an alpha value of 0.05882352941176471 to 0.06.

Remove blendMode=”normal”
By default on graphic elements, the blendMode is “auto”. When the blendMode property is “auto”, Flash Player correctly determines whether the element needs to use the “layer” blendMode based on the alpha value.

Identifying elements of an FXG file
Sometimes it can be hard to look at FXG tags and determine what that element looks like. An easy way to do this is to copy your FXG into a <s:Group> tag in an MXML application. Then, change the x values of each element so that they no longer overlap. For example, if your skin is 45 pixels wide and is comprised of three <Rect> elements, increase the x value of the second <Rect> by 50 and the third <Rect> by 100. When you compile and run the application, you can see each layer spread separately.
An alternative is to toggle the visible property of different elements so that you can isolate a particular element.

Reduce anti-aliasing due to stage quality
AIR applications are currently limited to using StageQuality.MEDIUM. When designing skins using FXG and/or programmatic graphics, watch for anti-aliasing artifacts in rounded corners.

To create the appearance of a rounded rectangle at a 1px stroke in Fireworks:

  1. Draw a filled rounded rectangle.
  2. Copy the rectangle, position it 1px down and to the left of the original rectangle and reduce its width and height by 2px.
  3. Select both rectangles, right click and choose Combine Path > Punch.

Use 45 degree angles
Try to keep all angles at 45 degrees. This helps to reduce the visual artifacts from anti-aliasing.

For more information
For more information on using FXG in your Flex applications, see Using FXG.

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:

Flash Player 10.1 Admin Guide available

The outstanding Flash Platform doc blog has a link to the new admin guide for Player 10.1. This document covers tons of information including:

  • Player environment (file storage, processes, and versioning)
  • Installation
  • Administration settings (primarily privacy, security and disk space settings)
  • User-configured settings
  • Security

Much of this stuff is critical to Flex as well as Flash developers.

Layout mirroring for Flex 4.1

The layout mirroring feature is part of the upcoming 4.1 release of the Flex SDK. If you are interested, you can take a look at the first draft of the documentation for this feature. There are two parts to this:

Documentation in an HTML file
Examples in a ZIP file

Any feedback is welcome!