Menu Tutorial Using the Flex Parsley Application Framework

Update 2/12/2011: Based on feedback from Jens, the creator of the Parsley framework, I’ve updated this post and the downloadable sample code.

Last year I posted an example of a Flex sliding menu component along with a simple project that shows its use. Here, I present a variation of the menu using the Parsley application framework. Parsley is a popular Flex framework which is used for dependency injection, decoupled messaging and much more. Dependency injection allows you to build applications which are more loosely coupled. This makes your applications easier to modify and test.

Similarly, decoupled messaging gives you more flexibility than the standard Flex event mechanism. With Flex events, in order to add an event listener you have to have a reference to the object you want to listen to. This causes closer coupling which, again, makes applications less resilient to changes. With Parsley messaging any object can listen for any event whether or not the receiver has a reference to the sender. Parsley messaging also provides additional flexibility in the ability to send any object as a message payload. With Flex events you can only send an Event or an Event subclass. There are additional benefits to Parsley’s messaging model, such as message selectors, which you can read about on the Parsley website.

Parsley Menu Example

This example is very similar to my original example. The only differences are in the sending and receiving of the MenuItemSelectedEvent and, of course, the configuration of Parsley. For this simple example the amount of code needed to set up Parsley is minimal. To get started we just need to add a pair of SWC library files to the Flex Build Path: parsley-flex4-2.3.0.swc and spicelib-flex-2.3.0.swc. Both are included in the Parsley distribution.

In the menu component, VerticalSlidingMenu.mxml, a MenuItemSelectedEvent is constructed as before. This event contains the id of the menu item which is clicked. The difference is that, instead of dispatching an event, we use the Parsley messaging mechanism to send a message. In this case, we call our message sender sendMessage although we could call it anything we want. What’s interesting here is that we don’t actually define a sendMessage function, per se. Instead, we just declare it using the Parsley MessageDispatcher meta tag:

[MessageDispatcher]
public var sendMessage:Function;
 
protected function menuClickHandler(event:MouseEvent):void
{
	var menuEvent:MenuItemSelectedEvent = new MenuItemSelectedEvent(MenuItemSelectedEvent.MENU_ITEM_SELECTED, event.target.id);
	sendMessage(menuEvent);
}

Parsley provides the function definition.

To receive the event we declare a MessageHandler in MenuParsley.mxml, the main application file:

[MessageHandler]
public function messageHandler (event:MenuItemSelectedEvent) : void 
{
	_menuItemClicked = event.menuItem;
}

This is equivalent to a Flex event listener except that we don’t use addEventListener to link it to the menu component. Parsley takes care of connecting the sender and receiver.

Parsley configuration for this simple example consists of only two statements. First, in MenuParsley.mxml we just need a ContextBuilder tag. The following tag is in the Declarations section:

<parsley:ContextBuilder  />

Second, we just have to add a <parsley:Configure/> tag to the declarations section of VerticalSlidingMenu.mxml. That’s it!

Download the sample application (FXP). For more info on using Parsley see Art’s Flex Notes series of posts.

Tagged as: MVC, Parsley