|
This example builds upon the Hello World - Part 1 example. It shows how to create a Backbase Tag Library (BTL) Balloon, which is filled with custom text.
The example is done twice, to show that BTL can be coded in two ways, either exclusively using JavaScript, or using no JavaScript at all. The second version of the example uses the Backbase-specific XML Execution Language (XEL) and Commands instead. Any combination of these two styles is also possible as many examples in the Backbase documentation will show.
Below is a picture of what the result of trying the example will look like:
Prerequisites and Intended Audience
It is assumed that you are familiar with the Hello World - Part 1 example.
The JavaScript Balloon
The skeleton page looks the same as the page shown in the Hello World - Part 1 example, except for a namespace declaration that we need to add to use BTL: xmlns:b="http://www.backbase.com/2006/btl" Add this declaration to the html tag.
In the body of the page, we have now an input field, an OK button, and a balloon, like this:
<button style="margin-left: 10px;" onclick="javascript: showBalloon();">OK</button>
<b:balloon label="Backbase says:" id="myBalloon" mode="top-center" timeout="10s" width="250px" />
The balloon is a widget taken from the BTL. It has a label, but no content. We want to build the content of the balloon, using the value in the input field. When the user clicks OK, the onclick event is caught and as you can see, the showBalloon() JavaScript function should be executed.
The showBalloon() function is a function that will not be difficult to understand for JavaScript developers:
var oBalloon = bb.document.getElementById('myBalloon');
var oInput = bb.document.getElementById('myInput');
var sValue = bb.getProperty(oInput,'value');
bb.command.setText(oBalloon,'Hello: ' + sValue,'replaceChildren');
oBalloon.setAttribute('open', 'true');
}
The bb object that is used in the code is of particular interest. The Backbase Client Runtime engine creates an additional DOM-like layer that shields you from browser incompatibilities, and interprets Backbase-specific functionality. Therefore, you need to use the bb.document object provided by the Client Runtime engine, instead of the document object provided by the browser.
The rest of the code is straightforward: Get the balloon and the input field by id, get the value of the input field, set it as a new text node in the balloon, and finally open the balloon.
Create the Page
To make it easier for you, the complete HTML page is shown below. Create a file in the helloWorld folder that you created in the first tutorial, name it hello2.html, and then add the following content:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:xi="http://www.w3.org/2001/XInclude"
xmlns:b="http://www.backbase.com/2006/btl">
<head>
<meta http-equiv="Content-Type" content="text/xhtml; charset=UTF-8"/>
<title>Hello Backbase</title>
<script type="text/javascript" src="../../backbase/4_3_0/engine/boot.js"></script>
<script type="text/javascript">
function showBalloon() {
var oBalloon = bb.document.getElementById('myBalloon');
var oInput = bb.document.getElementById('myInput');
var sValue = bb.getProperty(oInput,'value');
bb.command.setText(oBalloon,'Hello: ' + sValue,'replaceChildren');
oBalloon.setAttribute('open', 'true');
}
</script>
</head>
<body>
<script type="application/backbase+xml">
<xi:include href="../../backbase/4_3_0/bindings/config.xhtml_btl.chameleon.xml" />
<div style="margin: 80px 0 0 20px; width: 300px;">
Please type your name and click OK:
<br/>
<br/>
<input id="myInput" type="text"/>
<button style="margin-left: 10px;" onclick="javascript: showBalloon();">OK</button>
<b:balloon label="Backbase says:" id="myBalloon" mode="top-center" timeout="10s" width="250px" />
</div>
</script>
</body>
</html>
Listing: Hello World using JavaScript.
Note: The version number of the Client Framework release is specified in the [version] folder name (for example, 4_3_0). If your version is different from the one shown here, you must adapt the code shown below accordingly.
To see this Hello World example in action, open a browser and type something like this in the address bar: http://localhost/examples/helloWorld/hello2.html
The result should be similar to what is shown in the following live demo:
You have now seen that the BTL widgets can be implemented in a straightforward way using JavaScript.
The XEL Balloon
Backbase also provides declarative markup languages that you can use to manipulate BTL and other widgets. Using XEL and Commands can make your code more compact and more transparent. We continue with the same example, but now coded using XEL and Commands.
In addition to the BTL namespace, we need to also declare the XEL and the Commands namespace:
xmlns:e="http://www.backbase.com/2006/xel"
The event handler in the button is of particular interest:
<c:setText
select="concat('Hello: ',id('myInput')/property::value,'!')"
destination="id('myBalloon')" mode="replaceChildren" />
<c:setAttribute with="id('myBalloon')" name="open" select="'true'" />
</e:handler>
The value in the text node is concatenated from three string parts, where the middle part is an XPath expression that extracts the value from the input field. The destination of the newly created text node is the balloon. A setAttribute command is used to open the balloon.
Create the Page
As in the earlier example, create a file in the helloWorld folder, name it hello3.html, and then add the following content:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:xi="http://www.w3.org/2001/XInclude"
xmlns:b="http://www.backbase.com/2006/btl"
xmlns:c="http://www.backbase.com/2006/command"
xmlns:e="http://www.backbase.com/2006/xel">
<head>
<meta http-equiv="Content-Type" content="text/xhtml; charset=UTF-8"/>
<title>Hello Backbase</title>
<script type="text/javascript" src="../../backbase/4_3_0/engine/boot.js"></script>
</head>
<body>
<script type="application/backbase+xml">
<xi:include href="../../backbase/4_3_0/bindings/config.xhtml_btl.chameleon.xml" />
<div style="margin: 80px 0 0 20px; width: 300px;">
Please type your name and click OK:
<br/>
<br/>
<input id="myInput" type="text"/>
<button style="margin-left: 10px;">OK
<e:handler event="click">
<c:setText
select="concat('Hello: ',id('myInput')/property::value,'!')"
destination="id('myBalloon')" mode="replaceChildren" />
<c:setAttribute with="id('myBalloon')" name="open" select="'true'" />
</e:handler>
</button>
<b:balloon label="Backbase says:" id="myBalloon" mode="top-center" timeout="10s" width="250px" />
</div>
</script>
</body>
</html>
Listing: Hello World using XEL.
Try the live demo below:
As you can see, except for the added "!", the results are the same. You can use JavaScript and a declarative style in any combination that you like, depending on your preferences and knowledge. Take into account that using the declarative features will cause a small overhead.
Download
You can download a zipped version of the examples provided on this page to try them out for yourself.
Note: Make sure to extract the content of this zip file to the root folder of your web server or application server (for example, htdocs), and then run it from your local development environment.
Next Step
You can now advance to the next step, which shows you how to implement AJAX communication using a Backbase form.
This is covered in the Hello Server (Asynchronously) example.
Additional Resources
After you have created these two applications, you may want to read more about development using the Client Framework:
