Posts in Category "Flex"

Creating Flex SDK from AIR SDK

It’s easy to make a Flex SDK from an AIR SDK for which you don’t have a corresponding Flex SDK. This is what you do:

1. Download AIR SDK.
2. Locate the existing Flex SDK.
For a default installation, it’s available in the C:\Program Files\Adobe\Adobe Flash Builder Version\sdks folder.
3. In this location, extract AIR SDK to a new folder .
4. Copy the contents of your existing Flex SDK and paste it to the folder where you have AIR SDK, WITHOUT over writing any of the files.
Flex SDK is ready. When you create a new project, use this as the SDK.

AIR-Mobile Tip #1 Passing key-value pairs between views

This blog will start featuring tips and tricks for AIR-based application development on mobile devices. The tips are primarily for AIR and ActionScript developers who want to learn some tricks for quickly and effectively building applications for the mobile devices.

Tip: You can easily pass a key-value pair from one view to another view.

Here is a simple example:

MyView 1

<?xml version="1.0" encoding="utf-8"?>
    <s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark" title="Home">

        <fx:Script>

          <![CDATA[
          protected function button1_clickHandler(event:MouseEvent):void
          {
              navigator.pushView(views.MyView2,{userKey:"someValue"});
          }
          ]]>

        </fx:Script>
      <s:Button x="178" y="196" label="Button" click="button1_clickHandler(event)"/>
   </s:View>

In MyView1, we are passing a key-vale pair to MyView2 using the navigator.pushView method.

MyView 2

<?xml version="1.0" encoding="utf-8"?>
    <s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark" title="MyView" 
       viewActivate="view1_viewActivateHandler(event)" >

       <fx:Script>
          <![CDATA[
            import mx.events.FlexEvent;

            private var userValue:String;

            protected function view1_viewActivateHandler(event:FlexEvent):void
            {
                userValue = data.userKey;
                trace(userValue);
            }
          ]]>
      </fx:Script>
   </s:View>

In MyView2, we are receiving the key-value pair when the view gets activated.

Why would you need to pass key-value pairs between views? You can use this technique:

  • when you want to pass form values from one view to another.
  • when you want to pass user preferences.
  • when you want to route the view based on a key.
  • when you want to change the behavior of the view based on some keys. For instance, in a game, a view can read from the application storage directory and load the saved game or just start with a new game based on the values passed.

Apart from a key-value pair, you can also pass any untyped object from one view to another.

Accessing the StageWebView object

Recently, for one of my articles on StageWebView, a reader has commented that he gets an error while calling a stage object through a preperationComplete event. I must say that while preparing the article, I never thought about that kind of a scenario. This blog entry is to explain how to sort this issue out.
This was the example that I provided:

==
<?xml version="1.0" encoding="utf-8"?> 
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"  
        xmlns:s="library://ns.adobe.com/flex/spark"  
        xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:local="*" creationComplete="init()"> 
 <fx:Declarations> 
  <!-- Place non-visual elements (e.g., services, value objects) here --> 
 </fx:Declarations> 
<fx:Script>
 <![CDATA[
  import flash.geom.Rectangle; 
  import flash.media.StageWebView; 
  import flash.net.*; 
  import flash.net.URLRequest; 
  public var webView:StageWebView = new StageWebView(); 
  public function init():void 
  { 
   webView.stage = this.stage;
   webView.viewPort = new Rectangle( 0, 0, stage.stageWidth, stage.stageHeight );
   webView.loadURL("http://www.bbc.com");
  }  
 ]]>
</fx:Script>  

</s:WindowedApplication>

===
Compiling the code generates the following error: “Cannot access a property or method of a null object reference.” When a creationComplete event fires, the stage is still null. It is not initialized yet. The stage property acquires a value only after the display object has been added to the stage’s display list. Here, we don’t have any display object added to the stage. If you are accessing the function through another component, say a button, you don’t find this issue.

One solution is to wait for the addedToStage event. This event gets fired whenever the stage is initialized and obtains a value. The issue I explained above has nothing to do with the StageWebView api. See the code below. Using the creationComplete event, I called in the init() function which listens for the addedToStage event. After it’s fired, the target function accesses the stage object.

The following code works without any issues:

==
<?xml version="1.0" encoding="utf-8"?> 
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"  
        xmlns:s="library://ns.adobe.com/flex/spark"  
        xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:local="*" creationComplete="init()"> 
 <fx:Declarations> 
  <!-- Place non-visual elements (e.g., services, value objects) here --> 
 </fx:Declarations> 
<fx:Script>
 <![CDATA[
  import flash.geom.Rectangle; 
  import flash.media.StageWebView; 
  import flash.net.*; 
  import flash.net.URLRequest; 
  public var webView:StageWebView = new StageWebView(); 
  public function init():void 
  { 
   this.addEventListener(Event.ADDED_TO_STAGE , handleLoad );
  } 
  public function handleLoad(e:Event):void
  {
   webView.stage = this.stage;
   webView.viewPort = new Rectangle( 0, 0, stage.stageWidth, stage.stageHeight );
   webView.loadURL("http://www.bbc.com");        
  }
 ]]>
</fx:Script>  

</s:WindowedApplication>
==

If you have got ideas for RIA-related technologies

… we, at Adobe, are listening!

Ideas Home is a portal run by Adobe Labs. You can suggest ideas around existing Adobe technologies or new technologies. Besides other Adobe technologies you can submit ideas for AIR, Flash Builder, Flash Catalyst, Flash Professional, and Flex SDK. All you need is a free login on Adobe.com. This is another great way to interact with the community including the Adobe team, power-users, and innovators.

You can we well,

  • view submitted ideas.
  • search to see if an idea is already submitted or not.
  • promote (or demote) submitted ideas.
  • engage in a discussion on a particular idea.
  • review only the most popular of the ideas, based on votes by other users.
  • access ideas falling in a particular category, via the tag cloud.

Needless to say any and all ideas are welcome.

So just signup/signin at Adobe.com and play a role in defining the future! Please note that the portal is not for collecting bugs in existing products/technologies.