With Flex, as with any kind of development, as soon as you find yourself copy-pasting the same bits of code because you want to create a new copy of an object within the same app, you need to stop what you're doing and convert that something in to a re-useable component.

Without wanting to patronise my peers, the benefits of using a component should be obvious -- not only do they keep the "master" code file nice and tidy but they make it much, much easier to make changes to all common objects. You can also take them and use them in other projects.

I'm working on an app with four tabs at the moment. Each tab has a "view" on it. The first tab is the "dashboard" and that has two views on it. That's five views in total and all share common features. To have had five copies of all the same objects and functions would have been foolish. Instead I created a "Notes View" component.

You can see an example of the type of "view" I'm talking about in the new updated demo and in the screenshots below. Just above the DataGrid is a "toolbar" of items associated with it. The same toolbar items can apply to all views.

On the next tab along is another view, which shares the same features, but is, as you can see, a different view.

It's not only these visual elements the views shares. In the background are numerous functions and hidden elements used in the generation and behaviour of a view. Using components was the only way to go.

The Notes View Component

You Flex code for the tabs above is shown below:

<mx:TabNavigator>

 <mx:VBox label="Contacts">

  <components:View 
   id="vwContacts" 
   sourceURL="vwContactsAsXML?Open"/>

 </mx:VBox>
 
 <mx:VBox label="Companies" 
   initialize="vwCompanies.load()">

  <components:View 
   id="vwCompanies" 
   sourceURL="vwCompaniesAsXML?Open"/>

 </mx:VBox>
                
</mx:TabNavigator>

Simple isn't it. That's all the code it took to build what you see in the screenshots above. Well, apart from the code inside the View component of course. It's inside the component that the code tells Flex to fetch the XML and load it in to the view. It's also where the columns are built and the filter handling and other functionality lives.

Notice in the above code that the initialize event of the second tab calls the View's method called "load()", which triggers a GET request for the XML from the server. This is a custom method I added, which speaks volumes about how easy that is to do.

To add a View based on this component takes no more than 2 lines of code.

Using The Component

If you want to try it out then you can download the files needed to use the component here.

Import the Zip file straight in to Flex builder and then your project's file structure should look something like what you see to the right.

Notice the existence of the folder within the "src" folder called "components" and that this was the prefix to the XML tag used to load it in to Flex.

Before you can do this you need to declare the namespace in the parent application, which you do like this:

<mx:Application 
 xmlns:mx="http://www.adobe.com/2006/mxml"
 xmlns:components="components.*">

And that's about all there is to it!

If you want to test it out in lieu of the full database download, which will be some time next week, you'll need a view in the XML format used. Just point the view's sourceURL at this url.

Hey, It Ain't Perfect!

The most obvious omission from this view is the lack of pagination. The URLs I've used in the demo have had "&count=-1" tacked to the end of them and assume all documents are loaded in one go. Hence why the filter box above the view is so fast - it's not searching the backend view, but the XML already loaded.

If I feel inclined then pagination is something I'll add in at some point if there's the demand for it?

Next Step

Next week I'm planning to talk about adding Forms to the Flex app. Once I've done that I'll wrap everything up in to a Zip for you to download.