Getting a lot of questions on the blog about where to get the cairngorm store. If you follow the link on Adobe labs it will lead you to www.cairngormdocs.org This site has a newer version of the store on it. Hope this helps.
]]>Some of the things I have changed are to remove the dependency on HSQLDB. There were more questions generated by trying to configure HSQLDB than anything else and we felt that it was detracting from the main purpose of the app as an example of using Cairngorm.
As far as other changes to the store are concerned you can see that we have moved away from the ViewHelper pattern. This is not because we think that it is not useful but rather that it had tended to be over used. I have seen more than one Flex application where the ViewHelpers had taken on the role being a home for all of the client-side logic.
Other things that have changed are that we have moved away from using the mx:Model tag too. This was due to the fact that we found some problems with this while working on larger forms in projects. Under the covers the Model is just an untyped object. We have replaced this with custom model objects to allow us to type the objects.
There is currently a lot of work being done in Adobe Consulting around the direction to take the Cairngorm framework in the future. We look forward to sharing the fruits of this labour with you soon.
]]>The built in localisation support in Flex didn’t quite give us what we were looking for in this instance. With the built in support you can read resource strings into the application from resource bundles at compile time. This allows you to compile a separate SWF for each language you wish to support.
The reason that wasn’t useful for this project is that in order to have changed the language with this approach the user would have had to load another SWF and this would not have been the seamless experience that we were aiming for.
In order to create what we wanted, we load the languages all at start up. This gives the client the data that it requires in order to quickly change the languages. An alternative here would be only to load the list of language names and a default language bundle at application start up. This would minimise on the amount of data we were loading on start up. The reason I chose not to do this here was that the amount of data being brought over the wire was not enough to cause a performance problem. Therefore going by the agile adage, this was “The simplest thing that could possibly work”.
The implementation of this is achieved by calling a server-side service. The example app is built on Cairngorm. I guess you could argue that with an app of this size I don’t really need Cairngorm as it’s too much overhead. That is true, however this isn’t meant to be production strength and I’m so used to using Cairngorm for larger apps that it seemed appropriate to show how the multi language functionality would fit in.
So, on start-up we dispatch a GetLanguagesEvent. This calls the GetLanguagesCommand which goes through the delegate to the service and eventually calls the server side LanguageService. The Service returns an ArrayCollection of languageBundles. These are set on the ModelLocator from the Command. At this stage we also set the locale on the LanguageHelper but more about that in a minute.
In the view component of the application, in this case the MultiLanguageSupport.mxml, we declare a LanguageHelper in the mxml and bind the languageBundles in the model to it.
In the LanguageHelper the languages being set causes a dictionary object to be created this holds the languageBundle objects and keys them on the locale code. Setting the languages will cause the languageChange event to be dispatched which will in turn cause all the bindings to the getString method to fire.
In order to change the language now all you have to do is set the locale on the LanguageHelper and it will change the current language and dispatch the languageChange event which will cause the bindings to getString to fire.
This approach has the benefit of being fully extensible. As long as you ensure that the server side language bundles are populated and your client-side label or tooltip binds to the getString method with the right key, you should be able to add further languages without changing any of the client-side code. Although it was done here you shouldn’t store the server-side resources in the code. These could easily be fetched from configuration files or a database allowing you to content manage your apps multilingual support easily.
In following posts I will share how we went about internationalising the numbers and dates in the application.
]]>In this example I have hard coded the background photo for simplicity, although if you wanted to use flickr it has its own simple api for downloading photos. One of the applications of this that occurred to me would be to also integrate the Flex Data Service to have a collaborative whiteboard.
Here is the code for how it was done. Basically you have a canvas which has the original image on it. Then set to the same size as the image you have another canvas directly on top. You set the top canvas's alpha to 0.
To this top canvas you add some mouseListeners to capture the movement of the users mouse as they drag it across the screen. In the set up, we clear the canvas's graphics property. Then when the mouseDown event is captured we set the graphics properties moveTo method to so it knows where the mouse is. When the mouseMove event is captured we call the lineStyle method where we can set the colour and thickness of the line then we call the lineTo method which draws our line for us.
That is it. I have included the captureBitmap method in case anyone wants to use this and persist the newly "scribbled" image. This creates a bitmapData object from the background canvas. This should capture the data from the background image and the "scribbles" on the top canvas.
In order to create a byteArray from this to pass over to the server I have used a piece of code posted by Matt Chotin on flexcoders called the PNGEncoder.
And that, as they say, is that. I don't forsee this threatening PhotoShop anytime soon however it was an enjoyable exercise. The code for this is here.
]]>