Dr. Erik Behrends, a developer on the composite application editor team, created a pretty cool video showing the integration of a web table with an Excel workbook. The neat aspects of this video is it uses the new container framework and Erik created this application with no coding or modification of the existing web application.

Erik used the World Climate web site for the demo which shows how easy it is to integrate with existing web browser applications.

Tags: Lotus Expeditor : Lotus Notes : Composite Applications

One of the interesting use cases the side-shelf integration in Notes 8.5 has is a cross page wire function. This option allows for a side-shelf component to be shown in the side shelf the entire time a composite app is open (not just visible or the active application). When a property is published from the side-shelf component to a component on the main screen area the system will automatically show that components page (perspective) and deliver the data to the target action.

In this video I show a basic example where I put the PIM contacts in the right side-shelf. The component is configured to always show while the application is open. Every time an entry is selected in that view, it publishes properties to a web form. That web form lives on the second page in a composite application and will be shown every time I click an entry.

*Click on image to play video

There can be many other uses for this kind of technology. For instance, a basic navigator that will always open a specific page in a composite. Or one where it not only opens a page but does a search on the data published in an application.

Tags: Lotus Expeditor : Lotus Notes : Composite Applications

There are several containers that will ship after Notes 8.5 and Expeditor 6.2 – two of those are the Notes View and Symphony Spreadsheet containers. These containers are based on the new Composite Application container framework where you can create components from complex applications – applications with many states.

*Click on image to watch video

The Notes view container uses a custom configuration UI that is labeled “Selection Output”. This screen lets you configure what properties (and where the values of those properties come from) when a document (or multiple documents) are selected in the Notes view. The container allows for formula language and even has a hint drop down that shows the available fields on the currently selected note. I even expanded the hint to include all variations of @NAME for all name fields.

So, even though the underlying container architecture is very flexible and open, Notes views can only expose so much – so the new UI minimizes the “scare” factor and just sticks to basics. Under the covers I fill in the landmark configuration and base it all on “selection” for all documents.

I am looking for some good feedback if you care to share your opinions on the new UI.

The Symphony spreadsheet container is pretty much identical to the Excel container. It still uses the original landmark configuration UI. In this demo I don't really care what spreadsheet page we are on so I use the $SHEET with a landmark value of * – this means the events are application to all sheets. This is the reason why I used the Sheet2! qualifier for the cell ranges.

Once again, the containers will be part of a web delivery after Notes 8.5 and Expeditor 6.2 ship. They are already on the plate to be included in Notes 8.5.1 and Expeditor 6.2.1. The full list of containers we are looking at are these:

- Notes view container. Any notes view can be used and configured in CAE.

- PIM view container. Prebuilt configurations for Mail, Calendar, Contacts, etc. Which can also be extended.

- Host On Demand – integrate any/all of your host based applications with your other components.

- Excel and Symphony – spreadsheet container (the ones you have seen here)

- iWidget container – make any iWidget a composite component

- Lotus Forms container – integrate your Lotus Forms easily with other components.

*of course all of this is subject to change and all feedback is welcome.

Tags: Lotus Expeditor : Lotus Notes : Composite Applications

Back in March I posted a demo video about the use of XPath and how web applications can use it. That demo was actually created using the new generic container framework in Lotus Expeditor 6.2 and Lotus Notes 8.5. I used the Excel and Web Browser containers. That demo was created well before the Composite Application Editor UI was done – but lucky for you, all of this stuff is based on extension points so it was possible to get that demo running very early. You can also check out the help for the containers on the InfoCenter web site.

IBM Blue Pages Component:

Let’s start with the IBM Blue Pages component. This is a component based on the Web Browser Container that is configured to point to the IBM Corporate Directory. All IBMer’s use this directory to find people and look at their profiles. The profiles hold all sorts of great information about the employee – email, phone, address, manager and much more.

In this component I made landmarks based on the title of the page – meaning, we will define actions for specific pages that meet a pattern for the title. The landmark identifier tells the container what do use for the “state” of the container – our sample uses $TITLE. This tells the browser container during the different events what to extract from the web page and then compare the value returned to the defined landmarks.

<landmarkIdentifier expression="$TITLE"/>

In our sample component, we want to publish properties any time an employee profile web page is loaded in the browser. So our landmark will key off of the title:

<landmark expression="BluePages | BluePages profile">

Inside of the element you tell the browser container what events you want your application to support when the specific landmark is hit. In our case the contentComplete event is exactly what we want – contentComplete happens when a page is fully loaded. So we define what properties we want to publish during this event. Since the IBM Blue Pages Profile page is raw text we need to use xpath to get at the underlying DOM elements. Don’t get scared, here is the contentComplete xml block with the xpath fields:

