Alternatively you need to set the value programatically in an event handler, AND importantly call updateDisplayList() on the scrollbar. i.e.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
	<mx:Script>
		<![CDATA[
			private function handleSlideChange():void {
				scroll.maxScrollPosition = slider.value;
				scroll.invalidateDisplayList();
			}
		]]>
	</mx:Script>
	<mx:HSlider minimum="1" maximum="10" value="1" tickInterval="1"
		liveDragging="true" id="slider" width="50%"
		change="handleSlideChange()" snapInterval="1"/>
 
	<mx:HScrollBar scrollPosition="0" width="50%" id="scroll" pageSize="1"/>
</mx:Application>

As part of the update, I have fixed the following:

• Compatibility with WordPress 2.5
• Issue where users without curl installed would get an error authenticating
• Updated the style to match WordPress 2.5
• AJAX enabled the plugin to stop the page refresh (which ws incompatible with WordPress 2.5) when switching Photo Sets on the write/edit post page

If you are using WordPress 2.5, you can automatically upgrade to the latest version from the plugins page. If you are not already using WP-Flickr, you can download it here http://wordpress.org/extend/plugins/wp-flickr/

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.

At this point we are going to borrow a technique used by Darren Schall, where he suggests using the built in IResponder interface to handle web service responses.

The IResponder interface defines that we should create two event handlers, one called result which takes one parameter of type Event (usually a ResultEvent) and one event handler called fault which takes one parameter of type Event (usually a FaultEvent).

What we want, is for commands to handle our service calls. In the first article we created an interface for our commands called ICommandEMVC. Here we ensured all commands we created has an execute(e:Event) function which would be called as the event handler for all our centralised events.
What we will now do is create a new Interface called IResponderCommandEMVC which will implement both the ICommandEMVC that we created and Flex’s build in IResponder interface. This will then give us a class definition that has an execute event handler that is called when we fire off a EasyMVC event that is handled by our central event handler, and result() and fault() event handlers that handles the results of our service call. We do this as follows:

1
2
3
4
5
6
7
8
9
10
11
12
13

package com.triggersoft.core.emvc
 
{
 
  import mx.rpc.IResponder;
 
  public interface IResponderCommandEMVC extends IResponder, ICommandEMVC
 
  {
 
  }
 
}

We can now write command classes that implement IResponderCommandEMVC. We could implement the code to call our web service here but then we may duplicate effort whenever we need more than one command to call the same web service. So I like to create the equivalent of Cairngorm’s service locator or more simply a singleton that proxies my service calls.

So for example, if we had a SOAP web service located on our localhost i.e. http://localhost/Service?WSDL which had an authenticate command that took a username and password parameter (and this is a simple example) we could do the following

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
34
35
36
37

package com.triggersoft.project.controller.services
 
