I am trying to gather some feedback and/or feature requests on our major Flex application, the Fan. The feature page is here on the CIM labs page. I have a big “how we did it” entry here.
Remember its still an alpha launch so things may act a little wonky once in a while.
If you have any suggestions, please leave them as a comment here.
thanks
The application I have been working on for the last month and a half finally hit the Comcast Interactive Media (CIM) Labs page. You can launch the application from here.This should still be considered alpha since this is one state of the completed application. Once completed, the application will include the Circular view of the fan that is the traditional view of the Fan, with the ability to switch between the views. I thought I would quickly write some notes on the experience of writing the application that will be in front of a LOT of people very soon.
Why Flex ?
We have some of the best Flash developers here at CIM working in a very traditional software development method. All of our code is written in reusable classes with modularity and startup speed as the primary focus. So to use Flex, something new to a lot of the team, instead of Flash was not a decision taken lightly. The biggest objection was always the size of the swf file generated. However, looking at the design we saw that almost every Flex component was used in the final version of the application. Since new components add only a marginal size to the swf once you have accepted the framework, it seemed to be a good case for using Flex. I would also like to dispel a myth at this point: Filesize does not slow down an application as much as network latency does. If your application pings a server multiple times to get startup data, its going to be much slower than one that loads in all the data at once. So we tried to keep startup calls to a minimum. The Fan also serves only the Comcast high speed cable internet subscribers so we were guaranteed the high speed connection. Moreover, its easy to write a component that does most things right but people tend to forget the small nuances. For example, if you write a drop down box, do you check to see that you may be on the edge of the Flash canvas and may need to drop up to render properly? Most people forget the small things that kill the experience.
Flex Skinning:
We had heard a lot of scary stories on how difficult it is to skin Flex. I think the core reasons people dont skin Flex applications is because the default look seems fine when you start the development (maybe adobe did too good a job on the default look 😉 ). I would like to say, skinning Flex isnt that hard, especially using graphic assets from a swf or something. Skinning in code is a lot more involved and needs a deeper knowledge of the framework. We started with simple symbols-in-a-swf method and later moved to code based skinning. I did run into a few issues with some components where designers wanted the tabs to bleed into the browse-area but Flex kept clipping my skin. We’ll revisit that and I’ll update everyone once I have an answer. But besides that skinning flex wasnt that difficult.
CSS and Runtime style changes:
This was another reason Flex won over a simple AS3 implementation. There were designs around differently skinned instanced of the application and even though we did have a home-grown skinning framework, the one that Flex offers was much more mature. I already have a few prototypes for skinned instances and they work pretty well. The only thing we needed to learn was how to switch graphical assets at runtime since thats a little more work but at the end it was easy to implement.
Custom components, renderers and AS3 wrappers:
There are a couple of custom components in this application but without styling, the application is just a custom video-player, a panel containing a list and a canvas with a tilelist and tab-bar. All the list elements have custom renderers that represent the data. There are some interesting features to note here:
1) The numbered playlist renderer has the number value bound to its index in the list using the itemRendererToIndex property
2) The tilelist renderers have a start animation delayed by a multiple of their row index making the startup animation a lot more interesting.
3) The color of the playlist renderer changes based on if the video is playing or not. This is via the dataBinding classes. I actually have a function bound to the setter of the ‘isVideoPlaying’ property. Again, this required some learning on my part.
The video player itself was written in raw AS3 since we will embed videos at other places outside the Flex environment. So we wrote an AS3 wrapper that listens to Flex events and then calls resize, play pause events on the player. The player talks to Flex via the wrapper as well. Buttons/scrubbers , input boxes etc inside the player were custom classes written in AS3 in the spirit of Flex but not within the framework.
Reverse migration to 9,0,16,0:
This was something that came up that had me stumped for a while. The application worked on a bunch of computers and then wouldnt on others. It was only later I realized that I was using events exposed in the 9,0,28,0 release and since I had Flex 2.01, my code complete suggestions would expose those events and I would use them and it would work great. 9,0,28,0 has api extensions to the player not available in 9,0,16,0. I was using the addedToStage event and that was crashing the app on others machines. And since they didnt have the debug versions, I couldnt view the stack traces. Now like any good developer, I have my debug player set to 9,0,16,0. If you are developing a Flex app that doesnt use fullScreen (or even if it does) make sure it is 9,0,16,0 friendly. You can use the flash.system.Capabilities to check the users Flash player version.
So how was the experience?
The new features in AS3 are just amazing to work with and Flex is just the icing on top! The feature I loved most is the new E4X XML parsing. There are elements in the application that do some non trivial XML parsing and it could all be handled so easy using E4X. At one point I wrote a code that ran through XML, created objects and stuffed them in an array to use later (a-la AS2) and then refactored all the code to just store the XML as a variable and run through it as I would an array. AWESOME !
Custom events rock and stack traces are beautiful to see (umm..not really but you know what I mean).
The other cool thing was the decoupling of UI symbols and the ability to instantiate them in code. All assets are referenced through an AssetManager (Singleton) class that holds the references of the images. These can be swapped easily even at runtime.
Custom namespaces gives us an easy way to grant limited access to properties rather than making them public.
Issues?
No onReleaseOutside event. We went around this by listening to release events on the stage. Every DisplayObject has a reference to the stage so that wasnt too crazy, but seems hack-ish.
Flex builder really needs to know the targeted version for the application and surface events only available on that. Would have saved a lot of time on the backward migration to 9,0,16,0
Lack of private constructors kill the Singleton pattern although there are implementations that do the job, but again: hack-ish.
Depth management is tricky since you cannot allocate a number value to the depth. For an AS3 implementation for buttons, I would have loved to have created the icon on depth 500 and do all the sprite swapping under it. Since rollover, rollout sprites arent created until the event, you have to add them to the depth of the icon making it move up.Not too bad but it gets complicated if you are adding/removing children often.
All in all, phase 1 was really fun (and fast). I have 2 tips for anyone looking into Flex for hardcore development.
1) Know the properties and events available. A lot of properties exist in the framework that I had never used before. Case in point: We were HRule objects or some graphical UIComponent to separate a list from the lower content via a blue line. Turns out Lists have the border style where you can create borders around any or all the sides. All we ended up doing is just creating a pixel border at the bottom. Saved us some memory.
2)Understand data binding. While using the [Bindable] meta tag is convenient, it isnt a panacea. It took me a while to figure out how to use the ChangeWatcher and the BindingUtil class to conditionally bind to different objects (since item renderers are reused in the list as you scroll and you may need a very granular level of control). Maybe I can post something on that later unless someone has seen a good resource on that (please leave a link if you have).
Drop me a comment and let me know what you think so far.
As always, we are still looking for talented Flex / Flash developers so drop me a line at arpit_mathur [at] comcast.net if you wanna be part of the team.
update:
Fan 4 on the blogs (not all flattering of course 😉 )
Mike Potter on Riapedia
Ryan Stewart on ZDNet
Ryan Stewart’s blog
Pete Cashmore on Mashable
Riability
Shelly Powers on burningbird
Cable 360 article: ‘ Comcast Expands Web Video In “Convergence Revolution” ‘
The fan is also featured on scalenine.com
As some of you, who wandered over to Gabo’s blog recently may know, Gabo is trying to create a flash UI for WordPress. I gave me a peek earlier this week and all I can say is its gonna be awesome. Of course his one requirement was getting the data out of WP in XML so he wrote some custom PHP code for that. However there is an XML-RPC interface to WordPress and I decided to see if I could quickly whip up something using it.
Turns out I didn’t even have to write an XML-RPC library, since there already is one written by Akeem Philbert. So I just wrote a custom WordPress class extending his class and ta-daaa. This is just the first stab at the implementation and its not feature complete yet (ie, not the complete API has been implemented). But if someone wants to use it, go ahead and try it out.
Note: The XML-RPC library always authenticates against WordPress to get data. Data is also sent over HTTP-POST so is exposed if someone uses a browser traffic sniffer. So I recommend creating a new user on WordPress with only ‘subscriber’ privileges and using that if you are creating a public application that doesnt need authentication.
Note 2: The XML-RPC implementation can be used to post, edit and delete entries as well, so if someone wants to make a blog manager application, you can use this as well.
View the Flex WordPress app here and right click to view source.
To compile the application, you will need to download the as3-rpclib library from here
This is cooooool. FlexBox features my Squarified TreeMaps code. Plus FlexLib has the SuperTabNavigator component that Doug McCune developed using my earlier closeable / draggable Tab Navigator class. So my ‘six degrees of separation‘ has Mike Chambers,Ted Patrick, Doug McCune and Darron Schall. I am psyched !!!
I am still working on the final releasable swc for a Flex component for the Squarified TreeMaps but I do have it working: check out my DiggMapper app.
This is a subcomponent of a larger application I am working on but is a pretty neat widget on its own. The code loads any xml file on the www thats accessible to Flash and renders it as is. All attributes are rendered in a node named __attributes and have a different icon than node icons. This took me a couple of hours but is interesting if you are making the leap from the XML Object in AS2 to the e4x way of AS3. The app can be seen here and the source can be seen here
Whats interesting is xhtml stuff comes out looking pretty clean as well. Anyone thinking dom-reader type application ?
This is definitely work in progress. I ported my treemap classes to the Flex framework and created this quick app that reads data from Digg. It doesnt automatically load data so click on one of the links above to get started. Rollover the rectangles to preview the story and click on them to launch the link. I just love the visualization since it makes so much more sense of the number of diggs than just the number on next to the story. For example the image below just underlines the importance of Halo3 in the gaming community so much more than seeing the number in a list (click to enlarge)
You can try the DiggMapper here. Its still incomplete but if you have any suggestions, please leave them as a comment
I had posted yesterday how I had managed to use the listData property to add numbers to the list item renderer. However this technique broke when the List actually extended beyond viewable area and became scrollable. I have the updated the example to reflect the fix but here is what I learned during the entire process.
1) The list draws out as many itemRenderers as can be rendered if the dataProviders length is more than the numbers that can be drawn on the list without scolling.
2) List item sets the data value of the item renderer.
3) If the renderer extends IDropInListItemRenderer interface, the list sets the listData value on the renderer. The listData gives some more info to the renderer such as what its row index is,etc.
4)When the user scrolls the list, the labels are rewritten on the same renderers without actually drawing new renderers.
To actually implement the numbering, I ended up using the renderer’s owner property to get a reference on the List and then using the itemRendererToIndex method on the List passing it itself as the parameter. This now works much better as you can see. Right-click to view source :).
One design I am working on required a numbered list with a custom renderer and drag-move enabled. I had no idea how to do this the right way and it took me a couple of hours to finally get it. So I have released the source here just in case anyone else ever needs something similar.
I originally thought the List class was something like the Repeater class. Had it been, the instanceIndex property of the UIComponent would have been the simplest way to implement the feature. Unfortunately, the List doesn’t use Repeater at all. The key is actually the listData property on the renderer that the parent List tries to set on the renderer but only if the renderer implements the IDropInListItemRenderer.
Anyway, take a look at the implementation (right click to view source) – its pretty self-explanatory. I have set it drag/drop enabled but this implementation keeps the numbering correct.
I love to break out of the Flex look whenever I can. Flex does give me a lot of functionality that I don’t have to write from scratch in AS3 but for entertainment oriented applications, the default look doesn’t always work. Of course, being lazy, I always love it when I can make something look interesting without that much work.
So here is a rather simple extension to the TileList component that adds some personality to it. The code is simple enough, I just randomly add a small rotation to the images to give it more of a scattered deck of images look rather than a standard grid. A custom cell renderer adds to the effect. I have also added a ‘hover to see larger image’ thing there but that part isn’t completely done yet and so the images are getting clipped but its an interesting experiment on creating custom toolTips.
Check it out here and right click to view source.
The skinning capabilities of Flex 2 components has been criticized quite a bit. There are a few articles on devnet that discuss this a bit but I have to say that skinning components really does require some effort.
The problem is that Flex tries to be the framework for everything and of course everyone’s requirement is just slightly different. Flash was always a language for personal expression and a lot of people have the same expectations for Flex (Hardly anyone asks the Java Swing developers for scrollbars that look drastically different from the basic look and feel). To do Flex justice, compare the pain of skinning Flex components to creating a new look-and-feel for the Swing widget set.
Enough philosophy though, here is my first attempt to actually skin the Slider component (Right-click to view source). Couple of points that struck me were:
1) Make sure your components report the correct dimensions to the measurement architecture. I am still fuzzy on that part but the component wasnt working correctly until I added the measure() implementation on the SliderButton class.
2) The slider scrub positions the scrub button at an x of width/2. The width/2 point is also used as the point to set the value the slider reports.
3) This is definitely wrong and I hope the Flex team fixes this: The Slider class puts the highlight track at 1 pixel below the progress track. This definitely needs to be configurable without extending the Slider base class itself.
As always, comments are always welcome.
Code Zen 