Archives for October 2009

Loop increment myth busted

I was watching Lee Brimlow's screencast on using the AS3 Test Harness and he mentioned you can optimize a for var i loop by changing the incrementor from i++ to ++i (it's around the 10:00 minute mark). That was the second or third time I had heard that recently. Deep down it just didn't sound right but seeing is believing so I decided to use Grant's AS3 test harness and see for myself.

You can run the test with any interation value between 1,000 and 100,000.

 

Testing for (var i:int=0;i&ltxi++) vs for (var i:int=0;i<x;++i) loop performance.

 

These are the two loops that are being tested, nothing special.

 private function testLoop1():void 
{
var v:Number = 0;
var len:int = int(ns.value);
for (var i:int=0;i++)
{
v += Math.random();
}
}

private function testLoop2():void
{
var v:Number = 0;
var len:int = int(ns.value);
for (var i:int=0;++i)
{
v += Math.random();
}
}

As you can see from the results the difference is neglible at best when running loops with iterations upto 100,000. The variance between the two methods is very minor, fractions of a second, and seems to flucate in favour between the two options. Sometimes i++ is faster, sometimes ++i. Maybe as the iteration size increases the variance would increase in favour of the ++i however, the flash player starts to chug on loops with thousands of iterations where very much work is done so is there really any advantage to be gained, questionable.

Flex two-way data binding head slap

Everyone once in a while you come across something that makes such perfectly good sense you slap your head and say "why didn't I think of that" (or maybe you slam your head off your desk). I just had one of those moments yesterday while reading through some sample source code.

The Flex [Bindable] tag is something I use all the time. Building data and form heavy apps makes the whole concept of data binding one of my favourite features in the the Flex framework, however, I have always had one beef with databinding. Two-way databinding was a pain to setup and looked plain ugly. You had to either use the BindingUtils or the mx:Binding tag or have listeners setup for value changes, argg. A simple example will drive home the point.

This is the model (value object) that I want to bind to a form:

 [Bindable]
public class LocationVO {
public var id:String = "0";
public var name:String = "";
public var address1:String = "";
public var address2:String ="";
public var city:String = "";
public var state:String = "";
public var zip:String = "";
public var phone:String = "";

public function LocationVO() {
}
}

Nothing special, the whole class is marked bindable so any public property can be bound to.

Next you have the view. Somewhere in the mx:Script tag you would declare a variable,in this instance called 'location' and you would mark it bindable with the [Bindable] tag. Below is the form that the object is bound to, so far nothing out of the ordinary.

<mx:Script>
<![CDATA[

import com.dgrigg.model.LocationVO;

[Bindable]
protected var location:LocationVO;

]]>
</mx:Script>
<mx:Form>
<mx:FormItem label="Name:">
<mx:TextInput id="nameTxt" text="{location.name}"/>
</mx:FormItem>

<mx:FormItem label="Address:">
<mx:TextInput id="address1Txt" text="{location.address1}"/>
</mx:FormItem>

<mx:FormItem>
<mx:TextInput id="address2Txt" text="{location.address2}"/>
</mx:FormItem>

<mx:FormItem label="City:">
<mx:TextInput id="cityTxt" text="{location.city}"/>
</mx:FormItem>

<mx:FormItem label="State:" >
<mx:ComboBox id="stateCmb"
prompt="Select state"
dataProvider="{Constants.STATES.state}" labelField="@label"/>
</mx:FormItem>

<mx:FormItem label="Zipcode:">
<mx:TextInput id="zipTxt" text="{location.zip}"/>
</mx:FormItem>

<mx:FormItem label="Phone:">
<mx:TextInput id="phoneTxt" text="{location.phone}"/>
</mx:FormItem>
</mx:Form>

 Where it gets a little ugly is in getting the changes to the text fields back into the bound object. Generally you need to do something like this in the view, not awful but not very clean.

<mx:Binding source="nameTxt.text" destination="location.name" />
<mx:Binding source="address1Txt.text" destination="location.address1"/>
<mx:Binding source="address2Txt.text" destination="location.address2"/>
<mx:Binding source="cityTxt.text" destination="location.city"/>
<mx:Binding source="zipTxt.text" destination="location.zip"/>
<mx:Binding source="phoneTxt.text" destination="location.phone"/>

Personally I have always hated that big block of mx:Binding tags. So now you are asking what caused the great head slap. Here it is.

It never dawned on me to create an instance of the object using mxml tags. Much like creating an instance of an xml object using the mx:XML tag you can create an instance of any value object using tags, you just need to declare the namespace in the component header. After that you can do this:

