Backbase 4.4.x RIA Development电子书

Backbase 4 RIA Development

Table of Contents

Backbase 4 RIA Development

Credits

About the Authors

About the Reviewers

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Errata

Piracy

Questions

1. Hello Backbase!

What is Backbase?

What can Backbase do for me?

The Backbase Explorer

Setting up a web development environment

The web server and a server scripting language

The browser

Using an IDE

Download the Backbase framework

The Backbase page skeleton

"Hello Backbase" in four variations

Verifying the installation of the Backbase framework

"Hello World" using a Backbase balloon

The JavaScript balloon

The XEL balloon

Hello Server!

The page with the form

The PHP response

XML and namespaces

Why do we need XML namespaces?

Declaring XML namespaces

Use of namespaces with Backbase

A basic page layout

Summary

2. User Interface Development

Squaring the circles of web applications

The Backbase Reference

UI markup languages

Where is the source code?

XHTML

The Backbase Tag Library

Backbase Tag Library widget overview

The BTL abstract elements

Abstract element inheritance structure

element

visualElement

positionElement

dimensionElement

cardStack and card

The layout widgets

Accordion

Box

deck

navBox

panelSet

tabBox

The BTL utility elements

codeHighlighter

label

populator

skinSettings

xhtml and xml

Styling techniques for GUI widgets

Using CSS

Skinning

The BTL skinSettings widget

Height problems

A BTL Exerciser

The application structure

index.html

app.xml

Tab panel content

The menu in each tab panel

Summary

3. Writing the Application Logic

The application programming model

Overview of the Backbase APIs

The bb object

Low level APIs—the W3C DOM family

The Document Object Model

Traversing the document tree

Modifying the document tree

Dealing with events

Events

DOM event flow and cancelable events

Registering event handlers

Using markup with an XEL handler element

Using markup with XEL handler attributes

Using JavaScript and the DOM events API

APIs relevant for dealing with events

Event types

BTL widget custom events

Custom event creation

Backbase utility functions

The bb object utility functions

Backbase Commands

The Backbase XML Execution Language (XEL)

XEL features

Variables in XEL

Declaring variables

Variable scope

Retrieving variable values

Setting properties and variables

Getting and setting attributes

Conditional execution in XEL

Conditional logic

Iterators

Functions in XEL

Calling a function or method

Passing a function argument

Passing context

Using JavaScript in XEL

XPath

Evaluating attribute values

String mode

XPath mode

Commands to manipulate the DOM or elements

Manipulating elements

focus and blur

fireEvent

position

scrollTo

setText

show, hide, and showHide

sort

tile

transform

param

Manipulating the DOM

copy

create

attribute

copy-of

value-of

destroy

move

Info and Notify BTL widgets

balloon

infoBox

loadingMessage

toolTip

A Backbase Command Exerciser

Summary

4. Client-server Communication and Forms

AJAX

Asynchronous communication

The XMLHttpRequest object

The JSONRequest object

The load command

header

The JavaScript load command

Working with forms

The forms profiles

Form elements

The extended form element

The extended input element

fileInput

The abstract BTL form elements

focusableElement

dropDown

formField, formList, and rangeFormField

The BTL form widgets

calendar

checkBoxGroup

comboBox

listBox

slider

spinner

suggestBox

Validating input fields

Required fields

Data type validation

AJAX and architecture

Model-View-Controller

Implementing MVC on the server

The server controller

The server model

The server view

Scriptlets

The C3D travel blog site

Requirements for the C3D site

Design

Data model

Page layout

Good use of IDs

Server application structure

The C3D controller

The C3D model

The C3D view

Login and logout

Add a trip

Summary

5. Data-bound Widgets

Why is data binding important?

The server-side of data binding

Data-binding fundamentals

dataSource

Local data sources

Remote data sources

Static data sources

dataObserver

The dataUpdate method

Make an HTML element data bound

Creating the data source

Define the new widget

The dataUpdate method

Show the data-bound bulleted list

The data-bound widgets

dataGrid

Grid editing and fieldEditor

The eleven features of dataGrid

Common header menu

Header context menu

Data paging

Column drag-and-drop

Column freezing

One-click editing

Editing and focusing together

Instant editing

Collapsible info block

Form editing

Live scrolling

Continue the development of the C3D application

Adding a trip entry

Show trips and trip entries

Summary

6. More Dynamic Behavior

Behaviors

Drag-and-drop

dragBase

drag

dragTarget

