Landmarks for the Browser Container by example – 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: : :

Advertisements

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.