Quicktip: Searching an ArrayCollection fast and easy

Let's say your Flex project needs to maintain a large amount of data, like all the userdata from you big ass site. You can use several datastructures in Flex to store complex userdata, from XML to linked lists. However, perhaps the most useful and easiest structure is the Flex native ArrayCollection. This structure gives you a lot for free, for instance.. searching for stuff.

Let's say you have all of your users in "usersCollection" which is an ArrayCollection. A user object may contain things like "firstNamename","lastName", "email", "address" and so on. Now, what if you need to find a specific user like "John Rambo". Then you'll need to search both the first and last name fields. You could of course traverse the entire collection using a loop, checking every iteration. Hang on, there is a faster way using a cursor (it's kinda lika a struct pointer if you're a C person).

First you need to sort the collection
var mySort:Sort = new Sort();
mySort.fields = [new SortField('lastname')];
usersCollection.sort = mySort;
usersCollection.refresh();

Then we create the cursor, pointing to the first item in the collection at init.
var cursor:iViewCursor = usersCollection.createCursor;

Now, we need to search both first and last name, so we create a searchobject.
var sObj:Object = {firstname:"John",lastname:"Rambo"};

We are now ready to do the actual search by using the findAny method of the cursor.
if(cursor.findAny(sObj)){
//We found him
}else{
//John Rambo is lost again
}

In order to get to the user we found we utilize the current property of the cursor.
var foundUser:Object = cursor.current;

Do keep in mind that the cursor is now pointing to the user found, so if we want the next user in the list we can simply go "cursor.moveNext()"

Why should you use this method? It's more flexible, it's faster and uses less resources than the traditional iterative loop approach.

Adobe Flash becoming an "Ad tool" full time?

As reported by Ryan Stewart, Adobe is altering the name of the next version of Flex Builder(code name «Gumbo») to «Flash Builder». Seeing this in correlation with the new «Flash Catalyst», I can't help wonder where this leaves the Flash authoring tool.

Adobe Flash has for some time been struggling with a bad rep for being the tool "which is used for creating annoying banner ads". This view does hold water in many cases, adding insult to injury the fact that many Flash sites are poorly built and tend to leave users with a crashing web-browser. It seems like Adobe are segmenting out Flash as a cowboy tool, fronting Flash Catalyst and Flash Builder as the tools for creating "real" RIA applications and "robust" rich interactive web sites. On the other hand this may not be their intention at all, however I do believe it will be the result following this strategy.

I base this assumption on two things in large. One is the fact that the Flash authoring tool becomes more or less redundant with the introduction of Flash Catalyst, seeing it from a designer standpoint. As for developers, the Flash authoring tool has never been the first choice to put it in subtle terms. The second argument bases itself in the evolutionary direction in which rich internet applications are heading. Current trends shows that rich web-sites and RIA applications grow ever more complex, at the same time users are demanding a more friendly UI, conformity in the experience and short load times. Flex and Catalyst performs advanced tasks better..

Adobe Flash authoring is a tool for creating interactive animations, but has been used for everything else in the past years. I do not think the Flash authoring tool will die, but it's role will diminish, leaving Flash Catalyst as the main designer tool for rich content and Flash Builder as the developers choice.

Why and when to break out of the browser

"A web app can do what a computer from 15 years ago, without a disk can do" Daniel Jalkut
While Daniel Jalkut was sort of kidding when making this statement on "Core Intuition 17", he wasn't really kidding. The fact remains that desktop applications sport a lot more features, both UI, functionality and user friendly vise compared to Web 2.0 applications. But, when does it make sense to move something onto the desktop, and to what desktop?

With the advent of the real iPhone SDK and the AppStore, Apple managed to light a spark in the idea of creating applications once again. It's nothing new, this idea of creating applications instead of webpages, however the distribution model(AppStore) is "new". Suddenly everybody, designers, web-developers, marketing people.. the list goes on.. everybody is making iPhone applications. In most cases they are good apps, however in other cases there seem to be a lack of planning/thought ahead of launching xcode.

