http://www.amazon.com/gp/browse.html/ref=pe_2170_10160930?node=689343011

This new EBS system for E2C just made the whole compute-cloud offering from Amazon an easy port from a regular web app to an Amazon hosted app.  Before, all your persistent data storage had to go to S3 which had a specific API you had to develop for.  Now, it can go to EBS which acts like a block device.  In other words, a virtual disk.  So just about any application should “just work” instead of needing modifications.

I had stayed away from EC2 because I didn’t want to tie my apps to Amazon services.  But perhaps this fixes that problem.  I’ll have to play with it sometime soon.

Now, I have no idea if this next statement is actually true since I haven’t done extensive research.  But TimeLiner XE may be the first AIR app to ship.  And by “ship” I mean the more traditional meaning of the word, from a warehouse, on a CD, in a box.

This is a product that I’m really proud of.  We had a really rocky start in the development process, but I ended up taking the lead of most of the project and we were able to deliver something that I hope will really help kids out in school pretty close to the originally planned ship date.  It’s probably the most complex product I’ve ever worked on, and is definitely the biggest project I’ve managed.

For a little background, I work at an educational software company that sells directly to schools.  Because of the market, we generally need to produce our products on a CD, in a box, and with a (gasp) printed manual.  Sounds old fasion, doesn’t it?

It’s worth reflecting on the physical manifestation of software… It’s amazing how much satisfaction you can get from actually holding that beautifully designed box that is meant to contain your work.  Just to know that it was someone else’s job to go through iteration after iteration of design, and then someone else’s job to put ink on a piece of cardboard, and someone else’s job to assemble that cardboard.  All so the piece of software YOU worked on can be delivered to the customer in style.

The box is also great for those times when relatives ask what you do, and you can just point to that on your shelf and say “I made that.”  Then they can look at the pretty pictures on the box, or even crack the manual to see more pretty pictures.  It’s a lot easier to explain than giving out a URL to an AIR install badge or even giving a quick demo.

Unfortunately, there’s also an impending feeling of doom when you realize that you don’t get to update that software for a long time.  What if you missed some critical bug?  You lie awake at night wondering if you remembered to take out that September 1st expiration date that the Beta’s had and you wonder if QA ever tested that.   Those CD’s will last a long time and you can’t just throw up a new version of a web page and make all of the old versions disappear.  Sure we can do downloadble patches, and sure we’ll have a 1.1 version someday. But there is a certain feeling of permanency to the whole process.  I mean a major screwup means pressing new CD’s and packing them, and paying for postage.  That could be thousands of dollars.

I’m not sure if I dare to go check that expiration thing now…

The flow goes like this:

1. When accessing the web services the user is first presented with a normal login dialog.
2. From there he chooses to use an OpenID login.
3. He types in his OpenID identity.
4. He is forwarded to his OpenID provider’s page.
5. He clicks the "Allow" button, and is brought to a list of all the projects he’s previously saved.
6. Upon clicking a project, the browser portion of the application closes and the program loads up the data over AMF

I’ll post code examples of what I did to make this all work as soon as I get some spare time.

If you’re not familiar with how OpenID works, here’s a quick summary.

1. User goes to an application (Usually a web-app)
2. User types in their OpenID URL to that app
3. They get forwarded to their OpenID page where they can either grant or deny access.
4. That page then forwards them back to the original web app with an authentication token set.

Obviously, it’s kind of hard to redirect back to a desktop application.  I was thinking up some wacky work-a-rounds for this but then it hit me.

In the AIR app I can just use the HTML component and point it towards the login form of the web services.  The user can then log in using either username/password or OpenID just like they do on the website.  Now, here’s the cool part…  The AIR HTML component shares a network stack with the AIR/Flex NetConnection object.  That means any session/cookies/whatever opened in the HTML component carry through to the remoting calls I want to make from Actionscript. So I can authenticate using a web form, but then consume BlazeDS/LiveCycleDS/AMFPHP/Red5 services using AMF over Netconnection.

I did up a quick proof of concept and it works on both Windows and OSX.  I was able to successfully call a remoting service that requires an authenticated session.  So this was actually a much easier problem to figure out than I had feared.

Now, I’ll just need to make the web page that loads after a successful login somehow indicate to the AIR app that the user is successfully logged in.  I’ll probably either use a tiny Flash component that signals over LocalConnection, or I’ll just make the AIR app watch for when the HTML component gets to a specific URL. I’m pretty sure I can get this to be a completely seamless experience for the user.

Oh, and as a bonus… the user can sign up for a new account instead of log into an existing one from "within the app" instead of going to an external website to do that.

If it is ObjectHandles, this would be the second time I just ran into a use of them, that’s pretty cool. Unfortunately, I couldn’t find an email address on that site.

