 |
This demo illustrates how clipping robots can be used to clip content
and functionality from existing webpages and reuse it in gadget based
interfaces. We are using the hotmail web interface and clips it into a
Google Gadget to display on a personalized Google page. The robots also
shows and example of parsing input parameters from an URL query into a
clipping robot. Finally it also demonstrates the use of layout changes
and addition of external style sheets to change the look of a webpage. |
   |
The Demo
In this demo a Web Clip robot clips parts of the
Hotmail page and displays that in a Google Gadget. The process of the
demo is:
- The user adds the Google Gadget to his/hers personalized
Google page
- The user enters his/hers hotmail email address and password
into the gadget
- The gadget calls the Web Clip robot over HTTPs with the
hotmail email address and password as parameters
- The Web Clip robot logs in to Hotmail and clips the site
and shows it in the Gadget
- Interacting with the clip through the gadget the user can
read, write, send and respond to his/hers mails.
The Web Clip robot
The robot clips the hotmail webinterface to simplify design
and add focus on the simpler functionallity of reading and writing
emails. It takes username and password as input and uses this to login
to Hotmail. This uses the automatic login functionality of a Web Clip
robot, so that the robot just needs to perform the login if the robot
isn't already logged in. When logging in the robot uses the secure
version of Hotmail, ie it uses HTTPs for all communication with Hotmail
that includes private information such as username, password and mails.
Once the robot is logged in to Hotmail it has 6 banches to handle
different scenarios in the clip:
- First Page - used for the first page with the list of
mails. In this branch the robot navigates to the inbox, removes the
header of the mail list table and clips the list of mails and the "New"
mail button.
- Send - used when a user has sent a mail, either shows an
error message or returns the user to the mail list from the First Page
branch.
- Read Mail - used when a user wants to read a specific mail.
Uses a link to the inbox (with changed text) to enable the user to
return to the First Page branch.
- New - used when the user wants to write a new mail.
- Login Error - used when login failed for some reason.
Creats a new page with an error message and clips this new page.
- Default - used in any other case, this branch should not be
used at all really, but it is left to handle any unforseen events.
[Click on image to enlarge]
The clipping robot decides between these branches based on the current
URL, this is tested in the start step of each branch. For example there
are rules if the URL matches a certain regular expression or if the URL
starts with a certain string. These rules are generated by RoboMaker
when the clipping wizards in the Portlet View are used, so there is no
need to handcode these. For more information on how to do this see the
turorial
Creating
a basic Web Clip robot that clips Wired news.
In order to change make the Hotmail screens small enough to be able to
display in the confined space of a Google Gadget there are some changes
to the HTML of Hotmail needed, especially for the "Write New Mail"
screen where the to, cc, bcc and mail message fields take up a lot of
space. This could be done in many ways in the robot, for example with
"Modify tag" steps on the "New" branch, but that tends to compicate the
robot quite a lot by adding many new steps. Instead "Layout Changes"
have been defined, these Layout Changes can be found in Robot
Configurations from the File menu. These layout change rules are all
applied as soon as the robot loads any HTML from Hotmail and is an
efficient and easy way to change the HTML.
[Click images to enlarge]
The Google Gadget
A Google Gadgett is a small program that can be displayed on a
personalized Google start, go to
http://www.google.com/ig to check
out how such a personalized page looks like (you do not need to
register at Google to use this functionality). Google Gadgets are
basically just XML files that defines the look and functionalty of the
Gadget. The XML can contain HTML code and also Javascript code, but in
the gadget used in this demo this will not be necessary. All the
functionality and rendering of the HTML is provided by the Web Clip
robot. This makes the Gadget XML file very simple indeed, because all
it needs to do is define some meta data, enable the user to input
his/her hotmail username and password and then call the robot. This is
the XML file that does all that:
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="openkapow demo: __UP_username__"
directory_title="openkapow demo: hotmail"
title_url="..."
author="openkapow staff"
author_link="www.openkapow.com"
author_affiliation="www.openkapow.com"/>
<UserPref urlparam="_username" name="username" display_name="Your hotmail address" required="true" />
<UserPref urlparam="_password" name="password" display_name="Your hotmail password" required="true" />
<Content type="url" href="https://service.openkapow.com/demo/hotmailclip" />
</Module>
The ModulePrefs XML tag defines the Gadgets meta data such as author,
title etc. The UserPref tags defines the required input that the Gadget
needs to work correctly. Once the UserPref parameters have been entered
the Content href is called. Read more about how to write your
own Google Gadgets on the
Create Google Gadgets page.
Security
In this demo a users private Hotmail account is accessed by a Web Clip
robot using the users username and password. This means that the
username and password, as well as private emails are sent over the
internet. Doing this using normal HTTP would mean that basically
everyone has full access to the users private emails and also the users
Hotmail account (using the username and password), so clearly this is
not even an option. The robot itself logs in to Hotmail using Hotmails
HTTPS URLs, so the communication between the robot and Hotmail is
secure. To make the communication between the users browser (that
accesses the Google Gadget) and the robot secure as well the robot is
called using HTTPs from the Google Gadget:
<Content type="url" href="https://service.openkapow.com/demo/hotmailclip"
/>
All this put together means that the communication all the way from the
users browser to the Hotmail server via the Web Clip robot is secure.
Summary
This demo shows how to use a Web Clip robot to interact with Hotmail
and also how to display Web Clips in a Google Gadget. The same logic
can be used to display Web Clips in Yahoo Widgets, Live Widgets or
Netvibes Widgets. The clipping robot used in this demo is quite typical
and gives a good idea what is involved in writing a Web Clip robot that
interacts with a web page with a lot of functionality. Furthermore this
demo is a good example of how to make the use of robots secure, which
is needed almost whenever a robot logs in to some web application to
access private data.