Over on ReignDesign...

I'll be posting on a bi-weekly basis over at my ReignDesign's blog (my new company). Here are some of the topics you can expect:

• Flash, Flex, AIR
  
• Android (Java Mobile Development)
• iPhone (yep, packing the market with apps)
• UX Design

Swing over and check it out.
If you are looking for RIA or Mobile Development, we've got a talented group of developers working with us. Get in touch.

Using DI to add a PureMVC Mediator in Flex

Classic issue with PureMVC, how do you add your mediators to your Flex components in an application at initialization. If you're not concerned with tight coupling you might add all the mediators with one command. But what if you don't want to tie all the mediator initialization together in one command? You might be thinking make separate commands for each mediator and fire it off as a PureMVC MacroCommand. Not a bad idea. It would certainly get the job done. But what about reusing the same command for each component and dependency injecting the mediator class and view component reference? Oh so clean. I love it and I think you will to.

//inside command class
public var mediatorClass:Class;
public var viewLocation:String;

override public function execute( note:INotification ):void
{
 var m:IMediator = new mediatorClass() as IMediator;
 m.viewComponent = getViewComponent( note.getBody() );
 Facade.getInstance().registerMediator( m );
}

protected function getViewComponent( app:Object ):Object
{
 var result:Object = app;
 for each( var subItem:Object in viewLocation.split(".") )
 {
  result = result[subItem];
 }
 return result;
}

The viewLocation would be equal to a String like "someComponent.menu.list" where someComponent is located directly under the main application and menu is a subcomponent of that etc. etc.

If you don't know how to handle DI in a Flex application, I highly suggest you take a look at the Prana Framework. Its made a huge difference in the flexibility and extensibility of the Flex product I'm currently working on. Plus, you'll be able to handle mediator initialization in seconds with one class. :)

Cheers,
Todd

Cantonese = Tasty

We grabbed a little late night snack after the evenings festivities at a local Cantonese restaurant. You can think of this place as the "diner food" of China. Very popular with the post bar/club crowd around 3am.

First up was a little duck.Actually, duck beak would be a little more accurate. It had been prepared in a spicy red sauce. If you don't mind spending hours gnawing at your food, this is a perfect snack (very bony).

Next we have carrot cake, no not that carrot cake.

This is actually a tuber best known from Vietnam and Laos. Its the closest thing you get to a potato in Shanghai. A little sweet with just the right amount of starch. Delicious.

Below you can see a rice paste rolled into a cylinder and mixed in a sweet, tangy sauce.

The overall effect is very pleasing. Think rice au gratin.

While I didn't have high expectation for Shanghai's culinary experience. I've been very surprised by the range of foods I've sampled since arriving here almost a month ago. I can not say all of it has been enjoyable but it certainly has been original (from a US perspective).

Cheers,
Todd

Traveling on the Lazy

One great thing about going to Shanghai from the Eastern US is that you don't have to change your watch.



Just flip it around (assuming you don't have numbers on it!).



Its exactly a twelve-hour time difference. Brilliant!

Cheers,
Todd

PS - this might be my first post of many entitled "Traveling on the Lazy" :)

Google Code University

If you ever wanted to learn more about the tech. behind Google's shimmer, check out their new website Google Code University. Its aimed at students and professors but an individual interested in distributed computing will do just as well. So far the site has four main sections:

• AJAX Programming
• Distributed Systems
• Web Security
• Languages

In each section are tutorials and videos, exposing how Google is using these technologies/techniques and how you can give them a try too. A fun website if you've got some ambition and a little free time.

Cheers,
Todd

On the road to Shanghai...

I left Pier almost a month ago now. Since then I've been skiing, pub-crawling (NYC for St. Patty's Day), concert going, and traveling up and down the eastern seaboard. Time off is great but after a while it can get to be too much and you need to get back to what you love.
So, next week I'm starting my new job at ReignDesign in Shanghai, China. I'm extremely excited about this move. New language, culture, city, company...and the list goes on. Reign has a great Flash development team, I can't wait to get across the pond and meet everyone. As always, I'll be working to push the boundaries of Flash and thin client GUI design.

