Integrating Macromedia Flash and IBM Lotus Notes/Domino: Flash-based UIs for your Domino-based solutions

Document options Document options requiring JavaScript are not displayed Discuss Sample code Rate this page Help us improve this content

Level: Intermediate

Jonas Israelsson, Principal Domino Developer

11 Jul 2006

Present content and incorporate the design from a Domino view into a Macromedia Flash-based view. With this solution, you can quickly expose standard Domino views for Web users and easily update the design of a single Domino view for both Lotus Notes and Web clients.

This article shows you how to present IBM Lotus Domino view content in Macromedia Flash, based on and controlled from a flat Domino view. In this way, you can maintain the same design and content presented both in Lotus Notes and in Flash user interfaces (UIs) simply by altering the Domino view.

By employing this solution, you no longer need to put inline HTML or XML in an additional view to format the content the same way in your Lotus Notes UI and Flash UI. Instead, the UIs can share the same formatting when you create a single Domino view that includes the formatting applied to column headers or rows -- for example, font size, font family, and font weight. Using Flash in the Web client in this way opens the possibility for embedding the fonts used in the Domino view into a Flash movie, which renders perfectly in the Web client.

This article describes a Flash solution called FlashNotesView. It reads both the content and the design from plain Domino views and applies them to the Flash UI as shown in figure 1. This article assumes that you are an experienced Flash developer with knowledge of the ActionScript language and that you are familiar with Lotus Notes/Domino application development.

NOTE: The code in this article resides within an external ActionScript file called FlashNotesView.as. You can view this code in a text editor, if you haven’t installed Macromedia Flash.

Create the UI components

Macromedia Flash comes with a predefined set of UI components, but of course, you can also use Macromedia Flash Exchange to add more components. You use these components to create UIs in Macromedia Flash simply by dragging and dropping them onto a stage or by using code to create instances of certain classes at run time.

Suppose you want to create something that resembles a flat Lotus Notes view within Macromedia Flash. To do so, you use a UI component called DataGrid. To create the components at run time, you must import classes for three UI components at the beginning of your Flash movie. These classes are Label, List, and DataGrid with the commands for importing them as follows:

After importing the classes you need, you can create new class instances at run time by using the createClassObject method as follows:

lblSelectView = createClassObject(Label, "lblSelectView", 
			getNextHighestDepth()); lstSelectView= createClassObject(List,"lstSelectView", 
			getNextHighestDepth()); dgridView = createClassObject(DataGrid, "dgridView", 
			getNextHighestDepth());

Back to top

Prepare the data provider

A data provider is a model for the data viewed within components, such as List and DataGrid, which in theory is simply an array of objects. Using the push method of the Array class, you can add new objects to your data provider. Each object in the array is also known as an item in the data provider, each of which appears as a separate row in a List or DataGrid component. To define the data that appears in the List component, use the following code:

In this article, we use the Domino views in the Lotus Documentation site database (notesua.nsf) on developerWorks Lotus.

Back to top

Assign the data provider

The instance of the List component has a property called dataProvider. To assign the data provider model to the List instance, use the following command:

This command populates the List component with the items in the data provider model. You have now set up everything that is displayed for the user when the Flash movie runs for the first time. In the following sections, you add the code necessary for retrieving the content and design from the Domino view that the user has selected from the List component in the Flash movie. (The List component appears in the "Select view" box in figure 1.)

Back to top

Get content and design from Domino views in XML

First, you must retrieve the content of a Domino view. Several URL commands are available in Lotus Domino for this task -- for example, ?OpenView, ?OpenDocument, ?OpenPage, and ?ReadForm -- but ?ReadViewEntries and ?ReadDesign are the preferred URL commands.

Retrieve content from a Domino view

Using ?ReadViewEntries, you can retrieve the content in a view as XML instead of its preset format. The URL syntax for this retrieval is as follows:

Here is the URL result:

<?xml version="1.0" encoding="UTF-8" ?>
<!-- Lotus-Domino (Release 7.0.1 - January 17, 2006 on Windows NT/Intel) --> 
<viewentries toplevelentries="690">
  <viewentry position="1" unid="E1EFAB2B58C8B68785257145005A41FC" noteid="86B6"
    siblings="690">
    <entrydata columnnumber="0" name="Date_Update">
      <datetime>20060403</datetime>
    </entrydata>
    <entrydata columnnumber="1" name="Titles">
      <text>Real-time access and data management for the intelligent
        enterprise</text>
    </entrydata>
    <entrydata columnnumber="2" name="Language">
      <text>English</text>
    </entrydata>
  </viewentry>
...
</viewentries>

Retrieve a Domino view design

