Mashing up Flex in Australia

I recently found out about a competition being held in Australia, by the Government 2.0 Taskforce called Mashup Australia. This taskforce, as taken from their Terms of reference.

will advise and assist the Government to:

  • make government information more accessible and usable -- to establish a pro-disclosure culture around non-sensitive public sector information;

  • make government more consultative, participatory and transparent -- to maximise the extent to which government utilises the views, knowledge and resources of the general community;

  • build a culture of online innovation within Government -- to ensure that government is receptive to the possibilities created by new collaborative technologies and uses them to advance its ambition to continually improve the way it operates;

  • promote collaboration across agencies with respect to online and information initiatives -- to ensure that efficiencies, innovations, knowledge and enthusiasm are shared on a platform of open standards;

  • identify and/or trial initiatives that may achieve or demonstrate how to accomplish the above objectives.

The Mashup Australia competition was created to emphasis this and provide a practical demonstration of the benefits of opening up sets of their data.

There was quite a large amount of data sets available albeit some not exactly in the most usable format. It was a great way to make the public aware that this data exists, and for us as developers to have fun with how this data could be presented.

I spent a few days on a couple of entries, using flex and flash for the UI. It would have been nice to have a bit more time to test them and to add a few more bells and whistles.

1.

The first idea I had was called the GCI PhotoHUB. Because a number of Government Cultural Institutions publish their photographs onto flickr I thought it would be nice to have a central application to be able to search/view these common image sets.

I used the neat as2flickrlib API however I did realise that the commons API was not included in the lib so I had to write one myself for getting that particular piece of information.

I wanted to create something that was intuitive for the end user and something a little playful for them to interact with.

This is the entry here


2.
The second idea was to create more visually digestible way to display crime statistics in Australia. I chose a number of methods for this which included primarily a map overlay, secondary - charting components, thirdly - a raw data set. I felt that this would give the end user 3 options depending on what they felt comfortable with.

The initial UI was changed slightly after working through some UX concepts from a good friend of mine who works as a UX consultant.

There were a number of design cues including the map indicators taking reference from police lights as well as the font chosen for the map overlay to help with the overall theme.

The data set provided was in the form of an xls document. Because .xls documents aren't exactly the best format for web applications. I created a webservice to read the xls file and serve up the data as both a ColdFusion query set as well as a call to return XML. Making the data much more useful for both Flex and potentially other developers eventually.

This is the entry for crimewave here

Both these apps were built in quick time so I'm sure there will be a couple of bugs crawling around :) so if you find one feel free to let me know. Overall it was a fun way to utilise this newly exposed data from the Government and even a better way to expose it using Flex as the tool.

Who should know about RIAs

During the times when I'm attending an event that is non-IT related people ask me what I do for a living. Most often then not when I tell them that I build RIAs for companies they tend to get a glazed look over their face. It's similar to the look of an original flavoured Krispy Kreme glazed donut, and where the eyes loose focus and start filtering out to the background. Worst case scenario is when I need to snap my fingers three time and tell them to return back to the conversation.

Most of the time I can prevent the "Krispy Kreme Look" by explaining to them the concept behind the RIA or Rich Internet Application. Once I do that the penny normally drops and they can name a couple of examples, most commonly TweetDeck and Twirl. These are two of the most downloaded Flex and AIR applications, and have done well in exposing the RIA to the broader community.

I think it's important for us in the RIA space to be pushing the concept and benefits of RIA to the general public. From acceptance breeds growth, and in the digital realm RIA acceptance still has a little way to go.

In Australia recent studies have shown the amount of money spent in the digital arena is ever increasing. When compared to annual profit, the amount of money spent in digital is still rather small, even though online customer growth is increasing. It's this statistic which had me thinking about the acceptance of RIAs in companies and them willing to invest in technology to help with their revenue stream. As the more a company spends in the digital environment the higher the margin of profit, it makes sense to invest in RIAs.

As customers migrate towards and expect more from companies in terms of digital services and experience. A companies customer service is no longer not only judged by the smile of the shop assistant or the friendliness of the wait staff but also by it's online service. This is where well planned and executed RIAs excel, engaging the user, holding their hand through a complex task, giving them the information when they want it without hassle. The RIA doesn't call in sick, steal money from the till or wake up on the wrong side of the bed, things that we have to deal with day to day with traditional customer service.

The technology is not important but the idea behind it is and it's something that us working in the RIA world need to push, not only towards business managers but to the general public, the end user or customer.

As they say the customer is always right and by raising their awareness to RIAs it can not only benefit everyone involved but also the overall growth of the digital space.

Catalyst could save you time

I've just come back from attending the Brisbane leg of the Australian Adobe User Group. It showcased the new features and overall direction for the development suite of products which included the new Flash Catalyst, Flash Builder, Flex 4, Cold Fusion 9 and Bolt.

I was really interested in Catalyst as it's something that I could see a lot of benefit in using personally.

Adobe has made a conscious effort to further improve the work flow between designer and developer which the introduction of Catalyst.