For all my friends and family in the US, I'll miss you guys but you're always welcome to come over and visit (mere ~18 hour flight). Wish me luck.

Cheers,
Todd

Full Open Source Flex 3 SDK Released

The full source for the Flex 3 SDK was just released on Adobe's new open source wiki. Check it out if you're so inclined: http://opensource.adobe.com/wiki/display/flexsdk/

There were two surprises on the website:

1. You can view Actionscript source for the AIR specific classes in Flex
2. There's a section on Flex 4 (codename Gumbo) with some bug details

Cheers,
Todd

PS - Flex 3 and AIR 1.0 have just shipped. I think the post script topped the actual post...

Synchronous Service Calls in AS3

Tired of dealing with an asynchronous services in Flex? Here's a solution that can be helpful in certain situations.

Start off with a simple user interface bound to a Cairngorm-style ModelLocator Singleton:

<mx:Grid dataProvider="{ModelLocator.getInstance().myDP}"/>
<mx:Button label="Click here" click="dispatchEvent(new Event('getDP'))" />

Then Create a Controller Class that listens for the click event and calls a service:

class SimpleController{

function SimpleController(){
 Application.application.AboveViewHere.addEventListener('getDP', onGetDP );
}

private function onGetDP ( e:Event ):void{
  var dpService:DPService= new DPService();
  ModelLocator.getInstance().myDP= dpService.getDP();//binds ArrayCollection reference from service to ModelLocator
}
}

Finally here's the service Class:

public class DPService(){

function DPService(){}

private var data:ArrayCollection;
public function getDP(){
 var loader:URLLoader = new URLLoader();
     loader.addEventListener("complete", onComplete);
     loader.load(new URLRequest("someURL.aSweetExtension"));

  data = new ArrayCollection();//create the ArrayCollection reference here

  return data;//return the reference to the controller
}

private function onComplete( e:Event ):void{//get called when the service returns
  var loader:URLLoader = e.target as URLLoader;
      //loop over returned data and populate ArrayCollection
      for each( var xml:XML in loader.data.items ){
          data.addItem( xml.someProperty );//add data to ArrayCollection
      }
 //no need to return anything or dispatch an Event
}
}

Using this approach, you don't need to handle services asynchronously because of intelligent object reference management. We created the reference to the resulting data in the call to "getDP", Flex's data binding system will take care of the rest for us. This is a handy approach if you're binding the data directly to the UI since it can greatly simplify your controllers. In a situation where there's an error with the service, you can localize your error handling to one function in the controller in most situations.

Happy coding.

Cheers,
Todd

PS - I'm using Singleton's here for simplicity of the example. I don't suggest using them this way in an actual application. Proper MVC architecture wasn't within the scope of this article. Check out PureMVC, if you interested in learning more about Flex/AS3 architecture.

Automation Tooling in Flash

For a long time flash has been the realm of small to mid sized marketing projects. Something that provides a rich interactive experience on the web, difficult to parallel with any other medium. Since the average Flash developer is more designer than developer, true application-grade tooling has been seriously lacking. Items like build tools, unit testing automation suites, source code/package management are all notably lacking. That is until now. If you're developing with either Flash or Flex I encourage you to check out Project Sprouts. Here's the tagline:

Sprouts is an open-source, cross-platform project generation and configuration tool for ActionScript 2, ActionScript 3, Adobe AIR and Flex projects.

The project is on the verge of a 1.0 release, which has the potential to revolutionize the way your develop applications in Flash. I'm actually a member of the Core Team working a new website to help newcomers become productive quickly. It should be accessible in the next three weeks at www.projectsprouts.com.

Cheers,
Todd

