Archive for January, 2009

Flex/AIR Application Scope Tips

Posted in Adobe Flex, Flex/AIR with tags , , , , , , , on January 27, 2009 by devgirl

Since I’ve been developing in Flex, the one thing I’ve been trying to get a better handle on is how to go about accessing what I need and when. After digging in to the Flex SDK a bit, I have come to some conclusions on different properties and objects that can be used in different scenarios. The following summary is what I came up with and would like to share with others that may find it useful.

mx.core.Application.application

The highest level root application object for a Flex application. This can be used to access the root application object regardless of where you are within a component or sub-application. It can be referenced via the fully qualified name, or in cases where you will use it multiple times, import mx.core.Application and use Application.application to reference the root app variables or methods. For instance:

<mx:Script>
<![CDATA[
     import mx.core.Application;
]]>
</mx:Script>
<mx:Button  label="Say Hello" click="Application.application.sayHello();"/>

where sayHello() is defined in your root application code… this property is especially useful for your projects where you have custom components or classes that need to access a shared set of data that is defined in the root.

NativeApplication.nativeApplication

A property you access within your AIR app that retrieves properties specific to that AIR application. For instance, it can be used to get at properties such as the application descriptor, the publisher of the AIR app, main application icon or menu. You would also use this Singleton object to add event listeners for actions specific to the AIR app, such as the app exiting (NativeApplication.nativeApplication.addEventListener(Event.EXITING, onExiting);).

outerDocument

The outerDocument property is used to access functions and properties defined in your main MXML file when the scope within your code block might have changed, such as when using the <mx:Component> tag . The Component object causes the MXML within it to be treated with a new document scope, so while it may seem you can access your functions defined in your main MXML file normally, you will not be able to unless you prefix it with the word outerDocument such as in the following code excerpt. Without this keyword, you will receive a compiler error stating ‘Call to a possibly undefined method <methodName>’

<mx:Script>
        <![CDATA[
            [Bindable]
	    private var nickname:String;
            private var photoId:String;
            private var photoKey:String;

            [Bindable]
	    private var photosColl:ArrayCollection;
            public function createUrl(photoId:String, photoKey:String):String
            {
                // Create the URL based on the photo info to the thumbnail
                var url:String = "http://"+nickname+".smugmug.com/photos/"+photoId+"_"+photoKey+"-Th.jpg";
                return url;
            }
       ]]>
</mx:Script>
<mx:DataGrid id="dgData" dataProvider="{photosColl}" width="100%" height="100%" doubleClickEnabled="true" alternatingItemColors="[0xFFFFFF,0xEEEEEE]" doubleClick="navigateToURL(new URLRequest('http://smugmug.com'))" variableRowHeight="true" color="#000000">
     <mx:columns>
        <mx:DataGridColumn headerText="Image" width="80">
           <mx:itemRenderer>
             <mx:Component>
                  <mx:Image source="{outerDocument.createUrl(data.server,data.id,data.secret)}" horizontalAlign="center" verticalAlign="middle"/>
             </mx:Component>
           </mx:itemRenderer>
        </mx:DataGridColumn>
       <mx:DataGridColumn dataField="title" headerText="Title" width="300"/>
     </mx:columns>
</mx:DataGrid>

parentApplication

This property can be used to access the application object containing the enclosed object. This could be the top-level application object, but in the case where an application loaded another via the SWFLoader, it will be the currently enclosing application object. An application’s parentApplication will either be the application object that loaded it, or null if it is the top-level app.

parentDocument

The parent document object for the given Flex application, MXML component or AS component, and only valued when isDocument() is true. The top-level application will have a parentDocument of null.

parent

Parent is used specifically for UIComponent classes or those extending from them to indicate the parent container or component for this UIComponent. The parent object type is always a DisplayObjectContainer.

WindowedApplication

This is the core class of an AIR app, and the object you are using when specifying ‘this’ in your AIR app. It implements IWindow as well as extending the Application class, so it serves two purposes, essentially wrapping the initial NativeWindow AND the NativeApplication objects. One big thing to note here, is that only events from the inherent NativeWindow are dispatched from the root WindowedApplication object, which differs from a browser application which dispatches events for ALL windows associated with that root Application. This is an important distinction to be wary of when developing multi-windowed applications.