Possible new musical project of mine

I’ve got a couple of projects on the back burner while a finish off the existing ones. But my latest idea has stemmed from the musical side. I’ve always been a fan of music and playing a bit of guitar has been a passion of mine. I’ve tried my hand at writing music but have always done this in a more conventional manner. Paper, Pen, piece of scrap paper lying around the house.

However this time around I’m going to write a song, but this time in pure Actionscript. It will be a classy song of course however listeners won’t be able to hear it until they’ve registered and the song is completely compiled.

Seriously though it would be an interesting project to start, having some sort of sound library with different progressions and scales and keys. Each of these being executed along from the time line similar to sheet music or guitar tablature. Would also need a audio dictionary for the lyrics. Might end up sounding a bit like Fitter Happier by Radiohead.

Anyway this idea needs more storming.

Are UI roles changing?

With the release of design based applications like Fireworks CS4 Beta from Adobe, it has again further blurred the lines between the UI professions.

Although there are other tools that can provide similar more detailed functionality that the new version of Fireworks CS4 does such as Microsoft VISIO and Omnigraffle, no other package wraps most the most common RIA Development processes in one package. Fireworks has stepped up from the shadows and has reinvented itself as a somewhat dedicated RIA Development tool.
UI experts can create interactive step throughs for clients, UI wireframes, create custom components, and even export the UI Designs as MXML(flex markup) or XAML(Silverlight markup). I think Adobes decision to add these kinds of attributes to Fireworks was a great one. I always wondered what would happen to Fireworks after the merge, as it was often neglected in favor of the other Image editing tool owned by Adobe… what was the name of that one again?

I generally see UI Teams in 3 Groups

  • UX – User Experience design – They primarily look after the interaction model of the application working with concepts such as wireframes and application storyboards.
  • UI Design – They are responsible for the look and feel of the application.
  • UI Development – They are responsible for the actual coding and software development.

In small practices more often than not, a single developer is responsible for all aspects of an Application, UX, UI Design and all development both client and server. In these cases the Applications are normally built from the database up. By that I mean the backend services are written and test harnesses/wireframes created to start bringing the application together. However I can see the trend going forward in RIA development lending itself to design based/user centered development where the UI drives the design cycle of the application no matter what size the practice. And by allowing a number of client side design tools to publish working code emphasises that.

I would be interested to know how will this affect current software development cycles for teams and individuals. For those that do have resources such as usability experts how will their roles be affected? will they need retraining in current toolsets? Will graphic designers start writing and publishing MXML and XAML code?

The crossover is inevitable from UX, UI Design and UI Developer. The switch between having a UI Designer hat on and a UI Developer hat on is literally a click away.

More information about Fireworks CS4 Beta can be found here.

Toolkits for CS3 Extensions

If you were wondering why the Flex Component Toolkit for Adobe Flash CS3 isn’t where the documentation says it is. You’re eyes aren’t deceiving you.

Previously it was located in the SDK_install_dir\frameworks\flash-integration. However for the final release of the FLEX 3 SDK they removed it.

It can now be found here along with the other CS3 extensions.

Manage my bundle

Traditionally used for managing locale settings especially languages the ResourceManager in Flex 3 can also be used for loading in other environment variables.

On my development machine I’m loading in service URL’S, dummy sessions and a few other things. One other option would be to hard code test data into a static class but because these values are used for more than one application it allows me to change this values in a single location.

You first need to declare your source path to your resources. The file that you wish to read using the Resource Manager needs to be a .properties file. This is just a standard text file with the name of your resource bundle suffixed with a .properties.

The structure of this file is the property and then the assigned value. Comments can be incorporated by implementing the hash symbol.

#this is the riality resource bundle
uploadURL = http://localhost/testApp/upload.cfm
companyID = 1212

Store this file in a local directory. For this test application I have mine structured like so. I have this example setup in my Flex 3 SDK directory. Notice that the I’ve used the “en_US” named folder, this is the default locale for the flex compiler, but allows us to add other locales if need be by simply adding creating another locale named folder and providing the same .properties files.

