View slides as PDF

I’ve accepted the honor of speaking at this year’s conference and will be speaking on JavaScript on Wednesday at 10:50am. As you probably know, the Adobe community has really been shaken up over the last few months. Adobe’s position on Flash and Flex has morphed and many engineers are taking a closer look at other technologies. While JavaScript holds a stigma of being a red-headed step-child from the same orphanage as ActionScript 1, many see it as the inevitable future of the web. While the language hasn’t evolved much, libraries and patterns have shaped up to help provide an environment conducive to building robust, dynamic enterprise apps. We’ll discuss these libraries and patterns, learn how they relate to Flex, and make a comfortable home away from home.

Many of the concepts will be pulled from the JavaScript architecture series I recently started. Also, while I am a software engineer at Adobe, my thoughts are my own and do not represent those of Adobe.

Collection Structures

First of all, there are a few “list-like” data structures that you should be aware of. I’ll cover some of the basics of each. I’m going to omit some classes and details for simplicity.

• Array – A list/collection of objects.
• ArrayList – Wraps (does not extend) an Array and adds event listeners to all of its items. When the items inside change (are added, removed, or one of their properties is modified), the ArrayList dispatches events so that a component like a List or DataGroup can know it should update its view.
• ListCollectionView – Wraps (does not extend) an ArrayList and adds sorting, filtering, and cursor functionality. When a filter is applied, all the items remain intact under the hood, it’s just that they’re not “seen” (hence why it’s called a collection view) by outside code. In other words, if a component uses a ListCollectionView as its data provider and the ListCollectionView has a filter, only items passing the filter criteria will show up in the component.
• ArrayCollection – Extends ListCollectionView and allows you to set its source using an Array instead of an ArrayList. Technically, it just takes the Array and wraps it in an ArrayList for you. The ListCollectionView code takes it from there.

This is the basic relation of these structures. Now let’s look at a couple flex collection interfaces and how they fit in.

• IList – Spark dataprovider components (List, DataGroup, ComboBox, etc.) take IList structures only. IList provides basic access and manipulation methods based on index and, though the interface can’t enforce it, IList objects generally dispatch CollectionEvent.COLLECTION_CHANGE events to notify the components when internal items have changed so the components can update their views.
• ICollectionView – Provides methods and properties for filters, sorts, and cursors.

Now let’s bring this all together.

An Array does not implement IList. This means you can’t use it directly in a spark data provider component. Even if you could, if any of its objects were added, removed, or modified, the component would not know about it because an Array doesn’t dispatch events.

ArrayList does implement IList. This means it can be used directly as a data provider component. If you want to send an Array into a spark data provider component and keep things as light as possible, you can wrap it in an ArrayList and send it in. As I said before, ArrayList handles dispatching the events needed for the component to be aware of any changes. One potential downer about ArrayList is it doesn’t support for…each loops.

ListCollectionView also implements IList and also implements ICollectionView. I said before it wraps an ArrayList. While that’s generally true, it really can wrap any IList. So, it’s an IList itself (so it can be used as a data provider) and it wraps another IList. ListCollectionView extends Proxy and adds the needed proxy functions to support for…each loops. In the end, if you don’t need sorts, filters, or cursors, the ListCollectionView is likely extra baggage.

ArrayCollection extends ListCollectionView which likewise means it implements IList and ICollectionView and inherits ListCollectionView’s functionality.

I’ve explained these things so you (1) will have a better understanding of what you’re using, (2) can make more efficient use of the structures, (3) and can make structures of your own that better suite your needs.

Chaining Collections for Separate Presentation

One other reason is because it comes into play in a common problem I’ve seen in Flex apps. Here’s an all-too-common scenario: an app loads a list of widgets from the server as an ArrayCollection which it then places on a model that’s generally available in the app. In the store portion of the app, users can filter widgets by name by typing in a filter text input. When the user types a few characters, the store filters the ArrayCollection (the original one pulled from the server) down to only those widgets whose name matches the user’s input.

At this point or shortly thereafter, some code somewhere else in the app inevitably expects the ArrayCollection to not be filtered. Maybe it’s a different view in the app that always shows all widgets–or at least is supposed to. Because the ArrayCollection has been filtered and is shared in both views, both views show the filtered widgets.

Or…maybe some code in another portion of the app attempts to access one of the widgets from the ArrayCollection. If the widget it’s trying to access has been filtered from of the ArrayCollection’s “view” (not to be confused with a user interface) by the store, there are going to be issues.

So, what’s the solution? Use a separate ICollectionView when supporting sorts or filters that shouldn’t affect other parts of the app. The underlying data model for the view, however, can be shared. In the example, you would instantiate a new ArrayCollection or ListCollectionView and set the list property using same the list which the original ArrayCollection wraps. Since both ICollectionViews now wrap the same ArrayList, if you add or remove an object from the original, app-wide collection it will also do likewise on the store-only collection. However, if you set a filter or sort on the store collection, it will not apply the filter or sort on the app-wide collection. This is exactly what we want.