Basic dragging and dropping with widgets

Drag constraints

dragItem

dragGroup

useDragClass

dragConstraint

Reverting a dragged element

Advanced dragging and dropping with widgets

Drag-and-drop columns inside a table

Resize

Using the resize behavior

resizeEdges

resizeMin and resizeMax

resizeType

resizeConstraint

Resize custom events

Custom Grippies

Resizing table columns

Commands for the behaviors

addBehavior

removeBehavior

setBehavior

Broadcaster/observer

Animating the UI

SMIL animation

Adding animation to the C3D example application

Summary

7. Creating UI Components

Component models and technologies

Introduction to the Tag Definition Language (TDL)

Widgets

The advantages of using TDL

Object-orientation

Object-oriented concepts

OO and TDL

OO and web applications

Model-View-Controller

Widget creation with TDL

Overview of the TDL elements

Simple widgets

Building a TDL widget definition

The template, attribute, and resource tags

Templates

The content tag

Templates with JavaScript

Attributes

Positioned yellow notes

Changers and mappers

Resources

The yellow notes example using resources

Named resources

Widget event handling

The handler tag

Updatable yellow notes

Widgets as objects

Defining classes with TDL

Inheritance

Composition

The element tag

Properties

Property definition

Property getters

Property setters

A web lamp example

Methods

The argument tag

The body tag

Sliding thumbnails

Constructors and destructors

Composite widgets

Compose a pedestrian light

Order form building blocks

Inheritance

Yellow notes using inheritance

Interfaces

Extending BTL

Behaviors

Behavior example

Uses

The limits of creating UI components

TDL as a macro language

TDL as an object-oriented language

Squaring the circles

Namespaces

Conclusion

Summary

8. Widget Wrap-up

Action and menu widgets

button

contextMenu

menuBar

menuPopUp

toolBar

pager

Data-bound menus

The dataSource for a menu

The menuActivate event

dataContextMenu

dataMenu

Windows and dialogs

window

windowArea

taskbar

modal

Multimedia widgets

applet

flash

An example with menus and windows

Is the sq:windowMenu widget useful?

Miscellaneous commands

trace

alert

bookmark

Summary

9. Debugging, Optimization, and Deployment

Debugging

The Backbase debugger

Overview

The information/error bar

The debugger window

Console tab

The Model and View tabs

TDL tab

Network tab

Reports tab

Preferences tab

Help tab

Application optimization

Optimizing content

Making fewer HTTP requests

Making AJAX cacheable

Post- or preloading components

Reducing the number of DOM elements

Optimizing the server

Compression

Flushing the buffer early

Using GET for AJAX requests

Optimizing cookies

Optimizing JavaScript and CSS

Placing JavaScript code at the end of the page and CSS at the top

Minify JavaScript and CSS

Removing duplicate scripts

Minimizing DOM access

Developing smart event handlers

Optimizing images

The TDL Optimizer

Creating a configuration file for the optimizer

Running the TDL Optimizer

Deploying the optimized bindings

Deployment on a server

Install

Installation in a Java environment

Defining alias locations

Summary

10. Framework Comparison

The landscape of client-side technologies

Server-side and client-side

Client-side libraries and frameworks

Flash, Silverlight, and JavaScript-based frameworks

Client-side GUI framework and application framework

Backbase and other client-side GUI frameworks

Programming model

Widgets

Component model

Data binding

Standards support

Internationalization

Performance

Long-term viability

Conclusion

An integration example

AJAX toolkit reference

ASP.NET AJAX

Bindows

Cappuccino

Ext JS

The Dojo toolkit

Google Web Toolkit

Javeline

jQuery

MooTools

Prototype and Script.aculo.us

Prototype

Script.aculo.us

PureMVC

qooxdoo

SproutCore

The Yahoo User Interface (YUI) library

ZK

Summary

11. The Square Web Application

What is a square web application?

No global JavaScript functions

Make widgets data bound

Do not generate HTML at the server

Send only XML data from server to client

Make the layout modular

Use MVC throughout

The client is the view

Place the controller at the server

No business logic at the client

Complete the C3D example

C3D: make it work

The photo upload form

The dataComboBoxes

Handling the image upload

Add a Google map

C3D: make it right

C3D: make it fast

Initial page loading

Optimizing client runtime processing

Server-side issues

Usability aspects

Legacy integration

Progressive enhancement

Internationalization and localization

Accessibility

What will the future bring?

A square puzzle

Summary

Index