You are previewing Backbase 4 RIA Development.
O'Reilly logo
Backbase 4 RIA Development

Book Description

Create Enterprise-grade Rich Internet Applications using the Backbase client framework

  • Create modular and extensible web applications with the Backbase Client Framework

  • Use XML-based UI components from the extensive Backbase UI library such as tabBox, grid, calendar, comboBox, and toolTip

  • Create your own UI components using the powerful object-oriented Tag Definition Language

  • Use powerful data-binding options to create data-driven applications with detailed data grid examples

In Detail

Backbase is a very powerful and complex JavaScript library, with many user interface components to help make web development easier. It allows the development of Rich Internet Applications (RIA) that run within all major browsers but its powers and complexity mean that the choice of component can be overwhelming. Understanding when and how to use the right component might not always be straightforward. This book makes that easier.

This is a practical book that teaches you how to use the Backbase Client Framework effectively, with a complete overview and many examples. A core developer of the framework puts the technologies used into a wider perspective of existing web standards and a seasoned software architect explains why XML-based UI definition produces better web applications.

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. Packed with examples, the book shows you how to get the most from the library of UI components, and then extend the library with its own custom language. With this book in hand, it is easy to enable AJAX within your web application. You will be able to use the Backbase framework effectively, from basic applications to complex, custom-defined UI components.

This book contains a complete overview of all the UI libraries available within the Backbase framework and shows examples for each element described.

The Backbase framework offers an innovative Tag Definition Language (TDL), which allows developers to create new UI components that can be used as XML elements, in the same way as using the built-in GUI library. Using TDL brings considerable development advantages, and this book explains how.

Significant attention is also given to architectural aspects of designing a web-application, showing sample applications using a model-view-controller approach.