Code says a thousand words, so let’s see this in action.

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
					   xmlns:s="library://ns.adobe.com/flex/spark" 
					   xmlns:mx="library://ns.adobe.com/flex/mx"
					   initialize="createBaseCollection();">
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.collections.ListCollectionView;
 
			[Bindable]
			protected var baseCollection:ArrayCollection;
 
			[Bindable]
			protected var filteredCollection:ListCollectionView;
 
			protected function createBaseCollection():void
			{
				baseCollection = new ArrayCollection();
 
				for (var i:uint; i < 100; i++)
				{
					var widget:Widget = new Widget();
					widget.name = "Widget " + (i + 1);
					widget.price = Math.random() * 100;
					baseCollection.addItem(widget);
				}
			}
 
			protected function createAndFilterSeparateCollection():void
			{
				filteredCollection = new ListCollectionView();
				filteredCollection.list = baseCollection.list;
 
				filteredCollection.filterFunction = filterWidgets;
				filteredCollection.refresh();
			}
 
			protected function filterWidgets(item:Widget):Boolean
			{
				return item.price > 50;
			}
 
			protected function addWidget():void
			{
				var newWidget:Widget = new Widget();
				newWidget.name = 'NewWidget';
				newWidget.price = 90;
				baseCollection.addItemAt(newWidget, 0);
			}
		]]>
	</fx:Script>
 
	<s:layout>
		<s:VerticalLayout/>
	</s:layout>
 
	<s:Button label="Create Filtered Collection" click="createAndFilterSeparateCollection()"/>
	<s:Button label="Add Widget" click="addWidget();"/>
 
	<s:HGroup>
		<s:List dataProvider="{baseCollection}" labelField="name"/>
		<s:List dataProvider="{filteredCollection}" labelField="name"/>
	</s:HGroup>
</s:WindowedApplication>

In the code sample, we see our baseCollection being created within createBaseCollection(). This represents the ArrayCollection that’s being shared throughout the app. This doesn’t need to be an ArrayCollection; it could just be a ListCollectionView or ArrayList. The baseCollection then shows up in the left list component. When you click on the Create Filtered Collection button, it calls createAndFilterSeparateCollection() which creates a separate ListCollectionView using the underlying ArrayList that baseCollection is using.

This is important. This is a new, separate collection view for the same underlying data model. When this new collection view is filtered, it doesn’t affect baseCollection. This means the left list component will show all widgets while the right list component will show a only a subset of the widgets. But, because they use the same underlying data model (ArrayList), if we add a widget to baseCollection, baseCollection will add it to the underlying data model, which will notify filteredCollection. If filteredCollection finds that the widget passes the currently applied filter criteria, the widget will show up in its collection view. This is why, if you click the Add Widget button, you will see the new widget show up in both list components even though addWidget() is only directly adding the widget to baseCollection.

I hope this helps someone out there avoid collection view woes in their app. Be sure to add a comment if I messed something up or you have a question. Good luck!

What is it?

RedLiteGreenLite is a small, simple app that allows a group of people to communicate the status of something. The status can be either red or green and the subject can be whatever. That may sound a bit general, but that’s the point. It can be used for whatever purpose your crazy mind can come up with. I’ll get you started:

1. At work, we have a single shower and a lot of shweaty guys after soccer. So we know when the shower’s available, someone can turn the status red when he enters the shower and turn it green when he exits. This way nobody has to keep stopping by the shower to see if it’s available. When it’s green, it’s available. When it’s red, it’s not.
2. At a call center, representatives are split into groups. When one group is on break, no other group is allowed to go on break. Again, when the status is red, a group is on break and other groups must continue attending the phones. When the lite is green, the next group is free to take a break.

The process is pretty simple: join a group. Other people join the same group. When others in the group change the status, you’ll be notified. When you change the status, others in the group will be notified. The status of the group will be persisted across sessions. In other words, if everyone logs out and then logs back in a week later, the status will remain as it was the last time it was set.

There’s no need to explicitly create a group. When you attempt to join a group, the group will automatically be created if it does not already exist.

The app is free. As in free free.

What technologies are used?

RedLiteGreenLite has a client portion and a server portion.

The client is the app users download and install on their computers. It’s built in Flex and published for AIR. It uses the RobotLegs MVCS framework and makes use of AMF remoting and messaging.

The server portion is built in Java using BlazeDS and is hosted on Google Apps Engine.

Ooh, that’s simply juicy. Tell me more.

Don’t mind if I do. First of all, BlazeDS is an open source implementation of AMF-based remoting and messaging. Natively it’s not compatible with Google Apps Engine, but I wanted to use GAE because it’s extremely scalable, it’s free (let’s be honest–I’m cheap like that–this is the main reason), and I wanted the challenge.

To get BlazeDS working on GAE, I recommend following Martin Zoldano’s blog post. Not only does he outline the steps you’ll need to take but he provides a critical patch to flex-messaging-core.jar as well. While you can find this patch re-distributed elsewhere, I recommend posting a comment requesting that he email you the patched jar. That’s how he seems to want to distribute his patch and I respect that. He’s really helpful and quick to respond so it shouldn’t be much trouble.