<event id="contentComplete">
        <publish field="xpath://*[@id='bpResults']/dsml/directory-entries/entry/attr[@name='cn']/value" property="Common Name"/>
        <publish field="xpath://*[@id='bpResults']/dsml/directory-entries/entry/attr[@name='emailaddress']/value" property="Email"/>
        <publish field="xpath://*[@id='w3-ibm-com']/div[@id='content']/div[@id='content-main']/div[@id='fourth-level']/div[@id='profile-data']/div[@id='current-tab-content']/table[8]/tbody/tr[1]/td[2]" property="Address"/>
        <publish field="xpath://*[@id='bpResults']/dsml/directory-entries/entry/attr[@name='div']/value" property="Department"/>
        <publish field="xpath://*[@id='profile-data']/div[@id='current-tab-content']/table[8]/tbody/tr[1]/td[2]" property="Address"/>
        <publish field="xpath://*[@id='bpResults']/dsml/directory-entries/entry/attr[@name='telephonenumber']/value" property="Phone"/>
        <publish field="xpath://*[@id='bpResults']/dsml/directory-entries/entry/attr[@name='manager']/value" property="Manager"/>
</event>

Let’s take a look at one of the properties in the above sample. This configuration tells the browser container to publish the property Address and to get the data from the underlying container (the browser) from this place :

“xpath://*[@id='profile-data']/div[@id='current-tab-content']/table[8]/tbody/tr[1]/td[2]”

So in short, we could really use any text on the page and define it as an output property – no WSDL!

Wire In Web Form: The component on the bottom of that demo is another web browser component derived from the same framework. In this case I used $URL as the identifier – which to be honest the URL is probably a better fit for most cases since they are usually unique across pages within a web browser application.

<landmarkIdentifier expression="$URL"/>

I set up the dataChange event to not only publish field values when entered on the form but to also receive them when other sources publish them to the component. The great thing about this web page is the form has basic id’s and names so we can just use them in our field identifiers. Here is the full block for the dataChange event:

 <landmark expression="http://ausgsa.ibm.com/home/b/a/balfe/web/wire_in.html">
         	<event id="contentComplete">
         		<receive field="name:Dollar Amt" property="Dollar Amt"/>
         		<receive field="name:Expense Amt" property="Expense Amt"/>
         		<receive field="name:Name" property="Name"/>
         		<receive field="name:Div" property="Dept"/>
         		<receive field="id:Phone" property="Phone"/>
         		<receive field="name:Fax" property="Fax"/>
         		<receive field="name:Email" property="Email"/>
         		<receive field="name:Comments" property="Comments"/>
         		<receive field="name:Mgr Name" property="Mgr Name"/>

         		<receive field="name:Fund" property="Fund"/>
         		<receive field="name:Acct" property="Acct"/>
         		<receive field="name:UDDS" property="UDDS"/>
         		<receive field="name:Class" property="Class"/>
         		<receive field="name:Dept Invoice" property="Dept Invoice"/>
         		<receive field="name:GAR Invoice" property="GAR Invoice"/>

         	</event>

         	<event id="dataChange">
         		<receive field="name:Dollar Amt" property="Dollar Amt"/>
         		<receive field="name:Expense Amt" property="Expense Amt"/>
         		<receive field="name:Name" property="Name"/>
         		<receive field="name:Div" property="Dept"/>
         		<receive field="id:Phone" property="Phone"/>
         		<receive field="name:Fax" property="Fax"/>
         		<receive field="name:Email" property="Email"/>
         		<receive field="name:Comments" property="Comments"/>
         		<receive field="name:Mgr Name" property="Mgr Name"/>
         		<receive field="name:Fund" property="Fund"/>
         		<receive field="name:Acct" property="Acct"/>
         		<receive field="name:UDDS" property="UDDS"/>
         		<receive field="name:Class" property="Class"/>
         		<receive field="name:Dept Invoice" property="Dept Invoice"/>
         		<receive field="name:GAR Invoice" property="GAR Invoice"/>

         		<publish field="name:Dollar Amt" property="Dollar Amt"/>
         		<publish field="name:Expense Amt" property="Expense Amt"/>
         		<publish field="name:Name" property="Name"/>
         		<publish field="name:Div" property="Dept"/>
         		<publish field="id:Phone" property="Phone"/>
         		<publish field="name:Fax" property="Fax"/>
         		<publish field="name:Email" property="Email"/>
         		<publish field="name:Comments" property="Comments"/>
         		<publish field="name:Mgr Name" property="Mgr Name"/>
         		<publish field="name:Fund" property="Fund"/>
         		<publish field="name:Acct" property="Acct"/>
         		<publish field="name:UDDS" property="UDDS"/>
         		<publish field="name:Class" property="Class"/>
         		<publish field="name:Dept Invoice" property="Dept Invoice"/>
         		<publish field="name:GAR Invoice" property="GAR Invoice"/>
         	</event>

As you can imagine these are two very basic scenarios but you can also see how you can define inputs and outputs for an entire web site using this framework. We currently have customers defining landmark configurations for web browser applications with over a 1000 pages. Very cool!

Tags: Lotus Expeditor : Lotus Notes : Composite Applications