A new blog post on the CIM Flex developer group blog talks about some of the new features coming out in the next release of the Flex based player. Check it out here.

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:

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:

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

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:

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:

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 .

I am surprised this isn't talked about more in the blogosphere. The only reason I got to this was because a couple of my Flash applications broke this weekend and it took a lot of digging by quite a few of us on my team before we got to the root of the problem. So here is the deal: With all the goodies that have come with the latest Flash Player, one of the features that seems to have arrived is a stricter security model. There is a complete article on the updated security model can be found here on the Adobe Devnet site. A more bite sized sum-up of the article can be found here. As you see, the 2 big changes is the move to XML schemas rather than DTDs and a new site-control tag for meta-policies on crossdomain access.

Ah, so that's breaking my app.

Well, not really. Before we updated our crossdomain.xml files, I just wanted to confirm that that was indeed the problem. So I enabled logging on my Flash Player (to see how to do that check the logging section on the article here). The log though surprised me. Here is what I saw (I have edited the site names where I was seeing the issues):

Error: [strict] Ignoring policy file at http://[site name]/crossdomain.xml due to missing Content-Type. See http://www.adobe.com/go/strict_policy_files to fix this problem.
Error: Request for resource at http://[site name] by requestor from http://[swf url] is denied due to lack of policy file permissions.

Yikes. So seems the problem was that our server was not sending Content-Type headers for the xml files and the new Flash Player is a lot more strict about that, rejecting such crossdomain.xml files.

Hopefully this helps someone out there. If you do load data across domains, do verify they work on the new Flash Player.

[Update] Also check out the changes to authorization headers support for basic HTTP Auth:
http://kb.adobe.com/selfservice/viewContent.do?externalId=kb403184&sliceId=1

One of the funniest screen-grabs while debugging : link

2008 began with on a great note for CIM. For the last few months a group of developers here, myself included, have been trying to be a little more vocal and public about the stuff we do and how we do it. I have done it on this blog a bit with entries on how we adopted Flex to build the next generation of video experiences on Comcast.net. But as of this Jan 1, CIM officially has developer blogs (applauuaseeee). The Flash team's blog is available at http://teamcim.comcast.net/team/flash. Stay tuned as we start talking about the Fan, which I think is one of the most complex Flex applications out there, as well as our in-house tools that we are going to release under open source.
Suggestions are welcome either as comments on this post or the one at Flash Team Blog

A few months back I was introduced to something called Tumblr by Mat, a friend and fellow developer at Comcast Interactive Media. For the uninitiated, Tumblr is a microblogging platform, kind of like twitter except you aren't posting what exactly you are doing but rather links, photos, videos etc with minimal to none commentary . Here is a how wikipedia defines Tumblelogging:

A tumblelog (or tlog) is a variation of a blog that favors short-form, mixed-media posts over the longer editorial posts frequently associated with blogging. Common post formats found on tumblelogs include links, photos, quotes, dialogues, and video. Unlike blogs, this format is frequently used to share the author's creations, discoveries, or experiences without providing much (or any) commentary.

source: http://en.wikipedia.org/wiki/Tumblr

The first time I saw it, I didnt really care for it. My blog is a pretty good outlet for most of my thoughts and ideas. I love posting code and observations and seeing comment on the posts. I didnt really get microblogging at all. However, its something I have slipped into slowly and steadily in the last few months, starting with being a little more regular on Twitter and now Tumblr.

So what got me into Tumblr? Instant photo-posts from my iphone was one. Tumblr (at least the service at www.tumblr.com) gives you an email address to send photos to that instantly (or with some acceptable delay) get on your tumblelog. However now that I have started using it, I find posting quotes or excerpts and images from blogs/websites most interesting. None of these ever justified a complete blog post, but are definitely Tumble-worthy.

I havent seen Tumblr on any of the blogs I visit so I am not sure how many people use it, but its something I would recommend a try at least. Its fun .

Link: http://arpit.tumblr.com