Passing custom objects between Flex and CF from children classes

In one of my previous post about "Passing custom objects between Flex and CF" my example was using some value object (vo) classes not inheriting from a parent class. It would still work fine with vo classes inheriting from a parent class but you have to add the <cfproperties />tags of the parent class, otherwise the properties of the parent class would not be passed between CF and Flex.

You still can use the CF wizard of Flex builder to create your CFC from an AS class but it won't detect that your AS class inherits from another class, so once your cfc is generated add the extends attribute in the cfcomponent tag, the opening tag should look like:

<cfcomponent output="false" alias="vo.Child" extends="vo.Parent">

and again, don't forget to copy all the cfproperty tags from the cfc parent class to your child class.

Et Voila !
PS: I know I could have put some more detailed examples but I'm in the middle of a project.

Thank you Adobe and hello Mac

I am honored that mooFlair is #4 on the list of the "Top 10 Adobe Flex and AIR applications for students". I thought this could only happen in my secret dreams. A big thank to Areez Gangji and Adobe to show my work in such a positive way. There are still some bugs and enhancement to be made in my application. A few tests on one of my friend's Mac showed me some discrepancies, so I decided it was time to buy a Mac in order to test and develop correctly for both platforms. Also after using my niece's IMac I found out what the "think different" was about and it opened my eyes on this inspiring piece of technology. I went for the latest MacBook Pro, and I must say... I love it.

Passing custom objects between Flex and CF

When building Flex apps, it's a common practice to use VOs, and therefore the possibility to send those data to web services as object without having to do any conversion, is an obvious need. Not only to work faster and more efficiently but also to help producing a much cleaner and maintainable code. In case you didn't know, you can do that with Coldfusion, it's seamless.

I'm going to describe how to use this feature in Coldfusion, assuming that you have already used Flex remoting with Coldfusion. Basically, there are no difference in the way you are building your Flex/CF application. There are just a few things to set up in your VO class and CFC bean.

- In your actionscript class, add the RemoteClass metatag and set the alias value to the location of the corresponding CFC bean from the webroot. Remove the cfc extension and replace the "/" with dots ".".
For example if my CFC url is http://localhost/somePath/SomeVO.cfc, the value for the alias parameter is "somePath.SomeVO"

package com.tai.vo.SomeVO
{
   import flash.utils.ByteArray;

   [RemoteClass(alias="somePath.SomeVO")]

   [Bindable]
   public class SomeVO
   {

      public var id:int;
      public var title:String;
      public var thumbData:ByteArray;
      ... // more properties here

   }
}

- in you Coldfusion cfc, add the "alias" attribute in the cfcomponent tag matching the alias name of the actionscript class, here "somePath.SomeVO":

<cfcomponent output="false" alias="somePath.SomeVO" hint="I'm a bean">
<!---
These property definitions are used when calling this CFC as a web services
NOTE: these cfproperty tags do not set any default property values.
--->
<cfproperty name="id" type="numeric" default="0">
<cfproperty name="title" type="string" default="">
<cfproperty name="id" type="numeric" default="0">
<cfproperty name="thumbData" type="binary" default="">
... <!--- more properties here --->

<cfscript>
//Initialize the CFC with the default properties values.
this.id = 0;
this.title = "";
this.thumbData = "";
//more properties here
...
</cfscript>



</cfcomponent>

- Finally in the remote method of the CFC, set the data type of the argument accordingly. In our example "somePath.SomeVO"

<cfcomponent output="false" hint="I'm the webservice" >
<cffunction name="receiveSomeVO" access="remote" returntype="any">
<cfargument name="obj" type="somePath.SomeVO">
....<!--- logic goes here --->
</cffunction>
</cfcomponent>

If you want to return an instance of a custom class to Flex, just set the return type of the cfc method. e.g. if you want to return a instance of SomeVO set the return type to "somePath.SomeVO".

Now even better, you can create you cfc bean object by using the CF wizard in Flex Builder:
- Just right click on the .as VO class and select "generate cfc (base on as class)" under the coldfusion wizards.
- You will be asked to select a location where to save the cfc.
- In the property scope, set the properties as public.
- Click finish
- Open the generated CFC and verify that the value of the "alias" attribute of in the cfcomponent tag matches is correct.

Recapitulation:
- In your actionscript VO class, set the RemoteClass metadata tag,
- create a corresponding cfc bean object manually or by using the coldfusion wizard provided in Flex Builder, and check the "alias" attribute value in cfcomponent.
- In your webservice component set cfargument datatype and eventually the returned data type in the method consumed by your Flex Application.

I have a very simple working example on my computer, if you are interested to download it, just put a request in the comments and I'll make it available somewhere.

Know how long you've been away with AIR.

