Posts about ‘Flex’
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
29Adobe Flex: Styling the DataGrid header separators
29
Posted: 29th January 2008
Posted in AIR, Flex, as3
Comments: 4 Comments »
Although the default alo theme in Flex can be easily styled through CSS (made especially easy using the Flex Style Explorer), there are elements such as separators between the column headers that cannot easily be styled. As the Halo skin for such elements are overridable, we can use the following solution to change their colour or remove them altogether.
By default Flex places two vertical, 1 pixel wide lines between each column header on a data grid (1 line white with a 50% transparency, the other the border colour). However in some instances this style does not look right, espeically if you are trying to create a dark charcol grey theme, the white vertical line stands out too much, or you don’t want any separators.
We could override this functionality by creating a 1×1px transaparent .png and use that as the skin, but I am going to show you how we can create programmatic skin to get rid of a UI skin such as this, that we can then take a step further and customise into our own CSS stylable skin.
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.
Jan
11I’m a full time employee with Trigger Software
11
Posted: 11th January 2008
Tags: Flex, jon
Posted in Flex
Comments: 2 Comments »
I was interested reading Doug Mccune’s post last month as I doing the same thing… Not joining the same company but I have recently made exactly the same move from freelance to full-time employee for Trigger Software based in Cheltenham.
I am employed as the Adobe Flex Team Leader and much like Doug I am building a team of “rockstar developers”.
What this means for you? Well this blog will become more focussed on Adobe Flex. Sorry Ruby on Rails and .Net guys! (though there may be the odd .Net / Flex article) and if you are a Flex Developer looking to join a talented team of Flex Developers then drop me a line, we have some very exciting large scale international flex projects in the pipeline.
It also means I am no longer available for independent freelance work, but please direct all Adobe Flex development enquires to Trigger
.
Dec
5Designing for Flex: Part 6 now online
5
Posted: 5th December 2007
Tags: Flex Usability
Posted in Flex, Usability
Comments: No Comments »
Hot on the heals of Part5: Designing Content Displays, Rob Adams has just posted up the next chapter of his excellent designing for flex articles, titled Part 6:Guiding with motion to the Adobe Flex Developer Center: Flex Interface Guide. If you have not read the other five parts, check them out first.
This chapter covers:
- The differences between motion design in Flex applications and motion design in other mediums.
- How to use motion to leverage users’ instinctual understanding of the physical world to enhance your application’s usability.
- How to use screen to screen transitions to help guide users to the next area of interest and make it clear how to return.
- How to use motion effects to provide feedback and focus your users’ attention.
For More Information
Nov
15Using a plain Flex UI theme to show clients before styling
15
Posted: 15th November 2007
Tags: Flex, prototyping, Usability, wireframe
Posted in Flex, Usability
Comments: No Comments »
The default Flex 2 Aeon theme looks fairly polished and showing it to clients in the early stages of a project can have it’s disadvantages. For example a client may believe the project is closer to release than it is or if you use Adobe Flex for prototyping may believe that the default theme represents the final look and feel.
If you intend to customise the chrome of a flex app, showing a client the default look and feel not only leads the client into a false expectation of the finish product but, if the app is purely a prototype, may make a case for it being used for the foundation of production code or prevent an further exploration in to the visual design.
Ted Patrick has provided an excellent technique to overcome this.
Read the rest of this article »
Nov
14Designing for Flex: Part 5 now online
14
Posted: 14th November 2007
Tags: Flex, Usability
Posted in Flex, Usability
Comments: No Comments »
Hi All,
Just a quick post. Rob Adams has just posted up the next installment of his excellent designing for flex articles, titled Part 5: Designing Content Displays to the Adobe Flex Developer Center: Flex Interface Guide. If you have not read the other four parts, check them out first.
For More Information
Nov
5FIG: User Experience Design resource for Adobe Flex
5
Posted: 5th November 2007
Tags: Flex, Interaction Design, Usability, User Centered Design
Posted in Flex, Usability
Comments: 1 Comment »
Back in September, Adobe released a new section to the Flex Developer Center, called FIG or Flex Interface Guide. This is an excellent resource for anyone involved in the Interaction Design (IxD) or User Experience (Ux) of RIAs or any developers who want to make more user focussed apps. There are several articles still in draft about designing for Flex. One of the upcoming articles that will be particularly of interest and relevance to the new possibilities of designing RIAs is the use of motion, as a tool to guide users.
Read the rest of this article »
