Content
- Author: Backbase
- Revision: 1
- Core Compatibility: 4.1+
- Browsers: IE6+, FF1.5+
- Tags:
Integrating with Google Gears
Introduction
One of the great advantages of Backbase is that it easily integrates with
third-party widgets. In this example we will demonstrate how you can combine Backbase
with the Google Gears library.
This example uses the context of a simple alarm application to showcase several
useful techniques for creating Backbase applications:
- using precreated TDL components
- creating TDL components from scratch
- writing handlers on common events
- optional interfacing to the Google Gears API
Live Example
<![CDATA[
<xi:include xmlns:b="http://www.backbase.com/2006/btl" xmlns:c="http://www.backbase.com/2006/command" xmlns:e="http://www.backbase.com/2006/xel" xmlns:xi="http://www.w3.org/2001/XInclude" xmlns:example="http://www.backbase.com/alarm_example/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" href="../bindings/config.xml"></xi:include>
<e:script xmlns:b="http://www.backbase.com/2006/btl" xmlns:c="http://www.backbase.com/2006/command" xmlns:e="http://www.backbase.com/2006/xel" xmlns:xi="http://www.w3.org/2001/XInclude" xmlns:example="http://www.backbase.com/alarm_example/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
if (!window.google || !google.gears)) {
var oInstall = bb.callMethod(bb.document, 'getElementById', ['installation']);
bb.setProperty(oInstall, 'display', 'block');
}
</e:script>
<example:alarm xmlns:b="http://www.backbase.com/2006/btl" xmlns:c="http://www.backbase.com/2006/command" xmlns:e="http://www.backbase.com/2006/xel" xmlns:xi="http://www.w3.org/2001/XInclude" xmlns:example="http://www.backbase.com/alarm_example/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" id="alarm"></example:alarm>
<table xmlns:b="http://www.backbase.com/2006/btl" xmlns:c="http://www.backbase.com/2006/command" xmlns:e="http://www.backbase.com/2006/xel" xmlns:xi="http://www.w3.org/2001/XInclude" xmlns:example="http://www.backbase.com/alarm_example/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<tr>
<td rowspan="1" colspan="1">Current time:</td>
<td id="clock_time" rowspan="1" colspan="1"></td>
</tr>
<tr>
<td rowspan="1" colspan="1">Alarm is set at:</td>
<td id="alarm_time" rowspan="1" colspan="1"></td>
</tr>
<tr>
<td rowspan="1" colspan="1">Countdown timer:</td>
<td id="countdown" rowspan="1" colspan="1"></td>
</tr>
</table>
<hr xmlns:b="http://www.backbase.com/2006/btl" xmlns:c="http://www.backbase.com/2006/command" xmlns:e="http://www.backbase.com/2006/xel" xmlns:xi="http://www.w3.org/2001/XInclude" xmlns:example="http://www.backbase.com/alarm_example/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" />
<br xmlns:b="http://www.backbase.com/2006/btl" xmlns:c="http://www.backbase.com/2006/command" xmlns:e="http://www.backbase.com/2006/xel" xmlns:xi="http://www.w3.org/2001/XInclude" xmlns:example="http://www.backbase.com/alarm_example/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" />
<input xmlns:b="http://www.backbase.com/2006/btl" xmlns:c="http://www.backbase.com/2006/command" xmlns:e="http://www.backbase.com/2006/xel" xmlns:xi="http://www.w3.org/2001/XInclude" xmlns:example="http://www.backbase.com/alarm_example/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" type="text" id="alarm_input" value="dd-mm-yyyy hh:mm" maxlength="16" />
<b:button xmlns:b="http://www.backbase.com/2006/btl" xmlns:c="http://www.backbase.com/2006/command" xmlns:e="http://www.backbase.com/2006/xel" xmlns:xi="http://www.w3.org/2001/XInclude" xmlns:example="http://www.backbase.com/alarm_example/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
Now
<e:handler event="click" type="text/javascript">
var
dNow = new Date
oInput = bb.callMethod(bb.document, 'getElementById', ['alarm_input']),
iDate = dNow.getDate(),
iMonth = dNow.getMonth() + 1,
iYear = dNow.getFullYear(),
iHours = dNow.getHours(),
iMinutes = dNow.getMinutes();
if (iDate < 10) iDate = '0' + iDate;
if (iMonth < 10) iMonth = '0' + iMonth;
if (iHours < 10) iHours = '0' + iHours;
if (iMinutes < 10) iMinutes = '0' + iMinutes;
bb.setProperty(oInput, 'value', iDate + '-' + iMonth + '-' + iYear + ' ' + iHours + ':' + iMinutes);
</e:handler>
</b:button>
<br xmlns:b="http://www.backbase.com/2006/btl" xmlns:c="http://www.backbase.com/2006/command" xmlns:e="http://www.backbase.com/2006/xel" xmlns:xi="http://www.w3.org/2001/XInclude" xmlns:example="http://www.backbase.com/alarm_example/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" />
<b:button xmlns:b="http://www.backbase.com/2006/btl" xmlns:c="http://www.backbase.com/2006/command" xmlns:e="http://www.backbase.com/2006/xel" xmlns:xi="http://www.w3.org/2001/XInclude" xmlns:example="http://www.backbase.com/alarm_example/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" margin="15px 0px 0px 0px">
Set alarm
<e:handler event="click" type="text/javascript">
try {
var
oInput = bb.callMethod(bb.document, 'getElementById', ['alarm_input']),
sInput = bb.getProperty(oInput, 'value'),
aDateTime = sInput.split(' '),
sDate = aDateTime[0],
sTime = aDateTime[1],
aDate = sDate.split('-'),
aTime = sTime.split(':');
if (aDate.length != 3 || aTime.length != 2)
throw 1;
if (aDate[0].length != 2 && aDate[1].length != 2 && aDate[3].length != 4)
throw 2;
if (aTime[0].length != 2 && aTime[1].length != 2)
throw 3;
var
iDay = parseInt(aDate[0]),
iMonth = parseInt(aDate[1] - 1),
iYear = parseInt(aDate[2]),
iHours = parseInt(aTime[0]),
iMinutes = parseInt(aTime[1]),
oAlarm = bb.callMethod(bb.document, 'getElementById', ['alarm']);
dDateTime = new Date;
if (iDay < 1 || iDay > 31 || iMonth < 0 || iMonth > 11)
throw 4;
dDateTime.setDate(iDay);
dDateTime.setMonth(iMonth );
dDateTime.setYear(iYear);
dDateTime.setHours(iHours);
dDateTime.setMinutes(iMinutes);
dDateTime.setSeconds(0);
dDateTime.setMilliseconds(0);
bb.callMethod(oAlarm, 'setAlarm', [dDateTime.getTime()]);
}
catch(oError) {
alert('Error ' + oError + ': Invalid format, please use dd-mm-yyyy hh:mm');
}
</e:handler>
</b:button>
<div xmlns:b="http://www.backbase.com/2006/btl" xmlns:c="http://www.backbase.com/2006/command" xmlns:e="http://www.backbase.com/2006/xel" xmlns:xi="http://www.w3.org/2001/XInclude" xmlns:example="http://www.backbase.com/alarm_example/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" id="installation" display="none">
<div style="margin-top: 40px;margin-bottom:15px;">
<b:button>
Install Google Gears
<e:handler event="click" type="text/javascript">
location.href = 'http://gears.google.com/?action=install&message=Backbase Alarm Example&return=' + location.href;
</e:handler>
</b:button>
</div>
If you don't install the Google Gears software the example will still work.
However, the alarm time will not be stored when closing the browser
or navigating away from the page.
</div>
<hr xmlns:b="http://www.backbase.com/2006/btl" xmlns:c="http://www.backbase.com/2006/command" xmlns:e="http://www.backbase.com/2006/xel" xmlns:xi="http://www.w3.org/2001/XInclude" xmlns:example="http://www.backbase.com/alarm_example/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" />
<em xmlns:b="http://www.backbase.com/2006/btl" xmlns:c="http://www.backbase.com/2006/command" xmlns:e="http://www.backbase.com/2006/xel" xmlns:xi="http://www.w3.org/2001/XInclude" xmlns:example="http://www.backbase.com/alarm_example/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
Disclaimer: This example includes optional interfacing to Google Gears
offline storage. In order for this interface to work, an external
program from Google needs to be installed. Backbase does not
support this software, recommend its installation or take
responsibility for any damage caused by installing Google Gears software.
You are strongly encouraged to read the license terms and other information
related to Google Gears, on the Google site.
Moreover, Google Gears software is in beta, and has been observed to cause
causing problems with Venkman debugger. We also noticed googleupdate.exe
being silently installed and run as service under local system account.
After uninstalling Google Gears, googleupdate.exe service is not
uninstalled but continues to run.
</em>
]]>
