Posts Tagged ‘RIAs’
Mar
4Scaling up EasyMVC as your Flex application grows (Part 2: Services)
4
Posted: 4th March 2008
Tags: ActionScript, AIR, as3, easymvc, Flex, RIAs
Posted in AIR, Flex, as3
Comments: 4 Comments »
EasyMVC is a lightweight architecture process for Adobe Flex and AIR first proposed by Tom Bray of SearchCoders and Chatopica. This is the second part covering Service calls, of a two part article on how to take that architecture and scale up to a simplified cairngorm style architecture when you outgrown EasyMVC.
Click here to read an introduction on EasyMVC
Click here to read Scaling up EasyMVC part 1.
Firstly I would like to add some clarification as to the motivation for these articles. I have had a few emails asking what the point of these articles are as I am just recreating Cairngorm. I hope these articles will satisfy two goals. Firstly having discussed EasyMVC and evangelised about it a little I feel I should offer a way to scale this up when your application grows, if not you could end up with a huge EasyMVC controller class that has 30 or so event handlers in addition to service calls etc which will get unmanageable, especially in a team of developers. Secondly I hope these articles will give an insight into how Cairngorm works from a simplified perspective. Cairngorm is an excellent architecture but it is intimidating for beginners and intermediates alike. This Scaled up EasyMVC architecture provides a simplified lightweight version of Cairngorm and also provides an upgrade path for EasyMVC adopters.
In the first article we looked at how we can borrow the command design pattern (as used in Cairngorm) to split out our centralised event handlers into separate classes or commands. Firstly this makes your code more organised and easier to locate specific functionality when you application grows but also provides you with the basis for the next step in handling remote calls to web services, be that SOAP, REST or AMF services.
Read the rest of this article »
Jan
21Scaling up EasyMVC as your Flex application grows (Part 1)
21
Posted: 21st January 2008
Tags: ActionScript, as3, easymvc, Flex, RIAs
Posted in Flex
Comments: 11 Comments »
EasyMVC is an excellent, easy to use Model View Controller architecture for Adobe Flex designed by Tom Bray from Chatopica. However as your apps grow you may find yourself outgrowing this architecture. For example as all your event handlers are centralised into one class, this class may get to large to maintain, especially as the team maintaining the app also expands.One of the best solutions I have found to handling a growing controller is to borrow the command pattern from Cairngorm which uses the Command design pattern.
Note if you have not read my previous article on EasyMVC, click to read it here first.
What Cairngorm does is to move these centralised event handlers from the controller into separate “command” classes. In a simple sense we are putting each of these event handlers into their own separate classes that contains just that event handler and and services the command uses. We could simply copy and paste the event handlers over as they are, initialise the class and pass the handler function (it will need to be public) within the class as the event handler. However, we want to make our lives a bit easier and this is where the command design pattern comes in.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | package com.clockobj.gotidal.controller{import flash.events.Event; import mx.core.UIComponent; import mx.events.FlexEvent; public class GoTidalController extends UIComponent { private var am:AppModel = AppModel.getInstance(); public function GoTidalController() { addEventListener( FlexEvent.CREATION_COMPLETE, setupEventListeners ); } private function setupEventListeners( event:Event):void { systemManager.addEventListener(AppEvent.COUNTRYCHANGED, countryChanged); } // Country Changed private function countryChanged(e:AppEvent):void { am.setCountry(e.data); } } } |
Above we have an example of an EasyMVC controller which extends the UIComponent and then adds our centralised event handlers to the system manager (which can see all application events through bubbling). In this example, we have a single event handler called countryChanged which stores the changed data (passed by the event) into the AppModel (Singleton model) but as our application grows we could end up with tens if not hundreds of commands.
Cairngorm’s strength is toe move these commands out into their own classes as discussed above. I like to create an interface definition for this class so that all commands are standard and then I can write a method to handle registering the class as an event listener on the systemManager class.
I use the following interface:
1 2 3 4 5 6 7 8 9 10 11 | package com.triggersoft.core.emvc{ import flash.events.Event; public interface IEMVCCommand { function execute(e:Event):void; } } |
Then any commands we create we need to implement this interface:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | package com.clockobj.gotidal.controller.commands{ import flash.events.Event; public class CountryChangedCommand implements IEMVCCommand { public function execute(event:Event):void { AppModel.getInstance().setCountry(event.data); } } } |
Then rather than having to keep initialising the new command and then adding the command as an event listener as follows:
1 2 3 4 5 6 7 | private function setupEventListeners( event:Event):void { var countryChangedCmd:CountryChangedCommand = new CountryChangedCommand(); systemManager.addEventListener(AppEvent.COUNTRYCHANGED, countryChangedCmd.execute()); } |
We can create a function to do this for us, making use of the interface definition we created:
1 2 3 4 5 | private function addCommand(eventType:String, cmd:IEMVCCommand) { systemManager.addEventListener(eventType, cmd.execute()); } |
And in our event controller simplify it so that commands are added using our addCommand function
1 2 3 4 5 | private function setupEventListeners( event:Event):void { addCommand(AppEvent.COUNTRYCHANGED, new countryChangedCmd()); } |
With this solution we borrow how Cairngorm handles events and have a scalable Controller where each handler is in it’s own command class and the controller is only used to register these commands as eventListeners on the systemManager class..
Taking this idea further, I like to create a EMVCController class which I then extend. i.e. the EMVCController has the addCommand method in it and it extends UIComponent and my Flex’s application controller has to simply extend EMVCController instead of UIComponent as was done previously and I inherit the addCommand method so don’t have to write it for each project.
In part 2 I will look at how we share web / http services between commands.
Oct
24Adobe Flex Builder 2: Free to education
24
Posted: 24th October 2007
Tags: ActionScript, Flex, RIAs
Posted in Flex
Comments: 1 Comment »
Adobe have today announced that they will be offering Flex builder 2 as a free download (at no cost) to education establishments and students. Not only a welcomed announcement by the community but also this shrewd move will mean more institutions teaching Rich Internet Application development, and more graduates ready to tackle the next generation of web applications and satisfy the growing demand for Flex developers. (Hopefully in time for the impending Rich Internet Application boom?)
For More Information.
Oct
23TileUI Flex simulated desktop.
23
Posted: 23rd October 2007
Tags: ActionScript, Flex, RIAs
Posted in Flex
Comments: No Comments »
I was pleased to hear the announcement that Doug McCune will be writing the upcoming Flex 3 for Dummies with Deepa Subramaniam. I am looking forward to seeing this early next year. What I am most excited about however, is that Doug has posted a sneak peek of his excellent TileUI Flex App to promote his announcement.
Read the rest of this article »
Oct
19Review: Chat Widget for your Blog, Powered by Adobe Flex
19
Posted: 19th October 2007
Tags: Flex, RIAs, Ruby on Rails
Posted in Flex
Comments: 2 Comments »
Following my previous article I discovered Chatopica an excellent chat widget, you can integrate directly into your blog. Current topics are related to programming and design but custom topics are coming soon.
Chatopica is created by Tom Bray and Robert Cadena of SearchCoders, Tom being the presenter of the excellent eSeminar on an Easy MVC approach to developing flex apps, I blogged about.
Read the rest of this article »
Oct
17Simplified Cairngorm, Easy MVC for Adobe Flex
17
Posted: 17th October 2007
Tags: ActionScript, as3, easymvc, Flex, RIAs
Posted in Flex
Comments: 25 Comments »
Like many others, I have been struggling to fully get my head fully around the Cairngorm Micro Architecture, and even with the excellent Cairngorm Creator, I find it a little overkill for many Adobe Flex projects I am involved with, in fact, so does Steven Webster (one of the creators of Cairngorm).
So yesterday I sat in on an excellent Adobe eSeminar, presented by Tom Bray of SearcherCoders who presented an easy / simplified Model View Controller architecture based on Cairngorm.
To demonstrate the need for these frameworks, Tom started with an excellent example of an application based on a simple chat client. Inspired by his excellent Chatopica perhaps?:
Read the rest of this article »
Oct
15Review: Buzzword - Flex powered Word.
15
Posted: 15th October 2007
Tags: flash, Flex, RIA, RIAs
Posted in Flex
Comments: No Comments »
Buzzword is a revolutionary Rich Internet Application that allows anyone with a browser access to a powerful word processor that gives Microsoft Word a run for it’s money. Virtual Ubiquity the developers of Buzzword (which includes well known Flex blogger David Colletta) has recently been acquired by Adobe Systems.
Although Buzzword currently has a comparatively limited feature set, it gives you everything you need to produce professional and striking documents that can be printed directly from Buzzword or exported as Microsoft Word .doc file or Word 2003 .xml file.
Read the rest of this article »
Oct
4Using Yahoo ASTRA Map API with Flex 2
4
Posted: 4th October 2007
Tags: as3, Flex, RIAs, yahoo api
Posted in Flex
Comments: 12 Comments »
Yahoo recently released a new Flash framework for use with it’s Search, Weather, Mapping, Upcoming and Answers APIs called ASTRA (ActionScript Toolkit for Rich Applications). As the documentation is still a little sketchy in places I thought I would write a quick getting started tutorial on using the ASTRA framework with Flex 2 and Flex Builder.
Read the rest of this article »