{
 
  public class MyService {
 
    private static var _instance:MyService;
 
    private var service:WebService;    public static function getInstance():void {
 
      if (_instance == null) {
 
      _instance = new RespondentWS();
 
      }
 
      return _instance;
 
    }
 
public function MyService:void {
 
      service = new WebService();
 
      service.loadWSDL(“http://locahost/Service?WSDL”);
 
    }
 
public function authenticate(responder:IResponder, username:String, password:String):void {
 
      var at:AsynToken = service.authenticate(username, password);
 
      at.addResponder(responder);
 
    }
 
  }

This means that we can call the authenticate method on this service from any command using the MyService.getInstance.authenticate() method and pass in a responder, the username and password.

As our command implemented the IResponderCommandEMVC interface, which in turn implements the IResponder interface we can pass the command as a web service responder, so if we had AuthenticateCommand which was registered with our Controller (See part I) that listened to a custom event that stored the username and password. We could write the following command

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

package com.triggersoft.project.controller.commands
 
{
 
  public class AuthenticateCommand {    public function execute(e:Event):void {
 
      var ae:AuthenticationEvent = AuthenticationEvent (e)
 
      MyService.getInstance().Authenticate(this, ae.username, ae.password)
 
    }
 
public function result(e:Event):void {
 
      //handle web service result
 
    }
 
public function fault(e:Event):void {
 
      //handle web service error
 
    }
 
}
 
}

As you can see we can easily scale up EasyMVC to a lightweight version of Cairngorm as your application grows. In reading these articles, I hope you have gained an insight into the benefits of using a formal architecture such as this and also demystified the Cairngorm framework. EasyMVC does not have all the feature of Cairngorm but it is a light weight alternative that suits many projects from small to large.

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.

So firstly to create a NullSkin class that we can use to rid ourselves of the separators alltogether. Programmatic skins can be created by extending either the ProgrammaticSkin, Border or RectBorder classes. In this case we are going to extend ProgrammicSkin, overriding it’s measuredWidth(), measuredHeight() and updateDisplayList(w:Number, h:Number) methods.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

package com.triggersoft.skins
{
  import mx.skins.ProgrammaticSkin;
  import flash.display.Graphics; 
 
  public class NullSkin extends ProgrammaticSkin
  {
    public function NullSkin()
    {
      super();
    } 
 
    override public function get measuredWidth():Number {
      return 0;
    } 
 
    override public function get measuredHeight():Number {
      return 0;
    } 
 
    override protected  function updateDisplayList(w:Number, h:Number):void {}
  }
}

Above we return a skin size of 0 x 0px and in the updateDisplayList method (where we would draw the skin) we do nothing.

We can then easily apply this skin to the DataGrid in CSS using the following CSS declaration:

header-separator-skin: ClassReference("com.triggersoft.skins.NullSkin");

Removing the separator is all well and good but what if we want to create a more customisable skin? For example we could make a 1px wide vertical line that was the same colour as the data grid’s border colour as follows:

package com.triggersoft.skins
{
  import mx.skins.ProgrammaticSkin;
  import flash.display.Graphics;
 
  public class DGHeaderColourSeparator extends ProgrammaticSkin
  {
 
    public function DGHeaderColourSeparator() {
      super();
    }
 
    override public function get measuredWidth():Number {
      return 1;
    }
 
    override public function get measuredHeight():Number {
      return 10;
    }
 
    override protected  function updateDisplayList(w:Number, h:Number):void {
      var borderColor:uint = getStyle("borderColor");
      var g:Graphics = graphics;
      g.moveTo(0,0);
      g.lineStyle(1,borderColor);
      g.lineTo(0,h);
    }
  }
}

The code above is based heavily on the original programmatic skin for the header separators in the Halo theme. Above we return a width of 1px and a height of 10px (Halo’s is 2 x 10px) we then move our drawing cursor to 0,0 (top left hand corner of skin), set the line style to be 1px wide and use the value set by borderColor in our CSS (or the default) and draw a line down to (0,h) which is the full height of the skin.

Again we need to set the skin in our application’s CSS file:

header-separator-skin: ClassReference("com.triggersoft.skins.DGHeaderColourSeparator ");

Now whatever colour the border is around our datagrid, our header separator will be the same colour. As you can see, programmatic skins give a little advantage over their .png cousins as we can use CSS styling to easily customise them and make them reusable across projects.

The best place to look and learn how Programmatic Skinning is done is to look at the source code for the Halo theme, this is located in [Flexbuilder installation]/Flex SDK 2/framework/source/mx/skins/halo/ but there are several great resources on skinning in general that I have listed below:

More information on skinning and themes:

• Flex Developer Center (UI Design)
• ScaleNine (in particular the resources page)
• fle[ks]ray

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.

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

.

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

• Flex Interface Guide
• Flex Developer Center

Screenshot: WP-Flickr Plugin

As part of a recent project, we needed to develop a custom WordPress plugin for our client. They have kindly allowed us to release it under the GNU licence, so if you feel it is useful, please feel free to download and install it. It is loosely based on the similar Flickr Tag WordPress plugin by Jeffery Maki however rather than parsing the page each time a post is viewed and generating the image tag, this version inserts the image tag directly into the post. In addition you can browse your Flickr Photostream, Sets and Favorites right from within the WordPress Admin pages, choosing the sizes available on flickr and inserting with a single click.

Feel free to download and try the plugin. It is currently hosted here but once approved for the WordPress Plugin Directory, it will be moved there.

For more information:

• Instructions and Download for WP-Flickr
• Clockwork Objects’ Blog and Content Management System Services

She points out that no matter how small the budget, even a small amount of User Research can pay off in a big way. She goes through some of the techniques used by Interaction Designers when conducting research and some invaluable tips on conducting and writing interviews, it is well worth a look:

View Leisa’s Presentation on slide share.

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.

Using Ted’s example you can strip all chrome from the UI components and then effectively build an interactive wireframe for your app which can then be styled / disgarded without any preconceptions on the client’s behalf.

Ted Patrick’s Chromeless Flex Theme

Ted provides the sources for his example which also includes the CSS to strip the Halo theme’s chrome from the UI controls.

For more information:

• Ted’s Article on Managing UI Development Expectations with Flex
• Ted on Flex Blog

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

• Flex Interface Guide
• Flex Developer Center

The articles are written by Adobe’s Rob Adams who also writes a blog dedicated to interaction design (http://usereccentric.com/)

In addition to these articles Rob and the team will be releasing a set of Flex Interface guideleines and introducing new components to use in Flex development such as the three already released: Callouts, Paged Lists & Pan and Zoom. (I will be covering these in more detail in future posts.)

Adobe FIG’s Callout Component.

So far Rob has written 4 of the 8 intended articles and the first 4 are an excellent and I recommended taking the time to read them. They provide a good overview of the technology for IxD professionals covering some of the new possibilities like using motion to guide user interaction. For developers these resources will hopefully introduce the benefits of thinking about users and give plenty to think about as well as introduce interaction design methods to improving user experience.

Rob also provides a well selected list of further reading in which he highlights Alan Cooper’s About Face 2, at the top of the list (About Face 3 has recently been released). Which shows he is an advocate of Goal Driven Design when designing Flex apps. However he does note that it is not necessary to be following an upfront process such as Goal-Driven Design to benefit from his articles and his advise is suitable to any development process.

As the documents are in draft Rob has set up a forum on the Adobe site for input and feedback from the community. So far been a disappointing response with only 12 posts (and I believe I have posted two of those!) So please get involved and please give Rob feedback on his excellent work and commitment to providing better user experiences for users of Flex apps.

For more information

• Flex Interface Guide
• Rob Adams’ User Eccentric Blog
• Flex Interface Guide Forum

My reasoning in moving to WordPress is not a reflection on Mephisto as it is an excellent blogging platform, however more to do with ease of deployment and hosting a PHP based system over a Ruby  on Railsbased system.

Once again I apologise if you are unable to find the article you are looking for, you should be able to locate it through the search facility or using the Categories or tags (on the left).

Regards,

Jon

For More Information.

• Adobe’s Announcement

Doug McCune’s TileUI.

Doug was interviewed about this on the Flex.org Podcast In which I believe he stated that he made use of Papervision3D combined with APE.

You can easily group items, by holding down the left-mouse button and dragging around the items you want to group. By default these stack but when you hold the mouse button down to group a blue circle appears, if you return here and hover with the mouse button still down, you get the menu shown above, where you can then spiral the stack, or arrange them in a messy formation.

Once items are stacked, you can double click them for further options, but I’ll let you play and discover these yourselves.

I believe Doug based this on an another application, details of which are in the interview in the Flex.org Podcast

Thanks for the demo Doug.

Jon

For more Information

• Try out the demo on Doug’s Blog

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.

What you can currently chat about in Chatopica

Currently Chatopica offers the following topics, but the guys are working on the ability to create custom topics and you can register to be notified when this feature is added on their homepage :

1. Adobe Flash (Flash Programming and Design)
2. Adobe Flex (Flex Programming)
3. Adobe Photoshop
4. AJAX (AJAX Programming)
5. Book Club (Discussions on Books and Novels)
6. Chatopica (Chatopica)
7. ColdFusion (ColdFusion Programming)
8. Java (Java Programming)
9. PHP (PHP Programming and Web Development)
10. Python (Pythonistas Unite!)
11. Ruby On Rails
12. Video Games

I like the widget so much that I have added two topics to my own blog, so if you would like to chat with like minded developers about Ruby on Rails or Adobe Flex you can access these here anytime:

• http://www.clockobj.co.uk/flexchat (For Adobe Flex Chat)
• http://www.clockobj.co.uk/railschat (For Ruby on Rails CHat)

Note There are not many Rails developers on here yet, but if you are in the Rails community, please spead the word.

Or even better, why not add this widget to your own Flex or Rails blog / website!

Adding a Chatopica topic to your own site..

Adding Chatopica to your own site is a piece of cake, simply visit the Chatopica Topics section, choose the topic(s) you would like on your site and copy and paste the one line of Javascript into the HTML of your page. For those that have added other widgets to your sites, you will be familiar with this. It’s that easy. (That’s why I pasted one into this article.)

Overview of Features

When Chatopica first loads, it automatically assigns you a guest ID. You can change this at any time by clicking on the assigned guest ID in the top bar and entering a new nicname / display name. If you enter a name currently in use, the system smartly handles duplicate by appending a unique ID to the duplicate name you entered. If you don’t like this you can simply change it to something else.

Another nice feature for developers is that you can click the code button and copy and paste in, some source code. Not only does chatopica colorize your code, it also folds it so those who are not interested in seeing the code can ignore it without it filling their chat screen, while those that are interested can click the {} icon to expand the source code.

Chatopica, like many chat clients automatically scrolls to the latests message posted. A nice feature to Chatopica is the ability to turn the Autoscroll feature off by clicking the padlick icon in the bottom right of the widget. This then prevents the chat window from scrolling to the bottom when someone posts a new message, which is handy while examining someones source code.

With the ability to create your own custom chat room coming soon, we will all be able to add a little peice of Chatopica to our websites and blogs.

For more information

• Chatopica

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?:

1. <?xml version=”1.0″ encoding=”utf-8″?>
2. <mx:Application xmlns:mx=“http://www.adobe.com/2006/mxml“ layout=“vertical“>
3. <mx:Script>
4. <![CDATA[
5. import mx.collections.ArrayCollection;
6. [Bindable]
7. public var rooms:ArrayCollection = new ArrayCollection( ["Flex", "Flash", "AIR", "ColdFusion" ] );
8. [Bindable]
9. public var users:ArrayCollection = new ArrayCollection( ["John", "Paul", "George", "Ringo" ] );
10. [Bindable]
11. public var currentRoom:String;
12. [Bindable]
13. public var messages:String = “”;
14. private function joinRoom( room:String ):void
15. \{
16. currentRoom = room;
17. views.selectedChild = chatPanel;
18. \}
19. private function sendMessage( message:String ):void
20. \{
21. messages += message + “\\n”;
22. \}
23. ]]>
24. </mx:Script>
25. <mx:ViewStack id=“views“ resizeToContent=“true“>
26. <mx:Panel title=“Room List“ width=“300“ height=“400“>
27. <mx:VBox width=“100%“ height=“100%“>
28. <mx:List id=“roomList“ width=“100%“ height=“100%“
29. borderSides=“top“ dataProvider=“\{rooms\}“/>
30. <mx:Button width=“100%“ label=“Chat“ enabled=“\{roomList.selectedItem != null\}“
31. click=“joinRoom(roomList.selectedItem as String)“/>
32. </mx:VBox>
33. </mx:Panel>
34. <mx:Panel title=“Topic: \{currentRoom\}“ id=“chatPanel“ width=“500“ height=“400“>
35. <mx:HBox width=“100%“ height=“100%“ paddingLeft=“10“ paddingBottom=“10“
36. paddingRight=“10“ paddingTop=“10“>
37. <mx:VBox width=“150“ height=“100%“>
38. <mx:Label text=“User List“/>
39. <mx:List width=“100%“ height=“100%“ dataProvider=“\{users\}“/>
40. </mx:VBox>
41. <mx:VBox width=“100%“ height=“100%“ >
42. <mx:Label text=“Chat“/>
43. <mx:TextArea id=“chatText“ text=“\{messages\}“
44. editable=“false“ width=“100%“ height=“100%“ wordWrap=“true“/>
45. <mx:HBox width=“100%“>
46. <mx:TextInput id=“messageInput“ width=“100%“ minWidth=“0“/>
47. <mx:Button label=“Send“ click=“sendMessage( messageInput.text )“/>
48. </mx:HBox>
49. </mx:VBox>
50. </mx:HBox>
51. </mx:Panel>
52. </mx:ViewStack>
53. </mx:Application>

The above example application is a classic example of how most of us start out developing in Flex, we end up putting all our properties and event handlers in the same file. This may be fine for a tiny application but if we want to scale it up we are going to run into problems.

For example, Flex offers us the ability to create a custom MXML component, that we can then reuse through our application, so as Tom showed, maybe we want to take the code that displays the Room list (above) and copy this into a separate mxml component . We can easily cut and paste the code and create a new MXML file RoomList.mxml with the following code:

1. <?xml version=”1.0″ encoding=”utf-8″?>
2. <mx:Panel title=“Room List“ xmlns:mx=“http://www.adobe.com/2006/mxml“ width=“300“ height=“400“>
3. <mx:VBox width=“100%“ height=“100%“>
4. <mx:List id=“roomList“ width=“100%“ height=“100%“
5. borderSides=“top“ dataProvider=“{rooms}“/>
6. <mx:Button width=“100%“ label=“Chat“ enabled=“{roomList.selectedItem != null}“
7. click=“joinRoom(roomList.selectedItem as String)“/>
8. </mx:VBox>
9. </mx:Panel>

The problem is that we now have introduced two errors as the ArrayCollection ‘rooms’ is no longer in this mxml file then we cannot bind to it as the dataProvider for the roomList, also the event handler ‘joinRoom’ is no longer accessible. We could move these into this file, but then they couldn’t access the view stack and the problem goes on. So what we really need is to centralise our data into a central model and also centralise our even handlers into a controller.

Centralising Data into a Model

To centralise data, Tom took the Cairngorm’s modelLocator pattern, based around a singleton pattern . Where by the singleton ensures there is only ever one instance of itself, we define our Model as follows:

1. package com.chatopica.chat.model
2. {
3. public class ChatModel
4. {
5. private static var instance:ChatModel;
6. public function ChatModel()
7. {
8. if( instance != null )
9. {
10. throw( new Error( “there can be only one instance of ChatModel“ ) );
11. }
12. }
13. public static function getInstance():ChatModel
14. {
15. if( instance == null )
16. {
17. instance = new ChatModel();
18. }
19. return instance;
20. }
21. }
22. }

This is a typical singleton, implemented in ActionScript 3. As Tom pointed out in the eSeminar, ActionScript does not allow for private constructors, so here he is throwing an error if we try and instantiate the class and it is already instantiated. We can now access this Model anywhere in our application by simply typing

1. ChatModel.getInstance()

So the next thing to do is move our ArrayCollection rooms into the Model so we end up with the following:

1. package com.chatopica.chat.model
2. {
3. import mx.collections.ArrayCollection;
4. public class ChatModel
5. {
6. private static var instance:ChatModel;
7. [Bindable]
8. public var rooms:ArrayCollection = new ArrayCollection( [ new Room("Flex"), new Room("Flash"), new Room("AIR"), new Room("ColdFusion") ] );
9. public function ChatModel()
10. {
11. if( instance != null )
12. {
13. throw( new Error( “there can be only one instance of ChatModel“ ) );
14. }
15. }
16. public static function getInstance():ChatModel
17. {
18. if( instance == null )
19. {
20. instance = new ChatModel();
21. }
22. return instance;
23. }
24. }
25. }

Because our ArrayCollection is now in the Model that we can access from anywhere. We can change the mx:List ‘roomList’ in RoomList.mxml to use the rooms ArrayCollection in the Model as the dataProvider as follows:

1. <mx:List id=“roomList“ width=“100%“ height=“100%“ borderSides=“top“ dataProvider=“{ChatModel.getInstance().rooms}“/>

We have now fixed the first issue but we still have the issue of the click handler for the button being inaccessible. We can solve this by centralising our events into a Controller

Centralising Events into a Controller

As with many event driven languages, ActionScript has a handy feature known as event bubbling. When an event is fired in a container, if the event has been set to bubble (by default events don’t bubble) it will also fire on it’s parent container, and in turn fire on the grandparent container all the way up to the main Application MXML class. By bubbling events, we can register event listeners on the System Manager and listen for any global application events that are set to bubble. So we can dispatch an event anywhere in our application using the following, and we can listen for it on the System Manager:

1. dispatchEvent(new Event(‘myEvent‘, true))

Note: We have set the second parameter (bubbles) on the Event constructor to true, which tells the event dispatcher to bubble this event.

As we are centralising our events we may need to send related information along with the event, for use by the event handler. For example, as the event handler is no longer able to directly query the roomList, to see which item has been selected (i.e. roomList.selectedItem), we need to send this information with the event. We can easily do this by creating a custom event that extends the Event class as follows:

1. package com.chatopica.chat.events
2. {
3. import com.chatopica.chat.model.Room;
4. import flash.events.Event;
5. public class JoinRoomEvent extends Event
6. {
7. public static const JOIN:String = “joinRoom“;
8. public var room:Room;
9. public function JoinRoomEvent( room:Room )
10. {
11. super( JOIN, true );
12. this.room = room;
13. }
14. }
15. }

Above we have simply extended the event using inheritance and have added a public property called room (of type Room, Tom has created a Room class that holds the name as well as a collection of Users). We have also declared the event name/type as a constant JOIN = “joinRoom”. This allows us to reference this event anywhere. In our constructor, we call the constructor on the parent class (Event) setting the event name/type to “joinRoom” and stating that it should bubble (like this we don’t have to specify that it bubbles when we create a new JoinRoomEvent). We then set the room property from the parameter passed to the constructor.

So now we can fire a JoinRoomEvent anywhere in our application, passing in a room object. The event handler listening for this event will have access to this room object. So we can fix the last error in RoomList.mxml as follows:

1. <mx:Button width=“100%“ label=“Chat“ enabled=“{roomList.selectedItem != null}“
2. click=“dispatchEvent( new JoinRoomEvent( roomList.selectedItem as Room ) )“/>

So far we have created a custom event and we have discussed where to look to find bubbling events but we have not looked at how to do this.

The Controller

As I mentioned before, we can listen to all events that have been set to bubble on the systemManager and as UIComponent (anyone who has created a custom component will know this one) has a reference to systemManager within it, we can extend this class. The other benefit of extending UIComponent for our class that will be our central event handler or Controller is that we can then use it in MXML.

We extend the UIComponent as follows:

1. package com.chatopica.chat.controller
2. {
3. import com.chatopica.chat.events.JoinRoomEvent;
4. import com.chatopica.chat.events.SendMessageEvent;
5. import com.chatopica.chat.model.ChatModel;
6. import flash.events.Event;
7. import mx.core.UIComponent;
8. import mx.events.FlexEvent;
9. public class ChatController extends UIComponent
10. {
11. public function ChatController()
12. {
13. addEventListener( FlexEvent.CREATION_COMPLETE, setupEventListeners );
14. }
15. private function setupEventListeners( event:Event ):void
16. {
17. systemManager.addEventListener( JoinRoomEvent.JOIN, handle_joinRoom );
18. }
19. private function handle_joinRoom( event:JoinRoomEvent ):void
20. {
21. ChatModel.getInstance().currentActivity = ChatModel.VIEWING_CHAT;
22. }
23. }
24. }

Note:: Above we have not directly added an event listener to the systemManager in the ChatController constructor. In fact we can’t to do this, because at the time the class is instantiated the systemManager is not initialised and is Null. We would therefore be adding an event listener to nothing. We get around this by adding an event listener for the global FlexEvent.CREATION_COMPLETE event, and at th