September continues to be composite application month here at dadams.co.uk, and to round off this exciting set of posts I’m going to show you how to easily grab content from a web page and publish it into a Notes form. It’s also possible, and just as easy, to publish into a Symphony spreadsheet, but we’ve done that one to death already.
First thing to do is create a blank composite application. Then go into Domino Designer and add a simple form containing three fields – Following, Followers and Tweets. Yes, we’re going to grab some information from Twitter (at this point IdoNotes, also known as Chris Miller, has become extremely interested).
Open the composite application for editing and drag a Managed Browser component into the empty page. We’ll come back and configure the component later. Then drag in a Notes Document Container, and configure it to open the Twitter details form you created earlier – this is done by editing the component properties, going to the Component Settings tab, and hitting the Browse button next to the Notes URL field. Select Form as the object kind, the current database, and then the name of your form. Click OK to complete the configuration.
Now let’s head back to the web browser component. We’re going to grab details from a Twitter account – you can use your own or anyone else’s, but for this example let’s start with Stephen Fry. Enter http://twitter.com/stephenfry into the address bar and retrieve the page.
On the toolbar above the web page you’ll see a small finger-pointing hand – the tooltip says ‘Toggle DOM element inspection’. Click this on to reveal the elements declared in the document object model, and you’ll then find that moving your mouse around the web page places a blue box around the available elements. Select the number of people that Stephen Fry is following, and the element (id:following_count) will appear in the toolbar. Ensure the action is set to Publish and in the next box declare a new landmark – call it something like sourceFollowing – and click on the cog icon. Repeat this for the number of followers and the number of tweets.
The next part is important – go into the browser component properties and select the Landmarks tab. You’ll see the landmark is set to http://twitter.com/stephenfry – change this to http://twitter.com/* – this will ensure that the data transfer works on everyone’s Twitter page, not just Mr Fry’s. Click OK.
Now head over to the Notes Document Container which contains your form. Click in the first field (named ‘Following’ in my example) and use the toolbar to set the landmarks. Ensure the action is set to Recieve, enter a new landmark name (something like targetFollowing) and click the cog icon. Repeat for the other two fields. You can inspect the generated landmarks by looking at the component properties, but it’s not necessary.
Now you just need to wire the two components together – this can be done by clicking the yellow plug icon of the browser component and using the dialog box to set the wires, but it’s easier to go into the wiring view and drag from browser component to the Notes Document Container component.
As in the previous examples, you can now tidy up, name the components, set the application icon and set the dimensions of the two components. To see this simple and quite frankly rather pointless application (but hey, it’s a proof of the technology) working, simply change the Twitter URL and watch the figures change. Yes, that’s all it does, but I’m sure you can take the basic principle and come up with better uses. Click on the image to see a full-size example.