<model:LocationVO id="location"
name="{nameTxt.text}"
address1="{address1Txt.text}"
address2="{address2Txt.text}"
city="{cityTxt.text}"
zip="{zipTxt.text}"
state="{stateCmb.selectedItem.@data}"
phone="{phoneTxt.text}"/>

What this accomplishes is a few things. First, I don't need to declare and create an instance of the value object in the mx:Script tag block. Second, I don't need to remember to mark it as bindable. And third, I don't need to use all those mx:Binding tags. Now I just need the snippet above and my form with the corresponding {} bindings in each form item.

Flex 4 changes all this with proper two-way data binding which will be really nice. Unfortunately Flex 4 isn't quite ready for showtime yet, so in the interm this is a great step to get clean quasi two-way data binding.

Jumping into Flex 4

I've been waiting to jump back into Flex 4 again. I tried the pre public beta many months ago but it was a little too buggy and I didn't have enough time to really dig into it. Now it's in public beta (should be more stable) and I'm making some time to experiment with it and try to learn the new features.

First step after getting the beta installed is reading up on all the great new features and figuring out which ones to tackle first. Thought I would share some useful links that I have gathered/stumbled across.


As I come across more links and articles I'll be sure to update this list.

Happy reading.

Url Decoder and Encoder app

As I have said before necessity is the mother of all invention. In this case I needed to be able to quickly decode long url strings. I tried a few of the browser based tools but you still end up looking at a long url string, it just looks a little nicer with all the html encoding removed. What I really needed was a list of all the name/value pairs.

Cue mother of invention and Adobe AIR. I whipped up a simple little app that takes a url query string and decodes it into a nice list of names and values, much easier to read. You can either paste a query string into the text area or drag and drop one from the browser or anywhere else.

So now something like this

http://maps.google.com/maps?f=d&source=s_d&saddr=10000+Yonge+St,+Richmond+Hill,+York+Regional+Municipality,+Ontario,+Canada&daddr=1+Yonge+Street+Toronto+Ontario&hl=en&geocode=FSBsnQIdR-JD-w%3B&mra=ls&dirflg=ht&sll=43.762168,-79.381027&sspn=0.367466,0.574036&ie=UTF8&ll=43.756713,-79.405746&spn=0.367499,0.574036&z=11

Becomes a little more readable

URL Decoder app

You can download the AIR app here, enjoy.

Getting started with Flex

Invariably I get asked for resources on helping developers new to Flex. I dig through old emails, bookmarks, scribbled notes and my boggled memory trying to pull together a decent list. You think that I would have done this a long time ago, but I didn't, so here it is.

Resources for getting started in Flex development:

Flex/AS3 Language reference
http://livedocs.adobe.com/flex/3/langref/index.html

AS3 Language reference
http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/

Programming in AS3
http://livedocs.adobe.com/flash/9.0/main/wwhelp/wwhimpl/js/html/wwhelp.htm

AS Coding conventions
http://opensource.adobe.com/wiki/display/flexsdk/Coding+Conventions

Flex developer center - Getting started
http://www.adobe.com/devnet/flex/?view=gettingstarted

Getting Started with Flex 3 docs
http://www.adobe.com/devnet/flex/pdfs/getting_started_with_Flex3.pdf

Getting Started with Flex Video Training
http://www.adobe.com/devnet/flex/videotraining/

Creating Flex Components
http://livedocs.adobe.com/flex/3/html/help.html?content=ascomponents_advanced_2.html#204808

Understanding the Flex component Lifecycle
http://www.dgrigg.com/downloads/understanding_the_flex_3_lifecycle_v1.0.pdf

Flex Best Practices
http://www.dgrigg.com/downloads/BestPractices_Coding_v1.pdf

AS3 Core lib (various encodes, encryption and util classes)
http://code.google.com/p/as3corelib/

 

If you have any other links that would be worthwhile to add please do so in the comments.

Tekken 6 Facebook app gets launched

Yes, it's been a few months since I have blogged about anything, but not without good reason. I've been swamped with projects lately, and one of them I can finally post about. For all you Tekken fans, I'm sure you know that Tekken 6 will soon be released. To help promote the upcoming release, Namco contracted me to develop a Facebook application for them.

Click here to join the Tekken 6 Separated at Birth Challenge. Basically it's a look a like/popularity contest. You pick the Tekken character you most look like and then challenge other users. Whoever gets the most votes can win some great Tekken prizes.

 

Yes, that's my ugly mug, however I don't generally have the scowl.

Big thanks to Chris for doing a great job on the designs, always good to work with someone who gets it.