Flex Doc Team

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)

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>

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:

• Introducing Adobe Flex 4.5 SDK by Adobe Product Manager, Deepa Subramaniam at http://www.adobe.com/devnet/flex/articles/introducing-flex45sdk.html
• Build your first mobile application in Flash Builder 4.5 at http://www.adobe.com/go/learn_flex45_build_mobile_app_en
• Mobile development using Adobe Flex 4.5 SDK and Flash Builder 4.5 by Adobe Product Designer, Narciso Jaramillo at http://www.adobe.com/devnet/flex/articles/mobile-development-flex-flashbuilder.html
• What’s new in Flash Builder 4.5 by Adobe Product Manager, Andrew Shorten at http://www.adobe.com/devnet/flashbuilder/articles/whatsnew-flashbuilder-45.html
• Adobe Flex in a Week at http://www.adobe.com/devnet/flex/videotraining/
• Flex Test Drive at http://www.adobe.com/devnet/flex/testdrive.html
• Adobe Flash Builder 4.5 for PHP at http://www.adobe.com/products/flash-builder_php/features.html
• Adobe evangelist Michael Chaize shows how to implement the swipe on mobile list items at http://www.riagora.com/2011/05/swipe-on-mobile-items/

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

As you probably already know, we shipped Flex 4.5 and Flash Builder 4.5 today. Although you’ll find a lot of information on the Flex product page, the Flash Builder product page, the Flex Developer Center, and the (new!) Flash Builder Developer Center, I’m using this post to focus on the documentation:

• (New!) Developing Mobile Applications with Flex and Flash Builder – Contains information on using mobile-oriented Flash Builder and Flex features. We put a lot of effort into making this content as clear and searchable as possible and are all very proud of it. That said, I recommend that you start by reading NJ’s Mobile development using Adobe Flex 4.5 SDK and Flash Builder 4.5 article before jumping in. Notice that the pages in this book contain numerous links to external videos, devcenter articles, and blog posts, which we think will be tremendously helpful as you come up to speed in this new area.
• Platform ActionScript Reference – Contains new and updated classes for all Adobe products that feature ActionScript APIs. In particular, it has new Flex classes, such as Spark DataGrid, Image, and Form. If you haven’t used the Platform ASR before, note that you can change the filter settings to control which products and versions you see.
• Using Flex – Contains usage information on new Flex SDK features, such as Spark DataGrid, Image, and Form (remember, we have corresponding reference and usage discussions for most Flex features). This book also contains updates and enhancements to existing discussions.
• Using Flash Builder – We reorganized this book to clarify the Flash Catalyst, ActionScript, and Flash Professional workflows. In particular, there is new information on implementing two-way designer-developer workflows with Flash Catalyst.
• Accessing Data with Flex – There aren’t many changes to this book, although we did update screen shots in the Flash Builder workflows.

And lightning will strike me down if I neglect to highlight the amazing work done by the Flex and Flash Builder Community Help & Learning (aka documentation) team: Stephen Gilson, Matt Horn, Mallika Yelandur, Pam Araki, Rosana Francescato, Janice Campbell, Sunil Bhaskaran, and Helen Li all did a great job bringing this content to fruition. Also we received critical support from Cate de Heer, Denise Green, Brian Rinaldi, my old friend Erick Vera, and my manager, Helen Whelan.

That’s all for now, but my team and I will be updating this site regularly over the next few weeks, so stay tuned.

-Randy

Update – May 4, 2011: – Sorry. I forgot three important links:

• ZIP file containing all Flex 4.5 content (98Mb)
• Flex Documentation page (links to all Flex docs)
• Flash Builder Documentation page (contains links to all Flash Builder docs)