Is Flex productive? TagTV Total Development Time == 8 Hours
DIGG IT!
11
Comments
Published
Thursday, September 14, 2006
at
11:12 AM
.
TagTV has been an ongoing project for me over the past 2 months. It started as a demo for MashUp University on July 8th but has evolved over time. In total I have spent 8 hours working on TagTV including the port to Apollo. 8 hours seems impossible but in actuality Flex 2 SDK, Flex Builder, and ActionScript 3 are wildly productive as a development toolset.
July 8th
I started coding TagTV on July 8 before presenting at MashUP University. I was swamped with work and needed a great mashup demo. At 10AM on the 8th, I put on my headphones (the please do not bother me kind) and cranked the iTunes and started coding.
Hour 1:
First I downloaded the Adobe Flickr and YouTube APIs from labs.adobe.com. I obtained a developer API keys from Flickr and YouTube and got search results returning from both APIS. I then wrote a custom item renderer for the TileList called ImageThumb.mxml and wrote the thumnail URL into this component for both services. This provided the foundation for the base application.
Hour 2&3
The next 2 hours trying to get TitleWindows to display when the TileList was selected. YouTube does not allow direct access to the FLV video files, so I decided to wrap the YouTube player into the application and use it as a component. Think of the YouTube Player as a distributed component(SWF) and you get the idea. So after 2 hours of development, I had a TileList and a pop-up desktop working that played FLV video and displayed larger Flickr images. If the YouTube integration hadn't been so painful, I could have completed this much faster but that is development, you never know when you are going to hit a snag.
Hour 4:
Next I thought it would be nice to save searches for Images and Videos. I added a LocalSharedObject to store some data on the local machine. (LocalSharedObject are an object oriented cookie available in Flash Player 6+.) I began saving search keywords. I exposed all this in a pop-up TitleWindow called SettingsWindow.mxml. The panel was hidden off to the side of the app and animated to the edge, it allowed more room for image viewing.
July 9
Hour 5:
I spent the day working on my presentation slides but spend about an hour working on the polish on the app. I added some UI states and transitions and focused on making the application simple and easy to use. At some point I went overboard with the transparent images/video windows. I wanted to show that Flex supported very expressive applications and went a bit too far. Many of these additions have now been removed in the current application.
Hour 6:
I extended the SettingsWindow Class to support storing favorites from the Image and Video windows. I added a reference to the settings window into the Image and Video windows so they could talk directly to the settings class. The buttons in the image/video windows then just called a method to add in a favorite with name/url arguments. I appended the localSharedObject to support favorites as a data structure and added the method to append this. I then wrote some code to read the data and populate the List component within the settings window. Once I got this all working I knew I had a pretty good app worth demoing at Mashup University.
July 10
I presented TagTV version 0.4 at MashUp University and then headed over to the Flex 2 ship party that afternoon. The presentation went very well and I followed up with quite a few attendees who were interested in the application.
I got very busy at Adobe...
Time Passed...
Time Passed...
Time Passed...
Sept. 1
I was informed that I would be presenting "5 Minutes of Fame" at "The Future of Web Apps Summit" in San Francisco Sept 13 (yesterday). I was a bit puzzled as what to present given the talk was only 5 minutes long. Obviously I would need a good demo and something new to show. Internally I have been closely following the Apollo project during development. Mike Chambers and Christian Cantrell helped me get set-up with a very early pre-alpha build of Apollo.
Sept. 11
I sat down and decided that I would give TagTV a full facelift and port it to Apollo for the "Future of Web Apps" presentation. Ideally I would show a rich RIA application using Flex, then pull it out of the browser and install it as a desktop application. Given the state of Apollo at this point I had all the requirements I needed. I again put on my headphones, cranked up iTunes and started coding.
Hour 7:
I initially thought that porting TagTV to Apollo would be hard as I was learning this for the first time. I decided to do the porting first in case I ran into problems. I ported the app to Apollo completely in 10 minutes including creation of the AIR file. Apollo apps are drop dead easy to make by adding an application.xml file denoting application metadata and packaging assets into an AIR file. I am still really shocked how easy this was especially having written desktop applications and the pain of building installers for multiple platforms. I spend the remainder of the hour tweaking the UI of TagTV. I removed allot of the transitions and transparency in the app. I added a initial UI state with the search in the middle. I also added a background using the vectorDrawing API, I borrowed some code from Kevin Hoyt for drawing gradient fills. I also edited the CSS for the application and tuned the font sizes making things larger and easier to use.
Hour 8:
I tweaked the rest demo by posting the AIR file to the server and adding in a View Source window and a link to the AIR file. The About page was just another MXML Class that contained some text about the app history etc. I generated the Source Code view using Flex Builder and just added a button to link to that page. I then tested the application to no end trying to break it. I found about 5-6 small data errors and added some context code to solve these. Mostly they were data entry errors where I wasn't handling the empty case.
Sept. 12th 10AM
I did a dry run at the Palace of the Fine Arts auditorium with Ryan Carson. We chatted about Apollo, Flex, Flash and I showed the demo to the other 5 minute presenters.
Sept. 13th 12:10-12:15
Presenting something for 5 minutes is a pretty intimidating experience. I missed some details during my presentation mostly along the lines of productivity and Flex. I wanted to say that Flex is very productive and that I had only spend 8 hours on this app but those words just didn't come out of my mouth (hence the blog post). After it was over one of the other speakers who had yet to go asked me "what was 5 minutes like?" I stated it didn't seem like 5 minutes at all, it went so fast. I was talking and the next thing I new, I heard Ryan say, 30 seconds.
The demo worked flawlessly and I am very excited about "The Future of Web Apps" because Apollo will be center stage in the next phase of web and desktop development. To think that we will see Apollo ship in the coming year is really exciting. It is one of the reasons that I joined Adobe because it changes the game completely. For the first time cross-platform desktop applications can be made easily and deployed with the same file. Apollo has all the hallmarks of a killer app.
Enjoy TagTV!
As always more to come!
Regards,
Ted Patrick
Flex Evangelist
Adobe Systems
Awesome! I just love it.
As usual a great work. Thanks again for sharing your experience Ted.
Mike.
"Is Flex productive? TagTV Total Development Time == 8 Hours"
--> "==" is a condition where in your title it should be the result.
"Is Flex productive? TagTV Total Development Time = 8 Hours"
Just making it more logical ;)
Hi!
Very interesting post!
Just one question : you say that You Tube doesn't allow direct access to the FLV files, but at neave.tv, it seems like it is done... Is it a technical restriction, you're talking about, or a "law" restriction?
Could you tell us a little bit more about what you know on that point?
Thank, see ya!
A bit of frantic double clicking on videos always crashes it.
PC/Firefox - the browser freezes
PC/IE - Player error and borwser closes
Mac/Safari - Safari just quits
During development I looked at HTTP requests for FLV files with Charles Proxy. The YouTube server requires a youtube.com referrer in order to serve the FLV files. By loading the YouTube.com SWF player, this allows remote loading and distribution.
Also loading the player is ethically better. It gives YouTube branding exposure.
ted :)
YouTube changed their player yet again, I am updating the codebase to support their work.
Ted :)
Baz, I was trying to assert that "TagTV Total Development Time == 8 Hours" is true not assign development time of 8 hours. After all development is already done, asigning it now is just semantics.
Cheers,
Ted :)
??????VERY GOOD!)
Hi Ted, this is a great hack, i am trying to do something similar, but am hitting a road block in my lack of understanding of flex2; it looks like what i want to do is possible when i look at your TagTV.
I can add images to my TileList with no problems as long as they are embeded, but if i try to dynamically download images via action script they don't show up. I found that this guy is having the same problem, here
My last idea was to use an event listener to catch when the image has completed download, and only then attach the dataProvider of the TileList then. But that still does not work. any ideas what i am doing wrong? below is the basic code i'm using.
import flash.events.Event;
import mx.events.FlexEvent;
import mx.controls.TileList;
import mx.controls.Image;
import mx.collections.ArrayCollection;
[Bindable]
public var myClips:ArrayCollection;
[Bindable]
public var clipsData:Array;
private var clipurls:Array = [
'cow.png',
'cow_eyes.png'
];
private var myclipsTL:TileList;
private function imageHandler( evt:Event ):void {
myclipsTL.dataProvider = new ArrayCollection( clipsData );
}
private function creationCompleteHandler():void {
clipsData = new Array();
for each ( var url:String in clipurls ) {
var img:Image = new Image();
clipsData.push( {icon:img,label:url} );
img.load( url );
img.x = 64; img.y = 64;
img.addEventListener(Event.COMPLETE, imageHandler);
}
myclipsTL = new TileList();
addChild( myclipsTL );
}
This post has been removed by the author.
problem with youtube....
in my test i see, the application trying access youtube but returning one error:
Error #2044: Unhandled securityError:. text=Error #2048: Security sandbox violation: http://www.onflex.org/TagTV/TagTV.swf cannot load data from http://www.youtube.com/api2_rest?dev_id=XsSK34Rn3Ww&method=youtube.videos.list_by_tag&tag=heroic age&.
testing only the URL i see the problem... at ´&.´
removing this work without problems
http://www.youtube.com/api2_rest?dev_id=XsSK34Rn3Ww&method=youtube.videos.list_by_tag&tag=heroic age
obs.: testing at browser...