Flex: How to achieve proper separation of responsibilities

In a previous post I was discussing on my experience with Flex and one of the highlighted pain points is the extremely poor quality of the available tutorials.

Let’s have a look at the source code of the Flick tutorial:

In a single page you have:

• The declaration of visual components (TileList)
• the declaration of non visual component (HTTPService)
• event handling (photoHandler)
• data binding (photoFeed)
• pure logic (requestPhotos)

If you decide to follow this development model you will obtain something that is extremely fragile to evolve or simply just to maintain.

Let’s start assigning the right responsibilities to the right objects.

The first step is creating our own Application object and use it as root in the mxml file:

Now the HttpService component is not exposed anymore (and ideally can also be injected) and the events handling in the right place.

The second step is to extend the HttpService object to place the requestPhotos behaviour in the service. The result is below:

At the end of this refactoring our mxml file looks like this:

Here now we are declaring only visual components, and its only role is defining what we want to see and how.