Here’s a bit of news for developers: The largely undocumented URL command ?ReadDesign enables you to retrieve not the content of a view, but its design in XML, that is, how the view column headers and rows are formatted. The URL syntax for retrieving the design is as follows:

Here is the URL result:

<?xml version="1.0" encoding="UTF-8" ?>
<!-- Lotus-Domino (Release 7.0.1 - January 17, 2006 on Windows NT/Intel) --> 
<viewdesign rowlines="3" direction="0" spacing="1" columns="3"
    totalscolor="#808080">
    <column columnnumber="0" width="80" name="Date_Update" title="Last updated"
      sort="true" sortdescending="true" resortascending="true" format="2"
      listseparator="none">
      <cfont style="r" size="7" color="#000000" face="Helvetica" />
      <hfont style="b" size="7" color="#000000" face="Helvetica" />
      <numberformat digits="0" format="general" />
      <datetimeformat show="date" date="yearmonthday" time="hourminutesecond"
        zone="never" />
    </column>
...
</viewdesign>

By retrieving the design of Domino views, you can have views formatted nicely in Lotus Notes, and the font settings -- and other formatting -- also appear in the Flash UI.

Back to top

Create XML objects

Handling XML in Macromedia Flash You can use the XML class within Macromedia Flash to ignore white space in the XML and display a message when it has finished loading the XML content from the data.xml file. To do so, use this script: var xml = new XML(); xml.ignoreWhite = true; xml.onLoad = function(success) { if(success) trace("XML has successfully been loaded."); } xml.load("data.xml");

How do you get the XML you receive from the Domino view into your DataGrid component in Macromedia Flash? First, you must have an XML object that communicates and handles the response from the request sent to the server. The xmlView XML object contains the XML that the server responds with; you tell this object to ignore white space (see the sidebar, "Handling XML in Macromedia Flash") because you don't need the XML formatted for human reading.

A function is also assigned to execute when you receive the XML result from the server as follows:

Back to top

Retrieve view content

Retrieve the view design Create an additional XML object similar to xmlView called xmlViewDesign. This object holds the XML received from the design of the selected view: xmlViewDesign.load(strView+"?ReadDesign"); Add this line to the XML handler function xmlView so that it loads the design after it has successfully loaded the view content.

When the UI loads in Macromedia Flash, you call the load method of the XML object that initiates loading of the XML content from the view selected by the user as follows:

The strView variable holds the URL to the current selected view.

Back to top

Populate DataGrid with view content

When you receive XML content from the Domino view, both code listings that follow execute because they have been placed within the onXMLViewLoad function. Use a temporary array to hold the XML nodes when you iterate through the result.

The next code listing iterates through the XML nodes and creates a temporary objRow object, which is populated with the content of the columns of each row from the Domino view. The objRow object is then appended to the dataProvider property of the DataGrid component.

arrViewRows = xmlView.firstChild.childNodes;
for (var row = 0; row<(arrViewRows.length); row++) {
  if (arrViewRows[row].nodeName == "viewentry") {
  arrViewCols = arrViewRows[row].childNodes;
  var objRow = new Object();
  for (var col = (arrViewCols.length); col>=0; col--) {
    if (arrViewCols[col].nodeName == "entrydata") {
    objRow[arrViewCols[col].attributes.columnnumber] =
      arrViewCols[col].firstChild.firstChild;
    }
  }
  arrView.push(objRow);
  }
}
dgridView.dataProvider = arrView;
// Clear datagrid column headers
for (var col = 0; col<(dgridView.columnCount); col++) {
  var column = dgridView.getColumnAt(col);
  column.headerText = "";
}

For a clean presentation, the column headers of the DataGrid are cleared here and instead are populated when you apply the view design later.

Back to top

Apply the view design to DataGrid

To apply the design settings from the view, you must add the code shown here to the onXMLViewDesignLoad function, which executes when you receive content from the ?ReadDesign command. Again, use temporary arrays to hold the XML nodes when you iterate through the result.

var arrViewCols = [];
arrViewCols = xmlViewDesign.firstChild.childNodes;
for (var col = 0; col<(arrViewCols.length); col++) {
  if (arrViewCols[col].nodeName == "column") {
  var column = dgridView.getColumnAt(col);
  column.headerText = arrViewCols[col].attributes.title;
  column.width = int(arrViewCols[col].attributes.width);
  column.resizable = Boolean(arrViewCols[col].attributes.resize);
  column.setStyle("fontSize",
    int(arrViewCols[col].firstChild.nextSibling.attributes.size));
  column.setStyle("fontFamily",
    arrViewCols[col].firstChild.nextSibling.attributes.face);
  column.setStyle("color",
    arrViewCols[col].firstChild.nextSibling.attributes.color);
  }
}
dgridView.redraw();

