Right then. Here goes with the first in a series of Flex posts that will cover some of the basics of a Flex app to integrate with a backend Domino site. By the end we should have a working application that you view, edit and create documents from.

First I want to cover views. In Flex we use a (Advanced)DataGrid to render a view. This is something I've shown how to do before and isn't exactly rocket science; when the Flex app loads it triggers a GET request for the XML of the view. When the XML is received it tells the grid to use the XML as its DataProvider and it all appears in the grid.

Here's the Contact Manager we're going to build:

For now it's just a grid with a couple of rows of data in it. All very simple. What I wanted to discuss here is a technique I've started using in all my Domino-based Flex apps, which makes it a little easier to make "design" changes to the grid.

As I'm sure you know, users like to constantly request new columns be added to views. Every time you need to add or remove a column from a view you really don't want to have to change the Flex app's code.

Because the Flex app itself is a compiled Flash file, any changes you need to make to it require you to launch Flex Builder, make the change, recompile and then import the new SWF file in to Domino Designer, which will mean the user has to download the whole app again (~600kb). We want to avoid having to do this as much as possible.

So, what I now do is include the column definitions as part of the XML data. Here's what the XML looks like when you open the vwContactsAsXML view:

The XML contains two main child elements - the columns and the documents. The documents come from a simple "Treat as HTML" view like below.

The column definitions are added on the Form called "$$ViewTemplate for vwContactsAsXML", which looks like this:

All very straight-forward, no?

In Flex we now need to programmatically add all these columns at "run time". To do this we use the same function that is called when the XML has loaded. The same function that usually just updates the DataProvider of the grid to the <documents> in the XML.

The function looks like this:

private function handleContactsXML(event:ResultEvent):void{

        //Update the DataProvider of grid, which is bound to {contacts}
        contacts = new XMLListCollection(event.result.documents.document);
                                
        //Custom columns
        var columns:XMLList = XMLList(event.result.columns.column);
        
        var cols:Array = new Array();
                                
        for each (var column:XML in columns){
                var col:AdvancedDataGridColumn = new AdvancedDataGridColumn(column);                                    
                col.headerText=column.@label;
                
                cols.push(col);
        }
        
        //Grid is the name/id of the AdvancedDataGrid!
        grid.columns = cols;
}

Still, all very simple. Load the demo application to see it in action. It's just the bare bones at the moment. As I add new bits over the coming posts you should see it slowly turn in to a working application. For now, hopefully, you can see the benefit of the above approach. Using this technique makes adding and removing columns from "views" a lot, lot simpler.

In the next post I'll look at taking it one step further and using the column definition to add more control over their appearance and behaviour.

Part 2 »