Code Zen

In response to another annoying Flex bashing article on Digg, I though I’d post my response and get some facts straight (I basically take all his ‘facts’ and respond to em so read the other article in paralllel). Funniest thing is, they are trying to sell a proprietary AJAX framework and scare their prospective customers with “Flex = vendor lock-in”.

Also I would like to emphasize that I love AJAX and javascript and I feel that they have a need to fill just as much as Flex does. This is just to make sure people have their facts straight when choosing a technology.

1) Adobe Flex effectively don’t care about any of the web standards we have spent the last 4 decades building!
Actually it does. AS3, which Flex is written in, is trying to be the ECMA reference implementation. ECMA is the standard that Javascript is based on. If anything, normal browsers fall short of actually implementing the spec correctly. This will get crazy again when Javascript 2 comes out when you will have to check your applications in multiple versions of Javascript running on multiple browsers. Your QA time will most likely double.

2) Adobe Flex is a BINARY RIA Framework!
Umm….so? You still code it in text and compile it like Java or C#. Binary code keeps file size smaller. Its better if you also come up with a funky UI and dont want others to copy the interaction by just copy pasting the code into their app. And if you DO have a serious application that you want to deploy, dont you compress your javascript files ?

3) Adobe Flex will effectively render your website invisible to Search Engines:
Are you creating a website or an application? If you are creating something like cnn.com in Flex, then its obviously the wrong technology. However, most of the AJAX examples I have seen that AJAX library vendors try to sell are mortgage calculators and the like. How on earth does google index a mortgage calculator? And if you are using AJAX, googlebots still cannot make asynchronous calls to your server. So for indexing AJAX applications, you still will have to resort to the same techniques as Flex/Flash applications.

4) You don’t know the technology needed to use Adobe Flex!
This was the funniest point I saw on the list. Basically it says: “I dont know it so you dont know it”. Flash and actionscript have been around for a while and AS3 is not that big a leap. Flex, as a framework will have to be learnt but no more than any ajax library by a javascript developer.

5) You don’t know who’ll win (Flash vs. Silverlight):
The flash player aint going away anytime soon. Ask yourself this: Will my application outlast youtube, google finance, etc? Are you willing to bet that Google, Yahoo and other huge companies who have invested in Flash dont know what they are doing or chose Flash callously?

6) Adobe Flex is immature technology!
Flash based RIA (rich internet applications) came on the web before dhtml/ajax ones. Flex has been around for 2+ years and we are now approaching version 3 of the framework. And Flex unlike javascript and AJAX is being groomed as a technology for applications. For example, you have stuff like Flash Remoting that let you manage client server interctions between flash and serverside code without actually serializing your messages into XML. You also have paged data support in Flex when rendering huge sets of data, and the true power of the Flex framework shines when dealing with huge amounts of data (The javascript vs. Flex results are just obscene).

7) Adobe Flex is lock-in technology!
Um, no! Flex is an open source framework that runs on the Flash player which is owned by Adobe. Sun owned Java but Java is still the language to beat for enterprise level applications. When you are trying to avoid vendor lock in, a lot of people choose Java.

Maybe the next blog will be where Flex outshines AJAX, unless someone from the community beats me to it.

Kevin, another Flash/Flex developer on my team, has a good poston his blog on the LoaderContext class and using it for getting access to the BitmapData object of an image loaded off a domain other than the one hosts the swf. I never tried this with AS2, so when we were unable to get BitmapData off a domain that had the correct crossdomain policy file, he was convinced that it could not be done since apparently AS2 had no way to do this. AS3 introduces the concept of LoaderContext that checks the crossdomain.xml in such situations. The LoaderContext is an optional parameter to the Loader class’s load() function. Whats weird is by default, the Loader doesnt which is counter-intuitive, since all other such crossdomain look ups do.

I am excited about the presence of LoaderContext though since another thing it allows is loading classes to their own ApplicationDomain, which means the potential for class collisions is virtually eliminated. When would this be useful? Well, for one if you are loading swfs using the same third party libraries, but there is a potential that someone tweaked some part of it making it behave slightly different. In my world this is a very real issue. I am just bummed that the code that I have such issues with is still in AS2 with no such security mechanisms.

Anyway, check his post out. While he talks about the Image component, the same idea is valid for the AS3 Loader class.

Earlier I had asked if anyone had any Flex questions I could ask Jeff Tapper when he came by to train the group, and a few people did. Unfortunately, the last day I had a major meeting maelstrom (try saying that three times fast) and so I didnt get to work on any of the cool stuff (but the rest of the team did and that was the point for the most part anyway). But I did ask a couple of questions that were posted. I do apologize for taking a week for putting these up but its been a crazy week.

Paul Rangel asked:

So turns out the entire group has never written a custom preloader before (oh the shame!), but the idea of not being able to use the loaded data baffles the mind. Probable solution: Use a singleton class with no strings to the Flex framework to load the data and reference it in the application when the application is initialized. Go completely native and use the URLLoader and the URLRequest objects if you have to (I am not sure if HTTPService has any dependencies on the SystemManager being ready). And do let us know how that works out. If anyone else has seen the same issue or has a solution, please drop me/us a comment as well.