Table of Contents

  1. Backbase 4 RIA Development
    1. Backbase 4 RIA Development
    2. Credits
    3. About the Authors
    4. About the Reviewers
    5. Preface
      1. What this book covers
      2. What you need for this book
      3. Who this book is for
      4. Conventions
      5. Reader feedback
      6. Customer support
        1. Errata
        2. Piracy
        3. Questions
    6. 1. Hello Backbase!
      1. What is Backbase?
        1. What can Backbase do for me?
      2. The Backbase Explorer
      3. Setting up a web development environment
        1. The web server and a server scripting language
        2. The browser
        3. Using an IDE
      4. Download the Backbase framework
      5. The Backbase page skeleton
      6. "Hello Backbase" in four variations
        1. Verifying the installation of the Backbase framework
        2. "Hello World" using a Backbase balloon
          1. The JavaScript balloon
          2. The XEL balloon
        3. Hello Server!
          1. The page with the form
          2. The PHP response
      7. XML and namespaces
        1. Why do we need XML namespaces?
        2. Declaring XML namespaces
        3. Use of namespaces with Backbase
      8. A basic page layout
      9. Summary
    7. 2. User Interface Development
      1. Squaring the circles of web applications
      2. The Backbase Reference
      3. UI markup languages
        1. Where is the source code?
      4. XHTML
      5. The Backbase Tag Library
        1. Backbase Tag Library widget overview
      6. The BTL abstract elements
        1. Abstract element inheritance structure
        2. element
        3. visualElement
        4. positionElement
        5. dimensionElement
        6. cardStack and card
      7. The layout widgets
        1. Accordion
        2. Box
        3. deck
        4. navBox
        5. panelSet
        6. tabBox
        7. The BTL utility elements
        8. codeHighlighter
        9. label
        10. populator
        11. skinSettings
        12. xhtml and xml
      8. Styling techniques for GUI widgets
        1. Using CSS
        2. Skinning
          1. The BTL skinSettings widget
        3. Height problems
      9. A BTL Exerciser
        1. The application structure
        2. index.html
        3. app.xml
        4. Tab panel content
        5. The menu in each tab panel
      10. Summary
    8. 3. Writing the Application Logic
      1. The application programming model
      2. Overview of the Backbase APIs
        1. The bb object
        2. Low level APIs—the W3C DOM family
          1. The Document Object Model
            1. Traversing the document tree
            2. Modifying the document tree
            3. Dealing with events
      3. Events
        1. DOM event flow and cancelable events
        2. Registering event handlers
          1. Using markup with an XEL handler element
          2. Using markup with XEL handler attributes
          3. Using JavaScript and the DOM events API
        3. APIs relevant for dealing with events
          1. Event types
          2. BTL widget custom events
          3. Custom event creation
      4. Backbase utility functions
        1. The bb object utility functions
        2. Backbase Commands
      5. The Backbase XML Execution Language (XEL)
        1. XEL features
          1. Variables in XEL
            1. Declaring variables
            2. Variable scope
            3. Retrieving variable values
            4. Setting properties and variables
            5. Getting and setting attributes
          2. Conditional execution in XEL
            1. Conditional logic
            2. Iterators
          3. Functions in XEL
            1. Calling a function or method
            2. Passing a function argument
          4. Passing context
          5. Using JavaScript in XEL
      6. XPath
        1. Evaluating attribute values
          1. String mode
          2. XPath mode
      7. Commands to manipulate the DOM or elements
        1. Manipulating elements
          1. focus and blur
          2. fireEvent
          3. position
          4. scrollTo
          5. setText
          6. show, hide, and showHide
          7. sort
          8. tile
          9. transform
            1. param
        2. Manipulating the DOM
          1. copy
          2. create
            1. attribute
            2. copy-of
            3. value-of
          3. destroy
          4. move
      8. Info and Notify BTL widgets
        1. balloon
        2. infoBox
        3. loadingMessage
        4. toolTip
      9. A Backbase Command Exerciser
      10. Summary
    9. 4. Client-server Communication and Forms
      1. AJAX
      2. Asynchronous communication
        1. The XMLHttpRequest object
        2. The JSONRequest object
        3. The load command
          1. header
          2. The JavaScript load command
      3. Working with forms
        1. The forms profiles
        2. Form elements
          1. The extended form element
          2. The extended input element
          3. fileInput
        3. The abstract BTL form elements
          1. focusableElement
          2. dropDown
          3. formField, formList, and rangeFormField
        4. The BTL form widgets
          1. calendar
          2. checkBoxGroup
          3. comboBox
          4. listBox
          5. slider
          6. spinner
          7. suggestBox
        5. Validating input fields
          1. Required fields
          2. Data type validation
      4. AJAX and architecture
        1. Model-View-Controller
        2. Implementing MVC on the server
          1. The server controller
          2. The server model
          3. The server view
            1. Scriptlets
      5. The C3D travel blog site
        1. Requirements for the C3D site
        2. Design
        3. Data model
        4. Page layout
          1. Good use of IDs
        5. Server application structure
          1. The C3D controller
          2. The C3D model
          3. The C3D view
          4. Login and logout
        6. Add a trip
      6. Summary
    10. 5. Data-bound Widgets
      1. Why is data binding important?
        1. The server-side of data binding
      2. Data-binding fundamentals
        1. dataSource
          1. Local data sources
          2. Remote data sources
          3. Static data sources
        2. dataObserver
          1. The dataUpdate method
      3. Make an HTML element data bound
        1. Creating the data source
        2. Define the new widget
        3. The dataUpdate method
        4. Show the data-bound bulleted list
      4. The data-bound widgets
        1. dataGrid
        2. Grid editing and fieldEditor
        3. The eleven features of dataGrid
          1. Common header menu
          2. Header context menu
          3. Data paging
          4. Column drag-and-drop
          5. Column freezing
          6. One-click editing
          7. Editing and focusing together
          8. Instant editing
          9. Collapsible info block
          10. Form editing
          11. Live scrolling
      5. Continue the development of the C3D application
        1. Adding a trip entry
        2. Show trips and trip entries
      6. Summary
    11. 6. More Dynamic Behavior
      1. Behaviors
        1. Drag-and-drop
          1. dragBase
          2. drag
          3. dragTarget
          4. Basic dragging and dropping with widgets
            1. Drag constraints
              1. dragItem
              2. dragGroup
              3. useDragClass
              4. dragConstraint
              5. Reverting a dragged element
          5. Advanced dragging and dropping with widgets
            1. Drag-and-drop columns inside a table
        2. Resize
          1. Using the resize behavior
            1. resizeEdges
            2. resizeMin and resizeMax
            3. resizeType
            4. resizeConstraint
          2. Resize custom events
            1. Custom Grippies
            2. Resizing table columns
      2. Commands for the behaviors
        1. addBehavior
        2. removeBehavior
        3. setBehavior
      3. Broadcaster/observer
      4. Animating the UI
        1. SMIL animation
        2. Adding animation to the C3D example application
      5. Summary
    12. 7. Creating UI Components
      1. Component models and technologies
      2. Introduction to the Tag Definition Language (TDL)
        1. Widgets
        2. The advantages of using TDL
          1. Object-orientation
            1. Object-oriented concepts
          2. OO and TDL
          3. OO and web applications
        3. Model-View-Controller
        4. Widget creation with TDL
          1. Overview of the TDL elements
      3. Simple widgets
        1. Building a TDL widget definition
        2. The template, attribute, and resource tags
          1. Templates
            1. The content tag
            2. Templates with JavaScript
          2. Attributes
            1. Positioned yellow notes
            2. Changers and mappers
          3. Resources
            1. The yellow notes example using resources
            2. Named resources
      4. Widget event handling
        1. The handler tag
          1. Updatable yellow notes
      5. Widgets as objects
        1. Defining classes with TDL
          1. Inheritance
          2. Composition
          3. The element tag
        2. Properties
          1. Property definition
          2. Property getters
          3. Property setters
          4. A web lamp example
        3. Methods
          1. The argument tag
          2. The body tag
          3. Sliding thumbnails
        4. Constructors and destructors
        5. Composite widgets
          1. Compose a pedestrian light
          2. Order form building blocks
        6. Inheritance
        7. Yellow notes using inheritance
        8. Interfaces
        9. Extending BTL
      6. Behaviors
        1. Behavior example
      7. Uses
      8. The limits of creating UI components
        1. TDL as a macro language
        2. TDL as an object-oriented language
        3. Squaring the circles
        4. Namespaces
        5. Conclusion
      9. Summary
    13. 8. Widget Wrap-up
      1. Action and menu widgets
        1. button
        2. contextMenu
        3. menuBar
        4. menuPopUp
        5. toolBar
        6. pager
      2. Data-bound menus
        1. The dataSource for a menu
        2. The menuActivate event
        3. dataContextMenu
        4. dataMenu
      3. Windows and dialogs
        1. window
        2. windowArea
        3. taskbar
        4. modal
      4. Multimedia widgets
        1. applet
        2. flash
      5. An example with menus and windows
        1. Is the sq:windowMenu widget useful?
      6. Miscellaneous commands
        1. trace
        2. alert
        3. bookmark
      7. Summary
    14. 9. Debugging, Optimization, and Deployment
      1. Debugging
      2. The Backbase debugger
        1. Overview
        2. The information/error bar
        3. The debugger window
          1. Console tab
          2. The Model and View tabs
          3. TDL tab
          4. Network tab
          5. Reports tab
          6. Preferences tab
          7. Help tab
      3. Application optimization
        1. Optimizing content
          1. Making fewer HTTP requests
          2. Making AJAX cacheable
          3. Post- or preloading components
          4. Reducing the number of DOM elements
        2. Optimizing the server
          1. Compression
          2. Flushing the buffer early
          3. Using GET for AJAX requests
        3. Optimizing cookies
        4. Optimizing JavaScript and CSS
          1. Placing JavaScript code at the end of the page and CSS at the top
          2. Minify JavaScript and CSS
          3. Removing duplicate scripts
          4. Minimizing DOM access
          5. Developing smart event handlers
        5. Optimizing images
      4. The TDL Optimizer
        1. Creating a configuration file for the optimizer
        2. Running the TDL Optimizer
        3. Deploying the optimized bindings
      5. Deployment on a server
        1. Install
        2. Installation in a Java environment
        3. Defining alias locations
      6. Summary
    15. 10. Framework Comparison
      1. The landscape of client-side technologies
        1. Server-side and client-side
        2. Client-side libraries and frameworks
        3. Flash, Silverlight, and JavaScript-based frameworks
        4. Client-side GUI framework and application framework
      2. Backbase and other client-side GUI frameworks
        1. Programming model
        2. Widgets
        3. Component model
        4. Data binding
        5. Standards support
        6. Internationalization
        7. Performance
        8. Long-term viability
        9. Conclusion
      3. An integration example
      4. AJAX toolkit reference
        1. ASP.NET AJAX
        2. Bindows
        3. Cappuccino
        4. Ext JS
        5. The Dojo toolkit
        6. Google Web Toolkit
        7. Javeline
        8. jQuery
        9. MooTools
        10. Prototype and Script.aculo.us
          1. Prototype
          2. Script.aculo.us
        11. PureMVC
        12. qooxdoo
        13. SproutCore
        14. The Yahoo User Interface (YUI) library
        15. ZK
      5. Summary
    16. 11. The Square Web Application
      1. What is a square web application?
          1. No global JavaScript functions
          2. Make widgets data bound
          3. Do not generate HTML at the server
          4. Send only XML data from server to client
          5. Make the layout modular
          6. Use MVC throughout
          7. The client is the view
          8. Place the controller at the server
          9. No business logic at the client
      2. Complete the C3D example
        1. C3D: make it work
          1. The photo upload form
            1. The dataComboBoxes
            2. Handling the image upload
            3. Add a Google map
        2. C3D: make it right
        3. C3D: make it fast
          1. Initial page loading
          2. Optimizing client runtime processing
          3. Server-side issues
      3. Usability aspects
        1. Legacy integration
        2. Progressive enhancement
        3. Internationalization and localization
        4. Accessibility
      4. What will the future bring?
      5. A square puzzle
      6. Summary