The Composite App Component catalog contains various "recipes" consisting of re-usable components and instructions for using those components in a Composite Application.
This introduction provides information on the format of the recipes.   It also provides the  basic steps needed to access the components in the recipes within the Composite Application Editor or CAE.   

General Format for a Recipe

Recipes in this database are generally divided into a number of sections.   Most recipes follow the following format for the sections.

Overview

The first section common to all recipes is the "Overview".   This provides information about what the component does, as well as the kind of application that can make good use of the component.

What you Need

This describes the component and how it can be accessed within the Composite App Component Catalog.  It also describes the other application elements that are necessary to get the component to work with your data.

Assembly

The instructions for getting the necessary components into a page of your composite application.

Wiring

Describes the connections that are needed between various components to pass the appropriate data.

Advanced Component Properties

Application specific data elements that need to be set for the component.

How it works

Describes the application and how the components interact with the data and the UI.

Further Steps

Where do we go from here?   Describes any shortcomings and enhancements that can be done to improve the application

How to Create a New Composite Application

A composite application is a special type of Notes database.   You create it by going to the File - Application - New menu., or typing Ctrl-N

When the above dialog is displayed, give the database a Title, and File Name.   If the database is going to reside on a server instead of your local machine, make sure the server name is entered in the server field.  

To make sure a composite application database is created from the process, select the -Blank Composite Application- template in the template list.   Select OK to create the Composite Application.   Notes will then open the composite application database with a blank page:

How to Edit a Composite Application

Editing your composite application is done by opening the Composite Application Editor (CAE).  This is done by choosing the "Action" menu item in Notes and selecting "Edit Application".

This will open the CAE with your empty application:

The left hand side of the CAE has the frame for the default navigator.  Within the Navigator is the default Blank Page.  This can be closed or opened by clicking the arrow tab in the middle of the frame separator.

The right hand side of has the initial blank page that is created by default when creating the database.

How to Add a Component From the Catalog to your Palette

To open the CAE Pallette, you can use the menu option "Tools - Component Pallette - Open".   You can also open it by finding the arrow tab in the middle of the right hand side of edge of your application, and clicking the arrow to expose the pallette.  

We will now describe how to add components from the Composite App Component Catalog.   These instructions will work for any Notes database containing components you wish to add.  The first thing to do is know the server and file name for your application.   The database is on the server CAMDB01/CAM/A/Lotus and the file name is c_dir\CompaAppComps.nsf.

A good practice for the CAE is to create a Category to use in the Pallette.   The category is useful to group components, such as components from the same source like the Composite App component Catalog.   To create a category in the Pallette, go to the menu option "Tools -Component Pallette - Add Category".   This well create a new category on the Pallette labeled "New Category".   The "New Category" text will be highlighted and editable so you can name the category, such as "Composite App Component Catalog".   We will use this category when adding to the Pallette.

In the CAE, go to the menu option "Tools - Component Pallette - Add Components - Add NSF Component".   This will bring up the dialog box shown below:

We need to supply the Notes URL to the database.   Click the Browse button which brings up the "Locate Object" dialog:

We now need to click the folder icon to the right of the Application selection list box, to bring up the "Choose Application" dialog.   Make sure you fill in the server for CAMDB01/CAM/A/Lotus and the file name of c_dir\CompAppComps.nsf.

Click the "Select" button

When you return,to the Locate Object dialog, select Kind of object to be View, and the View to be the "By Category" view.

Click "OK"

Notes fills in the URL, and you are need to fill in the Component Name and Component Description.

Clicking "OK" adds the component to the application.

How to Add a Component From your Palette to your Application

The "By Category" component should be available in your Pallette in the "Composite App Component Catalog" category.   Find the component, and left click and drag it to your page.   The component will be added to the page and an entry for this component will be added to the Navigator.

How to Create a Wire

You start to create a wire by select what component you want to wire from in the left hand navigator. Right click the component and select "Wiring". This will open a page in the CAE with that component focused on the left, and the other components to the right of that. All of the properties you can wire from will be displayed in the focused component and all of the actions you can wire to will be displayed in the other components. As you hover over properties and actions you will get a pop-up to show you details on it.

