Author: Arpit Mathur

Arpit Mathur is a Principal Engineer at Comcast Labs where he is currently working on a variety of topics including Machine Learning, Affective Computing, and Blockchain applications. Arpit has also worked extensively on Android and iOS applications, Virtual Reality apps as well as with web technologies like JavaScript, HTML and Ruby on Rails. He also spent a couple of years in the User Experience team as a Creative Technologist.

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.

Https on Apache Tomcat 5.5

I tried to play around with Flex Data Services today. So I downloaded the package and went through the install. Now since I already have an instance of Apache Tomcat 5.5 running on my laptop I was less than inclined to install JRun. So I installed the non-JRun package and deployed the FDS WARs. I ran the the collaborative dashboard example and things looked good. The other application I had been eyeing for a while was the NoteTag example application written by Adobe. For the uninitiated, NoteTag is a collaborative note taking application. The coolest part of NoteTag is that it doesnt have a backend database but rather uses Blogger, TypePad and Del.icio.us to store the data. However since these services require authentication over SSL, I had to install a security certificate on my Tomcat instance.

So here is how I went about it. First of all, the SSL key generator is part of the core JDK as of Java 1.4. The keytool is available at %JAVA_HOME%binkeytool.exe. Run it as specified at the Apache Tomcat tutorial site:

keytool -genkey -alias tomcat -keyalg RSA

The tool asks a series of questions like name, address etc to write the keystore. Once the key is written, move it to where tomcat can access it in the Catalina directory. Lastly uncomment the HTTPS connector and add the following attributes:

keystoreFile=”tomcat.keystore”
keystorePass=””

Ta..daaa…https!!

I still havent managed to run NoteTag (I am getting connection errors) but thats a battle for tomorrow. Right now I need to go to sleep.

HOLY SH** !!!! WE WON !!!!!

OMG OMG OMG.

We WON!!!

flashforward_5023700286_o

The Fan won the People’s choice award from among 60 other applications. I gave a stuttering speech when I accepted the orange arrow.
Of course most of the kudos go to the design and the interaction gurus but I’d like to think development has had something to do with it as well :D.

Weirdly, this completes my Flash Forward experience. I first went to FF 3 years back as a volunteer, then as a regular attendee once I had a full time job….then as a speaker on architecting Flash applications for enterprise applications and finally this year as a nominee and winner !!!!

Onward to MAX ;).

More notes, Day 2, FF Austin

XD Talk:
Better looking evolution of Mike Chamber’s ApolloTunes, now renamed to Acsension. Neat design for the xd group: XD bold and joined to look like a bomb.

——————————
Browser Power for Flash
1) Loading a valid xhtml file as an xml file. (I think its a better idea than ripple but I need to look more at Ted Patrick’s FXT to compare with that)
2) To ‘hide’ the javascript parts of the HTML document surround the js in comment tags within the script block.

3) idMap[id] in the XML Object in Flash 8 returns the node with the id referenced.

————————–
From the Yahoo AS2 – AS3 migration talk:

1) Do not put code in constructors of classes since they arent JIT-ed.
2) NetConnection you can change objectEncoding to AMF0 or AMF3 to send data in AMF format.
3) The ‘delete’ keyword deletes only dynamic properties and methods.

————————————–
From the FlexBuilder talk:
Eclipse editor shortcuts : Ctrl+Shift+L

————————————–
From Grant Skinners talk on Resource Management in AS3.

AS3 doesnt garbage collect until it starts running out of memory.
Use weak references when adding listeners.
Have explicit dispose functions in your classes.