I have coded a little AIR app that displays the time while you are at your computer doing something and the time you are away from it. This is made possible by using the nativeApplication.timeSinceLastUserInput property which gives the time since the user as made her/his last input with the mouse or the keyboard. It took less than 50 lines of code - including the mxml.

This is the main action script code:

[Bindable] public var activeTime:int = 0;
[Bindable] public var passiveTime:int = 0;
public var inactiveTime:uint = 15; // passive mode is triggered after this duration

public var timer:Timer = new Timer(1000,0);

public function init():void{
timer.addEventListener(TimerEvent.TIMER,timerHandler);
timer.start();
nativeWindow.width = 130;
nativeWindow.height = 78;
}

public function timerHandler(event:TimerEvent):void{
nativeApplication.timeSinceLastUserInput < inactiveTime ? activeTime++ : passiveTime++;
}

public function dragWin(event:MouseEvent):void{
this.nativeWindow.startMove();
}

I have considered that no action from the user after 15 secs means that she/he is away from the computer (variable inactiveTime).

You can see it in action by downloading it here.
After you have installed and run the application, you can right click on it and access all the source code. It could be easily extended to a time tracking tool to check how long you have been working on a project by using SQLite (may be my next personal project), or to ensure that your employees are not sleeping in front of their computers (clearly not my next project).

Full screen mode, security-related restrictions removed in AIR

There are several points that are good to know if you plan to use fullscreen mode in your flash based application embedded in an HTML page. There is a very good article by Tracy Stampfli on Adobe's website that covers this topic.

The same security restrictions as the ones described in this article will apply if you are embedding your swf in the flex HTML control.

However, in AIR applications based on Flex or Flash, it's a different story and some of the restrictions have been removed.

The first one, obviously, is the allowFullScreen tag parameter that needs to be set to true, since you are not anymore in the web browser context, you don't need to worry about it.

The second is the overlay dialog box that appears when the movie enters fullscreen mode, instructing the user how to exit and return to normal mode. In your AIR app, you are now responsible to inform (or not) the user how this is possible.

The third and most interesting one. The actionScript that initiates full-screen mode does not need to be called only in response to a mouse click or keypress, it can be triggered from any other event. To give you an idea, you can now set the full screen mode at the end of an animation or on a timer event.

Unfortunately, while in full screen mode, the keyboard is still restricted to the shortcuts to exit this mode so you still cannot play a game that needs keyboard inputs or simply enter text in a input text box. I wonder why this hasn't been removed... if anyone has an idea on this.

Update:
Less than 30 mins after my post, "anonymous" posted a comment with a link to the doc where it says you can use the FULL_SCREEN_INTERACTIVE constant instead of FULL_SCREEN to enable interactivity in full screen - only for AIR. There you go, another full screen security restriction bypassed by AIR. Thank you "anonymous" !

And if you are still asking yourself why using full screen mode:
Flash player scales with hardware acceleration and displays content more quickly than software scaling. For HD video content it's a valid argument to implement this feature. Full screen mode saves 10% of my CPU resource on a H.264 encoded video, it doesn't sound much on my computer (1.8 gh dual core), but on a lower end computer I bet this would be certainly much more.

AIR update and certificate

Once you have created your certificate and used it to for the release build, keep it in a safe place because it is unique, even if you have created it yourself you won't be able to replicate the same one, it is unique. This certificate is part of the signature used by the installer to check if it is the same application being updated. If you use a different certificate, the installer will ask you where you want to install the application as if it was a new application. The id string of the app.xml won't change a thing. Choosing the same installation path will result with the following message:
"The application could not be installed because an application with that name already exists at the selected installation location. Try installing to a different location. ".
If the user choose a different directory then the application will be installed twice - this is what I get on windows vista.
Real certificates can only be delivered for companies and not for individuals, but at one of the onAIR tour sessions, I have heard that things might change.
Morality: Every user will have to uninstall manually the previous version of your AIR app in order to install the new version if you are using a different certificate.

mooFlair finally updated

A lot of new features have been added to the original version of mooFlair: new player, importation of local files to the library, playlists, new RSS feeds and more categories and search is available for most of the feeds (5 out of 7). I'm sorry for those who have waited so long to have a version of mooFlair compatible with the public AIR v1.

You can install it from here

For the automatic update feature I have used an updater that saves you the different tasks to create, deploy and parse an XML file. This updater reads directly in the xml application config file of the .air file to retrieve the version string. There is all you need there and some code that shows you how to use it within your AS3 AIR app.

I have also used an AS 3 UUID class to generate unique string that you can find there.

And of course the "unavoidable" AS3coreLib

To help me working on SQLlite I have used sqlLite maestro
which provides probably anything you need to manage an SQLite database. It's not a free product but it definitely worths a try if you looking into a such a tool.

go to http://www.mooflair.com/download
and enjoy !