This book is about squaring the circles of web applications. It deals with the Backbase Client Framework.
Before you put this book away because you think that squaring circles is rather vague and mathematically impossible, let's hasten to say that this book will give you a solid foundation in web application programming using the Backbase Client Framework.
Now, before you again think of putting this book away because you are not sure why you should use the Backbase framework instead of one of the many other JavaScript frameworks or libraries out there, give us a chance to briefly explain what squaring the circles of web applications means and what the Backbase framework has to do with this.
Here is a set of rhetorical questions: Would it not be nice if you have an extensive library of UI widgets that could be used in the same way as HTML? If you could extend HTML with new widgets and components in any way you like? If you could use AJAX almost transparently? If you could bind data retrieved dynamically from a server in flexible ways to any widget, in particular to complex data grids?
Of course, that would be nice for a number of reasons. First of all, XML-based UI definition languages such as HTML have been proven to be a very effective and natural way to lay out web pages. UI designers are familiar with them and have good tools to help them make good designs.
Therefore, the UI designer or the developer who plays this role should be able to define the UI using an XML-based UI definition language directly. It should not be necessary to generate the HTML or UI definition in complex ways using a server scripting language such as PHP or JSP; even worse is constructing the DOM tree to define the UI using JavaScript. This is because it is very hard to predict what the final result on the web page will be from the perspective of the UI designer. Yet, this is a common practice today.
Rich UI widgets will have rich interaction with each other and with a server. For example, to retrieve new data dynamically from a database to be displayed in a table, a drop-down list, or a report, and so on. Common interaction patters involve also submitting form data that can be used for updates on a server.
Creating rich interaction is a programmer's job. On the client side, you will want to use JavaScript and on the server side, you have a choice of options according to your preference or that of your developers. The question is how do you prevent polluting your nice, clean, square-bracketed XML-based UI definition language with the round JavaScript objects that you need to implement the desired behavior?
The answer is the Backbase Client Framework. For details of how this happens and how you really square the circles, we refer to the rest of this book. But let's briefly introduce the framework here: the Backbase Client Framework is a standards-based, server independent, cross-browser framework to create Rich Internet Applications (RIAs).
RIA development is usually associated with either Adobe Flex or Microsoft Silverlight. Although both have similar XML-based UI definition languages, the main difference with the Backbase framework is that they need a plugin to run, whereas the Backbase framework does not because it is developed in JavaScript.
Backbase allows the development of web applications that run within all major browsers, whereas developers are able to use established standards for XHTML, DOM, CSS, XPath, and XSLT, even if the browser used does not support them. The transparent use of AJAX technologies, for example to submit forms or to retrieve updates for data grids, can be taken for granted with the Backbase framework.
This book teaches you how to use the Backbase framework effectively from Hello Backbase to complex custom-defined UI components. The book contains a complete overview of all UI libraries available within the Backbase framework and shows examples for each element described. It teaches you how to develop your own widgets, providing a comprehensive overview of the Backbase Tag Definition Language (TDL) and by showing interesting, non-trivial examples.
Significant attention is given to the architectural aspects of designing a web application, showing sample applications using a Model-View-Controller approach.
Here is a summary of the chapter contents:
Chapter 1: Hello Backbase!, walks you through the steps to set up your development environment.
The famous Hello World is shown in many variations: with only basic JavaScript, a Backbase UI widget together with basic JavaScript, a Backbase Tag Library widget together with the Backbase XML Execution Language, and finally using AJAX communication with a server script.
This chapter teaches you something about XML namespaces.
Chapter 2: User Interface Development, provides a closer look at the Backbase UI markup languages and their XML namespaces. We give an overview of the Backbase Tag Library (BTL) and details about the UI layout widgets in BTL.
The proper layout of an application user interface involves styling with CSS. We describe how CSS can interact with the BTL widgets and how you can go about styling in your web application.
Chapter 3: Writing the Application Logic, provides more details about the execution logic of a web application. We look at the Backbase programming model and the various APIs it provides. In particular, we look at the Backbase XML Execution Language and at the Command Functions.
We add a few new BTL widgets to our repertoire: the Info and Notify widgets.
Chapter 4: Client-server Communication and Forms, covers subjects that range from low level details about asynchronous communication between client and server, to high level web application architecture.
We show you the details of forms support, including validation options, in the Backbase framework and list the widgets available in this category.
We will start applying the knowledge acquired in these four chapters to design and develop a sample application for a travel blog site, the C3D sample application.
Chapter 5: Data-bound Widgets, deals with data binding which is an interaction between a data source, usually residing on a server (for example, a database), and a data observer is usually an object on the client that can map this data to a UI widget.
In this chapter we discuss data binding, the data-bound widgets in the Backbase framework, and how you can make your own widget.
The most powerful data-bound widget in the Backbase framework is the dataGrid. With 11 examples, we explore many details of using this grid.
Chapter 6: More Dynamic Behavior, talks about:
Behaviors: Generic functionality that you can attach to any Backbase element.
The built-in behaviors, in particular the drag-and-drop behavior: how you can influence the dragging of elements and the things you can do when the element is dropped. We also discuss the resize behavior with its options.
Command functions to add, remove, or set behaviors dynamically.
The broadcaster/observer elements and functions.
Animation with the Synchronized Multimedia Integration Language (SMIL).
Chapter 7: Creating UI Components, gives a lot of detail about the Tag Definition Language (TDL), the most interesting and unique feature of the Backbase framework. We show that you can build powerful UI components using TDL, which promises new ways of doing web application development.
Chapter 8: Widget Wrap-Up, covers almost all the remaining BTL widgets and command functions. We will look in detail at actions, menus, and windows.
Chapter 9: Debugging, Optimization, and Deployment, shows that the Backbase tool set, especially the debugger, has an advantage over other tools because it works with all browsers. In addition, the Backbase debugger allows you to inspect your Backbase application structure and all custom built widgets easily.
Using the guidelines set forth by the YSlow tool, we describe what you can do to optimize a Backbase web application.
We look at deploying the Backbase framework libraries, optimizing the TDL bindings, and using the optimized versions of the bindings delivered with the Backbase package.
Chapter 10: Framework Comparison, is a rather theoretical chapter that will show you a way to look at the various JavaScript frameworks available and how to categorize them.
We illustrate with an example the difference in coding style for a pure JavaScript framework as opposed to the Backbase framework using XML for UI layout. We also illustrate how easy it is to integrate other frameworks into the Backbase framework.
Chapter 11: The Square Web Application, formulates what a square web application is and how to develop one.
This last chapter provides a last look at the C3D travel blog sample application. It shows changes and updates according to the make it work, make it right, make it fast principle. The details of uploading an image and of including a Google map are included.
We end the chapter by developing a square puzzle.
This book includes many examples. All examples are provided in the sample code for this book in an easily operational form. Many examples only require a browser to run. You will need a web development environment, as explained in Chapter 1, to run the examples where server interaction is involved. Later in the book, you will need to set up a database to run the C3D sample application.
This book is for web developers who want to develop applications using the Backbase Client Framework. It may also be interesting for web developers and web application architects who want to know more about XML-based web application architectures.
In this book, you will find a number of styles of text that distinguish between different kinds of information. Here are some examples of these styles, and an explanation of their meaning.
Code words in text are shown as follows: "We can include other contexts through the use of the include directive."
A block of code is set as follows:
<?xml version="1.0" encoding="UTF-8"?> <div xmlns="http://www.w3.org/1999/xhtml"> <p> The server says: Hello <strong>John Doe</strong>! - on: Friday 30th of May 2008 12:50:43 PM </p> </div>
When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:
<div> <e:handler xmlns:e="http://www.backbase.com/2006/xel" event="click" type="text/javascript"> alert('Backbase says hello!'); </e:handler> Click me </div>
New terms and important words are shown in bold. Words that you see on the screen, in menus or dialog boxes for example, appear in the text like this: "clicking the Next button moves you to the next screen".
Note
Tips and tricks appear like this.
Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or may have disliked. Reader feedback is important for us to develop titles that you really get the most out of.
To send us general feedback, simply send an email to <[email protected]>, and mention the book title via the subject of your message.
If there is a book that you need and would like to see us publish, please send us a note in the SUGGEST A TITLE form on www.packtpub.com or email <[email protected]>.
If there is a topic that you have expertise in and you are interested in either writing or contributing to a book on, see our author guide on www.packtpub.com/authors.
Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.
Note
Downloading the example code for the book
Visit http://www.packtpub.com/files/code/9126_Code.zip to directly download the example code.
The downloadable files contain instructions on how to use them.
Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be grateful if you would report this to us. By doing so, you can save other readers from frustration, and help us to improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/support, selecting your book, clicking on the let us know link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata added to any list of existing errata. Any existing errata can be viewed by selecting your title from http://www.packtpub.com/support.
Piracy of copyright material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works, in any form, on the Internet, please provide us with the location address or web site name immediately so that we can pursue a remedy.
Please contact us at <[email protected]> with a link to the suspected pirated material.
We appreciate your help in protecting our authors, and our ability to bring you valuable content.
You can contact us at <[email protected]> if you are having a problem with any aspect of the book, and we will do our best to address it.