You can create a wire in two ways:

    1) Select the property you want to wire from. Then right click on the action you want to wire it to and select "Create wire to this action".

    2) Click on the property you want to wire from. Then drag it to the action you want to wire it to and drop it.

You can delete a wire by clicking on the X that appears on the action when the property wired to it is selected.

If you want to wire a property to an action in another page, click on the "Include another page" button and select the page the component with the action resides on. The components from that page will appear in the same UI and you can select or drag appropriately.

Overview

The composite application that one is most likely to use is the Notes Mail and Calendar. So it makes sense that this is a fertile ground for adding things to.

This recipe shows you how to add to your main mail view a Sametime business card that displays the author of the current e-mail. Naturally it only works if the author of the e-mail is on your Sametime network!

What you need

Your mail template needs to have been upgraded to the shipping mail template with Notes 8. If you have not already done this, you can right click the mail icon on your workspace and select Application->Replace Design. From the list of templates select Mail (8). It may take some time. When it's done you will have the new Notes 8 Composite Application Mail template.

Some companies may use different identifiers for their Notes mail addresses and Sametime IDs. Often the Sametime ID is the Internet address for the sender. We will need to know which field in the mail document is set to a value that can be used for the Sametime ID (1). If your IDs are the same, then you can probably use the From field. In other cases the INetFrom field my be better. If you select a typical document, select Right Click and Properties, you can use the second tab of the infobox to scroll through all the fields in the document and see which one contains something that looks like what your company uses for a Sametime ID.

Assembly

While in your mail view do Actions->Edit Application to open the CAE on your mail file. Make sure you are on the first page.

1.        Drop a Sametime Business Card component Notes Link on top of the Notes Mail Mini View so that they form a tabbed folder together.

2.        Drop a Notes URL Processor component Notes Link in the same column as the Notes Mail Mini View at the bottom.

           Adjust to make this the smallest size possible.

Wiring

1.        Notes Mail View.Notes url changed -> NotesURL.NotesURL

2.        NotesURL.Field 1 -> Business Card.name

Advanced Component Properties

(Note: field names are case sensitive.)

1.        NotesURL.field1 = <the field containing someone's Sametime ID (1)> (You can use INetFrom if you are IBM internal.)

How it Works

When a document is selected in the Notes Mail View component it's Notes URL is broadcast. This is received by the Notes URL Processor. This component will apply any @formulas in it's Advanced Component Properties and broadcast the results in the corresponding field property. In this case, we do a simple field lookup for the field we determined above (1). This is then passed onto the Sametime Business Card which does the lookup and displays the data.

Further Steps

You can use the pattern of mapping the Notes URL to the Notes URL Processor component to extract any field that you might want for passing onto a third productivity component. It helps where the original data element you want has not been broadcast by the original component but is there in a Notes field. 

Overview

The composite application that one is most likely to use is the Notes Mail and Calendar. So it makes sense that this is a fertile ground for adding things to.

This recipe shows you how to add to your main calendar view a Sametime Buddy List that displays the invitees of the current meeting. Naturally it only works for those people who are on your Sametime network!

What you need

Your mail template needs to have been upgraded to the shipping mail template with Notes 8. If you have not already done this, you can right click the mail icon on your workspace and select Application->Replace Design. From the list of templates select Mail (8). It may take some time. When it's done you will have the new Notes 8 Composite Application Mail template.

Some companies may use different identifiers for their Notes mail addresses and Sametime IDs. Often the Sametime ID is the Internet address for the sender. We will need to know which field in the mail document is set to a value that can be used for the Sametime ID (1). If your IDs are the same, then you can probably use the AltReguiredNames field. In other cases the INetRequiredNames field my be better. If you select a typical document, select Right Click and Properties, you can use the second tab of the infobox to scroll through all the fields in the document and see which one contains something that looks like what your company uses for a Sametime IDs.

Assembly

While in your mail view do Actions->Edit Application to open the CAE on your mail file. Make sure you are on the second page.

1.        Drop a Sametime Buddy List component Notes Link on top of the Notes Calendar Mini View so that they form a tabbed folder together.

2.        Drop a Notes URL Processor component Notes Link in the same column as the Notes Calendar Mini View at the bottom.

           Adjust to make this the smallest  size possible.

Wiring