SmackDaddy asked :

So we wasnt sure about this. If the idea was to catch an error at ANY time, then wrapping your app in an uber-try/catch block was a possibility (ugh), although I dont think that would work for async httpService calls will it? However I dont think there is any official way to handle global exceptions.

Again, none of us have an answer to this since we hadnt ever done it. But I can imagine a solution where you load node data only when required and since the performance of such an app would suck, you could try an aggressive strategy where you load one subsequent node worth of data (other than the ones open) and when a user opens a node, you fetch another node down as well, the idea being you keep fetching data for nodes that the user may open next. The retrieved data can be then spliced into the dataProvider of the tree. I’ll try to dig up a link that also talked about data refresh without closing the whole tree (which seems to be Flex’s way of handling a change in the dataProvider)

I guess most of the answers here are “umm…., we could try …”. If any readers have the answers then please feel free to comment.

-cheers

Like I had mentioned in my earlier post, the Flex team at Comcast Interactive Media in undergoing a training for three days on all things Flex with Jeff Tapper (of the Adobe Flex Training from the Source book fame). I have been in and out for the most part but the team seems to have absorbed a lot.

Here is a quick list of things that I learnt:

Using [style] metatags to create accessable styles:
By just putting the [Style] tag, you can make the styles available to you (well, more visibly anyway). You can also add the inherit=yes value in the style definition and the style will get picked up from the parent’s style values. Something a lot more interesting that I was looking for is the StyleManager.registerParentSizeInvalidatingStyle method that forces the parent to measure itself when a style value could potentially grow the component to a larger value needing the parent to do the same.

Using BindingUtils and the ability to bind to events:
I have never done the latter (weird I know). However it seems if you but the bindable metatag with the event name on top of a function, that function is called whenever that event is fired. Since we didnt specify a target (source) of the event, does this event get fired anytime anyone fires that event? I am still not sure.

Using namespaced XML:
If an XML file has namespaced nodes, you cant access those nodes until you include that namespace in the XML definition. To do that you would create a namespace variable and then use that to reference the namespaced nodes:

For example

x:XML = …
var rdf:Namespace = new Namespace(“http://rdf……”)
var dirvalue = xml.rdf::Directories
Note the use of the ::

Using ASyncToken:
This is returned from the HttpService call. It acts as a token for the call and can be used to attach fault and result functions to. I have never used it. Interestingly the Flex source code doesnt including the rpc package so I have no idea how its created.

Event Lifecycle:
We saw the difference between the event.target and the event.currentTarget. Also what was really useful was figuring out the event.stopPropagation and the event.stopImmediatePropagation. The former stops the event from going anywhere up the Displaylist but if you have two event listeners added to the same displayobject, both will get the event if you only use stopPropagation, but if you use stopImmediatePropagation, you can intercept the event preventing it from going any further even to other listeners on the same node in the DL. This property can get more useful when you use event priorities to register listeners.

Modules
Ran through a simple example of using modules especially using the -link-report and the -exclude-externs compiler directives to make sure the modules only compile whats needed. Apparently this gets easier in Flex 3.

These are just my notes, since most of the other stuff we talked about I already know ;). More stuff here tomorrow.

I have seen a couple of posts recently from people looking for some information on integrating AS2 and AS3 code. I recently worked on a project that I ended up spending quite a few hours trying to get some things to work right so I figured I should post about it. Hopefully someone will find it useful.
So I wrote a Flex application that I was able to knock out fairly quickly. The core framework really made a lot of the grunt work disappear and I was pretty pleased with what I had. It was only when I was done with the application itself was I informed that the application was supposed to be loaded in an AS2 swf. Ah well, I could always loadmovie it.
Wrong.
AS2 swfs cannot loadmovie AS3 swfs. I guess the swf headers dont get recognized by the Flash Player and the AVM2 doesnt startup. So we had to find a workaround to that. I was hoping Javascript popups would work but that was unacceptable user experience. So we went back to the drawing board. The other option seemed loading the existing AS2 base swf using an AS3 basic loader as the root. It worked well for a few initial scenarios but soon hit a wall since there were _root references all over some of the AS2 code and the root loader killed all that functionality (For those who still do so, please STOP using _root in your code !!!).
Just when I was ready to quit and about to just port the whole app to AS2, I tried going completely out of the flash player to get my application to show up on top of the base swf. Go html positioning. I ended up writing both the swfs into 2 separate divs using swfobject and then absolutely positioning the base swf and relatively positioning the container with the Flex application on top of it.

The css styles looked like this:
[css]
#div1{
position: absolute;
margin:0px;

width:100%;
height:100%;
}

#div2{
width:500px;
height:360px;
position: relative;
margin-left: auto;
margin-right:auto;

}
[/css]

Works pretty well :).