Why and when should you consider making your project into an application instead of a web-application? I always ask myself the following questions before making such a decision:
  • Does the application need to access local resources on the users computer?
  • Does the application need to exist outside the web-browser? Why?
  • Does the application rely on server storage completely?
  • Does the functionality ask for a custom UI?
  • What solution handles the users frustration level in the best way?
  • Does the IA need a page-based layout?
  • What's the degree of interaction required?
While contemplating these questions you would probably form an idea as to what is needed for your application to succeed. But, bear in mind that most of the questions above result in solutions that can and will run fine in a browser. Trough RIA tools like Flex and SproutCore, the most demanding UI demands can be met. But, if your application needs to do a lot of local file access, or it needs to exist outside a browser session... Imagine a chat client running only in the browser, it would be no good because you'd go offline when you closed the window.

My advice would be this: Think about it.. are you presenting information that constantly updates, like a news site, why in gods green acres would you do that in an application, it screams web page! Remember that users pick their applications(no matter the platform) with much greater consideration and care than they pick websites to read/use. An application on the computer desktop or on any device needs to satisfy a need or solve a problem, be it something practical or a just game. An application exists forever, because you don't own it like you own your webpage. A webpage can be revoked and it will for all intense and purposes be gone from this world. An application is downloaded and cannot be removed unless the user decides to delete it.
Don't try to emulate a desktop application in a webpage if the application actually needs to exist on the users computer. Try to see if you idea fits into the following boxes, in this order:
  1. Can I solve this using HTML/CSS?
  2. Can I solve this using HTML/CSS and JavaScript
  3. Should I solve this using SproutCore/Flex(or similar)?
  4. Can I solve this without platform specific APIs?
Here is what I would do:
  1. Create a webpage
  2. Create an advanced webpage
  3. Create a RIA application running in the browser
  4. Create a RIA/RAD application running in a cross platform runtime(AIR or Java)
  5. Create a platform application
Now, go do some real work, until next time.. cheerio!

Generating a thumbnail and saving it to disk

This quicktip will show you how to load an image from wherever and how to generate a thumbnail from that image and save it to the disk. In fact, you can use this method to generate screen dumps from any visual component from within Flex.
There are some considerations, first the actual scaling of an image can be done in several ways, the most used trough a scale Matrix. However, in this example I'll be utilizing the Flex library in order to scale the image using smoothing, thereby accomplishing a better result than with simply a Matrix.

Let's say I have loaded an image into a Flex Image component(myImg) and wish to generate a widescreen(16/9) thumbnail for it.
Load the image
myImg.source = "http://graphics8.nytimes.com/images/2006/12/28/business/28dog.xlarge1.jpg";

When the image is finished loading(Event.COMPLETE) we generate the thumb at a size of 200x112
var orgBitmap:BitmapData = new BitmapData(myImg.contentWidth,myImg.contentHeight);
var thumb:BitmapData = new BitmapData(200,112);
orgBitmap.draw(myImg);//Get the orginal image

var scaleImg:Image = new Image();
scaleImg.load(new Bitmap(orgBitmap,"auto",true));//Set smoothing to true
scaleImg.content.width = 200;
scaleImg.content.height = 112;

thumb.draw(scaleImg);//Here we have the scaled image data

Now we have scaled the image using the Image component in Flex which actually does smoothing on the image when scaled. Now we need to convert the bitmapdata into valid JPEG format.
var myjpeg:JPEGEncoder = new JPEGEncoder(80);//Set quality to 80
var thumbdata:ByteArray = myjepeg.encode(thumb);

Now we need to save it to disk(to desktop)
var fl:File = File.desktopDirectory.resolvePath("myimage.jpg");
var fls:FileStream = new FileStream();
fls.open(fl,FileMode.WRITE);
fls.writeBytes(thumbdata);
fls.close();

There you have a smoothed thumbnail waiting for you on the desktop.