Once BlazeDS was set up and configured, I started to plan the architecture. First of all, I needed one client in the group to be able to send a message to the rest of the clients in the group. This could be achieved through the messaging service BlazeDS provides. However, messaging doesn’t store state; it just redistributes messages to clients. I needed the group’s status to be persisted to storage so (1) when a new client joins a group it can retrieve the group’s current status and (2) the group’s status can be retained even when no clients are connected.

By default, BlazeDS’s messaging configuration uses ActionScriptAdapter to receive and distribute messages between clients. It doesn’t persist messages. To do so, I extend ActionScriptAdapter and persist the status to Google Storage before sending the message out to the other clients. When clients connect to BlazeDS, they use remoting (not messaging) to retrieve the most recently persisted status for the group. After the initial status is retrieved, the client talks to other clients using the messaging service. You can see how this is set up in messaging-config.xml and PersistentASAdapter.java in the server code.

While GAE has been really nice to get the app up and running, it does have its downsides. To send messages between clients, BlazeDS can use a few different techniques:

• Simple polling. The client, at a standard interval, simply asks the server if there is any new information. The server responds to the request immediately regardless of whether there is new information.
• Long polling. The client sends a request to the server. The server holds onto the request until it has something useful to tell the client at which time it sends back the response.
• Streaming. The client opens an HTTP connection and the connection remains open. The server shoots messages down the connection whenever it has something to say. It’s an “infinate response”.

While each approach has its pros and cons, simple polling leaves a lot to be desired as it creates a lot of HTTP traffic. Unfortunately, from my testing and research, GAE doesn’t seem to support either of the other two methods. But hey, it’s free. If any of you have a java environment and would like to host RedLiteGreenLite so we can step up our game, let me know.

Last but not least, RedLiteGreenLite is open source. I’d love for you to fork the project and do something cool with it.

Now go have fun! Install the client using the badge at the top of the post or fork the project using the link below.

ImageInspector works with images of any aspect ratio. Also, you’ll notice the picture-in-picture will size itself to the aspect ratio of the image. Just set maxWidth and maxHeight and it won’t get larger than those dimensional limits.

The focal point is maintained during scaling. For example, zoom in, move the focal point to the corner of the image, zoom out, then zoom in. Notice that, as you zoom out and in, the focal point is maintained as much as possible.

The focal point and relative scale are both maintained during resizing. For example, if an image inside ImageInspector is at 200% of its “fit” size, ImageInspector is 100% width and height of the window, and the user starts making the window larger, ImageInspector will continue to scale up the image inside it, attempting to keep it at 200% of its “fit” size. Likewise, the focal point will be maintained while resizing the window as well.

Right-click the demo app to view the source. The app might take a little while to load because it contains two embedded high-res images.

I present the container panner. It’s a single class. Instantiate it and set the container property. That’s it. If you want, you can toggle the panning functionality and set custom cursors. Right-click to view the source. Go make something crazy.

Effective immediately, I’m extending an invitation to all Quiznos franchisees to contact me for employment as a Quiznos Cup Dancer. But here are my demands:

• I must wear the Quiznos cup (illustrated here).
• I must pay you, Quiznos, the hourly wage you would normally pay a Quiznos Cup Dancer.
• I must wear it for a single hour, after which I may and will terminate my employment.
• I must commit my full efforts to provide the best Quiznos Cup Dance you have ever personally witnessed.

Contact me. I’m waiting. Little Caesars franchisees need not apply.

First, the demo application for queuing and caching. Keep in mind that images loaded into the application will be cached in the browser, so depending on what you’re wanting to test you may need to clear your browser cache between tests. Right-click the application to access the source.

Second, the presentation slides. Here they are as a “slidecast” but they’re a little different than the live ones. I think the live video will be made available shortly so if you’re looking for that check back later. Also, this slidecast was made through SlideShare and their audio-syncing tool is a little limiting so the audio might get unsynced for a moment. In any case, enjoy!

This year, yours truly will be presenting the topic Queue N Cache. With a name like that, I’m sure flexers worldwide will be scrambling for a seat. I know I know, you’re thinking, “Queuing and caching? That oughtta be a party.” No. It’s Queue *N* Cache and that’s one party that runs year-round. Oh sure, we’ll talk a little about the ho-hum of your grandma’s queues and caches, but this is where rubber meets the road with real-world projects and situations where queuing and caching can achieve greatness. Have you ever sat back and wondered:

• How could I improve user experience by paying more attention to the user’s focus?
• How could I have greater control over my service calls and asset loaders? Timeouts and retries? Call me crazy.
• How could I decrease memory usage and processing load by sharing image data?
• How could I increase responsiveness through improved data management?
• How could I show progress of shared image data in multiple locations?

If you can’t make it (Tuesday @ 2:30) or just can’t get enough, I’ll post my slides and code after the preso and you can dig in to your heart’s content. See you there!