Until now all the Flex demos I've produced have tied the data in the forms to a DataGrid. Take the Accounts demo for example. If you double click a row in the grid it will open up a form below it. Using this form you can alter the values and post them back to the server. 

That demo works by binding the value from the selected row in the grid to the fields on the form. If - with the form open - you select a different row the form's fields magically update. This is all very well, but, it assumes that all the data you want to manipulate is held in the XML that the grid uses for display. In most cases this won't be true.

Documents are made up of more fields than a view ever has columns.

What we need to do is create a new container for each document we want to open and have it fetch all the data from the server when it's opened.

What I've been tinkering away on is just such a solution. Cast your eyes of the screenshot below:

What you're looking at is a two-pane application, where both the upper and lower panes contain tabbed navigators. The upper pane has a fixed number of tabs - one for each of the view. The lower pane has a new tab added each time you open a document by double-clicking it in a view. Notice of the three tabs already open that they have a different icon on the tabs, depending on document type and a close icon to remove the tab.

Notice in the lower pane that the Form has a fixed-position action bar where, as Notes devs, we'd expect it to be. And that files attached to the document are listed with an associated icon. Clicking the file will download/open it.

It needs further polishing before I can update the online demo or make the source downloadable, but I just couldn't resist teasing you with a screenshot and wanted to assure you the code is forthcoming. Honest. In the mean time I'll cover the principle of opening documents.

How To Open a Document

Remember we already covered how I define the design of the views from the server by using views used purely to render the XML for Flex? Well, taking this one step further we can also add a Form that is used purely for delivering the XML for Flex.

Let's take the Contacts view. We already have an XML counterpart called "vwContactsAsXML". Imagine if we add a Form Formula to that view, like below:

Whereas the View Selection for this view show documents based on the "frmContact" we're going to use a different Form to open them. The Form used looks something like this:

The Form is told to treat its contents as content-type "text/xml". In Flex, when the user double-clicks a document in a view it opens a new tab and the "on load" event then gets the document's XML data through a URL like:

/database.nsf/vwContactsAsXML/DOCID?Open

The returned XML is then bound to the fields on the form. How simple is that?

At the bottom of the "XML form" is a Computed Text area which returns information about the @Attachments on the document, which looks like:

<files count="5">
        <file name="a brochure.pdf" type="PDF" size="472283" /> 
        <file name="bathroom.vsd" type="VSD" size="316416" /> 
        <file name="relief.png" type="PNG" size="1827794" /> 
        <file name="document.docx" type="DOCX" size="9941" />
</files>

This is what Flex uses in a Repeater control to display the files as links to download. The attachments area of the form is based on a custom control I created, which can be added to any form and which you'll be able to take out of the download and use in your own apps.

Now, I know what you might be thinking -- "You mean you have to create a new XML-based form and view for each traditional form and view in the backend?" Well, yes. I know this means making changes in two places. But, unless you can think of a better way of doing this it's an approach I'm settled on for now.