Kalen Gibbons

I decided to take a look at SpiceFactory’s Parsely framework for Flex, and I was pretty impressed. When I started to dig into the framework I discovered that although the framework’s documentation was very good, there weren’t many community examples or tutorials for the framework. So I decided to create a short series on getting started with Parsley. The examples in the series will be fairly simple and no advanced topics will be discussed; my aim is to help developers get a jump-start on development, by providing simple examples of working code.

Defining Object Dependencies

We’ll begin by learning how to add dependency injection into an application. First, we need to recognize our object dependencies. In the sample application below, the ContactList view requires the ContactManager model object to provide its data. In Parsley, marking that dependency as an injection point is as simple as adding the [Inject] metadata tag above the property declaration.

Parsley can also inject properties into constructors and other methods, and you can find more information on that here.

Creating the IOC Container

Next, we need to tell Parsley where to find the ContactManager class before it can inject it into the view. To do this, we need to add it to the IOC Container, which is responsible for wiring all our dependencies together. The container can be written as MXML, ActionScript, XML, or a combination of the three. For more information on using these methods you can view the documentation here. For this example, we will look at an MXML configuration. To do this, simply create an MXML file with mx:Object as the root tag, and add references to the objects that we will need to wire, like so:

Wiring the View

The framework won’t know to look in our ContactList view for injection points unless we tell it to. To do this, we need to also add the view into the IOC Container. There are two ways of doing this. We could explicitly declare it in the container like we did in the previous step for the ContactManager. But for views, Parsley allows us to dynamically wire them by simply dispatching a single configuration event like so:

The configureView event tells Parsley that the view should be added to the IOC Container at runtime.

Initializing the Framework

Finally, to put it all together, we need to initialize the framework and provide Parsley with the IOC Container we created. We want to do this as early as possible so doing this on the addedToStage event is common practice. Simply call the FlexContextBuilder.build() method and provide the IOC Container and the root DisplayObject used for wiring (typically the application root).

Here is a working example of the code. The application is very simple; when you click the button it simply populates the ContactModel object with data, which is bound to the DataGrid. The key is to notice how the ContactModel has successfully been injected into the view.

You can view the source code here.

Points to Remember

• Dependency injection takes time, and your objects might not be immediately available. In your views, even after the creationComplete event, your objects may still be null. So what you need to do is use [Init] metadata to designate a function for Parsley to run after injection is complete. Using this instead of a Flex event will ensure that your objects are all available and ready for use.
• Don’t forget to add the application root to the IOC Container, if necessary. Even though you may initialize the framework in the application root, and use it as the view root of the Context, you will still need to dispatch the configureView event if you need dependency injection to take place in the application root.

Conclusion

If you haven’t done so already, please read the Parsley Documentation for more information about dependency injection and the Parsley framework. And like I stated in the intro, I’m new to Parsley myself so if anyone would like make corrections or suggest any best practices, please feel free to do so in the comments.

This entry was posted on Monday, November 9th, 2009 at 9:59 pm and is filed under ActionScript, Flex, How-To. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.