This example shows how to create a simple Hello World! application using the Backbase Client Framework.

Prerequisites and Intended Audience

This example is intended for web developers who are interested in quickly getting their first Backbase application up and running. Knowledge of XHTML, XML, CSS and JavaScript is helpful but not mandatory.

Download

The first thing you should do is download the Client Framework (if you did not already do so), and then follow the instructions in the Installation Video Tutorial.

As outlined in the video, you must copy the contents of the web folder to your local development environment. The result should look similar to this:

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.

Next, you may want to consider the setup of your server. We assume that you have a local development environment with, for example, Apache or IIS installed and a server-side scripting language, such as JSP or PHP. Although the first example uses only client-side functionality, it is a good idea to get your configuration right to be able to extend your example later.

Create the Page

Create a sub-folder within the examples folder called helloWorld. Next, create an HTML file named hello1.html in this sub-folder, and then add the following content:

Listing: Hello World - Part 1.

Let's look briefly at the code. The file contains an ordinary HTML page with some notable points:

• The code is XHTML compliant, which means for example that all tags must be properly closed.
• The Backbase Javascript engine in boot.js is loaded in the header of the HTML page.
• All Backbase code is contained within script tags with type="application/backbase+xml".
• To use the Backbase Tag Library (BTL), you must include the implementation bindings for the tags: <xi:include href="../../backbase/4_3_0/bindings/config.xml" />
• Take a look at the use of XML namespaces. The Client Framework uses several namespaces, which must be appropriately declared.

The documents listed below will provide more information on all of these points.

To see your first Hello example in action, you can either double-click on hello1.html in the Windows explorer (if you are running Windows), or, if you have started your local server, you can open a browser and type something like this in the address bar: http://localhost/examples/helloWorld/hello1.html.

The result should be similar to what is shown in the following live demo:

What if you do not see anything? Several problems can occur, of which the most common one is, that the path to boot.js or config.xml is not correct. If you are running with a server, check that it is running properly, and that it can find your hello1.html.

When all is well: Congratulations! The Backbase Client Framework is running successfully.

This was a simple, typical Hello World example. In another tutorial, we will expand your knowledge by demonstrating a personalized Hello World, using tags from the BTL. We will also demonstrate the AJAX functionality of the Client Framework by showing a form with one input field, which, when submitted, causes a response to be displayed somewhere in the page without a page refresh.

Download

You can download a zipped version of the example provided on this page to try it 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 create a BTL Balloon, which is filled with custom text.

This is covered in the Hello World - Part 2 example.

Additional Resources

After you create your first application, you may want to read more about development using the Client Framework:

• Beginner Tutorial
• Application Development Guide
• Client Reference