1. AJAX & By – Anupama Sharma

2. Defining Ajax Ajax isn’t a technology. It’s 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;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. –xmlns:b=http://www.backbase.com/b for visual tags.http://www.backbase.com/b –xmlns:s=http://www.backbase.com/s for systems tags.http://www.backbase.com/s

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/bpc/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 tag is used to indicate to the BPC where the BXML area of a web page starts and ends –Use the tag to separate BXML from (potentially) non valid HTML code.

7. Example 01 - My First BXML Page Click to open. Hello World! Example 01 - My First BXML Page Click to open. Hello World! Example XHTML and namespace definition 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: – for copying, moving, and transforming – for loading additional nodes – 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 – is used to retrieve new dynamic data – is used to submit a form, the standard html form attributes define the actions to do (default is get) – 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 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 is used to dynamically assign styles to UI elements in response to events: –

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. – Behaviors can inherit from other behaviors allowing the BXML programmer to create a hierarchy of frequently used events and commands. –

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 tag and are assigned a name which becomes a new tag in BXML: –

14. XPath Functions You can also use various functions within XPath expressions. Standard functions (arithmetic and string processing) –{count(id('z')/span[@b:value = 'a'])} –{100 mod (4 * 4 - 3) - 9} –{concat('tr', @b:something, 'e')} BPC functions and variables –{concat($bpc.path,'tools/skin/tools.css')} –$bpc.version –bpc(‘drag’), bpc(‘mouse’) Setting and getting variables –

15. Stylesheets Formalize frequently used transformations as stylesheets The syntax is XSL-like within the Backbase s namespace: – (Image is here)

16. Script Functions And you can easily interface with JavaScript for executing more complex client-side logic and calculation. Call JavaScript functions from BXML –b:action="js" b:value="alert('Hello world!')“ Call JavaScript through standard JS events – Call BXML from JavaScript –bpc.move(' text ','replacechildren',"id('myID')"); –bpc.execute(' '); –bpc.setXpathVar('myvar',‘myvalue');

17. Loading Data Load XML data from the server and bind it to UI elements Include, buffer, and load: – inserts data when executed – is used to defer loading until parent element is selected (e.g. tabs in a deck) – 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!