Flex SDK 3.1 and Flex Builder 3.0.1 Released

Matt Chotin has posted an article about the release of the latest version of the Flex Builder version 3.0.1. This Flex Builder update includes the Flex 3.1 SDK along with a number of bug fixes and certified versions of the professional data visualization and testing components.

To manually initiate an update to Flex Builder using the Adobe Updater, open Flex Builder and go to Help > Search for Flex Builder Updates…

Crumbline Navigation

Crumbline navigation has been around for a long time. The first instance I can recall was when Hansel and Gretel used a Crumbline of pebbles to navigate their way out of the forest. It was only when they used bread crumbs instead of pebbles did they become lost.

Crumblines are a great way for uses to navigate through the UI especially if the UI contains wizards and or drill downs. It provides instant feedback to the user in relation to the depth and direction of their navigational choices.

Uses can then step back to the exact position they want by selecting the specific crumb at any given time.

This is an example I created in Flex 3 to illustrate the Crumbline Navigation in it’s most simplistic form.

This component takes in a collection of Crumb Objects.
The Crumbline then dispatches “crumbEvents” when a crumb item is selected, letting the view dictate how it handles the navigational change.

eg.


In this example I used a simple viewstack and bound this to the Crumbline using it’s selectedIndex property.



A demo of this can be seen here

Special thanks to the Brothers Grimm for the Crumbline model.

Mac and PC working together with Synergy

I’m running both a Mac and PC in my current development environment. I’ve got some software on both platforms that I use that gotten around to port accross to either the mac or pc. Another benefit is browser testing for any type of css/HTML work.

This nifty piece of software called Synergy allows you to share your mouse across multiple machines. It also allows copy and paste although with a PC/MAC combination bitmap data is not yet supported so only text can be stored on the clipboard at the moment.

You can download the software here and you’ll need to allocate a server and the clients that connect to it.

For those fence sitters out there that can’t decide which platform to use this may be a solution 🙂

Removing the theme color from the Flex TileList

There have been a number of occasions when the designs for a UI implements some kind of grid layout to display its items. This is fairly simple to implement in flex by utilising the Flex TileList component. However more often than not the List’s item renderers are required to look after their own states. In this case the TileLists Indicators are no longer required.

I have found the easiest way to remove the TileLists indicators is to set the ThemeColor to the background color of whatever the List is being displayed on. But what happens if the background contains an image or has a transparency value?

To do this you need to override the TileLists drawSelectionIndicator and drawHighlightIndicator methods.


override protected function drawSelectionIndicator(
indicator:Sprite, x:Number, y:Number,
width:Number, height:Number, color:uint,
itemRenderer:IListItemRenderer):void
{
/* we don't need to do anything in here*/
}
override protected function drawHighlightIndicator(
indicator:Sprite, x:Number, y:Number,
width:Number, height:Number, color:uint,
itemRenderer:IListItemRenderer):void
{
/* we don't need to do anything in here*/
}

Notice that the body to the above methods are empty. This is because we don’t want the indicators to draw anything behind the renderers when the state changes.

Now just don’t forget to cater for this inside your TileList’s item renderer else the user will get confused as to which item is selected and which item their mouse is over. We wouldn’t want that would we 🙂