The ESRI Flex Sample Viewer is a great starting point for creating map centric RIA’s. The widgetized nature of the starter kit facilitates significant re-use of components, and there are a couple dozen plug-and-play components available from the Flex Code Gallery. Woot!

The downside of this ease of re-use is that we are seeing a new wave of cookie cutter sites out there. It’s great that these sites can the whipped up so quickly, but it’s pretty clear that (for the most part) little or no thought is given to how the user should interact with the site. We see hordes of menus and tons of widgets, all gloriously trying to pseudo replicate ArcMap. Let’s be clear – if your users need ArcMap, give them ArcMap. If they actually know the data model to the point that an ad-hoc query tool will be useful, chances are they will need more functionality than you can build into the Flex app anyhow. Right tools, right place and all that…

Where was I… oh yeah… remixing the sample viewer. When I’m designing an application, I want to build it as focused as possible. Every mouse click and menu drop down I can remove, the better it is for the user. So – here are a few of the things that I wanted from a UI/behavior perspective…

• I want top level menu items that do something on-click. I don’t want a pull down with a single item on it – I want a print icon that opens the print dialog when it’s clicked.
• The shortcut menu is a great idea, but I want to have things that “only” appear on the short cut menu. Having something in two places in a UI is counter intuitive in most cases, and wastes UI space.
• I want to have a limited set of base maps available, and I want them to be displayed as top level icons on the menu. Clicking them will turn on the layer. Active layer should have a “glow” indicating that it’s… well… active.
• I want widgets that can’t be closed. One thing I’ve seen when letting clients run a Flex app is when they close widgets they are confused about how to re-open it. Thus I want a sub-type of widget that can only be minimized and not closed.
• I want a full width banner across the top of the page – providing more room for top level items.
• I want a search box in the top banner so it’s easy to search.
• I want a zoom to / book mark tool on the top bar so it’s easy to jump to commonly accessed extents

And I want all the same level of flexibility in terms of configuration, and the ability to leverage existing widgets. Now.

Design Sketches

In coming up with this list of things I wanted, I did some sketches…  (apparently my scanner is crap!)

In the past I’ve used visio or balsamiq to create wireframes, but more recently I’ve been getting back into sketching simply because it’s so fast. I’ve been using Jason Robb’s wireframe templates as a starting point (article and direct download of pdf).

More Tile Caches…

Since ESRI is changing their caches over to Web Mercator, I wanted to start working with some web mercator tile caches. ESRI has *some* services available now (google search here), but realistically most of these are pretty weak for base maps. So, I created tile layers for OpenStreetMap and CloudMade. Once I finish a few tweaks to these layers (need to display the copyright statements on the map) I’ll release them – likely to the ESRI Code Gallery, but I also want them on a SCM somewhere. Maybe GitHub? Thoughts?

Let’s take a peek…

Things are not fully dialed in yet, and I really need to focus on detailing this out for my client, but this is the generic starting point. I’ll post some live links when my client’s site is ready for beta testing.

This shows the full width banner, the address search, zoom to drop down (needs skinning), an “Always Open” widget, the two base map icons, and the top level print widget. The tiles are from the CloudMade Midnight Commander cache.

This one shows the locate dialog that’s opened by running a search from the banner bar. As you can see there are still a few issues with this widget. Since “locate” is not the key focus of the app, this widget can be closed. I’m also going to work on the actual search logic – right now it’s parsing out the address based on commas, and then sending to the ESRI geocoder. I may look at using another service that has more matching logic on the back end so I don’t have to figure out how to de-construct the address.

This shows the print widget, accessed by just clicking the printer icon (no drop down required). Oh, and the Open Street map cache in the background.

What’s nice about this is that the user does not need to go digging around in menus to access the functions they need. This template will be used for very focused applications – do one thing, and do it well is the mantra for the project – and so keeping things up front will really help out.

Behind the Scenes

So – the real question is – can we share this? Good question! I’ll be blogging more about how we (big shout out to Jeff Germain who whipped up the “toolbars” stuff) created various aspects of this, and at the very least, you can re-implement most of this stuff pretty quickly. We had to hack at the core of the Sample Viewer (specifically ControllerManager.as) and added a bunch of additional controls for our “toolbars”. At this point things are “working” for the scenarios we need right now, but I suspect we’ll have some refactoring in our future. I’ve got at least 3 apps that will build on this, and by the time all 3 are released, we should have tracked down all the weirdness, and have something that supports all the out-of-the-box Sample Viewer stuff, as well as our extensions. Stay tuned!