TileList Creativity …

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.

Recommendation Systems

Of late, I have started reading quite a bit on Recommendation Systems and I came accross this interesting paper on the topic. The cool thing is that it talks about virtual co.mmunities based on recommendation systems (I am sure Amazon uses a similar algorithm, since this seems pretty common sense).

On a side note, the paper did lead me to finding out what a Pearson’s Correlation is. Pretty neat. Further links on this entry as I come across ’em

Links:
Content-Boosted Collaborative Filtering
Bunch o’ papers

Foiled !!!

This is why I don’t take long vacations ;). I just got back from a long one to discover every inch of my office covered in aluminum foil, courtesy Aaron( my manager, thats him in the black shirt) and a bunch of other developers. Apparently I got away easy since some of the other ideas were so much more…umm..creative :D.

I love working in a fun group.

[Update] And then there was the next year. I really gotta stop taking vacations ๐Ÿ˜‰

Squarified Treemaps

This has been something I have wanted to do for a while but I needed some guidance on the theory. Of course the treemap has been done a few times before (I think I saw the first implementation by marumushi I still love the design there. Since then I have seen it on a couple of other sites including CNet news). I also remember reading somewhere about someone about to release a TreeMap Flex component but I have no idea how long that will take or under what license terms. Plus I always have more trust in code I wrote since I’ll be able to debug it faster if I have to.

I am not publishing the source as yet since its needs some code cleanup, but you can look at the demo here. I have some data baked into the swf ([10,10,9,8,6,6,4,3,2,2,1]). The component then creates a series of rectangles with relative sizes reflecting the values. I have also added a redraw function listening on Stage resize, so try resizing the browser window and see how the code redraws the rectangles.

Source coming soon ๐Ÿ™‚

Skinning the Flex 2 Slider component

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.

TabNavigator Update: Draggable Tabs

Of course I had to do this but this was much easier. Now you can drag the tabs to reorder them. Works pretty well. The one thing that seems lacking is instant notification where the new tab is going (on MouseMove), like FireFox brings up a purple arrow at the point where the tab is going. I dont know if I have the time for that, especially since it doesn’t seem like I will be using this container for my project, but the implementation should be simple.

Check the swf out here, and right click to view source.

If you are using this in a commercial app or something make sure you catch history management errors since removing tabs screws up history before that event (there isnt a tab-add undo when you click back ๐Ÿ˜‰ ), and brings up the error stack trace if you are running the debug player.

Hope this helps someone :).

[Update]ร‚ย Responding to a query from someone, this code is released under the MIT license. You can download/fork the code from the GitHub Repository

TabNavigator with Close Icon: WORKS :)

Okay so this took me more than a day but there is a certain level of satisfaction when things do work. The goal was to create a TabNavigator with a close icon so that tabs could be closed (pretty much like FireFox or Eclipse). First of all, check out the final version here. The source for the project is here

Whats already out there
Darron Schall has had a working codebase for a while but he hasnt released the source code yet since the project was for some client. The other implementation I saw online was by Keun Lee, but I wasnt too happy with that implementation since it was using x,y position calculation for the implementation and that completely breaks the logic encapsulation. Anyway, so I just gave up and decided to just implement it from scratch myself.

Implementation
The TabNavigator class basically extends the ViewStack and adds a tabBar as one of its rawChildren. The tabBar’s dataProvider is set to ‘this’, ie the TabNavigator’s ViewStack data.
The TabBar uses a ClassFactory to instantiate Tab instances when the user adds controllable content to it. The Tab itself is an instance of the mx.controls.tabBarClasses.Tab class and extend the Button class.

The first step was to create a Button instance that on rollover showed the close icon. That is the ViewTab class. The only important part here is that when the user rolls over the button, the Button creates the rollover skin and attaches itself on top of the basic (rollout) skin. So I just remove and add the close Icon just to keep it on top (uhm..Adobe, Can we please have our numbered depths back ? I would just love to attach the icon at 1000 at the createChildren() method and forget about it, assuming skins were added on lower depths). The other thing was to update the measure method so that the icon’s width is added implicitly to the measured values.

Now I needed the ViewBar, my extension to the TabBar class, to use instances of the ViewTab class. That was done my modifying the ClassFactory that generates the Tabs. The ViewBar also adds itself as a listener to the TAB_CLOSE event. On tab-close, the dataProvider is modified based on which tab is clicked. Finally my ViewNavigator just forces the TabNavigator to use the ViewBar instead of the TabBar.

Not bad for a day’s work :). As I update this component, I’ll keep updating the source as well.

Feedback is always welcome.

AS3: Where is my onReleaseOutside

This is the most annoying point I have reached with AS3 yet. AS3 does not have an onReleaseOutside event, something I really needed for a menu to hide if the user clicked away from it. One implementation that I did find here involves a deeper understanding of the event bubbling mechanism. My own implementation is simpler and I just listen to a global application mouse click and see if my menu is down or not. However i do imagine lack of this event would make many developers go nuts. What sucks even more is that event isnt even available on the Flex framework. Maybe something we can ask for in 2.1 ?