Now you’ll need to set your source patch for the resource bundle. To do this right click on your flex project. Click on the Flex Build Path from the left hand menu. Click the Source Path menu Button. Here you have the option to add a source path folder.

Click the Add Folder button and browse to your resource bundle directory and click ok. However where replace the “en_US” with the special characters {locale}. This is set by the flex compiler additional arguments. You can see this when you click on the Flex Compiler in the left hand menu.

After that you’re right as rain to start accessing your bundle in your Flex 3 Application.

private var companyID : String = ResourceManager.getInstance().getString("riality","companyID");

Bundles have never been easier to manage. You could say it makes it a real bundle of joy to manage.

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.

Dispatching Events with Cairngorm 2.2.1

While trawling through the CairngormEvent.as I noticed the distpatch() method which in essence calls the same code that was needed in the previous versions of Cairngorm.

Pre Cairngorm 2.2 example

var userVO : UserVO = ModelLocator.getInstance().userVO;
var event : LoginChangeEvent = new LoginChangeEvent(LoginChangeEvent.LOGOUT_EVENT,userVO);

/* dispatch the event */
CairngormEventDispatcher.getInstance().dispatchEvent( event );

Latest example

var userVO : UserVO = ModelLocator.getInstance().userVO;
var event : LoginChangeEvent = new LoginChangeEvent(LoginChangeEvent.LOGOUT_EVENT,userVO);

/* dispatch the event */

It just saves having to import the CairngormEventDispatcher and typing those extra characters. Which can save a lot of time if you’re a chicken pecker typist 🙂

Ha ha ha I’ve caught you… you http request.

Have you ever been sick and tired of trying to use the flash remote debugger to debug those nasty remote errors. Well don’t pull your hair out any longer. Why don’t you try Service Capture, the ultimate tool for seeing http requests from your browser.

Service Capture has to be one of my favourite tools in RIA Development. It is especially helpful when dealing heavily with remote packets being sent to and from flex and flash. One is able to browse the specific arguments and view any server side errors returned to the UI.

It runs on both Windows and Mac and for the small price of $30 it’ll save you 3.33 times the amount in your time when it comes to debug that problem and double as your alibi when your standing toe to toe with your server side buddy arguing the fact that flex is indeed sending the correct information.

You can read more about it here

Psudo-Streaming with the flash player

Well today I was doing a bit of R & D into video Pseudo-Streaming. The term Pseudo meaning Fake or having an appearance of. Which is what it exactly is when applied to video streaming. In a roundabout way it allows the user to play the video anywhere on the timeline before the video has been fully downloaded.

I came across this great article here over on flash guru with a fully functional demo using a php backend. I’ve also seen an example using a Coldfusion service to handle the stream. Basically it’s a wrapper for some neat little java byte and filestream manipulation. Steve Savage’s post can be found here

This works a treat however we did stumble across and issue when trying to play a handful of converted .flv files. For some reason these files would not Pseudo-Stream. At first I thought it may have been a code issue but then had a look inside the .as code at the metadata listener.

ns['onMetaData'] = function (obj)
duration = (duration != undefined) ? duration : obj.duration;
times = obj.keyframes.times;
positions = obj.keyframes.filepositions;

the times variables was being set to null and using the FLV Meta Data viewer on the trouble makers I was able to confirm that these files did not have any keyframes.

Not exactly sure why these files didn’t contain any keyframes. I know that you can set keyframes from the CS3 Video conversion utility so it was possbible their conversion software that wasn’t creating the keyframes.

Actionscript reference for RIA Development

A friend of mine just recently notified me of this great reference doc. Adobe has released a poster style document for all their RIA platforms, Flex, Flash Player 9 and AIR.

It’s comprehensive and is easy to read, you can download it here

I love these things and remember getting one when I first started learning Coldfusion. Turned out to be quite an invaluable resource, learnt more off that chart than I learned at University. And for that I thank you oh knowledgeable chart.