Removing the theme color from the Flex TileList

There have been a number of occasions when the designs for a UI implements some kind of grid layout to display its items. This is fairly simple to implement in flex by utilising the Flex TileList component. However more often than not the List's item renderers are required to look after their own states. In this case the TileLists Indicators are no longer required.

I have found the easiest way to remove the TileLists indicators is to set the ThemeColor to the background color of whatever the List is being displayed on. But what happens if the background contains an image or has a transparency value?

To do this you need to override the TileLists drawSelectionIndicator and drawHighlightIndicator methods.

override protected function drawSelectionIndicator(
indicator:Sprite, x:Number, y:Number,
width:Number, height:Number, color:uint,
itemRenderer:IListItemRenderer):void
{
/* we don't need to do anything in here*/
}
override protected function drawHighlightIndicator(
indicator:Sprite, x:Number, y:Number,
width:Number, height:Number, color:uint,
itemRenderer:IListItemRenderer):void
{
/* we don't need to do anything in here*/
}

Notice that the body to the above methods are empty. This is because we don't want the indicators to draw anything behind the renderers when the state changes.

Now just don't forget to cater for this inside your TileList's item renderer else the user will get confused as to which item is selected and which item their mouse is over. We wouldn't want that would we :)

Transfer ORM and Flex

Recently I've been working on a project to deliver something that was more proof of concept which in a business sense building something in a relatively short time frame.

I decided to develop the front end with Flex 3 and the back end with ColdFusion 8 using the flex remoting classes to connect the two together. Having chatted recently to a couple of fellow developers there was a consensus among them that documentation for connecting both ColdFusion and Flex was underdone and that it could possibly be the Achilles heel in using CF as the server side technology.

I myself haven't found any issues in connecting the two together. Sure there are a couple of files that need to be configured everything hangs together harmoniously. Compared to other technologies like webOrb and amfPHP it's relatively painless.

Transfer
Due to the nature of the beast I needed something that would look after my CRUD methods on the server side. I didn't want to have to spend time hand writing this code and having seen a couple of presentations on Transfer it made sense to use this as my ORM. For those of you that don't know about Transfer it's an ORM for Coldfusion. It allows you to create your object relational mappings of your database allowing you to perform simple to complex database transactions. More information on Transfer can be found here. I then used Transfer to plug into a lightweight CF framework that I had custom built some time ago that I normally use for Flash and Flex development using the facade pattern to expose the required services.

Other Code Generating Tools
I also use the Illudium PU-36 Code generator developed by Brian Rinaldi to help create the ORM mappings and services and gateways for the required objects. You can download and read more about this code generator here on the RIAforge website.

These two great tools allow me to create the server model fairly quickly allowing to spend more time planning and creating the UI.

Setting up Transfer to work with Flex
You first need to setup your objects on the client and server. If you are using Cairngorm on the client these would be your Value Objects. On the server these would be your Objects that your Transfer objects would be extending.

I'll be using the blog application that ships with Transfer as the examples. Hopefully I'll be able to post the running application once I've completed it.

In your flex value object.

package com.riality.tblog.vo
{
   import com.adobe.cairngorm.vo.IValueObject;

   [RemoteClass(alias="tblog.com.PostVO")]

   [Bindable]
   public class PostVO implements IValueObject
   {

      public var IDPost:String = "";
      public var Title:String = "";
      public var Body:String = "";

      public function PostVO()
      {
      }

   }
}

The important part here is your RemoteClass metatag. This must correlate to the Value object in your CF framework. This is done by extending your transfer object inside your Transfer.xml to an Object that can bind to your flex value object.

Example inside your Transfer.xml

<package name="post">
      <!-- A Blog Post -->
      <object name="Post" table="tbl_Post" decorator="tblog.com.PostVO">
         <id name="IDPost" type="numeric"/>
         <property name="Title" type="string" column="post_Title"/>
         <property name="Body" type="string" column="post_Body"/>
         

... etc

Note inside your Transfer Post Object extends your custom defined Post object. This in turn extends the "transfer.com.TransferDecorator" which allows you object to bind to Flex with all the necessary getters and setters for the declared properties.

Example of the custom defined Post Object

<cfcomponent name="PostVO" extends="transfer.com.TransferDecorator">
   
<!--- Declare your properties -->
   <cfproperty name="IDPost" type="string">
   <cfproperty name="Title" type="string">
   <cfproperty name="Body" type="string">
   
</cfcomponent>

If you weren't using Flex as your view you wouldn't need to declare your properties here as Transfer creates the required getters and setters. However Flex needs these properties declared to map your bindable Flex class.

Now to connect the two together you just need to setup your facade to allow flex to get to your necessary services.

Example in your facade.cfc

<cffunction name="getPost" access="remote" returntype="any">
      <cfargument name="IDPost" type="string" required="true" />
      <cfset service = application.getPostService() />
      
      <cfset result = service.getpost(id=arguments.IDPost)>
      
      <cfreturn result/>
   </cffunction>

The above gets the instance of you Post service and calls the method getpost which is basically a wrapper for your transfer call.

Example inside your postservice.cfc

<cffunction name="getPost" access="public" output="false" returntype="any">
      <cfargument name="IDPost" type="string" required="true" />

      <cfreturn variables.transfer.get("post.Post",arguments.IDPost) />
   </cffunction>