This code iterates through each column defined in the XML and applies the settings for those columns in the DataGrid component. It does this by setting appropriate Cascading Style Sheet (CSS) values through the setStyle property.

The design properties that this code supports from a view design are:

• Column header text
• Column width
• Column resizable or not
• Column font size

Of course, you can easily extend this list by adding code to support more properties from a view design.

Back to top

Implement FlashNotesView.as in new solutions

To use FlashNotesView.as when starting with a new Flash movie, such as the one included in FlashNotesView_clean.fla, add this line to the first frame within the Actions pane in your Flash movie:

Limitations of the FlashNotesView solution In its current state, the supplied version of FlashNotesView doesn’t support categorized views. One solution for this is to use the TreeList component to show documents in a hierarchy.

Next, drag an instance of Label, List, and DataGrid from the Components pane onto the stage, and then delete the newly created instances from the stage. This tells your Flash movie to include these newly added components when it compiles the Flash file into the ShockWave Flash (SWF) format used by Macromedia Flash Player. Because the actual code is in the external FlashNotesView.as ActionScript file, this is all you need to do within Macromedia Flash.

Back to top

Customize your FlashNotesView solution

Except when you are altering FlashNotesView.as, you must use Macromedia Flash to compile the Flash (FLA) file into an SWF Flash movie for Macromedia Flash Player. First, try customizing the list of views from which users can select. You can easily alter this process within the code. For example, if you want to add a view from Bob Balaban (Looseleaf) Forum, simply add the following code, where the data provider is defined at the beginning:

NOTE: The URL must exclude any existing URL commands, so remove ?OpenView from the original URL when copying your own URLs from the Web.

When you become familiar with customizing this solution, consider creating a custom class for extending DataGrid that contains your preferred methods and properties.

Back to top

Security

If a security message appears when you’re testing the supplied FlashNotesView_final.swf Flash movie, follow the displayed instructions to allow your local SWF file to communicate with an external address.

With the release of Macromedia Flash Player 8 came a raised security level that allows Flash movies to communicate with backend systems only in the same domain. To avoid this issue, create a text file (called a policy file) on the backend server with which the Flash movie can communicate. Then, add to that text file the domains that should be allowed to communicate with the current server.

The following is an example of a policy file that resides on backendhost.com, which accepts requests from clienthost.com:

The file name of the policy file is crossdomain.xml. Refer to the Adobe article "Security Changes in Flash Player 8" for details about the improved security model in Macromedia Flash Player 8.

Back to top

Conclusion

Rich Internet applications -- that is, Flash-based UIs with the power of desktop applications that can be combined with video and sound -- have been the hot topic in Flash development for several years now. Such applications are also most likely to be connected to backend systems for the delivery of content to users.

You can use a Lotus Domino server as a backend system for Flash-based UIs and can embed Flash applications in HTML files served from a Domino database to client computers on different platforms. It is also possible to compile a Flash application into a standalone executable file that administrators can burn to a CD and distribute. The Flash application on the CD retains its connection to the backend Domino server, which is accessible through HTTP from the client computer. This is one of the strengths of using Macromedia Flash as a separate presentation layer on your Domino-based solutions, and you can easily apply the Flash application to additional backend systems, if necessary.

Back to top

Downloads

	Information about download methods

Resources

• developerWorks article, "Building PHP-based UIs for IBM Lotus Domino"
  
  
• developerWorks article, "Using Ajax to manipulate Lotus Notes documents"
  
  
• Adobe article, "Security changes in Flash Player 8"
  
  

• Download a trial version of Lotus Domino from developerWorks.
  
  
• Download a trial version of Lotus Notes from developerWorks.
  
  
• Download a trial version of Macromedia Flash Professional.
  
  
• Download Flash components from Macromedia Flash Exchange.
  
  

• Participate in the discussion forum.
  
  
• Participate in developerWorks blogs and get involved in the developerWorks community.

About the author

		Jonas Israelsson is a Principal Domino Developer at Strand Interconnect, tasked with developing role-based portals. One of his fields of interests is merging rich, intuitive UIs with backend logic. You can reach Jonas at jonas.israelsson@strandinterconnect.se. You can also check out Jonas’ blog at http://www.israelsson.nu/blog/.

Rate this page

Please take a moment to complete this form to help us better serve you. Did the information help you to achieve your goal? Yes No Don't know   Please provide us with comments to help improve this page:   How useful is the information? 1 2 3 4 5 Not useful Extremely useful

Share this.... Digg this story del.icio.us Slashdot it!

Back to top