Aurora and Sol

Those are the names people: mark em down. Flexamp is on its way out :). I kinda want the player name to be independent of the technology behind it (I am following an industry norm here. There arent and C++MediaPlayers or JavaAmp ๐Ÿ˜› ). While these names may or may not stick, these are the package names of the Flex Project and the J2EE Project on my Eclipse application so they will always be reflected in the source files.
I am fairly far ahead on the clientside implementation of the player but am just about starting the J2EE part. I havent mucked around with J2EE as much although I do come from a Java background as such. Desktop Java has much fewer rules to adehere to. The first step in J2EE is the biggest one and understanding the structure of a J2EE app does take some serious reading.
Of course there is a leap from the book to the server ;).
So here is the story of day 1 of Sol development.

Step 0 – Choose Eclipse:
I do all my programming on Eclipse and love it. Ever since the ASDT plugin came out, Eclipse has been my standard development environment. Its well integraded with CVS and SVN and allows quick text searches which makes life a lot easier. And developing Flash and Java on the same IDE is veeeery convinient. The web tools project is something I am just getting used to and while I have heard seasoned Java developers complain about certain features, my own experience has been fairly good. So armed with Google, I created the Sol project.

Step 1 – Get your J2EE app container + MySQL database:
My www host runs Tomcat 5.0.27 so thats what I run as well. I also downloaded the appropriate MySQL version

Step-2 – Create the Dynamic Web Application Project:
This is a project template that I think came with the web tools plugin on Eclipse. Once you create a new Dynamic Web Project, Eclipse will create the WEB-INF, META-INF, classes and lib directories as per the J2EE spec(A typical j2ee webapp should look like this) in a folder called WebContent. That folder can go as is as a webapp in a container (although typically you would deploy it as a web archive (war) file).

Step 3 – Include the jstl taglibs in your container:
Since I will be using the Java Standard Taglibs, I downloaded the jars from the Apache site. Include these taglibs in either your application’s lib folder or, preferably, in your container’s common lib directory (TOMCAT_HOME/ROOT/common/lib/) which would make them visible to all the webapps.

Step 4 – Create your basic JSP
Since the goal of this pass is to verify that my installation is correct, I wrote the simplest JSP file. You can download it from here.

Step 5 – Run the JSP from within Eclipse:
Make sure that the Tomcat Engine isnt running and then right click on the project and choose Run As … > Run on the server. Update the files if prompted and point to the installation directory of the Tomcat server when prompted to choose the local server. As the server starts up, the server logs appear in the Console window. Eclipse will then launch the built in browser and point it to the application root. Click on the JSP page and ensure that it works.

Possible issue: I have no idea why this was happening but even though my JAVA_HOME environment variable was pointed correctly to the JDK, Tomcat could still not find the javac tool to compile my JSP. On a thread I found the solution to put the tools.jar into the TOMCAT_HOME/common/lib directory. That worked.

Cheers.

and finally….

The try-catch block is possibly one of the least used elements of AS2. Adobe’s page on the try catch block on livedocs is bare bones and pretty much mentions what it does and little else. For the most part, most flash developers are unfamiliar with the concept of error bubbling and you can pretty much get by without it. For example, if you are reading an xml file, and know that it may not exist, you can construct the code like:


var x:XML = new XML();
x.onLoad = function(success:Boolean){
if(success){
// success
}
else{
this.manager.xmlError();
}
}

Here, the manager.xmlError() function deals with the error situation. However in the try catch block way your code would look like:

var x:XML = new XML();
x.onLoad = function(success:Boolean){
if(success){
// success
}
else{
throw new Error("xml load failed")
}
}

By using the throw keyword, you are declaring that that particular class is aware of a failure situation but its upto some other class which is below the class object on the invocation stack to deal with it (Java also has a 'throws' keyword that is used againt the method name to reinforce the fact that the function will throw an error).

So in AS2 land, while errors were 'nice-to-haves', they were by no means mandatory. This situation has since changed in AS3 and flash developers must now be really aware of this programming paradigm. In AS3, the player itself generates errors in certain situations and it is upto your code to deal with these runtime errors.

If try-catch blocks have been the neglected children of AS2, the finally keyword has been the forgotten one. Most of the code that deals with catching errors pretty uses try and catch but hardly ever finally. Code in 'finally' blocks is guaranteed to execute regardless of what happens in the try-catch block. While explaining the concept of finally, one of my collegues asked me the purpose of finally. For example if you have


try{
}
catch(e){

}
finally{
/// statements here
}

how is that different from
try{

}
catch(e){

}
/// statements here


I did not have any immediate answer for that question besides the better-readability of the code. Reading up on the Java implementation and talking to Java developers (most of whom end up not using it too ๐Ÿ˜‰ ), brought out the most important aspect of the finally statement. The part that I hadnt realized was that the finally block is executed even if your try block succeeds and does a return.

In the meanwhile make sure you are upto speed on compiler errors, warnings and runtime errors in Flash.