ADOBE, Adobe, adobe...

Two quick notes on Adobe. First, They've revamped their website...and damn does it look sweet. Check it out. Second, I noticed a side note in the Flex 3 tracking log a couple weeks ago that mentioned something about "Blaze DS". The name sounded pretty intriguing to me at the time but I didn't have any details to go on. Today they finally issued a press release, it appears Blaze DS is an open source Data Service manager, a Lifecycle Data Services-Light (that's a mouthful). The platform will provide Remote Object access to new server-side languages (PHP, Ruby, etc.), basic data-push, and syncing functionality to Flex 3 (still in beta). No word on its level of integration with Flex 2, the most current full-release of Flex. This should open the door to a larger "open source" crowd that might have been dissuaded from using Flex without an integrated server-side component. Looks like another solid move by Adobe to bolster their development ranks, we'll see how it plays out as more information becomes available.

Cheers,
Todd

PS - This information comes from a number of scatter sources so forgive any misinformation I might be spreading.

Pier Developer Blog Listing...

Developer Post Round-Up:

• Flex 3 SDK Development
• Dealing with Build Times in AIR
• Creating and using an mx_internal style Namespace
• Debugging Basics in Flex 3 (beta)
• Error Logging with AJAX
• HTML Reporting in AIR

Not all these posts are mine but most of them are.

Cheers,

Todd

The Gmail Upgrade Has Arrived...

...at least for me. I'm not sure if everyone can see it yet. Below is a sneak peek ofa the new Contact Manager. If you're working in a small shop it looks like it can be a decent little CRM.
As for the main interface, not a whole lot has changed except for the inclusion of a dropdown menu.
The interface changes are nice but the main upgrade is speed. You'd almost think this is running on the desktop, near seamless experience. They actually prompted me to shut off Firebug just so it wouldn't ruin the experience. The Net Monitor intercepts all the incoming requests slowing things down a bit.

I'm sure I'm missing a couple items but that's all I have to report for now. Hope you get to check it out soon!

Cheers,
Todd

Basecamp JS Injection

I've used Basecamp on and off for a couple years now. Generally, I thought it was a great application: secure, well-designed, simple & efficient. That is until I ran into this little beauty today.


In case you can't figure out what you're looking at, thats a lightbox with an Iframe pointing to pierinc.tickspot.com. No, that's not a new feature for Basecamp that you missed out on. One of my colleagues, today, noted that he could enter HTML into the Todo list. Immediately, I was like uh-oh...I wonder if I can....out come the <script> tags. You can insert html script tags right into the Todo list and it doesn't get sanitized. A little scary if you use Basecamp for larger projects, perhaps with a developer you don't completely trust.

After a little inspection of the DOM and playing around, I "mashed up" tickspot, our time tracking application, with basecamp so I can kill two birds w/ one stone. Beyond the security risk, this could actually be kinda fun. Tossing anything I want onto my Basecamp page for easy access. I still think Basecamp is a great application but this a serious no no. I had higher expectation from the 37Signals folks than this (perhaps its a feature...lol).

Cheers,
Todd

PS-I don't have a picture of it but the first thing I did was animate all the <div> tags. I had them flying all around the page...great way to freak out your boss ;)

***Update***
37Signals Support responded with this message:

Basecamp intentionally allows HTML (and JavaScript) because many ofour
users find great value in being able to use that. We're fullyaware that this
allows for XSS attacks, but Basecamp is based on thenotion of trusted parties.
You should only allow people into thesystem that you believe won't hack your
system (just as you shouldonly invite people into your office that you don't
believe will stealfrom you). If your friend becomes a foe, you can revoke their
accountand change your login credentials. Just like you would simply not letthem
into your office.

If this was a public system, it would definitely be different. You can't
have a public forum today without carefully dealing with XSS issues.

In the 3+ years we've operated Basecamp, we've never had a single suchcase
occur, though. So it doesn't seem like it's a big problem. And I know many of
our customers would scream murder if we removed the option to use HTML in their
messages, as they've become accustomed toover the past 3+ years.

I'm not sure I total agree with the sentiment of leaving security up to your users but its certainly a refreshing change from the pervasive concept of the "low-trust" internet.

==>If you're into javascript...hack away!

Shakakai.com

If you're wondering why I haven't been posting here as often as I used to, I've been tied up on my new website Shakakai.com. Its a site that was created with two main goals:

1. To aggregate all the content I'm generating over the web, be it blog posts, tweets, del.icio.us or digg tags, and a host of social website content.
   
2. As an experiment into using Google as Content Delivery Network ( commonly referred to as a CDN)

The former point isn't particularly groundbreaking, everyone is cranking out mashups nowadays. The latter is a radical restructuring of how a website is built. Rather than construct and consume services for my own view layer, I'm capturing all the dynamic content for the site in RSS feeds. Then using Google's AJAX feed API, I'm using request the content from Google rather than my own server. As long as I optimize my JavaScript code, I should see a massive reduction in the bandwidth consumed per visit (in theory). This loose coupling of data from the view also serves to enforce proper MVC development practices while moving much of the application logic to the client.

There's a couple things I need to watch out for taking this approach:

1. Accessibility - When building out the view, you need to actively review the accessibility of the markup you're using. Its very easy to blow off the standards when you're waist deep in JavaScript.
2. Load Time - Minimize the amount of JS that gets loaded up front so the initial load time appears extra snappy. Then switch over to on-demand loading for any additional functionality (e.g. a "donate now" button)

The site is still in its infant stages but I hope to make a major dent in the development effort by the end of the weekend. So check in sometime next week: www.shakakai.com

Cheers,
Todd

The Developer Blog's Alive!

We've got some hot post action over at the Pier Dev Blog. Swing over and check it out.

http://developers.pierinc.com/

Pier Interactive Developer Blog

My company, Pier Interactive, just launched a developer blog. We're still working to fill out the content but if you're looking for more advanced articles on Flex and AIR it should be a superb resource. I currently have two posts up:

• HTML Reporting in Adobe AIR
• Client-Side Error Logging with AJAX
  

Speaking of developer articles, was anyone else let down by the extremely basic tutorials up on the new Adobe Developer Connection? I know AIR is still technically "new" but Flex definitely isn't. Where's the Enterprise-grade development posts? --> http://developers.pierinc.com (that's right I plugged it twice, I'm shameless).

Cheers,
Todd

RIP CFDJ

If you're a ColdFusion developer, then its a safe assumption you've visited the ColdFusion Developer's Journal on Sys-Con. Over the past year, their frequency and quality of posts has been on the decline (perhaps in conjunction with their readership). Adobe took notice and recently pulled their support from the publication. Apparently that was the final nail in the coffin because Sys-Con just announced CFDJ has been axed.

The quality of their content aside, I'm a little surprised Adobe allowed this to happen. CFDJ was the premier ColdFusion publication and really the only one that comes to mind as I'm writing this article. Is this a reflection of Adobe's commitment to CF or just a fitting end to a subpar journal? I don't mean any offense to the authors of CFDJ. There's a long list of great reads from the journal, over the years, but lets face facts. Sys-Con's user experience is probably the worst of any website I'll admit to frequenting. Perhaps a new blog with a better format and design will fill its place (hint, hint). Check in with pierinc.com in the next week for all the info.

Cheers,
Todd

Client-Side Error Logging

If you've done any amount of server-side scripting (CF, PHP, RoR, .NET, etc.), you already know the benefits of error handling. It allows you to capture unusual, sometimes unforeseen, errors that can occur in your script and handle them gracefully so your users get proper feedback on what just happened. No matter how great a programmer your are, something out of your control will break your code. Its your responsibility to build in a safety net so your users don't break their neck when they step off the correct path.

Since most developers would generally agree with my sentiment, why don't you see AJAX applications properly handling and logging client-side errors. The application that sticks out for me is Gmail. At least once a week I'll see a host of non-fatal errors pop up. Why? Can't errors that bubble up to the application scope be captured? Yes.

Be better than Google. Here's how:

var ErrorLogger = Class.create();
ErrorLogger.prototype = {
 initialize: function(url, opts){
  this.url = url;
  this.active = true;
  this.opts = opts;
  window.onerror = this.onError.bind(this);
 },
 onError: function(msg, URI, line){
  try{
   if(this.active){
    var body = 'URI=' + escape(URI) + '&line=' + line + '&msg=' + escape(msg) + '&brw=' + escape(Object.toJSON(Prototype.Browser)) + '&pv=' + escape(Prototype.Version);
    if('onError' in this.opts)this.opts.onError.apply(this, arguments);
    var opts = {
     onSuccess : this.onSuccess.bind(this),
     onFailure : this.onComplete,
     postBody : body
    };
    new Ajax.Request(this.url, opts);
   }
  }catch(e){
   this.onFailure();
  }
  return true;
 },
 onSuccess: function(){
  if('onSuccess' in this.opts)this.opts.onSuccess.apply(this, arguments);
 },
 onFailure: function(){
  this.active = false;
  if('onFailure' in this.opts)this.opts.onFailure.apply(this, arguments);
 }
};

What's it doing? Well, first off this is a Prototype Class so you need to include prototype.js in order to use it. Here's the breakdown:

1. The window.onerror event is set to call ErrorLogger.onError. When an unhandled error bubbles up to the window scope, onError will be called to handle it.
2. Three arguments are passed into the onError function ( msg, URI, line ) and an Ajax request with some additional browser information is constructed and posted to the URL specified in the constructor.
3. Lastly, the onError function returns true so the browser knows to disregard the error.

Can you just show the syntax for use? No prob.

<html>
<head>
 <title>Logger Test</title>
 <script type="text/javascript" src="prototype.js"></script>
 <script type="text/javascript" src="ErrorLogger.js"></script>
 <script type="text/javascript">
  var er;
  var init = function(){
   er = new ErrorLogger('TestResult.html',
   {
    onSuccess : function()
    {
     $('btn').setStyle({'backgroundColor' : 'red'});
    },
    onError : function()
    {
     alert('An error occurred on the page. Run for your life!');
    }
   });
  };
 </script>
</head>
<body onload="init()">
 <button id="btn" onclick="nonExistentFunction()">Throw Error</button>
</body>
</html>

When you click on the button labeled "Throw Error", the ErrorLogger class will gracefully handle the error and post some useful debug information to your server. From there you can do whatever you want. Personally, I just toss it in a log file that I monitor. All that in less than 1KB, not bad.

I've tested it on IE6/7 and FF2. Its definitely not production ready quite yet but I'll throw an update up with my final version in a day or two.

Cheers,
Todd

Add A Blog Search Feed to Google Reader

If you're like me your Google Reader RSS Feed Reader is filled with great blogs site ( Lifehacker, Mashable, Techmeme, etc.) While I'm not ditching any of my favorite web filters, sometimes I want to get my information direct from the source, or just another source. Here's a handy trick to keep you ahead of the curve.

Go to Google's Blog Search. Note the RSS/ATOM links on the side. Toss those in your Feed Reader and you're ready to go.

Oh, did I say this was difficult and time consuming? Definitely not.

Very useful? You know it.

Cheers,
Todd

PS - Depending on the search query, you may run into some spam. Play around w/ the advanced search options to get things working right.

Got Some Free Time?

Great list of top notch Flash sites: http://flashprayer.blogspot.com/

Steer clear during work hours...lest your lose your whole day (which may or may not be a good thing).

:)

Cheers,
Todd

PS - AIR Tour on Friday in Boston.