But that aside, the site is neat.  It lets you create some pretty "web 2.0" style buttons with stripes, highlights, etc.

I spent some time on the library yesterday.  I was tyring to get the rotation+resizing thing working better since it’s been somewhat broken for a while.  I’ve never needed that feature so it’s been neglected.  Unfortunately, I’m running into a bit of a brick wall.  I’m still trying to figure out exactly what it should do, nevermind how.  Luckily, most of my Trigonometry from High School is coming back to me since it’s heavy in that department.

The basic idea is you shouldn’t have to modify your data model to use it in a specific view. If you need to filter, sort, or summarize the data for a view you can do that through an Adapter so your model doesn’t need to understand that logic and you’re view isn’t reliant on a specific implementation of your model.

Example: If you had a list of books in an array, and you want to filter by some property of books (say publisher) you shouldn’t apply the filter directly to the model. Instead, create an adapter that can watch that array, and have that adapter apply the filter (or sort, or whatever).

More Examples: Consider Timeliner XE, a product I’ve been working on at my day-job. The main data model is a list of events. There are several views for that data. We have a text based / grid view, and some graphical views. Here’s a couple screenshots:

Each of those screenshots has 2 views active at a time, the grid, and then a seperate graphical view. That makes 3 views that all want to bind to our data model. But, notice the grid has 5 events in it, while the graphical views only have 3. This is because only 3 of those events are valid to plot (they have a date). It’d be nice if we only had to bind to a list of events that actually has the data we want.

Now take a look at these three screenshots from AgileAgenda, my project scheduling application.

In all of these the data we have is a list of tasks. The first two show one view with two different filters applied to the data. The third shows a large grid with all of our tasks, and a much shorter pulldown that only has the tasks that are also milestones. (A milestone is a specific type of task)

To create an adapter:

• Create a new adapter class
• Create a constructor for that class that takes in the “source” data model, and any options that might be specific to the adapter.
• Add event listeners to the “source” model.
• Write event handlers in the adapter to update the adapter’s internal state when the source changes.
• Write accessors in the adapter, so other components can get data from it.

A simple example…

Click here to run a simple example. View-source is enabled in that. Here’s a screenshot of the example:

When you run the example, it creates a simple data model, populates that data model with 4 sample items, and then creates 4 panels. Each of those panels represents a view. The example also creates 4 different model adapters all from the same data model, but with different options set. Then each panel gets a different adapter.

As you add items to the data model, you can see that the 4 views update depending on whether or not they are filtered and sorted.

Our Data Model:

package
{
    public  DataItemExample
    {
        public var name:String;
        public var amount:Number;
        public var active:Boolean;
    }
}

—-

package
{
    import mx.collections.ArrayCollection;

    public  DataModelExample
    {
        [Bindable] public var myDataItems:ArrayCollection = new ArrayCollection();

    }
}

As you can see, it’s a pretty simple data model. There are items with a name, amount and active properties, and then there is DataModelExample class with an array of those. Notice that no view-specific data is in there.

Now, lets create our adapter and name it “AdapterExample”