Once you've set that all up all you need to do now is dispatch your Cairngorm event to allow your delegate to connect to your facade. Which I won't go into detail inside this post, as it's the bread and butter in working with Cairngorm.

This is a quick overview of setting up the required infrastructure to get Transfer working with Flex. Hopefully it gives some insight into connecting Flex, Coldfusion and Transfer together.

Downloads

Possible new musical project of mine

I've got a couple of projects on the back burner while a finish off the existing ones. But my latest idea has stemmed from the musical side. I've always been a fan of music and playing a bit of guitar has been a passion of mine. I've tried my hand at writing music but have always done this in a more conventional manner. Paper, Pen, piece of scrap paper lying around the house.

However this time around I'm going to write a song, but this time in pure Actionscript. It will be a classy song of course however listeners won't be able to hear it until they've registered and the song is completely compiled.

Seriously though it would be an interesting project to start, having some sort of sound library with different progressions and scales and keys. Each of these being executed along from the time line similar to sheet music or guitar tablature. Would also need a audio dictionary for the lyrics. Might end up sounding a bit like Fitter Happier by Radiohead.

Anyway this idea needs more storming.

Manage my bundle

Traditionally used for managing locale settings especially languages the ResourceManager in Flex 3 can also be used for loading in other environment variables.

On my development machine I'm loading in service URL'S, dummy sessions and a few other things. One other option would be to hard code test data into a static class but because these values are used for more than one application it allows me to change this values in a single location.

You first need to declare your source path to your resources. The file that you wish to read using the Resource Manager needs to be a .properties file. This is just a standard text file with the name of your resource bundle suffixed with a .properties.

The structure of this file is the property and then the assigned value. Comments can be incorporated by implementing the hash symbol.

#this is the riality resource bundle
uploadURL = http://localhost/testApp/upload.cfm
companyID = 1212

Store this file in a local directory. For this test application I have mine structured like so. I have this example setup in my Flex 3 SDK directory. Notice that the I've used the "en_US" named folder, this is the default locale for the flex compiler, but allows us to add other locales if need be by simply adding creating another locale named folder and providing the same .properties files.

Now you'll need to set your source patch for the resource bundle. To do this right click on your flex project. Click on the Flex Build Path from the left hand menu. Click the Source Path menu Button. Here you have the option to add a source path folder.

Click the Add Folder button and browse to your resource bundle directory and click ok. However where replace the "en_US" with the special characters {locale}. This is set by the flex compiler additional arguments. You can see this when you click on the Flex Compiler in the left hand menu.

After that you're right as rain to start accessing your bundle in your Flex 3 Application.

[ResourceBundle("riality")]
private var companyID : String = ResourceManager.getInstance().getString("riality","companyID");

Bundles have never been easier to manage. You could say it makes it a real bundle of joy to manage.

Dispatching Events with Cairngorm 2.2.1

While trawling through the CairngormEvent.as I noticed the distpatch() method which in essence calls the same code that was needed in the previous versions of Cairngorm.

Pre Cairngorm 2.2 example

var userVO : UserVO = ModelLocator.getInstance().userVO;
var event : LoginChangeEvent = new LoginChangeEvent(LoginChangeEvent.LOGOUT_EVENT,userVO);
            
/* dispatch the event */
CairngormEventDispatcher.getInstance().dispatchEvent( event );

Latest example

var userVO : UserVO = ModelLocator.getInstance().userVO;
var event : LoginChangeEvent = new LoginChangeEvent(LoginChangeEvent.LOGOUT_EVENT,userVO);
            
/* dispatch the event */
event.dispatch();

It just saves having to import the CairngormEventDispatcher and typing those extra characters. Which can save a lot of time if you're a chicken pecker typist :)

Psudo-Streaming with the flash player

Well today I was doing a bit of R & D into video Pseudo-Streaming. The term Pseudo meaning Fake or having an appearance of. Which is what it exactly is when applied to video streaming. In a roundabout way it allows the user to play the video anywhere on the timeline before the video has been fully downloaded.

I came across this great article here over on flash guru with a fully functional demo using a php backend. I've also seen an example using a Coldfusion service to handle the stream. Basically it's a wrapper for some neat little java byte and filestream manipulation. Steve Savage's post can be found here

This works a treat however we did stumble across and issue when trying to play a handful of converted .flv files. For some reason these files would not Pseudo-Stream. At first I thought it may have been a code issue but then had a look inside the .as code at the metadata listener.

ns['onMetaData'] = function (obj)
{
duration = (duration != undefined) ? duration : obj.duration;
times = obj.keyframes.times;
positions = obj.keyframes.filepositions;
};

the times variables was being set to null and using the FLV Meta Data viewer on the trouble makers I was able to confirm that these files did not have any keyframes.

Not exactly sure why these files didn't contain any keyframes. I know that you can set keyframes from the CS3 Video conversion utility so it was possbible their conversion software that wasn't creating the keyframes.

Actionscript reference for RIA Development

A friend of mine just recently notified me of this great reference doc. Adobe has released a poster style document for all their RIA platforms, Flex, Flash Player 9 and AIR.

It's comprehensive and is easy to read, you can download it here

I love these things and remember getting one when I first started learning Coldfusion. Turned out to be quite an invaluable resource, learnt more off that chart than I learned at University. And for that I thank you oh knowledgeable chart.

BlogCFC was created by Raymond Camden. This blog is running version 5.9.002. Contact Blog Owner