AJAX

1
AJAX

• By Anupama Sharma

2
Defining Ajax

• Ajax isnt a technology. Its really several
  technologies, each flourishing in its own right,
  coming together in powerful new ways. Ajax
  incorporates
• standards-based presentation using XHTML and CSS
  
• dynamic display and interaction using the
  Document Object Model
• data interchange and manipulation using XML and
  XSLT
• asynchronous data retrieval using XMLHttpRequest
  
• and JavaScript binding everything together.

3
Objectives of Backbase

• Rich Internet Applications
• Rich and Real-time Interfaces
• Single Page Interface (SPI)
• Client-side Intelligence
• Embrace and Extend Web Standards (AJAX)
• Zero Install, Small Footprint
• Cross-Browser Compatibility
• Works with (X)HTML, JS, CSS, XML, XSLT
• Easy Integration with .NET, J2EE, and PHP
• Data-driven Integration
• Align RIA with SOA
• Developer Productivity
• Declarative Language
• Easy to Learn for HTML Developers

4
Backbase XML (BXML)

• BXML stands for Backbase eXtensible Markup
  Language, a declarative, XML-based language for
  developing Rich Internet Applications (RIA).
• BXML interfaces are valid XML.
• The BXML vocabulary is an extension of XHTML that
  provides tags (in namespaces) for declaring rich
  and highly interactive web sites.
• xmlnsbhttp//www.backbase.com/b for visual
  tags.
• xmlnsshttp//www.backbase.com/s for systems
  tags.

5
Backbase Presentation Client (BPC)

• The Backbase Presentation Client (BPC) is a
  JavaScript based GUI management system that runs
  within standard web browsers.
• BPC enables client-side processing of
  presentation logic.
• Once activated, the BPC receives BXML and
  translates the BXML at runtime into a standard
  DOM-tree that is rendered by the browser.
• Existing DHTML technologies (XHTML, JS, CSS)
  remain fully functional within BXML pages.

6
Booting and Initialization

• The BPC is a JavaScript library included in the
  BXML start-up page.
• script type"text/javascript" src"/backbase/3_0/b
  pc/boot.js"
• Initially only the core library of about 30K,
  that contains the most frequently used features,
  is loaded
• Additional features are loaded automatically in
  separate modules on demand (to limit download
  size)
• The ltxmpgt tag is used to indicate to the BPC
  where the BXML area of a web page starts and ends
• Use the ltxmp bbackbasetruegt tag to separate
  BXML from (potentially) non valid HTML code.

7
Example
XHTML and namespace definition
lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN" "http//www.w3.org/TR/xhtml1/DTD/x
html1-strict.dtd"gt lthtml xmlns"http//www.w3.org/
1999/xhtml" xmlnsb"http//www.backbase.com/b"
xmlnss"http//www.backbase.com/s"gt ltheadgt
lttitlegtExample 01 - My First BXML Pagelt/titlegt
ltscript type"text/javascript"
src"/backbase/3_0/bpc/boot.js"gtlt/scriptgt lt/headgt
ltbody onload"bpc.boot('/backbase/3_0/')"gt
ltxmp bbackbase"true"gt ltbinfopane
style"border 1px solid DDDDDD"gt
ltbinfonav baction"select-deselect"
style"background-color EEEEEE"gt
Click to open. lt/binfonavgt
ltbinfoview style"background-color CCCCCC"gt
Hello ltstronggtWorld!lt/stronggt
lt/binfoviewgt lt/binfopanegt
lt/xmpgt lt/bodygt lt/htmlgt
lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN" "http//www.w3.org/TR/xhtml1/DTD/x
html1-strict.dtd"gt lthtml xmlns"http//www.w3.org/
1999/xhtml" xmlnsb"http//www.backbase.com/b"
xmlnss"http//www.backbase.com/s"gt ltheadgt
lttitlegtExample 01 - My First BXML Pagelt/titlegt
ltscript type"text/javascript"
src"/backbase/3_0/bpc/boot.js"gtlt/scriptgt lt/headgt
ltbody onload"bpc.boot('/backbase/3_0/')"gt
ltxmp bbackbase"true"gt ltbinfopane
style"border 1px solid DDDDDD"gt
ltbinfonav baction"select-deselect"
style"background-color EEEEEE"gt
Click to open. lt/binfonavgt
ltbinfoview style"background-color CCCCCC"gt
Hello ltstronggtWorld!lt/stronggt
lt/binfoviewgt lt/binfopanegt
lt/xmpgt lt/bodygt lt/htmlgt
Include and initialize the BPC engine
BXML and XHTML tags
8
Managing the BXML- and DOM-Tree

• The BPC translates BXML client-side at runtime
  into a standard DOM-tree that is rendered by the
  browser
• The first step in the translation process is to
  parse the BXML and create the BXML-Tree.
• The second step in the translation process is to
  build the corresponding DOM-Tree that can be
  rendered by the browser.

9
Tree Manipulation