1.        NotesURL.Field 1 -> IM Buddies.buddies

Advanced Component Properties

(Note: field names are case sensitive.)

1.        NotesURL.field1 = @Implode(<the field containing someone's Sametime ID (1)>) (You can use @Implode(INetRequiredNames) if you are IBM internal.)

2.        NotesURL.onSelect = true

How it Works

When a document is selected in the Notes Calendar View component the Notes URL Processor noticed since it's onSelect setting is on. This component will apply any @formulas in it's Advanced Component Properties and broadcast the results in the corresponding field property. In this case, we do a simple field lookup for the field we determined above (1) and use @Implode to convert the text list to a string. This is then passed onto the Sametime Buddy List which displays the list of users.

Further Steps

You can use the pattern of mapping the Notes URL to the Notes URL Processor component to extract any field that you might want for passing onto a third productivity component. It helps where the original data element you want has not been broadcast by the original component but is there in a Notes field.

Overview

You may use several applications in the course of a single work activity. Some may be Notes applications which you might organize through icons on your Notes Workspace. Others might be web applications which you might organize through bookmarks in your browser.

This recipe shows you how to create a composite application that allows you to place these applications together within a single tabbed view. Instead of having to change from context to context you can work with all of them from a single tabbed environment.

What you need

(1) You will need the URLs to any web applications you want to display. Browse to the web application and when you are at the screen you want, cut and paste the text in link window. This will usually begin with "http://". In the "Hannover Central" example we used the URL to the Composite Application blog "http://www-03.ibm.com/developerworks/blogs/page/CompApps".

Adding a Notes Application

To add a Notes application, we first add a component pointing to the view we are interested in to the component palette. Then we drop that view onto the work surface.

The palette is contained on a pop-out bar on the right hand side of the CAE. You can pop it out briefly by clicking the tab on the right hand side. If you want to work with it for an extended time, you can "pin" it in place by clicking on the little menu icon in the top right of the window (on the title bar next to "Component Palette") and selecting "Set Palette Pin". Repeating the process and selecting "Unset Palette Pin" will return it's behavior to normal.

You may want to create a category to organize the components you create for this application. You can right click on the palette and select Add Category.

1.     Right click on the Component Palette and select Add Components -> Add NSF Component. Click on the Browse Button. From here select "View" from the top drop down. Then pick or navigate to the database application you want to include from the middle drop down. Finally select the view you want to display from the bottom drop down. Click OK when you have all of these.

2.     Enter in a sensible name and description for the component. In most circumstances you want to add &HideNavigator to the end of the Notes URL. This     suppresses the display of any navigator associated with the view. You can experiment with this by later changing the value through the Advanced Component Properties for this component.

3.       

4.        You can now drag and drop the component from the palette onto the work surface. You can arrange it any way you like, but for this recipe you might find    that dropping each component on top of the previous one to create a tabbed view is best.

Adding a Web Application

To add a Web application, we add a Managed Browser component. Then we set an advanced property to tell it what URL to bring up initially.

If you do not already have the Managed Browser component in your palette, it is easy to add. Right click the Component Palette and select Add Components -> Add Locally Installed Components. Check off the check box next to Managed Browser.

1.        Drag and drop a managed browser component onto your work surface. As mentioned under Notes applications, you can put it anywhere you like, but you      might find dropping it straight on top for a folder view to be the most useful.

2.        In the component navigator on the left hand side of your screen, right click the Managed Browser component you just added and select Edit Component        Properties.

3.        On the Edit Component Properties dialog box select Advanced.

4.        In the Advanced Component Properties dialog box Click "add". In the field enter in initialURL. (Note: this is case sensitive.)

5.        Click on the Edit button and in the other field enter in the URL (1) you noted above.

6.        Click OK to leave the Advanced Component Properties dialog box and OK again to leave the Component Properties dialog box.

How it Works

When the application is run, each Notes View is brought up, just the same as it would be from the Notes application. Only in this case we use the power of Composite Apps to display it within a tabbed environment. Similarly, instead of launching a web page in a standalone browser, or in a top level tab in Notes, we have it within a tabbed composite application view.

Further Steps

For this recipe there is no integration between the different applications shown. There are additional ways we can start to make these applications interact in further recipes.