Monthly Archives: May 2007

FX Ninja #1 : MXML via the "new" constructor


MXML is object oriented. Many do not realize that MXML generates an ActionScript 3 Class at compile-time and thus can be used seamlessly via the “new” constructor. If you want fine grained control of your UI, using MXML class instances can bring another level of fidelity to your applications.

WARNING!!! There is one mistake you can make here that will leave you frustrated. Be careful with naming your MXML components as they generate a similar named “.as” file at compile-time. These generated files are hidden unless you use the “-keep” compiler flag. The error is to use similar names for MXML and AS3 classes. This can lead to a mysterious compiler error and will leave you stuck in the mud!!! You have been warned. :)

Here is a small application that creates 3 MXML class instances using ActionScript and uses the DisplayList API (addChild/removeChild) to swap the UI elements in an out of a panel. The effect is similar to a ViewStack but allows fine grained control over everything including caching the instances at runtime.

Download these two files, compile MXMLViaNew.mxml:

File #1: MXMLViaNew.mxml
File #2: ViewTemplate.mxml

The key here are these lines:

one = new ViewTemplate();
//create an instance of ViewTemplate.MXML via ‘new’

one.labelName = “Matt has eaten two Dodgy Prawns!”;
//edit the labelName property!

panel.addChild( one );
//add the instance into the panel

See with containers you are really working with the DisplayList in Flash Player 9, Flex simply rides atop all this lower level logic. Once you realize that MXML generates a class and can be used with the “new” contructor, Flex gets 100X more interesting. When I learned this it was a huge breakthrough for me and allowed me to go much deeper into the components and the framework.

I also really like this line of code. It has an elegance that is hard to describe:

if( one ) if( one.parent ) one.parent.removeChild( one );

The line reads like this:

if instance “one” exists and one is attached to the displaylist (has one.parent), remove it through itself ( one.parent.removeChild(one) ).

Pure Ninja AS3 there! HEEEEEE-YAAAAAAAHHHHHH!!!


Dodgy Prawns:

Matt Voerman and I were in Singapore last year for MAX APAC. At dinner in Singapore we has some “Dodgy Prawns” and when Matt asked me for a sample today of MXML via the ‘new’ constructor, well I integrated the joke. Sorry for the Prawn humor.

cheers,

Ted :)

Zach Graves: AS3 YMaps Engine in 24 hours


Zach Graves is one of the best developers I know. He is 19, works for Yahoo, and can code AS3 like few I have ever met. Zach wrote an ActionScript 3 version of the Yahoo! Maps tile engine in 24 hours over Memorial Day weekend.

Here are some facts about the engine:

ActionScript YMaps Engine Example

1. 15,477 bytes! It is an AS3 Project and is very small yet contains a majority of the Yahoo Maps API. At 15K it is smaller than the AJAX API.

2. Zach estimated 8 hours per day from Friday to Sunday, 3 days on this. All tile logic was written from scratch in AS3. Yes you read that correctly, 1 developer, 24 hours, and Flex Builder.

The key is that AS3 with a great developer is a deadly combination. This map engine is fast, handles dragging, zooming, map types (Map, Satellite, Hybrid), and is very small. It is great to see this type of prototyping going on with ActionScript. Better still is that there is lots of loading logic that can be implemented to make this much faster. AS3 has support for stopping and HTTP connection in flash.new.URLStream and with the ability to manipulate the bytes of images in memory, there are blitting optimizations that can be added as well. We are really only starting to see what is possible in Flash Player 9 and ActionScript 3, Zach’s productive work over Memorial day weekend is proof of great things to come.

Kudos to Zach for great work! I am impressed.

Cheers,

Ted :)

Google Maps Street View – Flash Player for 360 views!


Google has added “Street View” into Google Maps using Flash Player. The feature allows you to look from any perspective at any location. This ground level view allows you to get visual details about a location. It is fantastic, kudos to the team at Google.

Adobe San Francisco

Henry’s Hunan (Best Chinese food in the city!)

Sushi Ran (Best Sushi in SF Area)

This sure explains all Google the trucks driving around.

Cheers,

Ted :)

Flex Directory v1.0.2 – Live Filters


I updated the the Flex Directory and added in the filtering features. The filter has some subtle logic in it in terms of parsing values from the filter line. If you add a number into the filter, it will reduce the listing where there are more developers than the number you type. Type “20” you get all firms that have more than 20 devs. This filter also works against the location so if you type “DC” you will get Cynergy Systems and B-line Express as consulting firms. Additionally I added a binary filter for Adobe Solution Partners, I will be making selections on this UI sticky so that settings are persisted between views of the directory using Local Shared Objects in the next release.

Flex Directory 1.0.2

The filters are not perfect and if you have feedback on this please let me know. I will be showing how this works in a later post.

Also I added in some UI Skinning from ScaleNine. The scrollbars and CheckBox’s are skinned using the “DarkRoom” theme. Credits to Juan Sanchez for his killer site!

More to come,

Ted :)

Google made me think!


Web usability is very important. When a designer/developer moves key functionality around on an established webpage, users are forced to think and often they get confused. Now one might think that moving the toolbar above the search field to the upper right of Google.com is a minor change but I think it is a big mistake for Google. People do not like change, it is frustration forced into a daily routine. We are all creatures of habit and my habit is reading the news at Google news every morning and evening. When I went to click the “News” link this morning it was gone and even though it was only 4 inches away it threw me off. When that link moved this morning, I was forced to learn a new interface and think. Not that thinking is bad per say but I would rather not be forced into it.

The sad part is that I do not think the change adds much value to Google. They should have duplicated the UI elements or animated them to the new location to educate users. Feature discoverability is becoming ever more crucial in web development as often to move forward we are forced to break the habits of our users. Even though we add new wiz bang stuff the change can anger many users and might not outweigh the benefits of the change. You can brand it search unification but at the end of the day users will complain in mass that you moved my NEWS button. $50 bucks to charity that in 2 months the toolbar is back about the search bar based on user complaints.

It is a clear case of needing Google Classic!

Here are all the older versions of Google’s home page if you ever want to go back.

Cheers,

Ted :)