First, create a constructor and some variables to hold some information about the adapter. We’ll have 2 options. onlyActiveItems and sorted. For sorted, we’ll also create a Sort object to actually do the sort for us. And we’ll also create an array to hold our filtered/sorted list of items. Note that we add an event listener for the COLLECTION_CHANGE event. This is how we’ll propogate changes from the data model to our adapter. We’ll see the handler for that later.

 public  AdapterExample extends EventDispatcher
    {
        protected var model:DataModelExample;
        protected var filteredDataItems:ArrayCollection = new ArrayCollection();
        protected var _onlyActiveItems:Boolean;
        protected var _sorted:Boolean = false;
        protected var sort:Sort;        

        public function AdapterExample(dataModel:DataModelExample, onlyActiveItems:Boolean, sorted:Boolean)
        {
            _sorted = sorted;
            _onlyActiveItems = onlyActiveItems;

            model = dataModel;
            model.myDataItems.addEventListener(CollectionEvent.COLLECTION_CHANGE, onItemsChanged );    

            if(sorted)
            {
                sort = new Sort();
                sort.fields = [new SortField("name",true)];
            }

            rebuildFilteredArray();
        }

Notice that we called rebuildFilteredArray above. Lets write that next. All this method does is loop through our data model and grab all the items from it (respecting our filtering option) and adds them to our internal array. It also applies the sort if neccessary. At the end we dispatch two events which will be used for binding later.

  protected function rebuildFilteredArray() : void
        {
            var tmp:Array = [];
            for each ( var item:DataItemExample in model.myDataItems )
            {
                if( (! _onlyActiveItems ) || (item.active) )
                {
                    tmp.push(item);
                }
            }                        

            filteredDataItems = new ArrayCollection(tmp);

            if( sort )
            {
                filteredDataItems.sort = sort;
                filteredDataItems.refresh();
            }

            dispatchEvent(new Event(”dataItemsUpdated”) );
            dispatchEvent(new Event(”totalChanged”) );
        }

So now if we made an adapter it would start up, read in the source data model, and populate our internal array of items. But it wouldn’t respond to changes in the source data model. So lets create the event handler that we set up in the constructor. We’ll also create a couple helper methods

    protected function onItemsChanged(event:CollectionEvent):void
        {
            switch(event.kind)
            {
                case CollectionEventKind.ADD: addItems(event.items); break;
                case CollectionEventKind.REMOVE: removeItems(event.items); break;

                case CollectionEventKind.MOVE:
                case CollectionEventKind.REFRESH:
                case CollectionEventKind.REPLACE:
                case CollectionEventKind.RESET:    rebuildFilteredArray();
                                                break;

                case CollectionEventKind.UPDATE:  

            }

        }

        protected function addItems(items:Array):void
        {
            for each ( var item:DataItemExample in items )
            {
                if( (! _onlyActiveItems ) || (item.active) )
                {
                    filteredDataItems.addItem(item);
                }
            }
            dispatchEvent(new Event("totalChanged") );
        }

        protected function removeItems(items:Array):void
        {
            for each ( var item:DataItemExample in items )
            {
                var index:int = filteredDataItems.getItemIndex(item);
                if( index != -1 )
                {
                    filteredDataItems.removeItemAt(index);
                }
            }
            dispatchEvent(new Event("totalChanged") );
        }

For adding/removing items we’re going to our internal array and manually adding or removing items from it. We’re making sure to account for filtered items, but the sort object is taking care of the sorting for us.

For the other types of events, we’re kind of cheating. We only really care about adding / removing operations so we’ll just rebuild our entire internal array on other types of events. If your application uses those types of events often, you should implement them in the adapter in a more efficient manner.

Exposing data from the Adapter

We now have the internal state of the adapter updating as the model changes. So the only thing left to do in there is expose some properties so we can get at that info from our view. Let’s write two bindable getters. One of them will summarize the data (get total()) the other will give us our filtered list (get dataItems())

Note that we set the event=”" property in the [Bindable] tags so our views can correctly know when these properties change.

  [Bindable(event="dataItemsUpdated")]
        public function get dataItems() : ArrayCollection
        {
            return filteredDataItems;
        }

        [Bindable(event="totalChanged")]
        public function get total() : Number
        {
            var total:Number = 0;
            for each ( var item:DataItemExample in filteredDataItems )
            {
                total += item.amount;
            }    

            return total;
        }

Using the Adapter

Once you’ve done all of that, you can actually use your adapter. So create your data model, create your adapter, and use it!

 [Bindable] protected var dataModel:DataModelExample = new DataModelExample();
 [Bindable] protected var example1:AdapterExample = new AdapterExample( dataModel, true ,true);

…

    <mx:Panel x=”10” y=”218” width=”250” height=”200” layout=”absolute” title=”Filtered, Sorted“>
        <mx:Label x=”10” y=”132” text=”Total:“/>
        <mx:Label x=”56” y=”132” text=”{example1.total}“/>
        <mx:List x=”10” y=”4” width=”210” height=”120” dataProvider=”{example1.dataItems}” labelField=”name“></mx:List>
    </mx:Panel>

If you look at the source of the example, we actually create 4 adapters with varying options.

Beyond this basic example

If you want your adapter to respect changes to individual items, your items should implement the IPropertyChangeNotifier interface. So in our example if we edited an item so it’s active flag changed, the views would not update. To make that work we would implement that IPropertyChangeNotifier interface, and then write some code for the CollectionEventKind.UPDATE event.

Often times only one or two views are visible at a time and it’d be nice if all the views in the background weren’t madly updating themselves every change. To accomplish that I often write an enable() disable() method on the adapter. They usually look something like this:

protected function enable() : void

{

model.myDataItems.addEventListener(CollectionEvent.COLLECTION_CHANGE, onItemsChanged );

rebuildFilteredArray();

}

protected function disable() : void

{

model.myDataItems.removeEventListener(CollectionEvent.COLLECTION_CHANGE, onItemsChanged );

}

So What is it about?

The book does a few things.  First, about a third of the book introduces you to some open source tools for doing flash development.  Things like FlashDevelop, MTASC, SwfMill, ANT, and ASDT.  It’ll show you how to create an AS2 and an AS3 based flash application using completely free and open software.  This goes all the way from installing the tools, creating a sample app, writing up some unit tests for it, and then to publishing it to the web.  Along the way it’ll give you a brief introduction to each tool, explain what it does, and then give a quick example of how to use it.  (That’s the 5 chapters I wrote)

The remaining 2/3 of the book dedicates a chapter to various open source projects going into a little more detail about them.  There’s a chapter on Papervision 3D, SWX, FUSE/Go, HAXE, AMFPHP, two for Red5 and a couple more.

This was a lot of fun to work on, and my only regret is not getting to know the other authors better.

If you’re looking for a place to buy it, check out Bookpool.   I worked for them for a year and they’re really stellar guys.  They offer good prices, but more importantly;  as long as the book is in stock, they do their damndest to get it on a truck the day you order it. (Of course, you’re at the mercy of the publisher if it’s out of stock)

• Run the application (Flex application with view-source enabled)
• Creating a simple diagramming application (14 Minute Video)

We added a

var options:Object = canvas.prepareToPrint( canvas );

Before the print and a

canvas.finishPrint( options, canvas);

After the print, and it seems to have solved our problem even though the documentation says we shouldn’t ordinarily need to explicitly call those.

The XRayViewer has been broken for quite some time. I had originally done it with an AIR beta, and that has since stopped working. So there’s now a newly compiled version just waiting for you to grab.

What is the XRayViewer?

So you may be asking yourself What exactly is the XRayViewer?

All this little app does is host the XRay connector and let you load a local swf. Then it displays the swf with some simple controls to play/stop/advance/back. The big benefit is you can then use XRay (By John Grden + Others) to inspect the swf without changing any code around.

There’s three new (very minor) features in this version:

1. There’s a button to launch the XRay interface in your default browser.
2. The path to the loaded swf is displayed in the top toolbar. (You can copy & paste that into Xray so you don’t have to navigate as far into the hierarchy)
3. New logo / icons

Now Open Source!

The entire project is now licensed under the MIT license. If you install the application and then right click on it you can “View Source” to get the source code for it.

I haven’t blogged about AgileAgenda in a while on purpose since it seemed I was doing it far too often and was turning this blog into a big Ad instead of the resource for developers that I had meant it to be.  But I’ve done good with only a single post in the past five months, and I hope you’ll indulge me for a moment with this one.

We just released a new version, and it has a feature that a lot of customers have been asking for.  Far improved Basecamp integration! You can now connect to an SSL powered Basecamp install, and you can also now associate AgileAgenda resources with Basecamp contacts to automatically assign the Todo items. This is a huge jump in the integration between these two products and I’m really excited about it.  We also streamlined some of the synchronization so it all happens a bit faster.  You can read all about it here.

In the future, I’ll be exploring other services to integrate with.  At my day-job we’re beginning a QualityCenter rollout, so that may be on the list.  Along with that, I’ve always had plans to be able to export to Google Calendar.  Working with third party API’s really excites me since it’s a way to add a huge chunk of functionality (and customer value) very easily.  Any other ideas?

That really gets me thinking about interchangeable data on the web and how good it is for end users. With that in mind, I hope to be able to release the AgileAgenda integration API sometime this summer that would allow other applications to integrate with AgileAgenda.  That’s going to take some serverside rework, but that’ll need to happen eventually for other reasons. Before that, we’ll start publishing RSS feeds of schedules so external programs can at least start consuming data from AgileAgenda.

The example application has source attached, and is licensed under the MIT license.  I hope someone can take it and make some really great application out of it.  Please drop me an email if you do!

I recorded a practice-run I did, so here it is…

• Run the application (Flex application with view-source enabled)
• Creating a simple diagramming application (14 Minute Video)

So first, here’s what I want out of this…

I want a development environment which I can very quickly develop web based applications with. I need something that lets me do the most common web things very quickly.  I’m not afraid of writing Java for complex stuff.  (but really, how often does a web app have to do something really complex?)

Now, some questions that perhaps any readers out there might be able to help with…

Can you suggest where a CFML newbie should look to get started?  I ordered the first two volumes of ColdFusion 8 Web Application Construction Kit to get started already.  What blogs / websites / etc. should I visit regularly?

If I’m gonna go with an Open Source solution to start, OpenBD, or Railo?  In case it matters, eventually I’ll need it to run within JBoss and serve through Apache via an AJP connection back to JBoss.

What dev-environment do most people (on OSX) use for CFML?  Dreamweaver?  TextMate?  cfeclipse?  Since I’m also doing Flex stuff, the Eclipse based solution sounds appealing.

A quick look inside the OSX bundle confirmed it, a use of ObjectHandles. This psyched me up, it was the first time I "accidently" found a use of one of my projects while doing my normal daily stuff.  Looks like an older version since I noticed a couple bugs that have since been fixed, and there’s some custom behavior added in.