• The objective of tree manipulation is to
  dynamically add-, move or remove elements within
  the BXML-tree.
• Tree Manipulation is done by BXML-tags such as
• ltsrendergt for copying, moving, and transforming
• ltsincludegt for loading additional nodes
• ltstask bactionremovegt for removing nodes
• Tree manipulation happens client-side without
  page re-loading.

10
Get, post, submit, send

• Standard HTTP is used for communication between
  the BPC and the web server
• Actions load, submit, send
• lt... bactionload burlconcat(load.jsp?prod
  uct, _at_prod)" /gt is used to retrieve new
  dynamic data
• lt... bactionsubmit" /gt is used to submit a
  form, the standard html form attributes define
  the actions to do (default is get)
• lt... bactionsend" burldata/file.xml gt is
  used to send any part of the tree to the server
  as an xml document, this is always done with
  post instead of get
• Server can respond either with data or with an
  instruction set
• The distinction is made using the root node of
  the response file (use ltsexecutegt for
  instructions)

11
Adding Look Feel

• The look feel of the Rich User Interface can be
  defined with CSS
• W3C standard http//www.w3.org/Style/CSS/
• The CSS skinning can be applied to both XHMTL and
  BXML
• ltssetstylegt is used to dynamically assign styles
  to UI elements in response to events
• ltssetstyle bbackground-color"green"
  bwidth"200px" bopacity".2" bheight"20px"
  btop"0px"/gt

12
Behaviors Custom Events Commands

• The objective of a Behavior is to combine
  multiple events (including their related
  commands) into a single Behavior that can be
  re-used across multiple GUI elements.
• A new Behavior has its own name (e.g. mybutton)
  which is used to assign it to GUI elements that
  require this behavior.
• ltsbehavior bname"mybutton"gt
• Behaviors can inherit from other behaviors
  allowing the BXML programmer to create a
  hierarchy of frequently used events and commands.
• ltsbehavior bnameparent"gt
• ltsbehavior bbehaviorparent" bnamechild"gt

13
Custom Client Controls

• The objective of a Custom Client Control is the
  creation of a new UI element that can be re-used
  across multiple Rich Internet Applications.
• A Custom Client Control is a combination of
  XHTML, CSS and Behaviors.
• Custom Client Controls are defined using the
  ltshtmlstructuregt tag and are assigned a name
  which becomes a new tag in BXML
• ltshtmlstructure bname"bwindow"gt
• ltdiv class"b-window"gtltsinnercontent /gtlt/divgt
• lt/shtmlstructuregt

14
XPath Functions

• You can also use various functions within XPath
  expressions.
• Standard functions (arithmetic and string
  processing)
• count(id('z')/span_at_bvalue 'a')
• 100 mod (4 4 - 3) - 9
• concat('tr', _at_bsomething, 'e')
• BPC functions and variables
• concat(bpc.path,'tools/skin/tools.css')
• bpc.version
• bpc(drag), bpc(mouse)
• Setting and getting variables
• ltstask baction"set" btarget"_at_innerHTML"
  bvalue"concat('tr', _at_bsomething, 'e')"
  /gt

15
Stylesheets

• Formalize frequently used transformations as
  stylesheets
• The syntax is XSL-like within the Backbase s
  namespace
• ltsstylesheet bname"deck"gt
• ltstemplate bmatch"product"gt
• ltdiv class"item-view" bnamedog"
  bprice"5"gt
• ltimggt
• ltsattribute bname"src"
  bselect"items/item/image" /gt
• lt/imggt
• ltsif btest"items/item/image"gt(Image is
  here)lt/sifgt
• ltdivgt
• ltsvalue-of bselect"nameposition()
  1" /gt
• lt/divgt
• lt/divgt
• lt/stemplategt
• lt/sstylesheetgt

16
Script Functions

• And you can easily interface with JavaScript for
  executing more complex client-side logic and
  calculation.
• Call JavaScript functions from BXML
• baction"js" bvalue"alert('Hello world!')
• Call JavaScript through standard JS events
• ltspan onclick"alert('Hello world!')"gt
• Call BXML from JavaScript
• bpc.move('ltdivgttextlt/divgt','replacechildren',"id('
  myID')")
• bpc.execute('ltstask baction"alert"
  bvalueok" /gt')
• bpc.setXpathVar('myvar',myvalue')

17
Loading Data

• Load XML data from the server and bind it to UI
  elements
• Include, buffer, and load
• ltsinclude burl"data/file.xml" /gt inserts data
  when executed
• ltbbuffer burl"data/file.xml" /gt is used to
  defer loading until parent element is selected
  (e.g. tabs in a deck)
• lt baction"load" burldata/file.xmlgt is
  used to load data within events, tasks, etc. The
  load command provides complete control over
  what and when to load.

18
IDE Integration

• Develop BXML pages using standard editing tools
• Visual Studio
• Eclipse
• Dreamweaver
• Syntax Highlighting
• Code Completion

19
Reference

• Backbase documents, http//www.backbase.com

20
Thanks!