Releasing tomorrow: LogBook, an open source AIR based Flex logging application

The team at Comcast Interactive Media is putting the final touches to an internally developed tool we use for logging events from Flex applications. The application is built on top of the Flex framework and runs as an installable AIR application. Best of all, we will be releasing it under the MIT open source license. A much more detailed blog entry about logbook’s features will be published soon but here is a quick screengrab of the application (click to open in a new window):

Stay tuned ;).

Update: LogBook has been released and can now be downloaded at http://code.google.com/p/cimlogbook/

Creating custom List renderers, the complete guide (Part II)

Continuing from the last post, this entry just adds a few more tips for working with List controls.

Creating RollOver/hit states:
In the last entry I had shown how to create custom renderers that respected their position in the List. The next thing you will probably need to do is create custom rollover effects. One way to do is to add event listeners to Mouse Events in your renderer. However there is a better way. Since your renderer is aware of the List it is a part of, you can modify your updateDisplayList function with the following snippet:
[AS]
if(this.owner as List &&
((this.owner as List).isItemHighlighted(this._data)){
// instructions on how to draw out the over state
}
[/AS]

It should be noted that this function will only work if the useRollOver is set to true and will not be executed otherwise. Once again this lets you create renderers whose behavior can be controlled by the List settings.

To create a hit state, you can use the isItemSelected() method the same way.

Attaching your renderer via actionscript:
The final tip I would like to mention is the way you can attach your renderer using actionscript. This technique is more useful if you want to create a list with multiple views, for example a simple text, image+text and just image view of some kind of data. The first time I implemented this was by creating two Lists and switching between them. A better way is to switch item renderers via actionscript. To do this we must remember that Lists use a ClassFactory to generate new item renderers as needed. So assigning the renderer to the list is as easy as shown:

[AS]
list.itemRenderer = new ClassFactory(YourCustomRendererClass);
[/AS]

Thats it. Hopefully these 5 tips will help you create lighter item renderers and get better performance off your Lists.

Creating custom List renderers, the complete guide (Part I)

If you are a Flex developer, one of the Flex components you will work on quite a bit is the Flex List control. This entry will hopefully help you when creating custom List renderers the (hopefully) right and much lighter way. Almost all the Flex applications I work on require a List thats skinned a little differently and display more information than that could be represented by a label value.

You can see the not-so-glorious example here and check the source here

There are quite a number of examples on the web on creating the a custom renderer for a List control. Very simply, a custom renderer can be used as a List renderer by calling it as below:

[xml]







[/xml]
So thats simple enough. However most of the code I have seen that is used to create custom renderers starts with a parent Canvas tag or some other container. This works for the most part and hides some of the complexity of creating custom renderers, however Canvas and other containers are pretty heavy objects to have a lot of in memory, especially when you are using a bunch of lists in the application. We ran into this issue on the Fan for example when we played fullscreen video without destroying our multiple List instances. As you can see in the image below, the Fan uses three Lists and one TileList in the square view. So at any point we could have close to 40 renderers displaying data.

So how do you create lighter renderers? well here’s how:

1) Implement IListItemRenderer:

Lists expect the renderers to implement the IListItemRenderer interface. Conveniently, the UIComponent class implements most of the methods mandated by the interface (I will not go into my ‘God Object’ rant about the UIComponent class here). The only method you *have* to implement is the get/set data functions to make it compliant with the IDataRenderer interface that IListItemRenderer extends.

2) Implement IDropInListItemRenderer:

So now you have a List renderer that works for the most part. You may consider leaving it at this point but you are still missing some magic. For one thing, your renderer isn’t really aware of its position, etc in the List. To get that info, your renderer must implement the IDropInListItemRenderer interface which forces another couple of getters and setters: those for accepting the BaseListData object. When the List creates instances of your custom renderer and when it swaps data in and out of your renderer, it will pass it the BaseListData object. This object will tell your renderer its row/column index and its the owner List object. So now your renderer is much more aware of its position in the world.

3) Create UITextFields:

Most Lists have textual data that they represent. Text and Label components would seem to be the obvious choice for showing that data. However, these are much heavy objects again. UIComponents, unlike containers, have no qualms about what kind of children they can add to their displaylist (Containers only let classes extending UIComponent to be added to them. Sprites etc can only be added to their rawChildren list). So you can very easily add simple native TextField instances and size them appropriately. However styling them is tedious. Instead, consider adding UITextField instances. These play nice with the Flex LayoutManager and can also use the CSS styles in the Flex app by just being assigned the styleName property.

4) Set styles:

Like HTML, its always a good idea to keep style declarations in external CSS files. These can usually be assigned to Flex controls by just setting their styleName property. For example you can create a Flex CSS file and create a unique identifier like this:

.myawesomelist{
alternatingItemColors:#cccccc, #dcdcdc;
}

To style a list with the styles you declare above, all you need to do is:

[xml] …. [/xml]

What is a less obvious is that you can create arbitrary values in the style declaration (These aren’t compiled to a packed actionscript object the way a class would be but more like a dynamic class would be). So in my earlier style declaration, I could just as easily add:

