Monday 13 April 2009

Flex for Thick Gits #6 - Populating a list box from a Domino Agent

OK we are going to look at a real example. I am assuming you have FLEX BUILDER installed for this.. although you can do it with just the SDK, it is a lot easier if you are in FLEX BUILDER.

01. Fire up your Notes Designer Client and create a new blank application called flexdata.nsf on your developement server.

02. Create a form called mydata and populate it like this
The ItemKey is a computed field "Computing on Composed" to @Unique

03. Save your form

04. Create a view called mydataview and have it select ONLY forms = "mydata"
sort it by ItemKey Ascending not categorised.

05. Create an agent call it getdata and give it these properties


06. In the Initialize sub write the following code

Sub Initialize

Dim ThisSession As New NotesSession
Dim ThisDb As NotesDatabase
Dim ThisView As NotesView
Dim ThisDoc As NotesDocument

Set ThisDB = ThisSession.CurrentDatabase
Set ThisView = ThisDB.GetView("mydataview")
Set ThisDoc = ThisView.GetFirstDocument
Print |Content-Type:text/xml|
Print |<?xml version="1.0" encoding="ISO-8859-1"?>|
Print |<items>|
Do While Not (ThisDoc Is Nothing)
Print |<item>|
Print |<key>|+ThisDoc.ItemKey(0)+|</key>|
Print |<name>|+ThisDoc.ItemName(0)+|</name>|
Print |<price>|+Format(ThisDoc.ItemPrice(0),"##0.00")+|</price>|
Print |</item>|
Set ThisDoc = ThisView.GetNextDocument(ThisDoc)
Loop
Print |</items>|
End Sub
All this code is doing is looping around the documents in the view and printing them out as XML
You could use the inbuilt &readviewentries function to return the XML however I want to keep the XML produced as simple as possible for the moment.

The most important thing to note are the top two Print Statements
Print |Content-Type:text/xml|
Print |<?xml version="1.0" encoding="ISO-8859-1"?>|
this ensures that the rest of what is produced is XML!

07. Change the ACL on your file to be Default = Manager so you can test access to the nsf without having to logon (you would NOT do this in real life!)

08. Open the data base in the Notes Client and create 4 or 5 items

09. Goto your browser and enter the url
http://[myserver]/[mynsf path]/flexdata.nsf/getdata?openagent
for example on my server that would be
http://www.unseenuni.com:81/flex/flexdata.nsf?getdata

10. You should see data like this

SUCCESS!!

OK you can close down your Notes Client for now and start the Flex Builder Application

11. Create a new project called DomonoData1 using File then New then Flex Project

12. Open the script TAB and paste in this
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="myData.send()">
<mx:HTTPService id="myData" url="http://www.unseenuni.com:81/flexdata.nsf/getdata?openagent" result="dataResult(event)"/>

<mx:Script>
<![CDATA[
import mx.rpc.events.ResultEvent
import mx.collections.ArrayCollection
[Bindable]
private var items:ArrayCollection = new ArrayCollection
private function dataResult(event:ResultEvent):void
{
items= event.result.items.item;
}
]]>
</mx:Script>
<mx:FormItem label="item" width="272" height="48">
<mx:List id="itemlist"
rowCount ="2"
dataProvider ="{items}"
labelField="name" height="46" width="229"/>
</mx:FormItem>
</mx:Application>

Replace the URL in the HTTPService tag with the URL that points to the agent on YOUR server!!

13. Click on the RUN button in the Flex Builder Toolbar


14. Your browser should open and you will see something like this


OK lets look at the code in some more detail
A = This is the application definition. Note that the last line of the code is the closing tag for this item. All the code is enclosed in these tags, with the exception of the &lt:?xml ... ?> xml definition tag. I have also added a creationComplete function called myData.send() this function will run when the FLEX app has totally loaded and will trigger the HTTPService object myData to go and get data.

B = this is the definition of the HTTPService agent, it has an id of myData and you will note this is name that is referenced in the creationComplete function defintion of the <Application> tag. I supply it with the URL that provides the application with XML data from the server I also supply it with a function that will run when data is recieved in this instance it is a function called dataResult and i am passing it the event object that the result event creates.
C = these two imports tell the Flex compiler to bring in the extra MXML code for RPC events and ArrayCollections. This code is not automatically brought in so we have to add it in manually.

D = the [Bindable] metatext tells Flex that the var that follows will be available for binding to other data capable objects. The var declaration that follows creates a new empty ArrayCollection called items

E = This is the function I defined as the result event handler in the HTTPService object B
The HTTPService object result event object contains the XLM returned as a nicely formatted property. So I can assign this data to the ArrayCollection var I just created. It is worther of note that the event.result object holds the data in the same hierarchy as defined in the XML i created
If you remember each record was stored in an [item] and these were surrounded by an [items] tag. So the data we want is found in the event.result.items.item which is (for me anyway) a little odd.. i would have put it in the event.result.items but it isn't so BE Careful!

Lastly here are the elements on the page itself.... a FormItem and a List. The important thing here is the dataProvider="{items}" line. This tells the list item to bind to the items ArrayCollection which has been populated by the dataResult() function triggered by the creationComplete event.

30 lines of Flex code, a domino form, view and agent .. and you have data moving from your domino server down to your flex app .. :-)

I have popped the NSF and the FLEX project directory up to the web and you can download it here. Simply move the FlexData.nsf DB to your server and sign it. the Flex project.. copy into your Flex Project dir and load.. and away you go.. enjoy. :-)

Disqus for Domi-No-Yes-Maybe