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”…
Category: Architecture
category
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
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
|
1 2 |
<!-- 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();
Transfer ORM and Flex
Recently I’ve been working on a project to deliver something that was more proof of concept which in a business sense building something in a relatively short time frame.
I decided to develop the front end with Flex 3 and the back end with ColdFusion 8 using the flex remoting classes to connect the two together. Having chatted recently to a couple of fellow developers there was a consensus among them that documentation for connecting both ColdFusion and Flex was underdone and that it could possibly be the Achilles heel in using CF as the server side technology.
I myself haven’t found any issues in connecting the two together. Sure there are a couple of files that need to be configured everything hangs together harmoniously. Compared to other technologies like webOrb and amfPHP it’s relatively painless.
Transfer
Due to the nature of the beast I needed something that would look after my CRUD methods on the server side. I didn’t want to have to spend time hand writing this code and having seen a couple of presentations on Transfer it made sense to use this as my ORM. For those of you that don’t know about Transfer it’s an ORM for Coldfusion. It allows you to create your object relational mappings of your database allowing you to perform simple to complex database transactions. More information on Transfer can be found here. I then used Transfer to plug into a lightweight CF framework that I had custom built some time ago that I normally use for Flash and Flex development using the facade pattern to expose the required services.
Other Code Generating Tools
I also use the Illudium PU-36 Code generator developed by Brian Rinaldi to help create the ORM mappings and services and gateways for the required objects. You can download and read more about this code generator here on the RIAforge website.
These two great tools allow me to create the server model fairly quickly allowing to spend more time planning and creating the UI.
Setting up Transfer to work with Flex
You first need to setup your objects on the client and server. If you are using Cairngorm on the client these would be your Value Objects. On the server these would be your Objects that your Transfer objects would be extending.
I’ll be using the blog application that ships with Transfer as the examples. Hopefully I’ll be able to post the running application once I’ve completed it.
In your flex value object.
package com.riality.tblog.vo
{
import com.adobe.cairngorm.vo.IValueObject;
[RemoteClass(alias="tblog.com.PostVO")]
[Bindable]
public class PostVO implements IValueObject
{
public var IDPost:String = "";
public var Title:String = "";
public var Body:String = "";
public function PostVO()
{
}
}
}
The important part here is your RemoteClass metatag. This must correlate to the Value object in your CF framework. This is done by extending your transfer object inside your Transfer.xml to an Object that can bind to your flex value object.
Example inside your Transfer.xml
Architecture and Software
I’ve been thinking about the similarities between UI design and Architecture in the built environment sense are uncanny. The processes involved are so similar that they can be applied to both discipline’s, yet the final result is very different. One you can touch the other is virtual, one may be constructed from treated wooden logs the other you can log in to.
Surely some must be thinking that how can this be… this is crazy designing a front end for a application can’t at all be similar to designing a building or an open space.
Fair enough that’s a good point, you could liken it to the similarities of getting a builder to design your house or a landscape gardener to design your private open space. Most of the time they’re not going to step through the required processes to get the job done. So from that the above question is true. They may cut corners and you may end up with a toilet running off the kitchen. As is the same with UI Design, you may get you someone who has some knowledge of the web to build an application for you, sure it may seem cheaper in he short term but you’ll be paying for it over time with bugs (features?) or frustrated usability.
Below is a list of how I see the processes marry up. The actions relating to software in parentheses.
| Built Evironment Architecture | Software UI Architecture |
| Submission | Submission |
| Project Brief | Business Analyst |
| Concept Drawings/Design Process | Functional Specs / UI work flows / Use cases |
| Adhering to the Council/Australian Standards | Development Best Practises/Coding Standards |
| Client Approval | Client Approval |
| Devlopment Approval | Development Approval |
| Project Tendering | Outsourcing |
| Construction | Development |
| Contract Admiistration | Bug Fixing / Testing |
| Construction Completion | Development Handover |
This is quite a broad overview between the two disciplines but as you can see their processes are similar even though the terminology may change slightly.
They call it software architecture for a reason. Software has been around a few years less than the built environment and you can see why they’ve penned the term. If computers were around in the Renaissance period do you think Leonardo da Vinci would of been a Software Architect?
So you’re saying because I’m a UI Architect I can now become a registered architect and start building stuff?
Unfortunately you’ll need to get yourself into university for at least 4 years depending on your design strand. Then you’ll need accreditation to become registered. You can find more information about the built environment AILA and RAIA.
On a recent trip to Spain I stopped off in Barcelona to visit the Church of the Holy Family designed by the brilliant Antonio Gaudi. Although unfinished it’s the most amazing building I have ever seen. It’s something for your software to aspire too.