.myawesomelist{
alternatingItemColors:#cccccc, #dcdcdc;
myawesometextstyleName:’jazzytext';
}

A List by default would have no idea what to do with the myawesometextstyleName style value and would ignore it. However, the CSSStyleDeclaration object referenced by the List is passed by reference to the renderers as well. So in your updateDisplayList function, you can call getStyle(‘myawesometextstyleName’) and get the value declared there. Now by assigning the value to the UITextField, you can get the formatting you are looking for.

We still have some ways to go. The remaining stuff comes in next entry so stay tuned :).

Adobe open-sources Remoting and Data Services !!

I am so excited, I better post this before I pass out ;). Christophe Coenraets just announced on his blog that Adobe just open sourced the Flash/Flex Remoting and Messaging services under the name BlazeDS. What does this mean? Well remember all those multi-user real-time applications that Adobe demoed selling their Flex Data Services? Well now you can build ‘em for free (well, as long as you can host the app on some J2EE server).

Oh, and since AMF is a published spec now, Adobe can release the code for the Flex RPC packages (which I hope is part of the developer goodies Adobe has been promising for today).

Free AS3 package: MP3Playback

When Flex 2 came into beta, I wrote an online mp3 player application called FlexAmp. The application let you play songs from an online Box.net storage account and and used the ID3 info to load related content from Flickr, YouTube and Amazon.com. Mike Chambers later did a desktop application using AIR called Ascension that also mashed up your music with the sources mentioned(but I still want to claim first rights over the idea, plus I did remote storage ;) ).

Just for nostalgia, here are some pics of what it looked like:

Anyway, a lot of people have asked me to release the source code for the application but the code (like the code for most of my weekend projects) is fairly messy. But I will try to release some of the core code as I get around to cleaning it up.

This blog entry links to the MP3Playback class which did all the playback for that project. I took some time to make the api pretty clean and similar to the Flex VideoDisplay class. I also wrote a quick example showing how the class can be used. The one interesting feature of this class is also the ability to fade out the song at any time. Not really rocket science, but nice to have anyway ;).

I hope this class helps someone with a project. If you find this class useful or find a bug, please leave a comment here and I’ll try to fix it.

The application can be found here. Please right click to view source.

New Flex Component: ScrollImage

ScrollImage is kind of like Flash ScrollPane component. The component takes any image url and loads the image putting scrollbars around it to allow the image to be scrolled. While the same effect can be created by using the Image inside a Canvas container, this implementation is much more efficient since its not creating a heavier container object.

I wrote the ScrollImage container as I was trying to understand the basic ScrollControlBase class that all controls that have scrollable content use. If you are a Flex developer, the source of the code should be very instructional. I have commented it out a bit and most of the code is self explanatory. Check the component out here and view the source here.

7 Reasons to consider Flex

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.

Ever used LoaderContext?

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.

The Fan, Comcast’s Flex based video player: SHIPPED !

WooHoo !!!!
The Fan, Comcast Interactive Media’s flagship video application, which I worked on as main architect and lead developer, was deployed to production this week. The Fan is currently one of the top 10 online video destinations and the new version adds a LOT of cool features to the application. I have already talked about developing the Browse view using the Flex out of the box components and then later writing a component set for the circular view, which HAS to be the most interesting UI for a Flex application ;).

Fan 3 vs Fan 4 Classic view

fan4_circle

fan4_circle

Fan 3 vs Fan 4 Square view

Fan 3 Square

CIM Fan 4

If you are a Comcast subscriber, go to the comcast.net site and watch any video from the huge number of links we have peppered across the portal. The link to the preview version of the fan is still alive from the cimlabs site, so check it out soon before that goes away if you havent already.

As the fan continues to evolve and we get ready to launch another bunch of Flex modules, we are still looking around for Flash/Flex developers. So ping me if you are interested at arpit_mathur [at] comcast.net

The much awaited notes from Flex training day 3

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:

I have a list of questions but I’ll start with the one that “gets my goat” the most these days. It’s with the preloader. We’ve done some custom preloaders using the Flash CS3 integration kit and it’s awesome. We modified Ted Patricks class for overriding the default preloader and added an additional phase to the loading process to load a configuration file for our applications while the app is doing it’s instantiation. All is well until we try to save this data to be used in the app!! There’s no way to save it in a variable that is still accessible once the app. has instantiated. Or is there?

To sum it up.
Is there a way to load an XML config file while the Flex framework is loading and have that available in the app?

Our solution:
Save it in a shared object ( write it to the disk) and call it up once the app has creation completeded : ) . This solution is fine but I figure there has to be another way since we use this design pattern in 90% of our projects and I would like to make the most of the inital load since the user is waiting anyway.

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 :

What is the best way to implement a global exception handler in my Flex apps. Every other language I use has one, and I *really* need to know when errors are happening, because my users are not telling me all the time.

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.

I would like to see an example of the best, proper, yet simple way to build lazy trees. I’ve never seen a good, clean, easy to understand example in Flex.

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