A tool to help create interactive user interfaces transitions and all, without having to worry about a single line of code. It also enables the user to port this directly into flex for the developer to turn this into an application.

By having something like Catalyst can remove the steps involved going back and forth between Interactive Designer and Developer as the explanation of transitions and state changes are nutted out in the design stage for the developer to see. Of course this is the ideal scenario and we all know it never exactly works out as smoothly as that.

For a designer it can eliminate the need to provide multiple screen shots of piece of interaction and the need further explain your concepts through emails, phone calls, power point presentations, smoke signals or interpretive dance.

It's still in Beta so I'm sure there will be many more tantalizing features to come but so far it's looking great. Overall I can come away from the user group meeting knowing that Adobe is indeed heading in the right direction. They have identified the need to streamline the design/development work flow, as well as further enhancing an existing suite of core products.

Having said that I still think a developer that can touch type could save you more time :)

You can download the beta version of Catalyst from the Adobe Labs here

I think I might try a Swiz

After talking to a friend about frameworks and so forth. He mentioned the Swiz framework after incorporating it in a project he was currently working on. Being a dedicated Cairngorm guy I couldn't say that I had looked at Swiz before but from what I had heard it sounded like something that may be useful in the future. I had also thought it would make a great name for a cocktail "Excuse me bartender fetch me another Swiz"...

[More]

Flex Image Viewer

For Christmas last year I received an airbrush which was I was totally ecstatic about. When I've had time I've tried to keep the creative juices flowing. I thought it would a good chance to create a quick image viewer to combine Flex and Air(brushing).

It's XML driven and uses Flex's inbuilt animation properties to shift between indexes. The navigation is bound to the selectedIndex property of the image viewer.

[More]

Issue with AIR after installing Flex 3.0.2 Updater

After just installing the Flex 3.0.2 Updater the AIR project that I was working on didn't quite agree with my proactive decision.

Upon debug it was throwing the error.

Process terminated without establishing connection to debugger.

Command:

"/Applications/Adobe Flex Builder 3/sdks/3.2.0/bin/adl" -runtime "/Applications/Adobe Flex Builder 3/sdks/3.2.0/runtimes/air/mac" /workspace/theAirApp/bin-debug/theAirApp-app.xml /workspace/theAirApp/bin-debug

Output from command:

error while loading initial content

This issue has been logged with Adobe with the work around being to modfiy the namespace in your AIR applications-xml file to use 1.5 like so

Be generous... share your assets

Within your team at least..

I know for some people sharing doesn't come easy, for some it's in their nature while others battle to give anything away. These people are also generally high in the tight arse scale.

However when it comes to developing projects in teams it's essential to provide ways of sharing our knowledge and code base.

Flex makes it fairly easy for us to share our components and assets across projects, allowing us to reuse the existing code base and yet maintain a single source.

There are a few ways of sharing your code base however I've found the easiest way for my is to create a Flex Library and share the compiled .swc across multiple projects using a custom namespace.

Of course you have the standard issues of sharing libraries such as versioning and assessing the impact that certain fixes may have in the applications that use it, but this is less of an issue if the components are developed correctly and that the components that reside in your library warrant being there.

Steps to start sharing and to stop being so selfish.

1. Create a new Flex Library Project

Move your custom components into the source of the library project. If you're moving components from an existing flex application you'll need to ensure that your package structures are correct.

2. Create your manifest.xml

From the adobe website "Manifest files map a component namespace to class names. They define the package names that the components used before being compiled into a SWC file. They are not required when compiling SWC files, but they can help keep your source files organized."

It identifies which files are contained in the specified namespace which we will setup next

The best way to create one is to base it on the existing manifest.xml from the Flex 3 SKD. Modify your new manifest.xml to include all of your new components.

eg.

<?xml version="1.0"?>

<componentPackage>
<component id="CustomImageDisplay" class="com.rialitycheck.controls.CustomImageDisplay"/>
<component id="Downloader" class="com.rialitycheck.controls.Downloader"/>
<component id="CirclePreloader" class="com.rialitycheck.controls.CirclePreloader"/>
<component id="Crumbline" class="com.rialitycheck.navigators.Crumbline"/>
</componentPackage>

Save this file in your /src/ folder. I like to prefix the file with the name of the project eg rialitylib-manifest.xml

3. Create your config.xml

We now need to create our config file for the library project. This lets the compiler know which manifest file the namespace relates to. Again you can base this config on the existing flex-config.xml, however since we're really only care for the namespace so it's best strip everything else out to look something like this.

<flex-config>
<compiler>
<namespaces>
<!-- Specify a URI to associate with a manifest of components for use as MXML -->
<!-- elements. -->
<namespace>
<uri>http://www.rialitycheck.com/2008/mxml</uri>
<manifest>rialitylib-manifest.xml</manifest>
</namespace>
</namespaces>
</compiler>
</flex-config>

Save this file in your /src/ folder. Again I like to prefix the file with the name of the project eg rialitylib-config.xml

4. Load your config

Now that we've got everything we need to compile the new component library our final step is to tell the compiler to load up the newly created config file.

To do so we just add the following into the Additional compiler arguments on the Flex Library Compiler Panel
-load-config+=rialitylib-config.xml

That's it for you project, everything should compile and a .swc should end up in your output folder.

5. Open your flex existing project and Import your swc
So your team mates have decided to share their code! After giving them high fives open your existing/new flex project. You can either drop the compiled swc into your project or create a swc folder and point to the bin directory of your library project you just created. The latter method allows you to recompile your library and not have to worry about dropping the swc back into your project.

6. Use them
To use your teams custom components simply define your namespace in the top of your .mxml file and then reference your components accordingly. Otherwise flex will create one for you when using autocomplete.
eg.

<mx:Canvas xmlns:components="au.com.somedomain.documents.components.*"
xmlns:rc="http://www.rialitycheck.com/2008/mxml">


<rc:CustomImageDisplay source="{data.thumbURL}" toolTip="{data.descr}" />

That's all there is to it.

As long as you keep track of your library component versions and have a suitable tracking procedure you'll enjoy having a single code base for all your reusable code. The place where you really save lots of time is in maintenance across your applications. You can also break up the development team by allocating library tasks and application specific tasks separately.

Plus your good karma rating goes up when you share.

On a side note, after watching Charlie Boorman's and Ewan McGregor's Series the Long way down giving a little to Unicef definitely goes a long way. If you're feeling extra generous you can make a donation here

What's behind the preloader?

What's behind the pre-loader?

CursorManager.setBusyCursor();

When designing a new UI it's important to delve inside the end user's cerebral hemispheres to understand what drives users to perform the tasks they do.

The pre-loader as a concept has been around for a long time in various forms not necessarily related to web applications. It can be seen in the form of a support act when going to see a band, or the lighting before a thunder storm, or the clowns before the lion tamer. In one way or another the pre-loader has provided a way to distract the user from the time taken to get to their main goal at that given point in time.

Adobe has obviously has understood the necessity for the pre-loader concept and have included pre-loading functionality inside the flash component library, and more recently Flex. Flex also has the capability of setting the busy cursor on service request thus emphasising the importance of notifying the user and keeping them aware that that data will appear to a screen near them. Of course this type of distraction is minimal, however providing something that is too distracting may result in a slight loss in the ability for the user to focus back on the task of interest.

I remember reading about a case study about a property owner of a large corporate building. Not a day would go past without a complaint about the building's lift and how long it took to arrive in the lobby. It came to the stage where something needed to be done about this. For the owner there were two obvious solutions, one would be to spend thousands on getting the lift replaced or let the issue go and continue being at the end of the complaint stream. An associate suggested that the owner get a psychologist in, they agreed to bring him in after much speculation. His suggestion was not to worry about replacing the lift but to fit full length mirrors in the lobby. The mirrors were installed and as a result not a single complaint was received from that point on.

In this case the mirrors were the pre-loader and the data was the lift. People were distracted by the fact that they could look at themselves while waiting for the lift (there was probably some sort of Flexing involved too). It was a very simple yet elegant solution.

Inside the flex applications that I build I like to pre-load all requests to the server whether it be as a busy cursor / text notification / progress bar or even sound (elevator music anyone?). The simplest way way I've found to do this is to have a public String property on my Model of course you may want to create a more detailed class but I'll use the string in this example. By setting this property from my commands it allows the application to listen/test to the changes to this and display the required feedback/preloader to the user.

an example would be something like this

ModelLocator.as

public var statusMessage:String = "";

GetLiftCommand.as

public function execute( event:CairngormEvent ):void {
   var levelChangeEvent : LevelChangeEvent = LevelChangeEvent(event);
   var liftID : int = levelChangeEvent.liftID;
         
   var delegate:LiftDelegate = new LiftDelegate(this);
   delegate.getLift(liftID);
   
   /* set the service status */   
   model.serviceStatus = "I'm getting the lift so I'll put some mirrors up";
}

public function result( event : Object ):void {

   model.lift = event.result.lift;

   /*clear the service status now that we've got the result*/
   model.serviceStatus = "";
}

MainBuilding.mxml

<!-- Hide or show the mirrors based on the service status message -->
<components:mirrors visible="{model.serviceStatus.length?true:false}" />

In todays development world where the amount of information that is being pushed back to the client is getting larger and larger, pre-loading is important to not only give feedback to the user but to give them a slight distraction prior to the data arriving.

CursorManager.removeBusyCursor();

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.

<components:Crumbline styleName="crumblineStyle" id="crumbLine" dataProvider="{acCrumbs}" crumbClick="onCrumbClick(event)" />

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

<mx:Binding source="crumbLine.selectedIndex" destination="vsChoice.selectedIndex" />

A demo of this can be seen here

Special thanks to the Brothers Grimm for the Crumbline model.

More Entries

BlogCFC was created by Raymond Camden. This blog is running version 5.9.002. Contact Blog Owner