Archive for May, 2011

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>

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

Flash Builder 4.5 and Flex 4.5 documentation is live!

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: