Home

Defining Event Handlers [Backbase Manual]

1. Key Value F1 112 F2 113 F3 114 F4 115 F5 116 F6 117 F7 118 F8 119 F9 120 F10 121 Fil 122 F12 123 Left Arrow 37 Up Arrow 38 Right Arrow 39 Down Arrow 40 6 4 Defining Focus Model The focus model allows you to define the elements in your user interface that a user can navigate through using keys An element that has focus can respond to keyboard input By default HTML form elements are focusgroups and focusitems You define elements that can get focus by placing the following BXML attributes with the values true or false on an element The attributes define a hierarchy of focus elements in the BXML space e b focusroot define the main focus container s You can have multiple focus roots inside your application but there is no higher level e b focusgroup define a grouping of items that can get focus and that you can navigate through e b focusitem identify an element that can get focus An element that has focus can respond to keyboard input The _focusCurrent variable contains the focusitem that currently has focus is null when no element has focus The attributes define a hierarchy of focus elements You can nest all elements as long as the hierarchy is observed For example a focusroot can have nested focusroots a focusgroup can have nested focusgroups and focusitem nested focusitems A focusgroup or a focusroot can also be a focusitem Default keys are assigned to the focusroot foc
2. The files in the controls backbase b listgrid directory also show examples of the listgrid control including defining contextmenus for row operations insert copy delete hide and edit and XSLT and XML datasource examples Example 5 33 Creating a Listgrid 2004 2006 Backbase B V All Rights Reserved 80 Backbase Manual Version 3 1 4 lt b listgrid b url datasource xml b template b listgrid xslt b ie5 template b listgrid ie5 xslt gt lt b listgridhead gt lt b listgridrow b width 100 gt lt b listgridheadcell b width 60px b datatype spinner gt Spinner lt b listgridheadcell gt lt b listgridheadcell b width 60px b datatype text gt Text lt b listgridheadcell gt lt b listgridheadcell b width 60px b datatype numbers gt Numbers lt b listgridheadcell gt lt b listgridheadcell b width 60px b datatype letters gt Letters lt b listgridheadcell gt lt b listgridheadcell b width 60px b datatype text gt Text lt b listgridheadcell gt lt b listgridheadcell b width 60px b datatype datepicker gt Date lt b listgridheadcell gt lt b listgridrow gt lt b listgridhead gt lt b listgridbody gt lt hoeilisecrenet The b 1istgrid control supports page iteration For more information see Implementing a Paging Mechanism p 81 5 8 5 Treelist The Treelist control presents data in a hierarchical list similar for example to a list us
3. e Table resizing when resizing tables it is recommended to place in every td and div element an overflow hidden to prevent the column from being resized smal ler than the content inside You must also not have padding on the th or td be cause this cannot be resized and can give inaccurate results b columnmode is an attribute that only applies when you resize a table by default the table grows larger and smaller as you resize the collumns When you specify b columnmode fixed the table becomes fixed and when you resize a column only the column next to it grows smaller or larger 4 In some situations resizing can be used incorrectly where resizing is not strictly possible For example trying to resize the following elements results in strange behavior non blocklevel elements non relative or absolute positioned elements resize north of a non absolute element and resizing sides of an element that are fixed 6 6 Adding Event Propagation Event propagation allows you to pass events from one UI element to another You propagate events in Backbase as follows e b followstate allows you to define relationships and synchronize the states of different UI controls The observer element follows the state selected or deselected of the observed element e b observe passes all events triggered on the observed element to the observer element The b observe is a more generic implementation of b followstate which can only fol
4. D DE 4 33 Windows XP SP3 y PHP XML pih ew surfaces on 5 36 aan gg Javascript XML 23 59 Oracle finds supp ce 17 Si 1 2 4 Introducing the BXML Tree After reading the previous sections you should by now have an overview of the function ality provided by Backbase software This section delves deeper into the core of Backbase to give an overview of the rendering model and explain how BXML tags are loaded inter preted and executed This corresponds with the BXML Tag Interpreter and Targeting components in the functional overview 2004 2006 Backbase B V All Rights Reserved 12 Backbase Manual Version 3 1 4 Figure 1 12 BXML Tree and DOM Tree BXML page Web Browser lt BMXL tags gt lt XHTML tags gt lt tag gt BPC JavaScript Library lt tag gt lt tag gt lt tag gt lt tag gt B Tree Web browsers do not recognize BXML tags therefore the Backbase Presentation Client BPC translates BXML to native browser commands A good way to visualize this is to think of two trees as shown in the illustration below one tree is comprised of BXML and the other of HTML the DOM tree The BPC translates the BXML Tree into a standard DOM Tree which is rendered by the browser A Backbase application modifies the BXML tree whenever something needs to change in the user interface This is what s know as Tree Manipulation You can load new BXML ele ments into the tree remove them copy them transform them and so
5. image_repository icon send gif gt lt img gt lt b toolbaritem gt lt b toolbaritem gt lt img alt style height 16px width 20px gt lt s event b on construct b target src b action set b value concat bpc_controlpath image_repository icon compose gif gt lt img gt lt b toolbaritem gt lt b toolbaritem gt 2004 2006 Backbase B V All Rights Reserved 67 Backbase Manual Version 3 1 4 lt img alt style height 14px width 19px gt lt s event b on construct b target src b action set b value concat bpc_controlpath image_repository icon erase gif gt lt img gt lt b toolbaritem gt lt b toolbaritem gt lt img alt style height 16px width 16px gt lt s event b on construct b target src b action set b value concat bpc_controlpath image_repository icon preview gif gt lt img gt lt b toolbaritem gt lt b toolbar gt lt div gt lt xmp gt 5 4 9 Tree The Tree control creates a simple tree structure You create the control by simply nesting b tree tags to create the desired tree hierarchy The b tree has a b label attribute Figure 5 18 Backbase Tree Efe c o iS Games Patience Solitaire Music E E Program Files Backbase Firefox Internet Explorer Mozilla Opera The following code is an example of a tree control Example 5 16 Creating a Tree Control lt b tree b label C
6. BACKBASE Backbase Manual Backbase Manual Version 3 1 4 Table of Contents Chapter 1 Introduction 1 1 Backbase Rich Internet Applications 1 2 Introducing Backbase 1 3 Using the Examples in the Manual 1 4 Developer Resources 1 5 Runtime Developer Tools Chapter 2 Understanding BXML and BPC 2 1 BXML Overview 2 2 Backbase Presentation Client 2 3 Booting and Initialization Chapter 3 Introducing the BXML Tree 3 1 Managing the BXML Tree and DOM Tree 3 2 Targeting 3 3 Tree Manipulation 3 4 Loading 3 5 Submitting Forms Chapter 4 Asynchronous Execution 4 1 Asynchronous Execution 4 2 Locking For Explicit Synchronization 4 3 Aborting Chapter 5 Creating Application Layout 5 1 Defining Screen Partitioning 5 2 Backbase Controls Overview 5 3 Defining Layout Controls 5 4 Defining Navigation Controls 5 5 Defining Information Controls 5 6 Defining Chart Controls 5 7 Defining Form Controls 5 8 Defining Data Controls 5 9 Control Interaction 5 10 Adding Look And Feel CSS 5 11 Using Backbase Styled Controls 5 12 Overriding Backbase Styled Controls 5 13 Multimedia Elements Chapter 6 Applying User Interactions 6 1 Defining Events and Commands 6 2 Sequence of Event Triggering 6 3 Adding User Interaction Events 6 4 Defining Focus Model 6 5 Drag And Drop and Resizing 6 6 Adding Event Propagation 6 7 Adding Effects 6 8 Capturing Browser History and Bookmarking Chapter 7 Formalizing Patterns 7 1 Behaviors 7 2 User Defined Cont
7. Example 5 14 Creating a Taskbar Control lt b panelset b rows 27px 27px gt lt b panel gt lt a b action trigger b event open b target id taskbar_winl gt Open window 1 lt a gt lt a b action trigger b event open b target id taskbar_win2 gt Open window 2 lt a gt lt a b action trigger b event open b target id taskbar_win3 gt Open window 3 lt a gt lt b panel gt lt b panel gt lt b windowarea style height 100 gt lt b window id taskbar_winl b open true style position absolute width S50px her The 20 0px top pz Nett Opr gt lt b windowhead gt Life Is Beautiful La Vita bella lt b windowhead gt lt b windowbody gt lt p gt A 1997 Italian language film which tells the story of an Italian Jew Guido Orefice who lives in a romantic fairy tale but must learn how to 2004 2006 Backbase B V All Rights Reserved 66 Backbase Manual Version 3 1 4 use that dreamy quality to survive a concentration camp with his young son Joshua lt p gt lt b windowbody gt lt b window gt lt b window id taskbar win2 b open true style position absolute width 360P height 200px topsZopx Nett GOPR gt lt b windowhead gt 2001 A Space Odyssey lt b windowhead gt lt b windowbody gt lt p gt An influential science fiction film directed by Stanley Kubrick lt p gt lt b windowbody gt lt b window gt lt b window id taskbar win3 b open true style po
8. input 1 b format dddd dd MMMM yyyy gt Jive lt div style position absolute left 300px gt lt h2 gt Datepicker Control float lt h2 gt lt input type text name inputl gt lt b datepicker b input input 1 b format dddd dd MMMM yyyy gt a dive 5 7 4 Select The Select control a drop down list You can change the value when the cursor is in the input field by pressing the up and down arrow keys and you can press the spacebar to cancel The b select tag contains child b option tags that define an item in the list The b select tag b name attribute is the name of the input field that is sent on a form sub mit and the b value attribute sets the initial field value The b option tag b value at tribute is the value of a value representation pair 2004 2006 Backbase B V All Rights Reserved 76 Backbase Manual Version 3 1 4 Figure 5 28 Backbase Select South Africa England France Germany Italy Poland Sweden Denmark Netherlands Belgium The following is an example of creating a select control Example 5 28 Creating a Select Control lt b select b name county b value Sweden b width 30 gt lt b option b value 1 gt England lt b option gt lt b option b value 2 gt France lt b option gt lt b option b value 3 gt Germany lt b option gt lt b option b value 4 gt South Africa lt b option gt lt b option b value 5 gt Italy lt b option gt lt b op
9. lt b tabbox gt Note The b behavior b tab attribute and the s super tag in this example are there to make sure the tabbed navigation control works properly they are not related to his tory or bookmarks If you want to have back button history without bookmarks simply use the s history without b bookmark attribute 6 8 1 Creating Custom History Navigation You can create your own history by specifying a name other than browser for the s history b name attribute You must then program the your own Back and the Forward navigation buttons using the forward and backward commands For example replace the behavior above with the following Example 6 27 Adding Custom History lt s behavior b name history b behavior b tab gt lt s event b on select gt lt s super gt lt s history b name myHistory gt lt s task b action select gt lt s history gt lt s task b action bookmark b value id gt lt s event gt lt s behavior gt lt s event b on construct b action select b target id bpc bookmark gt lt div gt lt b button b action backward b history myHistory gt amp lt Previous lt b button gt lt b button b action forward b history myHistory gt Next amp gt lt b button gt lt dae 2004 2006 Backbase B V All Rights Reserved 108 Backbase Manual Version 3 1 4 Chapter 7 Formalizing Patterns 7 1 Behaviors A behavior is a generic construct used to encapsula
10. lt a b behavior alert gt Click here to see if your Backbase installation is working lt a gt lt b box gt 2 Run the application in your browser 3 Press Esc to open the Backbase Tools and choose Tools gt Developer Tools Alternatively you can press Alt 1 4 Click the search icon in the top left hand corner to select it a red border indicates it is selected You can now select any element in the browser window 2004 2006 Backbase B V All Rights Reserved 20 Backbase Manual Version 3 1 4 Figure 1 21 Select Icon Click here to see if your Backbase installation is working 5 Click the link the a element in the browser The element is selected in the BXML tab that shows the BXML tree Figure 1 22 BXML Tab EXML HTML LH I ao g a g ee b backbase s behavior text b box text text text Stext 6 In the BXML Data tab view the BXML code defined for the selected element Figure 1 23 BXML Data Tab BXML Data DOM Node Computed Style Behaviors Variables lt a b behavior alert gt Click here to se hh D m your Backbase installation is working lt a gt 7 Click the DOM Node tab to view the DOM defined for the selected element Figure 1 24 DOM Node BXML Data DOM Node Computed Style Behaviors Variables Tag a b behavior alert b state deselected 2004 2006 Backbase B V All Rights Reserved 21 Backbase Manual Version 3 1 4 8 Click the C
11. Backbase Manual Version 3 1 4 moving objects down in the object hierarchy It inherits the zoom behavior that handles the visual style changes The s super tag makes sure that the event of the same type in the inherited behavior is applied before starting to run the core behavior instructions for that event Example 7 2 Behavior Inheritance lt s behavior b name zoom gt lt s event b on click gt lt s fxstyle b font size 15px gt lt s fxstyle b background color B8B8B8 gt lt s fxstyle b font size 20px gt lt s fxstyle b background color 888888 gt lt s event gt lt s behavior gt lt s behavior b name movedown b behavior zoom gt lt s event b on click gt essere gt lt s task b action movedown b target gt lt s task b action show hide b target span at moveddown gt lt s event gt lt s behavior gt lt div gt lt p style background color FOFOFO font size 10 b behavior movedown gt Life is Beautiful amp gt amp gt lt span at moveddown gt is an Italian language film which tells the story of an Italian Jew who lives in a romantic fairy tale but must learn how to use that dreamy quality to survive a concentration camp with his young son Joshua lt span gt lt p gt lt p style background color FOFOFO font size 10 b behavior movedown gt 2001 A Space Odyssey amp gt amp gt lt span at moveddown gt is an influential science fiction film notable
12. b open true style width 250px gt lt b tree b label Games gt lt b tree b label Patience gt lt b tree b label Solitaire gt lt b tree gt lt b tree b label Music gt lt b tree b label Program Files gt lt b tree b label Backbase gt lt b tree b label BPC gt lt b tree gt lt b tree b label Firefox gt lt b tree b label Internet Explorer gt lt b tree b label Mozilla gt lt b tree b label Opera gt lt b tree gt lt b tree gt The b tree control supports lazy loading For more information see Lazy Loading p 2004 2006 Backbase B V All Rights Reserved 68 Backbase Manual Version 3 1 4 5 5 Defining Information Controls Use the information controls to provide additional information to the user You can define information controls using the BXML client controls b accordeon b infobox s loading b statusbar and b tooltip 5 5 1 Accordeon The Accordeon control groups related information together It contains head and body elements that define each item in the group The head element describes the content contained in the body and is always visible you can expand or collapse the body ele ments by clicking the head element Only one of the body elements can be selected at a time expanding one item automatically collapses the currently selected item using an animation effect When selected the body takes the size of the content
13. e Backbase Presentation Client BPC the BPC is a robust client side AJAX engine that renders Rich Internet Applications at runtime The BPC interprets the Backbase BXML tags and transforms them into the corresponding DOM structure e BXML Language BXML Backbase eXtensible Markup Language is Backbase s declarative tag based UI language that extends XHTML BXML tags and attributes are used to describe UI components data structures behaviors events handling and command execution BXML is extensible you can create your own controls events behaviors and attributes Backbase uses AJAX or Asynchronous JavaScript and XML technologies to implement a Rich Internet Application AJAX is a term describing a web development technique for creating interactive web applications using a combination of technologies XHTML and CSS for presenting information the Document Object Model manipulated through JavaS cript to dynamically display and interact with the information presented the XMLHttpRe quest object to exchange data using XML asynchronously with the web server AJAX ap plications send requests to the web server to retrieve only the data that is needed The rendering of the data the presentation is generated client side The data to be rendered results in a partial update of the application and not a full reload The data driven request response model is implemented in a Backbase web application using the Single Page Interface SPI mod
14. lt oslsEe lt sp pare ogloeiee lt b barc hart bar b never par p hart bar p Harc par p hart par p lt b barchart series gt lt b barchart gt value 15 gt value 23 gt value 25 gt value 22 gt value 26 gt b color ff0000 gt 5 6 3 Linechart A line graph is used to show continuing data how one thing is affected by another The chart makes it clear to see how things are going by the rises and falls a line graph shows 2004 2006 Backbase B V All Rights Reserved 73 Backbase Manual Version 3 1 4 Figure 5 25 Backbase Line Chart backbase com visitors from Russia Bulgaria and England from 9th of June 2005 till 13th of June 2005 Number of Visitors 14 00 12 60 11 20 3 80 4 20 2 80 1 40 9 June 2005 10 June 2005 11 June 2005 W Visitors from Russia Wi Visitors from Bulgaria H Visitors from England Date 12 June 2005 13 June 2005 The following is an example of a linechart control Example 5 24 Creating a backbase Linechart lt b linechart b caption backbase com visitors from Russia Bulgaria and England from 9th of June 2005 till 13th of June 2005 b x axis label Date b y axis label Number of Visitors b width 600 b height 400 b name name gt lt b linechart horizontal values gt lt b linechart value b lt b linechart value b lt b linechart value b lt b linechart value b lt b linechart value b val lue 1
15. Figure 5 19 Backbase Accordeon gt The Seven Samurai x 2001 A Space Odyssey 1968 An influential science fiction film directed by Stanley Kubrick gt Life Is Beautiful La Vita bella 1997 In the following example the accordeon contains three accordeonheads and accordeon bodies You can use the b state attribute to define which of the heads is opened on star tup Example 5 17 Creating an Accordeon Control lt b accordeon style width 500px gt lt b accordeonhead gt The Seven Samurai lt b accordeonhead gt lt b accordeonbody gt lt p gt A movie by Akira Kurosawa starring Takashi Shimura and Toshiro Mifune lt p gt lt b accordeonbody gt lt b accordeonhead gt 2001 Space Odyssey 1968 lt b accordeonhead gt lt b accordeonbody gt lt p gt An influential science fiction film directed by Stanley Kubrick lt p gt lt b accordeonbody gt lt b accordeonhead b state selected gt Life Is Beautiful 1997 lt b accordeonhead gt lt b accordeonbody gt lt p gt An Italian language film which tells the story of an Italian Jew Guido Orefice played by Roberto Benigni who lives in a romantic fairy tale but must learn how to use that dreamy quality to survive a concentration camp with his young son Joshua played by Giorgio Cantarini lt p gt lt b accordeonbody gt lt b accordeon gt 5 5 2 Loading The loading control is the only element that is directly loaded by the engine whe
16. Lee lt th style width 150px gt Movie lt th gt lt th style width 60px gt Genre lt th gt ZEI lt thead gt lt tbody gt lt table gt The moverright and moveleft events are executed as follows 1 4 You Click the Move rows to the right locked link to trigger the moverright event The event targets the table rows in the first table the target element is therefore contains a node set Each row in the table triggers the moveright event handler defined in the behavior lock move Therefore for each row a separate thread is created to handle the event However because the event handler locks the tbody element using XPath targeting each thread runs synchronously each thread must complete before the next thread is started The moveright event handler takes the first table row and inserts it at the location designated by the b destination attribute in this case table 1 tbody means it navigates from the context node the tr element in the first table up two levels to the table element finds the first sibling table and inserts the tr element as the last child in the tbody When the first table row is moved it executes the event handler on the next tr element and so on An fxstyle is defined on the event handler defining a time of 500 milliseconds that delays the handling of the event sufficiently for you to see how each each event handler is triggered individually and is completed before the
17. Lester lt b combo option gt lt b combo option b value 4 gt A Room With A View 1986 dir James Ivory lt b combo option gt lt b combo option b value 5 gt A Streetcar Named Desire 1951 dir Elia Kazan lt b combo option gt lt b combo option b value 6 gt Adam s Rib 1949 dir George Cukor lt b combo option gt lt b combo option b value 7 gt A1ll About Eve 1950 dir Joseph Mankiewicz lt b combo option gt lt b combo option b value 8 gt All That Jazz 1979 dir Bob Fosse lt b combo option gt lt b combo option b value 9 gt Annie Hall 1977 dir Woody Allen lt b combo option gt lt b combo option b value 11 gt Annie Hall 1977 dir Woody Allen lt b combo option gt lt b combo option b value 12 gt Apocalypse Now 1979 dir Francis Ford Coppola lt b combo option gt lt b combo option b value 13 gt Blade Runner 1982 dir Ridley Scott lt b combo option gt lt b combo option b value 14 gt Blue Velvet 1986 dir David Lynch lt b combo option gt lt b combo option b value 15 gt Bonnie And Clyde 1967 dir Arthur Penn lt b combo option gt lt b combo option b value 16 gt Bringing Up Baby 1938 dir Howard Hawks lt b combo option gt lt b combo option b value 17 gt Casablanca 1942 dir Michael Curtiz lt b combo option gt lt b combo option b value 18 gt Chinatown 1974 dir Roman Polanski lt b combo option gt lt b combo option b value 19 gt Citizen Kane 1941 dir Orson Welles
18. Version 3 1 4 Tools Description element is rendered by the browser layout manager the behaviors it uses and finally the variables it has at its disposal The Developer Tool also has a Runtime Tracer which monitors actions executed at runtime a Search Results tab in which you can view the results of an XPath search and the Execute BXML tab in which you can add and run BXML code on the selected element Keyboard Shortcut is Alt 1 I O Inspector Monitors files that are sent and received and provides its request and response details Keyboard Shortcut is Alt 2 Quick Inspector Allows you to get information on a BXML element by moving the mouse over it Keyboard Shortcut is Alt 3 Reporters Creates an overview of the building blocks used in the construction of your web ap plication Behaviors Ids TaskLists Gfx sets and Key Bindings Keyboard Shortcut is Alt 4 Preferences Specify Backbase Tools Preferences Keyboard Shortcut is Alt 5 1 5 1 Developer Tool The Developer Tool provides detailed information on a selected element in your docu ment It comprises the following panes Search Bar you can select an element for which you want to view its runtime details by clicking the select icon in the top left hand corner and then clicking the element in the browser Alternatively you can enter an XPath query to search the document and select the element from the Search Results tab
19. a gt lt p gt lt b modal id modal gt lt b modalhead gt The Godfather 1972 lt b modalhead gt lt b modalbody gt lt p gt The Godfather is a film adaptation of the novel of the same name see The Godfather novel written by Mario Puzo directed by Francis Ford Coppola and starring Marlon Brando and Al Pacino lt p gt lt a b action trigger b event close b target id modal gt Close the Modal lt a gt 2004 2006 Backbase B V All Rights Reserved 58 Backbase Manual Version 3 1 4 lt b modalbody gt lt b modal gt on 5 3 3 Spacer The b spacer control is an invisible element that is used to separate elements It has a b width and b height attribute that specifies a percentage or pixel value Spacers allow you to separate items to pixel precision Example 5 5 Creating a Spacer Control lt p gt The following text has spacers inside lt br Hello lt b spacer b width 200px b height 150px gt there lt b spacer b width 3em gt How lt b spacer b width 10px gt are lt b spacer b width 2px gt you the 5 3 4 Window b window tag creates a window that you can move similar to windows in desktop ap plications The child tags b windowhead and b windowbody define the head and body of the window Figure 5 5 Backbase Windows Open window 1 Open window 2 Pis 1997 Italan language film which tells E the story of an Italian Tex 2001 A Space Odyssey
20. b datagridheadcell gt lt b datagridheadcell gt Premiere lt b datagridheadcell gt lt b datagridrow gt lt b datagridhead gt lt b datagridbody gt lt b datagrid gt The b datagrid control supports page iteration For more information see Implementing a Paging Mechanism p 81 5 8 2 DetailViewer The Detailviewer control presents a detailed view of data such as those used to present technical product details It presents the data in a table consisting of two columns a de scription column and a detail column Each row of the table is defined using a child b property tag that has a b label attribute to define the text value of the left hand side column description Figure 5 31 Backbase Detailviewer Movie Finding Nemo Directors Andrew Stanton Lee Unkrich co director Genre Animation Comedy Family Plot Outline A father son underwater adventure featuring Nemo a boy clownfish stolen from his coral reef home His timid father must then search the ocean to find him The following is an example of a detailviewer control Example 5 32 Creating a Detailviewer lt b detailviewer gt lt b property b label Movie b style width 400px gt Finding Nemo lt b property gt lt b property b label Directors gt Andrew Stanton zbr gt Lee Unkrich co director lt b property gt lt b property b label Genre gt Animation Comedy Family lt b property gt lt b property b label
21. bs Pis An influential science fiction film Lll directed by Stanley Kubrick notable for combining episodes contrasting hish levels of scientific and technical realism w In the following example two windows are created one of which is by default opened on startup The windows contain buttons in the top right corner defined in the b windowbuttons attribute for closing minimizing and maximizing the window Link elements are defined that allow you to open the windows the trigger command triggers an b event open to open the window specified using an XPath expression o target id winl 2004 2006 Backbase B V All Rights Reserved 59 Backbase Manual Version 3 1 4 Example 5 6 Creating a Window Control lt div style position relative height 100 overflow visible border lpx solid red gt lt a b action trigger b event open b target id win3 gt Open window 1 lt a gt lt a braction trigger b event open b target id win4 gt Open window 2 lt a gt lt b window id win3 b open true style top 100px left 20px gt lt b windowhead gt Life Is Beautiful La Vita Bella lt b windowhead gt lt b windowbody gt A 1997 Italian language film which tells the story of an Italian Jew lt b windowbody gt lt b window gt lt b window id win4 b open false style top 150px left 100px gt lt b windowhead gt 2001 A Space Odyssey lt b windowhead gt lt b windowbody gt An influ
22. gt lt s task b action alert b value valid gt lt s task b action send gt lt s when gt lt s otherwise gt lt s task b action alert b value invalid gt lt s otherwise gt lt s choose gt lt s otherwise gt lt s choose gt lt s event gt lt s behavior gt 3 5 5 Sending XML to the Server The BPC can also send XML to the server To send XML to the server target a BXML ele ment or set of elements and issue the send command the element and all descending elements are converted to XML and sent using the HTTP POST command with the text xml encoding An XML enabled server can then load the XML directly into an XML docu ment the location of the server file is defined using the b url attribute The action associated with the send command depends on which elements are targeted The send command uses the b source attribute to specify which element or elements need to be sent If a form element is targeted the form is submitted in the default form manner If any other element is targeted the element is sent as XML To allow you to target multiple source nodes containing multiple root nodes the gener ated XML is wrapped in a b backbase tag to create valid XML For example Example 3 18 Sending XML to the Server lt table gt lt s event b on command gt lt s task b action send b source tbody tr b url receiveXML php gt lt s event gt lt thead gt lt tr gt lt th g
23. lt s execute gt lt s task b action show gt lt s execute gt lt div b behavior browsertemplating gt lt div gt lt s behavior b name browsertemplating b focusgroup true gt lt s event b on construct gt lt s variable b name data b scope local gt lt s variable b name xslt b scope local gt lt s variable b name string b scope global gt lt s choose gt lt s when b test Sbpc_xsltParser gt lt s task b action load b destination xslt b url table xslt gt lt s when gt lt s otherwise gt lt s task b action load b destination xslt b url table ie5 xslt gt lt s otherwise gt lt s choose gt lt s task b action load b destination data b url films xml gt lt s task b action string2xml b variable xslt gt lt s task b action string2xml b variable data gt lt s task b action xsl transform b stylesheet xslt b datasource S data b destination gt lt s task b action set b target innerHTML b value string gt lt s event gt lt s behavior gt lt xmp gt The index html start up file defines a construct event handler within a behavior The 2004 2006 Backbase B V All Rights Reserved 117 Backbase Manual Version 3 1 4 event handler is triggered when the application is constructed has the following main sec tions Global variables declaration called data xslt and string Browser test the Sbpc_xsitParse
24. or as a basis with which your create your own custom validation You can set client side constraints on form fields or specify a pattern that a field must satisfy using regular expressions The user can submit the form based on the whether the requirements are met or not You can also provide visual hints for correct data entry 4 The default xml is always available unless you set the b skinbase attribute on the body tag to none In the following example four input fields are defined see the the b on validate event 2004 2006 Backbase B V All Rights Reserved 122 Backbase Manual Version 3 1 4 Example 9 3 Validation lt s include b url controls forms xml gt lt form action data succes xml method get b destination gt lt table gt lt tbody gt lt b eS lt td gt Name lt td gt lt td gt lt input b required true name name type text gt lt td gt EEES lt tr b behavior form field text gt lt td gt Year of Birth lt td gt lt td gt lt input b on validate type text name age b validation year gt lt td gt Ej ETS lt tr b behavior form field text gt lt td gt Email Address lt td gt lt td gt lt input b on validate type text name email b validation email gt lt td gt EJES ere lt td gt Annual Income lt td gt lt td gt lt select name income gt lt option value gt Choose Income lt option gt lt option value 10 19
25. otherwise tag are executed if none of the s when tests can be satisfied lt s choose gt lt s when b test id href gt lt s task b action select b target id href gt lt s when gt lt s otherwise gt lt s task b action load b url href gt lt s otherwise gt lt s choose gt e Wrapped in a behavior that defines an effect when the event is triggered lt h1 b behavior font resize gt Resize Font lt h1 gt lt s behavior b name font resize gt SE EVENE 19 ON MOUS EEMESE US lt s fxstyle b font size 5px gt lt s event gt lt s event b on mouseleave gt lt s fxstyle b font size 30px gt lt s event gt lt s behavior gt A behavior can inherit a behavior that has an event handler defined for the same event For more informations see Inheriting Behaviors p 109 6 1 2 Defining Custom Events You can use the trigger command to create a custom event and also to trigger a sys tem event using the syntax b action trigger b Event the b event at vent my ribute defines the name of the custom event If you define an event handler for your custom event for example in a behavior or on the element itself the event is triggered whenever the trigger command is fired In the following example four custom events events are defined By capturing keys p with the s keys you can then trigger a custom event when the key is pressed The e
26. style position absolute bottom 0 left 0 width 100 The b separator tag is a divider for use in a statusbar Example 5 19 Creating a Statusbar Control lt b statusbar style position absolute bottom 0 left 0 width 100 gt Online 2004 2006 Backbase B V All Rights Reserved 70 Backbase Manual Version 3 1 4 lt b separator gt Offline lt b statusbar gt 5 5 5 Tooltip A tooltip appears when a user hovers over the element on which it is defined to provide additional information The user cannot interact with the information and is closed on a mousedown event To create a simple text tooltip you can add a b tooltiptext attribute to almost any XHTML or BXML tag For example Example 5 20 Creating a Tooltip Control lt p b tooltiptext This is a tooltip gt Hover Here lt p gt To create a more complex tooltip such as to show images or a Flash movie instead of just plain text use the s tooltip tag in which you can add XHTML content For ex ample Example 5 21 Creating a Tooltip Control With An Image lt div gt lt a gt The Godfather lt s g Coolt lt img src data corleone jpg gt don gt Francis Ford Coppola 1972 ss Coo lips lt a gt and lt a gt Scarface lt S COOC Ipa lt img src data tony jpg gt lt br gt Brian De Palma 1983 lt s tooltip gt LEE are two of the most important gangster films of the post war era lt div 5 6
27. true gt Focusgroup 1 lt div b behavior focusobject b focusgroup false b focusitem true gt Focusitem Lo lt ebigs lt div b behavior focusobject b focusgroup false b focusitem true gt Focusitem 1 2 lt div gt lt div gt lt div b behavior focusobject b focusgroup true gt Focusgroup 2 lt div b behavior focusobject b focusgroup false b focusitem true gt Focusitem 2 cs Cli lt div b behavior focusobject b focusgroup false b focusitem true gt Focusitem De lt a clay lt div b behavior focusobject b focusgroup false b focusitem true gt Focusitem 2e Che lt div b behavior focusobject b focusgroup false b focusitem true gt Focusitem 2 4 lt div gt lt div gt lt div gt The following is a screenshot of the code example Figure 6 1 Focus Model Fitusitem 1 2 6 4 1 Focus Events The events and commands for the focus model allow you to respond to state changes in elements that are focusable e focus and blur The focus and blur events take place when a user navigates through focusitems 2004 2006 Backbase B V All Rights Reserved 96 Backbase Manual Version 3 1 4 in your focus model The focus event takes place on the focusitem that gets focus and a blur event takes place on the focusitem that no longer has focus is blurred e active and inactive An element can have one of the states active or inactive An element is active when it or a child node has focus and an e
28. you can manipulate the objects in the BXML Tree using the concept of tar geting Targeting allows you to point to and navigate through objects in the BXML Tree to perform dynamic actions such as copy move or remove and to load new data con tent Targeting is performed using XPath 4 The DOM Tree is the model understood and managed by the browser the BXML Tree the model understood and managed by the BPC the BXML Tree is a tree representation of your BXML source code The DOM Tree translated from the BXML Tree is the HTML representation of the BXML Tags Therefore when you manipulate the BXML Tree the DOM Tree is also automatically updated to reflect the changed structure Note For more information see W3C s DOM documentation resources 2004 2006 Backbase B V All Rights Reserved 37 Backbase Manual Version 3 1 4 http www w3c org DOM DOMTR 3 2 Targeting Targeting is one of the core concepts of the SPI model Targeting is used throughout a Backbase application to locate an object in the BXML Tree using XPath with the objective to dynamically modify the appearance and contents of the user interface For example targeting allows you to perform actions such as drag and drop move copy and to load new data into an existing page You can address nodes in the BXML tree with XPath using relative or absolute targeting e Relative targeting you can use XML navigation see XPath Axis p 1311 to address the hierar
29. 114 Backbase Manual Version 3 1 4 value of has optional attribute select that is by default set to when has mandatory attribute test Example 8 2 Defining Stylesheets e s apply templates has optional attribute select that is by default set to node e s attribute has mandatory attribute name and optional attribute select e s call template has mandatory attribute name e s choose e s copy of has mandatory attribute select e s element has mandatory attribute name e s for each has mandatory attribute select e s if e s otherwise e s template e S e n lt s stylesheet b name product gt lt s template b match gt lt div style height 500px border width lpx border style solid gt lt s apply templates b select products product gt lt div gt lt s template gt lt s template b match product gt lt div gt lt s attribute b name innerHTML b select name gt lt div gt lt s template gt lt s stylesheet gt The tags used in the Backbase templating mechanism are similar to those in the XSLT standard For more information about XSLT instructions used in the stylesheet consult an XSLT reference guide For example W3Schools http www w3schools com xsl default asp 8 1 3 Transform Command The transform command is used for rendering templating stylesheets It specifies what stylesheet to use to transform what piece of data and where in the document t
30. 2 3 Backbase Controls Overview Backbase controls ee multimedia aghart giam exo nav ation Informatic n UE barchart combobox spacer tree menubar infobox listview orgchart button window contextmenu taskbar loading treelist linechart slider modal navbox tabbox tooltip detailviewer dan mc box sidebar toolbar statusbar ae selectbox navpanel pager accordeon listgrid datepicker livegrid tilelist 2 1 3 Generic Attributes Generic attributes define functionality for programming GUI functionality tree manipula tion and the focus model You can also apply generic attributes to almost any BXML or XHTML The following illustration provides an overview of the generic attributes 2004 2006 Backbase B V All Rights Reserved 32 Figure 2 4 Backbase Generic Attributes Backbase Manual Version 3 1 4 ee a Generic Attributes GUI Tree programming functionality manipulation focus action state singular drag disabled behaviour minwidth maxwidth draggroup focusindicator eventblock minheight maxheight dragmode focusgroup followstate textselect tooltiptext dragreceive focusroot serversync resize cursor zsort focusitem Lans id resizeconstraint dragconstraint focustype observe resizemode dragconstraint autofocus There are als
31. All Rights Reserved 113 Backbase Manual Version 3 1 4 Chapter 8 Defining Data Bindings 8 1 Templating The BXML templating mechanism is used to transform a piece of XML from its original format into another XML format such as XHTML BXML and so on The transformation is performed using a stylesheet and the result moved to a specific target in the application The tags used in BXML templating are the same tags as those used in XSLT except the tags live in the s namespace Therefore if you are familiar with XSLT the BXML templat ing mechanism is intuitive The BXML templating mechanism has three key components a Data Source a Stylesheet and a transform command The data source is the data to be tranformed the stylesheet performs the transformation and the transform command is the trigger that starts the tranformation process 8 1 1 Data Source The piece of XML that gets transformed by the templating mechanism is called the data source The data source can be a separate XML file or it can be part of the main BXML body Using a separate XML file as the data source is the most simple scenario The XML must be well formed but it does not require to have the usual namespace declarations It must also not be a BXML file If you are using an application server the XML data source file can be dynamically generated When the data source is part of the main BXML document it requires a special tag to de limit it the s xm1 ta
32. Defining Chart Controls Use the chart controls to present information in a chart You can define chart controls us ing the BXML client controls b barchart b orgchart and b linechart 5 6 1 OrganizationChart The Organization Chart control is used for defining a hierarchical structure for example to define an organization The b orgchart tag describes the top of the hierarchy and contains b subordinate tags The b subordinate are nested to create the hierarchy The b label attribute is a logical String defining the box label 2004 2006 Backbase B V All Rights Reserved 71 Backbase Manual Version 3 1 4 Figure 5 23 Backbase Organization Chart Example 5 22 Creating an Organization Chart Control lt b orgchart b label Acme Organization gt lt b subordinate b label Human Resources gt lt b subordinate b label Development gt lt b subordinate b label Research gt lt b subordinate b label Testing gt lt b subordinate b label Mike gt lt b subordinate b label Sarah gt lt b subordinate gt lt b subordinate gt lt b subordinate gt lt b subordinate gt lt b subordinate b label Architecture gt lt b subordinate b label Technical Support gt lt b subordinate b label Technical Publications gt lt b subordinate b label Technical Writing gt lt b subordinate b label Publishing gt lt b subordinate b label Training gt lt b subordinate b label
33. Sorting Loading Foundation Layer BXML Tag Targeting tres Event Command Formalized Interpreter XPath XSLT System Execution Patterns Browser Compatibility Layer The layers are explained in the following sections starting from the bottom up The Browser Compatibility Layer is intrinsic to the BPC All you need to know about this layer is that it is present and although you don t interact with it directly it means you can Safely develop without worrying about potential browser compatibility problems as that is all taken care of for you For more information see section 10 5 Browser 2004 2006 Backbase B V All Rights Reserved 5 Backbase Manual Version 3 1 4 Compatibility The Foundation Layer is as its name suggests the foundation of the Backbase soft ware that implements the declarative programming model BXML tags are translated into native browser commands As you are working on documents represented by tree struc tures DOM and BXML Trees you need a way to address parts of that tree this is where XPath comes in XPath is of fundamental importance in the XML world and is used almost everywhere in Backbase It also provides an XSLT engine for transforming XML This lay er also includes a sophisticated Event System Events trigger the execution of Com mands Events and Commands can be defined using Formalized Patterns known as be haviors in Backbase that provide better structuring and reuse of your code Of course yo
34. The query has the scope of the current selected element which is the body tag if no element is selected Document Tree you can view a selected element in the BKML or HTML tab depending on whether the element is part of the BXML space or HTML space in the left hand side pane Element Details in the right hand side pane you can view the following detailed information on the element selected in the document tree the BXML or HTML tab e BXML Data tab shows the BXML code defined for the element e HTML tab shows the XHTML code defined for the element e DOM Node tab shows DOM information such as attributes and values e Computed Style tab shows the style properties that have been computed by the client browser layout manager to render the object These properties differ for each layout manager e Behaviors tab shows the behaviors used by the element 2004 2006 Backbase B V All Rights Reserved 19 Backbase Manual Version 3 1 4 e Variables tab shows the variables the element has at its disposal e Inthe bottom right hand pane the Backbase Developer Tool also has e Runtime Tracer tab that monitors and logs the execution of your runtime code and displays by default Critical Error Warning and Info messages You can add the debug true attribute on an element or behavior to log the actions that are executed on it and also create custom messages For more information see Creating Custom Messages p 27 Search Results tab i
35. a right mouse button double click action takes place the event sequence is as fol lows rmbdown rmbup rmbclick rmbdown rmbup rmbclick rmbdblclick NONE RIRE 6 2 3 Drag And Drop When a drag and drop action takes place the event sequence is as follows drag start if an element is received child lost drag drop drag receive PUE 6 2 4 Element Receives Focus When an element receives focus the event sequence is as follows the element that loses focus gets a blur event 1 blur 2 focus 6 3 Adding User Interaction Events Users interact with the interface using the mouse and keyboard Backbase has events that are triggered in reaction to a user s mouse action for example mouseover mouse down and click and you can intercept key presses from the keyboard and bind actions to them using the s key tag 6 3 1 Mouse Events The following example demonstrates mouse events When a mouse event takes place a behavior is used to temporarily activate the list item corresponding to the mouse action that occurs within the div element Example 6 8 Defining Mouse Events 2004 2006 Backbase B V All Rights Reserved 92 Backbase Manual Version 3 1 4 lt div style border 1px solid BBB width 250px height 100px gt lt s event b on click b action select b target ul li 1 gt lt s event b on dblclick b action select b target ul 1li 2 gt lt s event b on mouseenter b act
36. effects These tags define how the elements that use them should visually react to the events that trigger the effects Transitions are placed in event hand lers or tasklists extending a given element with additional behavioral properties Example 6 22 Defining Effects lt s behavior b name info trans example gt lt s event b on select gt lt s fxstyle b height 100 gt lt s event gt lt s event b on deselect gt lt s fxstyle b height 0px gt lt s event gt lt s behavior gt You can create transition effects as follows Color and CSS Transitions Move Motion b action fxtile 6 7 1 Color and CSS Transitions You can use any CSS style that can be expressed numerically such as background col or Or font size to create a transition effect CSS styles which cannot be expressed nu merically such aS font family Or background attachment cannot be used as an s fxstyle as it is not possible to calculate the space that intervenes two states The s setstyle tag and s fxstyle tags are similar except with the former the transition is immediate and with the latter the transition takes place in a number of steps over a period of time which can range from a few hundred milliseconds to several minutes even In the following example a transition effect is created for the background colors You ap 2004 2006 Backbase B V All Rights Reserved 105 Backbase Manual Version 3 1 4 ply the behavior
37. elements to which they are applied are active You can define keys inline or inside a behavior but they must al ways be contained in a s whenactive For example to define global keys you can define them in a s behavior that is used in the body element to be active throughout your application The following is a simple example of how to capture keys When the first textarea is act ive pressing the a or z keys toggles the element with the id keys Example 6 9 Defining Keys lt div style position absolute left 20px top 55px gt lt textarea style width 300px height 100px gt Press a or z keys to toggle a textarea when active lt textarea gt lt s whenactive gt lt s keys b keys a b action show b target id keys gt lt s keys b keys z b action hide b target id keys gt lt s whenactive gt lt div gt lt div id keys style position absolute left 20px top 105px gt lt textarea style width 300px height 100px gt Pressing a or z keys shows and hides this element lt textarea gt lt div gt For more information about keys see Changing the Default Navigation Keys p 98 and Changing the Tools Configuration p 26 The following tables lists some keyboard keys and their corresponding ASCII value Key Value Esc 27 2004 2006 Backbase B V All Rights Reserved 93 Backbase Manual Version 3 1 4
38. event gt lt s behavior gt lt div b behavior focusobject b focusroot true gt lt p gt This document demonstrates the backbase focus model It contains two LOCUSGEOUDS M nd 2 SN HOCUSCCOUD Mac Ont a lnSmrOcUSat ens im sean Cilio CuSO mOUpEZ CONES IMS focusitems 2 1 2 2 2 3 and 2 4 You can set focus with the lt b gt keyboard lt b gt or the lt b gt mouse lt b gt lt p gt lt p gt The tab and arrow keys are used for keyboard navigation lt p gt lt ul gt lt li gt Use the lt b gt Tab lt b gt poe lt b gt Tab Shift lt b gt key to navigate between groups the focusgroup remembers the focusitem that last had focus within a group eg lt li gt Use the up and down lt b gt arrow keys lt b gt change focus between items within a group jf Mats lt ul gt lt p gt The focus system is hierarchical Navigate through the groups and items and watch how the color indicates all focus containers upwards in the hierarchy When the page is constructed the color lt b gt Purple lt b gt is applied as the background When events are triggered the elements change color 2004 2006 Backbase B V All Rights Reserved 95 Backbase Manual Version 3 1 4 lt b gt Green lt b gt indictates actived elements lt b gt Red lt b gt indicates inactived elements and lt b gt White lt b gt indicates the item that has focus and is also active lt p gt lt div b behavior focusobject b focusgroup
39. forwards through the data set page by page You can implement paging for the Backbase data controls such as the b datagrid and b listgrid controls 2004 2006 Backbase B V All Rights Reserved 81 Backbase Manual Version 3 1 4 To implement paging for a control you need to e Define the following paging attributes for the control e b items in total 1000 limits the total number of records returned in the data set e b page size 20 defines the number of records displayed in every page e b page number 1 defines the initial page that is displayed when the page is constructed e b page cache 3 defines the number of pages retained in memory O or 1 are identical e b url load php defines the server side file that implements the business logic to handle the paging attributes e Define a b pager control and connect it to a data control The pager control takes care of telling the paged control which page to load the pager control then makes sure that it shows the correct page control buttons e b pager b observe id mytilelist connects the pager control to the control that requires paging e b pager item b page type first defines links to pages in the data set Possible values are first previous next last e b pager numbers b page links 5 defines how many pages are clickable Every child of the paged element has a page number to be able to identify which pages are already loaded They also have a b dirty at
40. gt Lorem Ipsum is simply dummy text of the printing and typesetting industry lt b sidebar gt lt b sidebar b img tools gif gt It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout lt b sidebar gt lt b sidebar b img brushes gif gt Contrary to popular belief Lorem Ipsum is not simply random text lt b sidebar gt lt b sidebarbox gt The images used in the above example are available in the Back base 3_1_4 controls backbase b sidebarbox directory or in the 3_1_4 basic direct ory 5 4 6 Tabbox A control that provides a tabbed interface each tab being defined within a b tab tag The b tabbox control supports lazy loading when you specify the tab contents using a b ur1 the contents are only loaded at the moment a user clicks the tab for the first time Figure 5 11 Backbase Tabbox 2001 Seven Samurai Life is Beautiful The Godfather A Italian language film which tells the story of an Italian Jew Guido Orefice who lives in a romantic fairy tale but must learn how to use that dreamy quality to survive a concentration camp with his young son Joshua In the following example four tabs are defined Example 5 12 Creating a Tabbox Control lt b tabbox style height 100 gt lt b tab b label 2001 b url data 2001_short xml gt lt b tab b label Seven Samurai b url data seven_short xml gt lt b tab b label Life is Beaut
41. in BXML tags and in Backbase controls for example to use flash animations in your application use the following syntax Example 5 40 Flash Control lt b flash b url tags swf b width 300 b height 300 gt 2004 2006 Backbase B V All Rights Reserved 86 Backbase Manual Version 3 1 4 Chapter 6 Applying User Interactions 6 1 Defining Events and Commands Events and commands add interactivity to your SPI Basically an event defines when something happens the command what actions take place An event can be a user event or system event e User Event most events take place when the user does something such as clicking a link e System Event some events are not directly caused by the user for example the construct event fires when a page has been constructed You can trigger events for any BXML or XHTML element You define what happens when an event is triggered in an event handler The event handler handles the event by ex ecuting a command or series of commands By executing commands you can for ex ample load elements remove elements change the visual display of elements change the location of elements and set attributes In BXML commands are declared with the b action attribute Each command has its own attributes that you need to place on the tag to execute the command For an overview of the commands you can use see Com mands p 33 The b on attribute specifies the event that is trig
42. lt b combo option gt lt b combo option b value 19 gt City Lights 1931 dir Charles Chaplin lt b combo option gt lt b combobox gt 2004 2006 Backbase B V All Rights Reserved 75 Backbase Manual Version 3 1 4 5 7 3 Datepicker The datepicker control allows users to select a date from a calendar The datepicker has the following attributes e b type inline displays the calender underneath the element float the default displays a clickable calender icon e b input the XPath expression to the input element that is used to display the selected date e b format the date format displayed in the input element for example dddd dd MMMM yyyy results in Wednesday 05 January 2005 For more information on date formats see the BXML Reference PDF e b value an initial value for the input element you must specify a date that conforms to the date format that is specfied in the b format attribute Figure 5 27 Backbase Datepicker Datepicker Control inline Datepicker Control float EA October 2005 gt gt gt Sun Mon Tue Wed Thu Fri Sat gt Q ne 37 no O aan 20 gi Z0 29 30 1 The following examples shows an inline and floating datepicker Example 5 27 Creating a Datepicker Control lt div style position absolute left 20px gt lt h2 gt Datepicker Control inline lt h2 gt lt input type text name input1l gt lt b datepicker b type inline b input
43. message is printed you can get a pop up alert on top of the page Please specify for which type of messages would you like to see an alert Toggle Logging when checked logging is enabled Turns logging on off If this is off the 1 0 Inspector and Runtime Tracer contain no data 6 Click the link to generate the custom message The message appears in the alertbar Figure 1 36 Backbase Alertbar Message 1 13 34 21 359 CUSTOM generating a custom message lt gt x 7 Choose Tools gt Developer Tool 8 Open the Runtime Tracer tab and select the Custom checkbox as follows 2004 2006 Backbase B V All Rights Reserved 27 Backbase Manual Version 3 1 4 Figure 1 37 Backbase Runtime Tracer Lal search a BXML ly HTML _ 7 BXML Data Data L DOM Node Computed Style Behaviors Variables body Runtime Tracer Search Results Execute BXML x 13 34 42 968 The focus command failed because the expression ancestor b window 1 evaluated to an empty node set 13 34 08 125 lt s task b action setpanelset b rows concat cookie tool ins height b target gt 13 34 08 125 lt s task b action set b target b resize b value n gt 13 34 05 546 Loading controls dynamic b button b button xml with method GET and payload 13 33 39 546 The focus command failed because the expression ancestor b window 1 evaluated to an em node set 13 33
44. namespace of your own for example s htmlstructure b name c deck 7 2 2 Applying Default Behaviors The s default tag is used to give tags a default representation For example the Back base control use the s default tag for setting default styles and behaviors for certain tags When using a skin tooltips modals infoboxes and other widgets do not need special classes or behaviors since the skin already takes care of the look amp feel and behavior of your web application s components The s default tag requires the following attributes e b tag defines the tag name including its namespace prefix for which the s default tag s attributes should apply to e b attribute a string with the name of an element s attribute accepts the values b behavior Or class e b value contains a string with the value to set The following example illustrates an infobox widget which follows a set behavior Example 7 5 Setting Defaults lt s default b tag b infobox b attribute b behavior b value b infobox gt In the example above your infobox widget would follow a specific behavior named p infobox Another example to illustrate a different application a modal box widget following a set style Example 7 6 lt s default b tag b modal b attribute class b value b modal gt 2004 2006 Backbase B V All Rights Reserved 111 Backbase Manual Version 3 1 4 In the example above you
45. navigate to a new message you can use the back button to go back to the previous message You can also bookmark each message you see the URL bar being updated while you browse Search and mailto do not have a back end atthe moment The archive is also not yet implemented In future versions we would like to fix this and add more feeds ultimately we d like to allow users to configure their own feeds or upload OPML files We dont have a specific release schedule this depends very much on the enthousiasm of the community R You can find this application online at http www backbase com demos RSS Layout Layer The layout of the RSS reader is a so called iquid layout meaning the screen resizes when you resize the browser window and all columns resize by the same percentage By using Backbase panels b panelset and b panel tags you can fix one or more columns at a certain width This is also possible with CSS but is complex and panels are simple to define and they work similar to HTML framesets Another interesting feature of the RSS Reader is that you can change the message pane into a message Window by clicking on the top left button The Window is another concept that is natively supported by Backbase You can also use operations from the Interaction Layer such as dragging and resizing but also closing minimizing and restoring The fol lowing screenshot shows the Window of the RSS Reader 2004 2006 Backbase B V All Rights Rese
46. next event is triggered creating an animation effect When you trigger the moveleft event handler exactly the same happens as in the moveright event handler for each row a separate thread is created to handle the event However because no lock is specified the execution of each event is asynchronous all the events are processed at the same time creating an effect that the rows are moved in one block when in fact they are all moved individually 3 Aborting can set the b cancel attribute value to false to prevent the user from being able to stop an s fxstyle effect When you set b cancel true the default the user can stop the effect The effect is stopped at its current location 2004 2006 Backbase B V All Rights Reserved 54 Backbase Manual Version 3 1 4 Chapter 5 Creating Application Layout 5 1 Defining Screen Partitioning Screen Partitioning determines the basic layout of the user interface You define basic screen partitioning using normal XHTML tags such as lt table gt lt div gt and lt span gt You can define advanced screen partitioning using the BXML tags b panel and b deck and using the Backbase layout client controls b window b spacer b modal b box and b tile 5 1 1 Panelsets and Panels Panelsets allows you to divide a screen up into rows or columns using a b row or a b cols attribute A panelset is a container for panels a row or column in a panelset is represented by a panel You define
47. nodes the first element in the node list is used e b mode specifies where the loaded content is placed relative to the destination By default the value is set to replacechildren The Windows Starter Kit located in the default installation directory Backbase 3_1_4 starterkits windows demonstrate the use of load command The starterkits windows windows html startup file has the following load commands defined within link tags When you click a link the file specified in the b url attribute is loaded into the page as the last child of the element with the id windowmanager Example 3 10 Load Command lt a b action load b url window 01 xml b test not id window news b destination id windowmanager b mode aslastchild gt News lt a gt spr gt 2004 2006 Backbase B V All Rights Reserved 44 Backbase Manual Version 3 1 4 lt a b action load b url window 02 xml b test not id window finance b destination id windowmanager b mode aslastchild gt Finance lt a gt lt br gt lt a b action load b url window 03 xml b test not id window weather b destination id windowmanager b mode aslastchild gt Weather lt a gt lt br J gt lt a b action load b url window 04 xml b test not id window movie b destination id windowmanager b mode aslastchild gt Movies lt a gt lt br J gt 3 4 3 Buffered Loading Buffered loading postpones the loading of a d
48. of the current node following following sibling Shorthand Selects all siblings after the context node If the context node is an attribute node or namespace node the axis is empty 1 returns the first sibling after the context node 10 2 2 XPath Operators An XPath expression returns either a node set a string a Boolean or a number XPath operators behave in much the same way as similar operators in other languages They are used to perform arithmetic value comparison general comparison node comparis on test Booleans and there are also operators that combine sets of nodes The following tables is a list of supported XPath operators Operator Description Example Return Value Union that computes book cd Returns a node set two node sets with all book and cd elements Addition 6 4 10 Subtraction 6 4 2 Multiplication 6 4 24 div Division 8 div 4 2 Equals price 9 80 true if price is 9 80 false if price is 9 90 l Not equal price 9 80 true if price is 9 90 2004 2006 Backbase B V All Rights Reserved 133 Backbase Manual Version 3 1 4 Operator Description Example Return Value false if price is 9 80 lt Less than price lt 9 80 true if price is 9 00 false if price is 9 80 lt Less than or equal to price lt 9 80 true if price
49. on To illustrate this let s have a look at drag and drop if a user drags an item what is actually happen ing is that they are dragging part of the BXML tree When the item is dropped in another location this XML fragment is inserted in the BXML Tree in the new location One of the first questions that you may have is how do I select or address part of the tree You do this by what is known as targeting using the XPath language XPath is standardized by the W3C and Backbase has implemented XPath version 2 0 For more information see the sections 3 2 Targeting and 3 3 Tree Manipulation XPath is not only used for targeting parts of the BXML and DOM trees but it can also perform a variety of functions such as string manipulation and calculations Backbase also introduces BPC specific extensions to XPath For more information see the Appendix or the BXML Reference PDF 1 3 Using the Examples in the Manual This manual describes the concepts of application development with Backbase and provides examples that you can cut and paste into a start up page to put the theory into practice and try out the code for yourself To start with you need to create a start up file A Backbase web application uses the Single Page Interface SPI model SPI is a data driven request response model each modification of the user interface requires a data request instead of a page request res 2004 2006 Backbase B V All Rights Reserved 13 B
50. reporters available Reporters Description Behaviors Creates an overview of all currently loaded behaviors remember that states and events are a part of behaviors Ids Creates an overview of all currently loaded ids TaskLists Creates an overview of all currently loaded tasklists A tasklist is a container for a sequence of commands that are executed when the tasklist is called Gfxsets Shows images used for a widget a graphic set can only be defined for the slider and the tree control Key Bindings Shows an overview of all the keys attached to commands 2004 2006 Backbase B V All Rights Reserved 25 Backbase Manual Version 3 1 4 1 5 5 Preferences Specify Backbase Tools Preferences Figure 1 34 Preferences Backbase Tool Preferences Alert Critical Error Warning _ Debug Custom When an message is printed you can get a pop up alert on top of the page Please specify for which type of messages would you like to see an alert Toggle Logging when checked logging is enabled Turns logging on off If this is off the 1 0 Inspector and Runtime Tracer contain no data 1 5 6 Excluding Backbase Tools The Backbase Tools are always loaded by default You can exclude the tools by adding the b devconfig false attribute to the HTML body tag as follows Example 1 3 Excluding Backbase Tools lt body onload bpc boot bpc 3_1_4 b devconfig f
51. the basic layout of the user interface You can define advanced screen partitioning using the BXML client controls b box b modal b spacer and b window 5 3 1 Box A box control is a simple component that can only contain inline elements You can give it a height or width if no size is specified its size is derived from its contents You can style the innercontent of the box using the b style attribute Figure 5 3 Backbase Box Example 5 3 Creating a Box Control lt b box style width 250px b style background color CCFFO00 gt Scarface developed a cult following among younger audiences lt b box gt 5 3 2 Modal The modal control is a pop up window When opened the user cannot interact with the rest of the document until the modal window is closed You can open the modal dialog by triggering using the trigger command the open event and close it by triggering the close event The Modal also has a default button in the top right hand corner for closing the window Figure 5 4 Backbase Modal AWhat is The Godfather about The Godfather 1972 X The Godfather is a film adaptation of the novel of the same name see The Godfather nowel written by Mario Puzo directed by Francis Ford Coppola and starring Marlon Brando and Al Pacino Example 5 4 Creating a Modal Control lt div gt lt p gt lt a b action trigger b event open b target id modal gt What is The Godfather about lt
52. the content in the panel In the following example a panelset is defined that contains three rows The first Company Heading and third Status information rows contain panels The second row is a nested panelset that defines three columns and each one of the columns Navigation section Content section and Context sensitive information section is defined using a panel Figure 5 1 Backbase Panelsets Content section Status mformation The rows and columns have either a fixed width or they can have a relative width given as a percentage of the currently available width of the panelset parent You can specify the following units of measurement for rows and columns in panelsets percentage units are relative to the parent element em and ex units are relative to the surrounding text px pixels units are relative to the screen resolution pt point and pc pica are print units in cm and mm inches centimeters and millimeters are length units Alternatively a panel can fill up the remaining available space using the wildcard asterisk sign You must specify all values before or after a wildcard asterisk using the same unit of measurement For example b cols 50px 100px is valid but NOT cols 50 100px M 2004 2006 Backbase B V All Rights Reserved 55 Backbase Manual Version 3 1 4 You can only define rows or columns but not both within a panelset instead define nested panelsets In the
53. to concatenate strings use the concat function 10 3 Browser Compatibility The Backbase Presentation Client BPC runs on all major browsers Internet Explorer Mozilla Firefox and Netscape For optimal user experience it is recommended to use higher versions of these browsers Backbase supports the following browser operating system combinations Web Browser Operating System Internet Explorer 5 Windows 98 Windows Me Windows NT Internet Explorer 5 5 Windows 98 Windows Me Windows NT Windows 2000 Internet Explorer 6 Windows 98 Windows Me Windows NT Windows 2000 Windows 2000 Windows XP 2004 2006 Backbase B V All Rights Reserved 137 Backbase Manual Version 3 1 4 Web Browser Operating System Mozilla 1 7 Windows 98 Windows Me Windows NT Windows 2000 Windows XP Linux Kernel 2 2 MacOS X 10 2 Mozilla Firefox 1 0 1 5 Windows 98 Windows Me Windows NT Windows 2000 Windows XP Linux Kernel 2 2 MacOS X 10 2 Netscape 7 2 Windows 98 Windows Me Windows NT Windows 2000 Windows XP Linux Kernel 2 2 MacOS X 10 2 Netscape 8 0 Windows 98 Windows Me Windows NT Windows 2000 Windows XP Camino 0 82 MacOS X 10 2 2004 2006 Backbase B V All Rights Reserved 138
54. vari able contains the focusitem in the HTML space that currently has focus is null when no element has focus and the bpc_focusLastElement variable contains the focus item that previously has focus is set when the blur event is fired The following example shows a table defined within the HTML space Note also the focus event is triggered when the focus item is selected Example 6 12 Focus Model in HTML Space lt s behavior b name focusvariables gt lt s event b on focus b action alert b value concat The current focus element is _focusCurrentElement the previous was _focusLastElement gt lt s behavior gt lt b xhtml b focusitem true b focusindicator true b focustype htmltable b behavior focusvariables gt lt table cellpadding 2 border 1 gt lt thead bgcolor 9acd32 gt lt tr gt lt td gt Heading 1 lt td gt lt td gt Heading 2 lt td gt lt td gt Heading 3 lt td gt lt td gt Heading 4 lt td gt EJ EES lt thead gt lt tbody gt AL lt td gt Al lt td gt lt td gt A2 lt td gt lt td gt A3 lt td gt 2004 2006 Backbase B V All Rights Reserved 97 Backbase Manual Version 3 1 4 lt td gt A4 lt td gt lt tr gt lt tr gt lt td gt Bl lt td gt ede Bec ade lt td gt B3 lt td gt lt td gt B4 lt td gt ice or lt td gt Cl lt td gt lt Ld C2 lt td gt LdC ie lt td gt C4 lt td gt lt tr gt lt tbody gt lt tabl
55. xmlns xsl http www w3 org 1999 XSL Transform xmlns b http www backbase com b gt lt xsl output method xml version 1 0 encoding UTF 8 indent yes gt lt xsl template match gt lt table style width 100 cellspacing 0 cellpadding 0 gt lt tbody gt lt xsl apply templates select gt lt xsl sort select spinner order ascending data type number gt lt xsl apply templates gt lt tbody gt lt table gt lt xsl template gt lt xsl template match gt AE lt xsl for each select gt lt xsl value of select gt lt xsl for each gt it lt xsl template gt lt xsl stylesheet gt The following is the table ie5 xslt stylesheet used in the example above for browser that is not fully XSLT 1 0 compliant to transform the data Example 8 9 table ie5 xsit lt xml version 1 0 encoding UTF 8 gt lt xsl stylesheet version 1 0 xmlns xsl http www w3 org TR WD xsl xmlns b http www backbase com b gt lt xsl template match gt lt table style width 100 cellspacing 0 cellpadding 0 gt lt tbody gt lt xsl apply templates select order by number spinner gt lt tbody gt lt table gt lt xsl template gt lt xsl template match gt lt ET gt 2004 2006 Backbase B V All Rights Reserved 118 Backbase Manual Version 3 1 4 lt xsl for each select gt lt xsl value of select gt lt xsl for each gt a Cee
56. you click the span element which contains the event handler s event the contents the s render tag are copied and placed after the ele ment with the id copyTarget Example 3 6 Copying Elements lt div gt 2004 2006 Backbase B V All Rights Reserved 42 Backbase Manual Version 3 1 4 lt span gt lt s event b on command gt lt s render b destination id copyTarget b mode aslastchild gt lt div gt lt b gt Backbase Powered Web Applications lt b gt lt div gt lt s render gt lt s event gt Click Here To Copy lt span gt lt div id copyTarget gt lt div gt lt div gt 5 render tags can only be direct child elements of s event s tasklist and s execute tags You can also use the copy command that copies an element b source attribute to a b destination Again the b mode attribute specifies where the data is inserted relative to the target destination 3 3 2 Moving Elements You can move elements and corresponding child nodes using the move movedown and moveup commands the latter two commands amount to XPath shorthand expressions The move commands require the following attributes e b destination targets the destination the receiving element of the copy using an XPath expression e b mode specifies where the data is inserted relative to the receiving element The attribute can have the values asfirstchild aslastchild before after replace replace
57. 0 lue 11 lue 12 lue 13 lt b linechart horizontal values gt lt b linechart series b name val val val zval val lt b linechart point lt b linechart point lt b linechart point lt b linechart point lt b linechart point lt b linechart series gt lt b linechart series b name val lt b linechart point lt b linechart point lt b linechart point lt b linechart point lt b linechart point lt b linechart series gt lt b linechart series b name val b val b val BE l lt b linechart point lt b linechart point lt b linechart point lt b linechart point lt b linechart point lt b linechart series gt lt b linechart gt BE b b b b BE b val BE BE BE 198 val va val vaL val Lue 15 lue 23 lue 25 lue 22 lue 26 lue 13 lue 14 lue 12 lue 13 lue 15 lue 15 ue 20 lue 27 ue 25 lue 25 June June June June is gt He gt gt gt i gt gt f fs gt v L gt ue 9 June 2005 gt 20054 gt 200 AOOS JE 20054 gt Visitors from Russia b color 990000 gt Visitors from Bulgaria b color 000099 gt Visitors from England b color 009900 gt 2004 2006 Backbase B V All Rights Reserved 74 Backbase Manual Version 3 1 4 5 7 Defining Form Controls Use the form controls to add usability to a form based user interface You can define form contro
58. 19 531 BPC version 3 1 1 DEV 20051205 1225 STANDALONE is running 13 33 18 562 Loading controls dynamic b window b window xml with method GET and payload 13 33 18 187 Loading controls dynamic default xml with method GET and payload 2004 2006 Backbase B V All Rights Reserved 28 Backbase Manual Version 3 1 4 Chapter 2 Understanding BXML and BPC 2 1 BXML Overview BXML stands for Backbase eXtensible Markup Language BXML is a declarative XML based language for developing Rich Internet Applications RIA The BXML vocabulary is an extension of XHTML that provides tags for declaring rich and highly interactive web sites You can freely mix BXML tags and attributes with HTML The BXML tags are defined in the following namespaces e xmins b http www backbase com bLifor visual tags and attributes b prefixed tags e xmins s http www backbase com sLfor systems tags s prefixed tags The information in this section is intended to provide you with an overview of the BXML language The sections in the rest of the manual goes into detail about the most import ant BXML tags To start with the BXML language is categorized as follows e System tags s tags for defining event handlers behaviors fxstyles your own controls and so on e Backbase controls b tags for out of the box user interface controls such as menus tabs trees sliders interface controls custom client controls e
59. Backbase Spinner qO i ca Spinner control Example 5 30 Creating a Spinner Control lt div gt Spinner control lt b spinner b start 5 b value 4 b step 1 b end 5 b style width 60px gt lt div gt 5 8 Defining Data Controls Use the data controls to manipulate data You can define data using the BXML client con trols b datagrid b detailviewer b listview b listgridand b treelist 5 8 1 Datagrid Displays cell based tabular data and supports selecting sorting paging and editing of the data and has resizable rows and columns The b datagrid has child elements b datagridhead and b datagridbody and b datatypes The b datagridhead defines the head and contains a b datagridrow in which the head er for each column is defined using a b datagridgridheadcell element The b datagridbody defines the body element The content of the lt b datagridbody gt is an HTML table that must be dynamically loaded into the body using the b ur1 attrib ute You can specify the following for the b uri attribute e An XML file that contains raw XML that is transformed using one of the XSLTs defined in the attributes b template or b template ies e An XML file that contains an HTML table body attributes and children e Any other file type such as PHP or ASP that contains and returns raw XML The XML is transformed using one of the XSLTs defined in the attributes b template or b template ies The b datagrid c
60. C XPath variables and user defined variables using the sign and the name of the variable You can use the assign command to assign a new value or node set to a variable You can test whether a Backbase variable has been declared using the Backbase custom XPath function declared returns true if the variable has been de clared otherwise false The s variable tag has the following attributes e b name specify a logical name for the variable e b select specify the element that is selected by reference using an XPath statement e b scope specify where the variable can be used e local the default a local variable is available within the scope of the element in which is triggered and is passed automatically along with any event calls within the event handler The variable is cleared from memory when the original execution thread ends e global a global variable is available throughout your application and exists for the lifespan of the application e tag a tag Variable is available within the scope of the element in which it is defined and exists for the lifespan of the application You can access the variable by targeting the element in which it is defined A variable is a reference a pointer to a node set assigning a new value to the variable therefore updates the node set referred to in the variable For example in the following code a global variable is set when the page is constructed that holds a reference to the
61. C creates a client side presentation frame work which includes facilities for state management event management asynchronous parallel processing client server synchronization and incremental data loading This framework utilizes the processing power of the local machine to directly execute the web application s interaction and presentation logic and allows for the instantiation of Single Page Interfaces SPIs Although the BPC is developed in JavaScript you do not have to know JavaScript to work with Backbase you can simply add BXML tags to your X HTML pages 2 3 Booting and Initialization The startup file is the starting point of your web application and is located in the root of your container s web application folder The startup file must contain the syntax to load the BPC and the external resources that contain the content and define the style of your web application The following is an example of a simple SPI startup file Example 2 2 Startup File lt xml version 1 0 encoding UTF 8 gt lt DOCTYPE html PUBLIC W3C DTD XHTML 1 0 Strict EN http www w3 org TR xhtml1 DTID xhtmll strict dtd gt lt html xmlns http www w3 org 1999 xhtml xmlns b http www backbase com b xmlns s http www backbase com s gt lt head gt lt title gt Backbase startup page lt title gt lt script type text javascript src opc boot js gt lt script gt lt head gt lt body onload bpc boot b c
62. Generic attributes b tags define functionality for programming GUI functionality tree manipulation and focus model that you can apply to all XHTML and BXML elements e Events and commands b tags for defining the events that are triggered on elements and commands that define the actions that take place when the event is triggered The following code is a very simple example to demonstrate the key facets of BXML In the example the user interface consists of a b box control with an XHTML link element defined within it The box control is a simple layout control that provides default styling and layout for its contents any BXML or XHTML The first three lines of code define an event handler for the command event Example 2 1 Simple BXML Example lt b box gt lt a gt Click here to see if your Backbase installation is working lt s event b on command gt lt s task b action alert b value You have a working Backbase installation gt lt s event gt lt a gt lt b box gt When the b on command event is triggered on the link element that is when the user clicks on the link the event handler is triggered an alert dialog box appears with the specified value 2004 2006 Backbase B V All Rights Reserved 29 Backbase Manual Version 3 1 4 Figure 2 1 Basic BXML Example Click here to see if your Backbase installation is workin JavaScript Application If no event is defined on an ele
63. HTML space back to the BXML space To illustrate the differences between the trees in the HTML and BXML spaces take the following example it results in a BXML Tree with three node sets and an HTML Tree with five nodes sets To be able to target the span element in the HTML space the link ele ment event handler uses the htm1 function the event handler puts the node content into an alert dialog box Example 3 3 HTML Space Example lt a b action alert b value following b xhtml html div span gt Click me lt a gt lt b xhtml gt lt div gt lt span gt HTML Space lt span gt is ie IN CON lt o xhtml gt In the following example clicking the button triggers an event handler that targets ele ments in the BXML and HTML Spaces to show and hide these elements Example 3 4 Show Hide HTML Space Example lt div style background color FE987E width 400px height 100px gt These elements are in the BXML space lt b button gt Click here to Show Hide elements in the BXML and HTML Space lt s event b on command gt lt s task b action show hide b target id html_space html div span gt lt s task b action show hide b target id bxml_space div 1 gt lt s event gt lt b button gt lt div id bxml_space gt lt div gt Clicking the button toggles the display style property of this element in the BXML Space lt div gt che oi lt b xhtml id html space gt lt div style background co
64. In Mars like 23 29 twofifty o th Ajax 10 06 22 51 t th Ajax 10 05 Wednesday 5 October mes a 18 01 SP 10 05 1 33 y men XPS evie ace 536 A 47 16 SP 10 05 j 8 28 10 04 59 O ne 417 5 23 59 O a 8 19 10 03 22 44 dat i 3 05 Single play D 7 56 g 10 02 Myl d Wednesday 5 October Tuesday 4 October 10 01 22 40 FTC to hak alleged M 4RN internet Parttinnina Canent we Lewat 4 48 20 WWW SQL Desianer Si 9 58 Wil Clark M 8 69 BB A About the Backbase AJAX RSS reader This RSS reader is a prototype application that shows the potential of a more interactive online RSS reader You can download the source code ofthis application and install it on your own server Itis not yet feature complete so we welcome your feedback let us know if this is this a useful application what should be changed or added and so on Write to webteam backbase com or discuss on the forum For the moment weve selected 4 RSS feeds every minute we download new messages to our database The new messages are then immediately shown in the RSS reader highlighted with a yellow fade The Wikipedia feed is most likely to have new messages within a couple of minutes The publication time of the messages is automatically adapted to your local time zone unless you have switched off cookies then it defaults to CET Messages are shown in the pane on the bottom You can also choose to open the messages in a new window and close the window again with the Esc key If you
65. Instructor Lead gt lt b subordinate b label Online gt lt b subordinate gt lt b subordinate gt lt b orgchart gt 5 6 2 Barchart The barchart control consists of a series of labeled vertical bars that show different values for each bar it is used to display graphically these differences 2004 2006 Backbase B V All Rights Reserved 72 Backbase Manual Version 3 1 4 Figure 5 24 Backbase Bar Chart backbase com visitors from Russia Bulgaria and England from 9th of June 2005 till 13th of June 2005 Number of Visitors 14 00 12 60 11 20 9 80 4 20 2 80 1 40 3 June 2005 The following is an example of a barchart control Example 5 23 Creating a Backbase Bar Chart Wi Visitors from Russia Date 10 June 2005 11 June 2005 12 lune 2005 13 June 2005 lt b barchart b caption backbase com visitors from Russia from 9th of June 2005 till 13th of June 2005 b x axis label Date b y axis label Number of Visitors b name name b width 600 b height 400 gt lt b barchart horizontal values gt lt b barc lt b barc lt b barc lt b barc dosiere hart value hart value hart value hart value hart value 193 BE BE 198 BE value 9 June 2005 gt value 10 June 2005 gt value 11 June 2005 gt value 12 June 2005 gt value 13 June 2005 gt lt b barchart horizontal values gt lt b barchart series b name Visitors from Russia dosisere
66. L form is submitted and NOT a Backbase form Backbase also has a b button control that you can use to submit the form that has de fault styling applied standardizing the button s appearance across browsers The b button requires that you use slightly different attributes to the standard input or but ton type e b action submit the action that triggers the submittal process e b target requires an XPath expression to identify the form that is submitted usually the parent form The following is an example of Backbase form submission Example 3 13 Backbase Form Submission lt form id main b destination b mode replace action response php method post gt lt table gt Ee 2004 2006 Backbase B V All Rights Reserved 46 Backbase Manual Version 3 1 4 lt td gt Name lt td gt lt td gt lt input name name type text size 40 gt lt td gt ie re lt td gt Data lt td gt lt td gt lt textarea name data gt lt td gt ire lt table gt lt b button b action submit b target id main gt Send lt b button gt lt form gt Where e b destination defines that the response is inserted in the current context node the form e b mode replace indicates the response replaces the form element in the BXML tree e b button b action submit b target id main submits the element by targetting the element whose id iS main the form You can also target the form usin
67. L nodes Targeting elements and performing actions on them then becomes relatively simple 2004 2006 Backbase B V All Rights Reserved 41 Backbase Manual Version 3 1 4 Figure 3 5 Tree Manipulation Tree Manipulation d Fi Node Node 1 Nec Node sf 3 b destination ul At runtime the BPC performs BXML tree manipulation on the client side without page reloading You can perform tree manipulation as follows e Copying Elements use the b action copy command for copying nodes or s render for copying moving transforming and adding nodes e Moving Elements use the b action move command for moving nodes or the movedown and moveup commands e Removing Elements use the b action remove command for removing nodes 3 3 1 Copying Elements The s render tag allows you to copy elements An element which is copied from one loc ation in the document to another persists in the original location which makes it possible to create several copies of the same element The s render tag requires the following at tributes e b destination targets the destination the receiving element of the copy using an XPath expression e b mode specifies where the data is inserted relative to the receiving element The attribute can have the values asfirstchild aslastchild before replace replacechildren the default if b mode is not specified In the following example each time
68. L s and b tags must be parsed and rendered by the BPC Outside the xmp tags you can use standard HTML and browser markup For more information see BXML Space p 39 2004 2006 Backbase B V All Rights Reserved 36 Backbase Manual Version 3 1 4 Chapter 3 Introducing the BXML Tree 3 1 Managing the BXML Tree and DOM Tree Understanding the BXML Tree and DOM Tree is fundamental to understanding how you can create dynamic rich internet applications RIA The objective of the BXML Tree and the DOM Tree is the same by defining a logical structure of documents and the way a document is accessed and manipulated it allows you to dynamically access and update the content structure and style of documents e The Document Object Model DOM is an application programming interface API for valid HTML and well formed XML documents In the DOM documents have a logical structure which is very much like that of a tree hence the term DOM Tree e The BXML Tree is the object representation of BXML defined within xmp tags At runtime the Backbase Presentation Client BPC first parses the BXML and creates the BXML Tree It then translates the BXML Tree into a standard DOM Tree that is rendered by the browser Figure 3 1 Tree Manipulation BXML page Web Browser lt BMXL tags gt lt XHTML tags gt lt tag gt BPC JavaScript Library lt tag gt lt tag gt lt tag gt lt tag gt B Tree DOM Tree fd Goo In Backbase
69. ML HTML HTML Data Computed Style html A lt table cellspacing 0 cellpadding border 0 class b box gt html a lt tbody gt head lt tr gt text lt td c body lt td text se comment lt tr gt piyan lt tr gt text eid div ta text eis gt re gt tbody c see if M text text E z gt style 5 div Runtime Tracer Search Results Execute BXML div lt b box gt div div div input div v 12 Click the Execute BXML tab The Code snippet pane provides skeleton code that you can double click to add into the Execute BXML tab For example add the following code and click Execute BXML to run the code the code is run on the selected node e lt s setatt b style background lt s task b action alert red gt b value Hi gt BXML is executed on an element selected in the BXML tree 13 View actions executed in the Runtime Tracer e Inthe BXML tab select the link element a Open the BXML Tab In the Execute BXML tab enter lt s setatt b debug true gt and click Execute BXML In the BXML Tab note the attribute has been set Figure 1 29 Execute BXML Y Backbase Developer Tool 3 search b box Search BXML HTML z body div div div div div b backbase s behavior text z b box text HE text 1166666 BXML Data DOM Node A Runtime Tracer Computed Style Behaviors
70. ML Reference About BRC About Backbase 1 4 1 Starter Kits 2004 2006 Backbase B V All Rights Reserved 14 Backbase Manual Version 3 1 4 The Backbase starter kits that are sample applications designed to help get you started developing more complex web applications You can use the source code provided by the starter kits as a basis for developing a Backbase Web application The starter kits are sample applications that demonstrate widely used types of Web applications The starter kits are located folder in your Backbase 3_1_4 starterkits directory and documentation for them is provided in the Backbase 3_1_4 docs directory Figure 1 14 Forms Starter Kit H Backbase Forms Et Billing Address Personal Details Shipping Address r First Name Shipping Method Last Name Payment Email Name Review and Confirm Billing amp ddress Country Address Line 1 Address Line 2 aptional City FE State Frovince Region Postal Code Phone Back Next 2004 2006 Backbase B V All Rights Reserved 15 Backbase Manual Version 3 1 4 Figure 1 15 Windows Starter Kit Finance R Weath er ee Movies Figure 1 16 Portal Starter Kit Stock EXCHANGE WELCOME Click the column header to sort the table Symbol tast vol sps00 44 40 32 r NSDAQ 534 16 16 4 TALV 644 3 8 gt Ko 63 4 23 a INTC 23 18 44 DJLA 78 740 13 VY MSFT 353 36 46 Welcome Sharif ooou
71. Plot Outline gt A father son underwater adventure featuring Nemo a boy clownfish stolen from his coral reef home His timid father must then search the ocean to find him lt b property gt lt b detailviewer gt The content of b property can be any HTML markup You can set the width of the con tents column right hand side column using the b style attribute The left hand column sizes to its contents b label attributes To overrule this behavior you need to change the CSS classes 5 8 3 Listview 2004 2006 Backbase B V All Rights Reserved 79 Backbase Manual Version 3 1 4 The listview control presents a sortable table that you can scroll through The control is different from other controls in that it is implemented as a behavior you add the b behavior b listview attribute to an HTML lt table gt element to make the table fully sortable click a column head to sort the table according to that column Figure 5 32 Backbase Listview Apocalypse Now Francis Ford Coppola Enchh The Thin Red Line N Terrence Malick English City of God am Fernando Meirelles Portuguese The Seven Samurai ami Akira Kurosawa Japanese Donnie Darko am Richard Kelly English Carlito s Way Cn Brian De Palma English Scarface rime Brian De Palma English The Godfather ime Francis Ford Coppola English 5 8 4 Listgrid Displays row based tabular data and supports selecting paging and editing of the data and has resizable row
72. abel Something gt lt b contextmenu gt lt b contextmenurow gt lt b contextmenurow b label Something b shortcut ctrl z gt lt b contextmenu gt lt b contextmenurow gt lt b contextmenurow b label Exit b shortcut alt F4 gt lt b contextmenu gt lt div gt lt div b dragreceive true gt lt div gt For more information about implementing keys see Capturing Keys p 93 5 4 2 Menubar The Menubar control displays a menubar as seen in many applications It is usually presented at the top of the web application but you can position it anywhere Figure 5 7 Backbase Menubar cie 4 Open Save EE Ml Save as The following example describes the syntax to construct a menubar Example 5 8 Creating a Menubar Control lt s include b url controls backbase b menubar b menubar xml gt lt div style width 100 height 100 position relative gt lt div style border color b8ced7 border width lpx lpx 0 lpx border style solid height 23px overflow hidden gt lt b menubar gt lt b menurow b label File gt lt b menupopup gt lt b menupane gt lt b menurow gt lt b menucell gt Open lt b menucell gt lt b menurow gt lt b menurow gt lt b menucell gt Save lt b menucell gt lt b menurow gt lt b menurow gt lt b menucell gt Export lt b menucell gt 2004 2006 Backbase B V All Rights Reserved 61 Backbase Manual Version 3 1 4 lt
73. ackbase Manual Version 3 1 4 ulting in smaller updates and rendering those updates in the existing page each user in teraction results in a partial update To develop your first Backbase application and use the examples in the user manual 1 Create your start up file for example index html to serve as your SPI You can use the C Backbase 3_1_4 skeletons basic start up html code as a basis If you copy the file in the same directory you can use it directly Otherwise you need to change the src attribute in the script tag and the onload attribute in the body tag to specify the location of the BPC relative to the file lt xml version 1 0 E PUTETO lt DOCTYPE html PUBLIC W3C DTD XHTML 1 0 CN une www w3 org TR xhtml1 DTD xhtml1 eee toctd lt html xmlns http www w3 ee ee xmlns b toc www backbase com b xmlns s http www backbase com s lt head gt lt title gt Backbase startup page lt title gt lt script type text javascript src bpc boot js gt lt script gt lt head gt body onload boc o00r We Jun lt xmp b backbase true gt lt div b action alert b value You have a working Backbase installation gt Click here to see if your Backbase installation is working lt div gt lt body gt lt html gt 2 Cut and paste the examples between the xmp tags in your start up file The code between the xmp is parsed and rendered by the BPC engine It marks what is known as the BXML S
74. acters such as you must escape using a dif ferent syntax For example using the syntax alert i leads to parsing errors in stead use alert i i 1 Or alert i 1 Example 9 23 Escaping JavaScript Containing Sensitive Characters lt span gt lt s event b on command gt SHS CEPE lt yar 1 3 alert ie alert isi pe gt ASe Scrip lt s event gt Click to see alert with variable value lt span gt There are 5 predefined entity references in XML amp lt represents lt less than amp gt represents gt greater than amp amp represents s ampersand amp apos represents apostrophe amp quot represents quotation mark 2004 2006 Backbase B V All Rights Reserved 130 Backbase Manual Version 3 1 4 Chapter 10 Appendix 10 1 Performance Tuning This section contains general recommendations to improve performance e To reduce latency include one large file instead of several small files using s include For example bundle the controls you use and remove the controls you do not use and put them in a single file that is included e Internet Explorer can suffer extreme performance hits during the rendering of HTML related when you set the style width and height to 100 This may also occur with elements that have width and height specified in pixels To ease this problem add the rule div overflow hidden to your stylesheet All div elements in the DOM tree appear to be affec
75. ag variable from JavaScript lt s event b on command gt lt sgecrijoe gt lt alert _vars myTag 0 gt IS Script lt s event gt lt a gt Unlike when you want to access a variable in XPath you DO NOT need to put a dollar sign before the variable name In the following example a global variable is created when the page is constructed Clicking the link executes the bpc setVariable JavaScript function that assigns a new value to the variable Example 9 18 Setting Variables in JavaScript lt div id my div b myatt Hello world gt lt s event b on construct gt lt s variable b name myTag b scope global b select string b myatt gt lt s event gt lt dine lt div id my div2 b action alert b value SmyTag gt Click to view SmyTag variable lt div gt lt a gt Click here to modify myTag variable from JavaScript lt s event b on command gt Sis erie gt lt bpc setVariable myTag document getElementById my div2 global gt lt S SCript gt lt s event gt lt a gt 9 4 Using JavaScript 2004 2006 Backbase B V All Rights Reserved 128 Backbase Manual Version 3 1 4 You can add your own scripts using the following BXML elements e js command e s script tag Backbase also provides API functions that allow you to push new XML into the BPC space with JavaScript You can call JavaScript code from XHTML elements using BPC commands
76. alse gt sa body You also need to set the b devconfig attribute if you have defined a custom develop ment configuration file tool_devconfig xml 1 5 7 Configuring Backbase Tools The tool_devconfig xml file is the configuration file of the Backbase Tools You can modify the file to change predefined keyboard shortcuts if your web application already uses keys that conflict with these shortcuts and to localize the messages that appear in the Runtime Tracer 1 Open the tool_devconfig xmi in the tools directory of your Backbase installation in a text editor 2 Edit the following section of the file to change the keyboard shortcuts lt s behavior b name TOOL_KEYBOARD gt lt s whenactive gt lt s keys b keys 27 ie es ee ane b target menu gt LORS lon RE alt AO b action Ecol toggle logreuigisie iimsjiccrce gt lt s keys b keys alt 50 b action tool toggle b target io_inspector gt lt s keys b keys alt 51 b action tool toggle b target q_inspector gt lt s keys b keys alt 52 b action tool toggle b target reporter b report default gt f lt s keys b keys alt 53 P ace ae o T b target settings gt lt s keys b keys alt 54 b action tool help gt lt s keys b keys shift r b action tool detail refresh gt lt s whenactive gt lt s behavior gt The value of the b keys attribute can be the key character case is ignored or the decimal ASCII value of the key For e
77. an also have b datatypes child elements that defines a form element that is applied in the cell of a table Basically you can define any HTML or BXML form ele ment that fits within a cell such as a select box text input type b spinner or b datepicker Figure 5 30 Backbase Datagrid Rate Film Text Position in your top Letters Director 1 The Godfather Francis Ford 2 Seven Sumarai Alex 5 a Akira Kurosawa 2001 A Space Alex 5 a Stanley Kubrick lt In the following example the b ur1 specifies an XML file containing raw XML and uses the XSLTs in the b template and b template ie5 to transform the data 4 The files in the controls backbase b datagrid directory also show examples of the datagrid control including defining contextmenus for row operations insert copy delete hide and edit and XSLT and XML datasource examples Example 5 31 Creating a Datagrid lt b datagrid style width 800px height 350px b url datagrid film xml 2004 2006 Backbase B V All Rights Reserved 78 Backbase Manual Version 3 1 4 b template xsl b datagrid xsl b ie5 template xsl1l b datagrid ies5 xsl gt lt b datagridhead gt lt b datagridrow gt lt b datagridheadcell gt lt b datagridheadcell gt Title lt b datagridheadcell gt lt b datagridheadcell gt Director lt b datagridheadcell gt lt b datagridheadcell gt Genre lt b datagridheadcell gt lt b datagridheadcell gt Language lt
78. and you can also interact with the BPC runtime environment from within JavaScript For information on the Backbase JavaScript functions see the BXML Reference PDF 9 4 1 Using the js command You can add your own scripts for example to do complex calculations or checks and call JavaScript functions from any part of the interface using the js command The content of the b value attribute is evaluated when executing the js command For example Example 9 19 js command lt span b action js b value alert Hello world gt Click here lt span gt You can also use standard events to call JavaScript functions for example Example 9 20 Standard JavaScript lt span onclick alert Hello world gt Click here lt span gt JavaScript code running in the BXML space is run asynchronously If you want to syn chronize actions executed from BXML with actions executed from JavaScript you can use the locking mechanism s lock If you lock the application on the root node in BXML lt s lock b target gt any actions defined within the lock and wait until the JavaS cript actions complete 9 4 2 Using the s script element The s script tag allows you to place inline JavaScript within BXML The functions you define within the script are avaiilable within the context of the element in which the script is defined The advantage of inline JavaScript is that you have all that local global and tag variables at your dis
79. anges of yet another deck and select or deselect themselves when they are selected or deselected using the b followstate rela tionship This allows you to declare complex relations between different user interface controls b followstate p 103 2004 2006 Backbase B V All Rights Reserved 56 Backbase Manual Version 3 1 4 5 2 Backbase Controls Overview Backbase Controls are the Backbase out of the box reusable user interface controls that encapsulate common patterns and behaviors The following illustration provides an over view and categorization of the controls which are described in the following sections Figure 5 2 Backbase Controls Overview ee __ Backbase controls muitimeda Sharh LE cesk rater Information de barchart combobox spacer tree menubar infobox listview orgchart button window contextmenu taskbar loading treelist linechart slider m modal navbox i tabbox tooltip es flash spinner box sidebar toolbar statusbar datagrid selectbox navpanel pager accordeon listgrid datepicker livegrid tilelist You need to set the b controlpath attribute in the body tag to specify the controls you want to use For more information see Setting the Control Path p 84 5 3 Defining Layout Controls 2004 2006 Backbase B V All Rights Reserved 57 Backbase Manual Version 3 1 4 Use the layout controls to determine
80. anual Version 3 1 4 XPath Syntax Explanation selected and attribute b behavior is not Tist Start from the unique ID element and return all div child elements where the attribute b state is set to selected and the attribute b behavior is not set to List id mainlayer div b behavior buttbmlique id children children that are or b behavior toolbutton div elements where attribute b behavior S button Or toolbutton Starts from the unique ID element and return all div child elements where the attribute b behavior is set to button or toolbutton id mainlayer b behavior unique id return the value of attribute b behavior Start from the unique ID element and return the value of the attribute b behavior on the element with the unique ID Use curly brackets in the values of BXML attributes to indicate that it contains an XPath expression that requires resolving the BPC then evaluates the contents as XPath and returns the value as a String For example lt a id Hello b action alert b value id gt Click me lt a gt evaluates the id attribute of the context node the current element and returns its value in an alert dialog box Backbase is similar to XSLT in using single curly brackets xxx to indicate that the at tribute value contains an XPath expression that requires resolving It differs from XSLT however in that the value must start with the opening curly bracket If you want
81. apply lt button b action addclass b value heading b target h1i gt 5 11 Using Backbase Styled Controls Backbase provides out of the box user interface controls that encapsulate common pat terns and behaviors The Backbase controls are available with different skins styling Skins are interchangeable sets of style definitions that allow you to change the web ap plication s look amp feel without impacting settings or functionality Backbase controls are located in your Backbase installation 3_1_4 contro1s directory and are available in the following skins e Backbase applies a metallic styling to the controls The Backbase skin is non modifiable e Basic applies a simple styling to the controls The basic skin is modifiable e System applies the styling of your operating system to the controls The following illustration shows the same b moaa1 control using the different the skins of course the system skin differs depending on your operating system styling 2004 2006 Backbase B V All Rights Reserved 83 Backbase Manual Version 3 1 4 Figure 5 35 Basic Backbase and System Skins Backbase Skin E3 The Godfather 1972 The Godfather is a film adaptation of the nowel of the same name see The Godfather novel written by Mario Puzo directed by Francis Ford Coppola and starring Marlon Brando and Al Pacino Basic Skin The Godfather 1972 The Godfather is a film adaptation of the no
82. arget id name_header gt Name lt td gt lt td b action sort gt Email lt td gt lt td b action sort gt Age lt td gt EJ ERS lt thead gt lt tbody gt lt tr b action select deselect b target gt lt td gt Michelle Werner lt td gt lt td gt michelle werner atwr com lt td gt lt td b sortvalue 32 gt thirty two lt td gt ic lt tr b action select deselect b target gt lt td gt Staci Hamamoto lt td gt lt td gt staci stardust universe net lt td gt lt td b sortvalue 26 gt twenty six lt td gt EJERS lt tbody gt lt table gt o f lt button b action sort b target id name_header gt Sort by name lt button gt 8 3 2 Sorting on an Alternative Value Normally sorting takes place based on the text value of the contents of the td elements Alternative sorting values can be specified using the b sortvalue attribute This can be useful in cases where a unit for instance currency is prefixed to the textual value of a table cell Example 8 12 Sorting on Alternative Values lt table gt lt thead gt ae lt th b action sort gt Item lt th gt lt th b action sort gt Price lt th gt EJES lt thead gt lt tbody gt AL lt td gt Stamps 25pcs lt td gt lt td b sortvalue 15 00 gt 15 lt td gt Sees ere lt td gt Pen lt td gt lt td bisortvalue 1 5 gt e 1 75 lt td gt Les lt tr gt lt td gt CD Recordables 50pcs lt td gt lt td b sortvalue 20 00
83. astchild gt lt b modal id response modal gt lt b modalhead gt Form response lt b modalhead gt lt b modalbody gt lt div gt We have received your form Thank you for your order lt div gt lt br J gt lt div gt Currently when you close this modal window the form stays visible In a real world application you would use a command to overwrite the form when the form was succesfully submitted lt div gt lt br gt spr J lt br gt lt center gt lt b button b action trigger b event close b target ancestor b modal 1 gt Close lt b button gt lt center gt lt b modalbody gt lt b modal gt lt s render gt lt s task b action select b target id response modal gt lt s execute gt The s execute tag contains only execution tags and executes its children immediately after being parsed When you define s execute as the root of a response file loaded by a form submission or a load command the data is NOT inserted at the specified destination but is executed immediately You must therefore use the s render tag to specify where the data needs to be placed using the b destination and b mode attributes 3 5 4 Using the Submit Command When a form is submitted a submit event is triggered on the form This allows you to in tercept the form submission and perform for example field validation before submitting the form To perform field validation or other pre submittal actions you need to
84. ata resource until the state of an element is selected Buffered loading is useful because you can defer loading therefore reducing the initial loading time You can use buffered loading for the deck widget using the b buffer tag For example Example 3 11 Buffferd Loading lt b deck id buffer_spideck class b deck gt lt b buffer b url data seven xml gt lt b buffer b url data 2001 xml gt lt b buffer b url data bella xml gt lt b deck gt lt b button b action previous b target id buffer_spideck gt Previous lt b button gt lt b button b action next b target id buffer_spideck gt Next lt b button gt When a deck contains buffers it loads the contents of the URL denoted by the b ur1 at tribute when it is selected for the first time and the contents of the file are cached in memory For more information on the deck widget see Decks p 56 4 Buffered loading cannot load files that have the s execute tag as the document root 3 4 4 HTML Entities If you set the b htmlentities true attribute on the body tag any doctype reference in a received XML document is resolved If there is no doctype declared in the received XML file a standard doctype is added that references a local file the entities xml file in the root of your Backbase installation directory This setting has a small performance penalty it results in an extra request going to the server therefore you should only use it w
85. ation is needed again The following code provides an example of how to implement lazy loading Example 5 34 Lazy Loading lt s event b on open select gt lt s if b test b dirty true or not b dirty and not node gt lt s task b action trigger b event populate gt JS ie lt Write your control specific open code here gt lt s event gt lt s event b on populate gt lt In the BNS and BJS editions you extend this event gt lt s task b test b url b action load b url b url gt lt sssetere aschirtey Velse gt lt s event gt 2004 2006 Backbase B V All Rights Reserved 82 Backbase Manual Version 3 1 4 5 10 Adding Look And Feel CSS You can define the look and feel of the Rich User Interface using e CSS CSS skinning can be applied to both XHMTL and BXML For more informa tion see W3C standard nttp www w3 org Style CSS e s setstyle is used to dynamically assign styles to UI elements in response to events For example lt s setstyle b background color green b width 200px b opacity 2 b height 20px b top 0px gt e Behavior states you can use behaviors to define the visual representation of an element when in one of its base states selected or deselected For more in formation see Responding to State Changes CSS p 109 e Add and remove class use the addclass command to add a CSS class to an ele ment normal CSS priorities
86. attributes and the lt s innercontent gt which acts as a placeholder for the contents of the custom tag that invokes this structure 2004 2006 Backbase B V All Rights Reserved 110 Backbase Manual Version 3 1 4 4 The lt s innercontent gt must always have an XHTML element as its parent The s htmlstructure tag must have a b name attribute The value of the b name attrib ute becomes the custom tag name that is used to invoke the user defined control The following example shows the HTML structure for a button Example 7 3 User Defined Controls lt s htmlstructure b name c button gt lt div style position relative gt lt div class c button 1 gt lt div gt lt div class lt button m gt lt s innercontent gt lt div gt lt div class c button r gt lt div gt lt div gt lt s htmlstructure gt To use the control using the following syntax Example 7 4 Using a Control lt c button gt The content of the button lt c button gt lt p gt At runtime the content of the lt code gt amp lt c button amp gt lt code gt tag is placed in the lt code gt amp lt s innercontent amp gt lt code gt tag of the user defined control lt p gt 4 The BXML namespace is reserved and may not be used for custom tags When you create controls create them in a namespace other than b or s For example s htmlstructure b name b deck is not allowed but you can introduce a
87. b debug true gt Click here to see i Search Results Execute BX lt s setatt b debug true f gt ebug true on gt text text Execute XML Open the Runtime Tracer In the browser click the link Note the action that has been executed and logged in the Runtime Tracer 2004 2006 Backbase B V All Rights Reserved 23 Backbase Manual Version 3 1 4 Figure 1 30 Runtime Tracer W Backbase Developer Tool x k Lal Search b box Search T BXML HTML BXML Data DOM Node Computed Style Behaviors Variables z body lt a b behavior alert b debug true gt Click here to see if your Backbase install div div div div div a if gt z b backbase s behavior R 2 z text Runtime Tracer Search Results Execute BXML b box View V NGFteal Info O Debug IG Laica 11 49 01 047 lt s task b action alert b value You have a working Backbase installation gt text text text e You can double click an action in the Runtime Tracer to jump to the element on which the action is triggered in the BXML tree 4 You can refresh the tool detail using the keys shift r 1 5 2 I O Inspector The I O Inspector monitors files that are sent and received Click a file to view its re quest and response details Figure 1 31 I O Inspector Backbase I O Inspector x 50 237 tools tool_devconfig x
88. b menupopup gt lt b menupane gt lt b menurow gt lt b menucell gt To gif lt b menucell gt lt b menurow gt lt b menurow gt lt b menucell gt To png lt b menucell gt lt b menurow gt lt b menupane gt lt b menupopup gt lt b menurow gt lt b menurow gt lt b menucell gt Save as lt b menurow gt lt b menupane gt lt b menupopup gt lt b menurow gt lt b menurow gt lt b menucell gt Edit lt b menucel1 gt lt b menupopup gt lt b menupane gt lt b menurow gt lt b menucell gt lt b menucell gt Copy lt b menucell gt lt b menurow gt lt b menurow gt lt b menucell gt Cut lt b menucell gt lt b menurow gt lt b menurow gt lt b menucell gt Paste lt b menucell gt lt b menurow gt lt b menupane gt lt b menupopup gt lt b menurow gt lt b menubar gt Ay oive Joie To use the menubar control you must add an s include to the path of this control for example s include b url controls backbase b menubar b menubar xml 5 4 3 Navbox The Navbox control is useful for showing and hiding levels of sub navigation and further detail A b navbox contains a single b navhead and b navbody element clicking the head expands or collapses the body element in which the content is defined The navboxes are block level meaning that they are presented beneath one other and occupy the entire width of an area Navboxes are designed for secondary navigati
89. can use on elements in the HTML space and BXML space e visible invisible and visible invisible e show hide and show hide e maximize store and restor e move and remove e addclass and removeclass e position scrollto e send e opacity e focus e sort 3 2 3 Commands for the XML Space The following is a list of commands that you can use to target elements in the XML space raw XML or that expect XML as input settext set move remove transform xsl transform xml2string You can also use XPath expressions in attributes of type String to target String values such as text nodes in the BXML space HTML space and XML space 3 3 Tree Manipulation Manipulating the objects in the BXML Tree using XPath to target elements is what makes the user interface interactive and dynamic This section describes how you can manipu late the BXML Tree to copy remove and move elements within the BXML Tree Moving takes an element and corresponding child nodes from one location in the BXML Tree and inserts the node set in another location Copying makes a copy of an element at a location in the BXML Tree and inserts the copy of the node set it in another location Removing deletes the element at a location in the BXML Tree To be able to manipulate the tree you need to visualize the BXML SPI document as a tree structure with familiar grandparent parent child sibling relationship hierarchies of the BXML and XHTM
90. certain tasks are not possible without it it was added to our implementation of XPath 2 0 e html for moving from the BXML space to the HTML space e bxml for moving from the HTML space to the BXML space e xpath evaluates XPath expression given as a string parameter of function e cookie gets a cookie The following is a list of unsupported XPath functions namespace uri namespace uri for prefix namespace uri from QNam nilled normalize unicode resolve QName resolve uri e adjust date to timezon e adjust dateTime to timezon e adjust time to timezon e base uri e collection e data e default collation e doc e document uri xpanded QNam e idref e in scope prefixes e lang e e e e e e e 2004 2006 Backbase B V All Rights Reserved 135 Backbase Manual Version 3 1 4 substract dates substract dateTimes unordered 10 2 4 XPath Examples The following table provides some examples of targeting XPath Syntax Explanation if sts self parent parent Start from context node self and walk up two parents Tes OA self parent parent named child div elements Start from context node self walk up two parents get the children and filter out everything but the div elements HLI self and third following sibling Start from context node self and retrieve the third sibling after the context node te self any second
91. chical nodes in the tree for example b target e Absolute targeting you can set IDs on elements that you then can reference directly For example where the element ID is id element_id you can target the element using b target id element_id Note XPath allows you to navigate through elements and attributes in an XML document XPath expressions return either a node set a String a Boolean or a number Backbase supports the W3C XPath 2 0 standard It is important for you to become familiar with XPath and the targeting concept Many of the examples in the user manual demonstrate targeting For more information on XPath Axis see XPath Axis p 1314nd XPath Examples p 136 or on XPath in general see W3Schools XPath Tutorial http www w3schools com xpath Figure 3 2 Targetting Targeting id element id Relative Absolute From b target b target id element_id The following example is a simple document that uses targeting to show and hide ele ments Example 3 1 Targeting lt b box gt lt h3 gt The Seven Samurai 1954 lt h3 gt lt p gt A movie by Akira Kurosawa starring Takashi Shimura and Toshiro Mifune lt p gt lt p style display none id sbox showhide gt The film takes place in war ridden 2004 2006 Backbase B V All Rights Reserved 38 Backbase Manual Version 3 1 4 16th century Japan where a village of farmers hire seven ronin l
92. children the default if b mode is not specified The following is an example of how to move elements Example 3 7 Moving Elements lt h3 gt What are your favorite films lt h3 gt Click the films to change the order lt ol gt lt li b action movedown b target gt Seven Samurai lt li gt lt li b action movedown b target gt Life is Beautiful lt li gt lt li b action movedown b target gt 2001 A Space Odyssey lt 1i gt lt ol gt 3 4 Loading A Backbase web application uses the Single Page Interface SPI model a data driven request response model where each modification of the user interface results in a data request instead of a page request Dynamically loading data fragments is therefore cent ral to the SPI model When you load data you manipulate the BXML Tree by adding nodes from the server to dynamically access and update the content structure and style of documents Loading data allows you to organize a web application into smaller data files that are only loaded when needed There are several ways to load data using BXML e s include allows you to organize a web application into smaller data files and reuse these files more flexibly Included files are loaded when parsed by the BPC e load command is used to load data from an external file when needed and provides complete control over what to load when to load it and where in the BXML Tree the loaded data is added e b buf
93. d When you click the link Click Here To End the deselect command is triggered on the div element id changingdiv which in turn triggers the deselect event handler defined in the behavior The fxstyles are executed synchronously one transition effect needs to end before the next is started If the asynchronous transition effect is still be ing executed even in its deselected state the element will still keep changing color For more information on effects see Controlling Transitions p 106 4 Entanglement When you declare an action to run asynchronously the result of the new thread are ignored by the BPC Therefore you must carefully consider whether the response coming from the s fxstyle s task s parallel s sequential and s event tags extended with the b async attribute can safely be ignored by the BPC For example you can issue a set command asynchronously as long as you are aware that other threads in the same process cannot be targeting elements by the response or the result from this command the new attribute value 4 1 1 Sequential And Parallel Processing You can specify whether the BPC runs the s fxstyle commands in parallel or sequen tially one at a time Implicitly s fxstyle commands are executed sequentially when you create a separate s fxstyle tag for each style attribute you want to animate that is you place them one after the other the transitions run one by one For example Example 4 2 Seq
94. de id selects the id attribute of the context node Shorthand children grandchildren and so on self Selects the context node Note If you do not specify a Shorthand b target by default the context node is selected descendant Selects all descendants p selects all p children of the context node descendant or self Selects the context node and all its descendants descendant or seltiip selects all p elements below 2004 2006 Backbase B V All Rights Reserved 132 Backbase Manual Version 3 1 4 Axis Name Shorthand Notation Description Syntax Examples children grandchildren and so on the context node and the context node itself if it is also a p element object Selects the values of For example properties of selected nodes div span object width Backbase custom Axis selects the width value of the target node style Selects CSS properties of For example selected nodes Backbase div style float custom Axis preceding Selects everything in the preceding document that is before the start tag of the current node preceding sibling Shorthand Selects all siblings before the context node If the context node is an attribute node or namespace node this axis will be empty 3 returns the sibling before the context node following Selects everything in the document after the closing tag
95. ded When you have bookmarked for example the tab called Seven Samurai the tab is selected using the ID the bookmark points to The value of the bookmark is accessed using the Sbpc_bookmark XPath variable The value only contains the bookmark and no other parts of the URL such as the 1 history suffix Also instead of selecting you can do oth er things as well such as loading a file from a path the bookmark points to The files used in this example are available in your Backbase installation explorer data directory Example 6 26 Adding Bookmarks lt s event b on construct b action select b target id bpc bookmark gt lt s behavior b name history b behavior b tab gt lt s event b on select gt lt s super gt lt s history b name browser b bookmark id gt lt s task b action select gt lt s history gt lt s event gt lt s behavior gt lt b tabbox style height 100 gt 2004 2006 Backbase B V All Rights Reserved 107 Backbase Manual Version 3 1 4 lt b tab b label 2001 id 2001 b url data 2001 short xml b behavior history gt lt b tab b label Seven Samurai id SevenSamurai b url data seven_short xml b behavior history gt lt b tab b label Life is Beautiful id LifeisBeautiful b state selected b url data bella_short xml b behavior history gt lt b tab b label The Godfather id llama b url data godfather_short xml b behavior history gt
96. define an event handler for the submit event You must add custom code in the submit event handler that validates the form and determines whether the form is valid and can be sent to the server The event handler must also include a send command to actually submit the form after the validation has taken place The following example is from the Forms Starter Kit located in the default Backbase in stallation directory C Backbase 3_1_4 starterkits forms form html The form b behavior attribute indicates that the form uses a behavior called form defined in the forms xml file that defines an event handler for the submit event Example 3 16 Form Submit lt form action response xml b destination method post b behavior form gt lt form gt The submit event handler in the forms xm1 includes a send command that is triggered when the result of the b test is successful form validation is implemented in the form Example 3 17 Submit Event Handler lt s behavior b name form gt lt s event b on construct gt lt s event gt lt s event b on submit gt lt s choose gt 2004 2006 Backbase B V All Rights Reserved 48 Backbase Manual Version 3 1 4 lt s when b test b step gt lt s task b action send gt lt s when gt lt s otherwise gt lt s task b action trigger b target input b event validate gt lt s choose gt lt s when b test not input b valid b valid true
97. der also has some Data Loading actions The most visible ac tion is the loading of new articles Every minute the client application sends a request to the server to check whether there are new articles If there are new articles the sum maries are sent back in a single XML file the application copies the articles to the right hand column and a highlight effect is applied 2004 2006 Backbase B V All Rights Reserved 11 Backbase Manual Version 3 1 4 Figure 1 10 Data Loading of New Article W Wikipedia Archive gt Thursday 6 October 11 54 Symphyandra 41 52 Christian Tremblay 11 52 Azal Azerbaijan AAA Morven Mneseneland Backbase also provides functionality for loading on demand For example the advanced search panel is not loaded until it is selected Once it is loaded it is stored in the cache and is not reloaded Of course you can also specify that a screen should be reloaded every time it is selected or that it is reloaded periodically When the system is loading it is possible to display a loading message as the following screenshot demonstrates see the message in the top right hand corner Figure 1 11 Loading Message Lt Advanced One moment please Infoworld e Slasl Results Il Advanced Saved Live Archive _ Live a Thursday 6 October Thursday Saved searches 2 02 Motorola confirms 9 34 Te Ry AJAX layoff of 1 900 Lift J 830 W a s Wednesday 5 October R s
98. der by date v O ascending descending Name User Interaction Layer The User Interaction Layer focuses on the interaction in the application This has a large impact on the overall usability Navigation is a good ex ample if you browse through a couple of articles you can simply use the browser back and forward buttons to navigate between articles implemented with a few lines of code In addition all articles can be bookmarked in which case you can see that the URL has a special format Figure 1 5 Bookmarks ED http www backbase com demos RSS aid 67210 10 While you browse the information behind the hash is dynamically updated The aid is the article ID and 10 is the history index When you ve selected an article you see that it has a different color see screenshot be low This is because the State of user interface elements is managed by Backbase A se lected item has the state Selected and this can be linked to different formatting using behaviors 2004 2006 Backbase B V All Rights Reserved 9 Backbase Manual Version 3 1 4 Figure 1 6 Selected State A Slashdot Live Archive Thursday 6 October 9 34 Test Equipment Finds Life In Mars like Conditions F 12 Short Gamma ray Bursts Traced to Colliding Stars mn mu ra oer CE ar Le Animations and Effects are also straightforward to implement In the RSS Reader several effec
99. e b time 500 gt lt s lock gt lt s event gt lt s event b on moveleft gt lt s task b action move b source b destination table 1 tbody b mode aslastchild gt lt s fxstyle b cancel false b time 500 gt lt s event gt lt s behavior gt lt a b action trigger b event moveright b target ttable 1 tbody tr style position absolute gt Move rows to the right locked lt a gt lt a braction trigger b event moveleft b target table 2 tbody tr style position absolute left 300px gt Move rows to the left not locked lt a gt lt table class filmTable style position absolute top 25px gt lt thead gt Sib eS lt th style width 150px gt Movie lt th gt lt th style width 60px gt Genre lt th gt See lt thead gt lt tbody gt lt tr b behavior lock move gt lt td gt The Seven Samurai lt td gt lt td gt Drama lt td gt ice lt tr b behavior lock move gt lt td gt City of God lt td gt lt td gt Drama lt td gt ie lt tr b behavior lock move gt lt td gt Donnie Darko lt td gt lt td gt Drama lt td gt lt i gt lt tr b behavior lock move gt lt td gt The Godfather lt td gt lt td gt Crime lt td gt See lt tbody gt lt table gt lt table class filmTable style position absolute left 300px top 25px gt 2004 2006 Backbase B V All Rights Reserved 53 Backbase Manual Version 3 1 4 lt thead gt
100. e de fault xml file e submit if all the form fields are valid then the form is submitted If invalid an 2004 2006 Backbase B V All Rights Reserved 123 Backbase Manual Version 3 1 4 alert is shown The super tag ensures the standard event handler is also triggered Example 9 5 Validate Event lt input type text b required true gt lt s event b on validate gt lt s choose gt lt s when b test value amp gt 10 gt lt s setatt b valid true gt lt s task b action trigger b event valid gt lt s when gt lt s otherwise gt lt s choose gt lt s super gt lt s event gt 9 3 Defining Variables A variable is an item of data named by an identifier and has a scope that determines where the variable can be used This section describes how you can create access and assign variables in BXML and from JavaScript The following variables are available in Backbase e BPC XPath variables Backbase provides a large number of predefined global and local variables These variables are documented in the BXML Reference PDF e User defined variables you can declare your own variables using the s variable element defined within an event handler e Backbase JavaScript variables allow you to get the current selected element and to access user defined global local and tag variables from inline JavaScript For more information see Using the s script element p 129 You can access BP
101. e gt lt b xhtml gt 6 4 3 Changing the Default Navigation Keys To override the default keys that are used to navigate through focusroots focusgroups and focusitems you can use the s whenactive tag in which you define s keys elements a wrapper for defining keys the b keys attribute gt and the command they trigger You can use the tag inline or inside a behavior In the following example three text areas are defined that use a behavior called focus1 The behavior defines that when a focusitem that uses the behavior gets focus that the user cannot use the tab and tab shift keys these are disactivated by not coupling an ac tion to them to navigate between text areas all form elements are automatically focus group and focusroot elements Instead you must use the left and right arrow keys Figure 6 2 Focus Model Textarea i Enter some Textarea 2 Enter some Textarea 3 Enter some texti text text Fovevesveveususucessvevsvesuvesususrsrsversvsersvevevareusevssvsvererenesesnsnsnsesnsenenenen Example 6 13 Disabling Focusgroups lt s behavior b name focusl b focusitem true b focusindicator true gt lt s whenactive gt lt s keys b keys right b action focusgroup next b bubble true gt lt s keys b keys left b action focusgroup previous b bubble true gt lt s keys b keys tab b bubble false gt lt s keys b keys tab shift b bubble false gt lt s whenactive gt
102. e the fol lowing e A datasource that specifies the data to be tranformed e A stylesheet that performs the transformation on the datasource e And use the xs1 transform command that triggers the tranformation process When you implement browser templating you must take into account the templating capabilities of the client browser e Internet Explorer 6 and Mozilla has full XML support including Namespaces Style sheets in CSS and XSLT 1 0 The built in XML Parser is based on both the W3C XSLT 1 0 and the W3C XPath 1 0 Recommendations e Internet Explorer 5 5 has XML support depending on the XML version installed some support XSLT 1 0 and some do not e Internet Explorer 5 also has XML support but the XSL part is NOT compatible with the official W3C XSL Recommendation Backbase provides the bpc_xsltParser XPath variable to test for browser template sup port whether the XML version supports XSLT 1 0 or XSL You need to define alternative XSLTs to use depending on the result of the test to perform the transformation gt Implementations of XSLT 1 0 can differ slightly between Mozilla and Internet Explorer 8 2 1 Implementing Browser Templating This section describes how you can implement browser templating capabilities in your Backbase application based on a simple example Start by creating a start up file with the following content Example 8 7 index html lt xmp b backbase true style display none gt
103. ecks A deck is an element that displays only one of its children at a time with the common purpose of creating tabbed or wizard like interfaces To implement a simple tab like deck e Create the sections of the deck usually as div tags or separate files These sections are child elements of the deck Of these sections the default one is the section that appears first when the deck is initially rendered e Create links or buttons to flip through the deck and define attributes such as color size positioning e Add commands to these buttons to address the navigation functionality of the deck This can include commands for next previous last page first page selection deselection and so on Example 5 2 Defining a Deck lt div gt lt b deck class simpleDeck gt solive Was as Cech ooo Voins lt div gt 2 a widget to create lt div gt lt div gt 3 multi paged documents lt div gt lt b deck gt lt a b action previous b target b deck gt amp lt Previous lt a gt lt a b action next b target b deck gt Next amp gt lt a gt Gave To load the contents of a deck where each section is stored in a separate file you can use the s include tag although this has the disadvantage that the files are loaded im mediately To delay the loading you can instead use the b buffer tag For more inform ation on buffered loading see Buffered Loading p 45 Deck child elements can follow the state ch
104. ed in email applications By default each row is closed You can open its children by clicking the row The b treelistrow defines a row in the b treelist and is displayed like an HTML lt tr gt tag Within the b treelistrow you can have a number of b treelistcell tags each defining a column in the treelist row You can use a b treelistchildren tag as a container to demarcate b treelistrow entries that appear at the same level in the hierarchy Figure 5 34 Backbase Treelist Subject From Posted Is the Seven Samurai good Jeremy Hartley 15 08 2005 13 01 E 2001 Question about religion John Deare 23 07 2005 17 14 Re 2001 Question about religion Marcel Diepstra 24 07 2005 8 01 E Vita e Bella Oscar John Deare 21 07 2005 16 07 E Re Vita e Bella Oscar Jeremy Hartley 22 07 2005 13 27 Re Vita e Bella Oscar John Deare 22 07 2005 14 47 Re Vita e Bella Oscar Henry James 23 07 2005 6 01 Re Vita e Bella Oscar Peter Jones 23 07 2005 9 43 You can set your own image for the control using s gfxset For more information see the BXML Reference Manual To use the treelist control you must add an s include to the path of this control for example s include b url controls backbase b treelist b treelist xml 5 9 Control Interaction 5 9 1 Implementing a Paging Mechanism Paging is essential for large data sets It allows you to retrieve only a part of the used data set at any time and to scroll backwards and
105. ed XPath operators e castable as e instance of e treat as 2004 2006 Backbase B V All Rights Reserved 134 Backbase Manual Version 3 1 4 cast as return every some then else for to XPath limitation Using an XPath expression that uses an operator AND targets a hyphenated attribute or element name in which an XPath reserved word is used gives incorrect results Examples of reserved words are operator names such as in or eq Using hypenation such as value of is permitted In the following example XPath cannot resolve the target b in x attribute Example 10 2 Hypenated Attributes lt div gt lt s event b on command gt lt s task b action alert b value boolean b in x y gt lt SsSctottnb einer Vue lt s task b action alert b value boolean b in x y gt lt s event gt b in x y lt div 10 2 3 XPath Functions XPath includes over 100 built in functions there are functions for string values numeric values date and time comparison node and QName manipulation sequence manipula tion Boolean values and more For example the id function is frequently used to se lect an element by its unique ID id mainlayer The supported XPath functions are documented in the BXML Reference PDF Next to the standard XPath functions Backbase has introduced the following custom Backbase XPath functions e current this function is part of XSLT 2 0 standard but since
106. ehavior set the b skinbase none so that the default xm1 and therefore the default css is not loaded 5 12 Overriding Backbase Styled Controls You can use the Backbase out of the box controls with Backbase metallic styling or ba sic styling applied by specifying the b controlpath attribute The Backbase styling is non modifiable except for positioning styles top left bottom right position width height and float You can override these properties using inline styles The basic styling attributes font size font family and background are sometimes overruled The basic styling is modifiable using inline styles and external stylesheets To overrule the styling write your own class and add the content suffix to the class name For ex ample to change the styling of the Accordeon control Example 5 38 Overruling Basic Controls Styling Defining b accordeonhead content height 22px width 100 padding left 3px background image url top_left gif background position 0 0 background repeat no repeat Apply the changes as follows Example 5 39 Overruling Basic Controls Styling Applying lt b accordeonhead class b accordeonhead content gt The Seven Samurai lt b accordeonhead gt 2004 2006 Backbase B V All Rights Reserved 85 Backbase Manual Version 3 1 4 5 13 Multimedia Elements You can use any HTML compatible multi media element such as Audio Video and SVG
107. el 1 2 Introducing Backbase This objective of this section is to explain the essential concepts of the Backbase AJAX RIA software to give you an overview of the technology before you start coding The con cepts are described in greater detail with examples provided in this manual AJAX software helps you develop more interactive web applications quicker The toolkit is designed to overcome the following challenges Browser incompatibilities Maintaining large pieces of JavaScript code Lack of standard reusable components Spending too much time on writing low level plumbing code Lack of development tools The Backbase software offers a standard solution for all these challenges Backbase does the following e Removes browser differences e Remedies the shortcomings of HTML CSS and JavaScript by using a robust execution system that has a simplified API actually tags instead of an API e Provides managers and libraries to simplify common tasks e Supports data bindings e Creates an attractive user interface layer with feature rich UI controls 1 2 1 Understanding BXML and BPC 2004 2006 Backbase B V All Rights Reserved 4 Backbase Manual Version 3 1 4 The Backbase software contains two fundamental building blocks the Backbase Present ation Client BPC and the BXML Language BXML is Backbase s XML based declarative language that extends HTML to provide dynamic client side interaction and behavior BXML tags and at
108. ells the story of an Italian Jew Guido Orefice played by Roberto Benigni who lives in a romantic fairy tale but must learn how to use that dreamy quality to survive a concentration camp with his young son Joshua played by Giorgio Cantarini lt p gt lt b navpanelbody gt lt b navpanel gt lt div gt The b singular attribute defines that only one child of an element can be selected at one time When another child is selected the other children are automatically deselected 5 4 5 Sidebarbox The sidebar control is a tabbed control that you can position vertically on the left hand side or right hand side of the screen A tab is partly visible when inactive and fully vis ible when active You can specify the attributes b width b height b top and b side to indicate whether it appears right or left the default Use the b img attribute to in dicate an image file 2004 2006 Backbase B V All Rights Reserved 64 Backbase Manual Version 3 1 4 Figure 5 10 Backbase Sidebarbox It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout oO Li co i 7H T Pa The following is an example of a sidebarbox control to close the control click the tab that is open Example 5 11 Creating a Sidebar Control lt b sidebarbox b width 400 b height 250 b top 100 b side left gt lt b sidebar b img menu gif
109. ent the observer to observe and react to another element s the observed state changes The b followstate attribute value is an XPath expression pointing to the observed element The observer element follows the state selected or deselected of the observed element In the following example the link has an event handler defined to change its state from selected to deselected each time the link is clicked The b navbox elements follow the state of the link therefore clicking the link opens and closes the navboxes Example 6 18 Followstate lt div gt lt a id openclose b cursor pointer gt Open Close All Boxes lt a gt lt s event b on click gt lt s task b action select deselect b target id openclose gt lt s event gt ave he lt div gt lt b navbox b followstate id openclose style width 250px gt lt b navhead gt The Seven Samurai lt b navhead gt lt b navbody gt lt p gt A movie by Akira Kurosawa starring Takashi Shimura and Toshiro Mifune The film takes place in war ridden 16th century Japan lt p gt lt b navbody gt lt b navbox gt lt div gt zpr gt lt div gt lt b navbox b followstate id openclose style width 250px gt lt b navhead gt 2001 A Space Odyssey lt b navhead gt lt b navbody gt lt p gt An influential science fiction film directed by Stanley Kubrick lt p gt lt a href http kubrickfilms warnerbros com gt More Info lt a gt lt b navb
110. ential science fiction film directed by Stanley Kubrick notable for combining episodes contrasting high levels of scientific and technical realism with transcendental mysticism lt b windowbody gt lt b window gt ne 5 4 Defining Navigation Controls Use the navigation controls to determine the basic navigational requirements layout of the user interface You can define navigation using the BXML client controls b contextmenu b menubar b navbox b navpanel b sidebar b tabbox b taskbar b toolbar and b tree 5 4 1 Contextmenu The Contextmenu is a context sensitive menu that pops up when an event typically a right mouse button event is triggered on an element You create the menu by nesting b contextmenu tags and you define each row in the menu using the b contextmenurow tag The b contextmenurow tag has a b label attribute that defines the menu label and optionally a b shortcut attribute that adds a label to denote a shortcut key for the menu you must implement the keys using the s keys tag Figure 5 6 Backbase Contextmenu contevtman T Open ctrl o Close this file Sub Save ctrl s Sub gt Something Something ctrl z Something ctrl a Something In the following example a right mouse button rmbup event handler is defined that tar gets the context menu Right click the heading element to view the pop up menu Example 5 7 Creating a Contextmenu Control lt div gt lt h1 gt contextmenu lt h1
111. et when the page is constructed that holds a reference to the sibling div element and its children Clicking the link triggers an alert command that targets the tag variable and puts the value in an alert box Example 9 12 Declaring Tag Variables lt div id tagvar gt lt s event b on construct gt lt s variable b name test_tag b select following sibling div 1 b scope tag gt lt s event gt lt div lt div gt Backbase lt div gt Rich lt div gt Internet lt div gt Applications lt div gt div lt div che lt a gt Click here to show me the tag variable must target the element on which the tag is defined lt s event b on command gt lt s task b action alert b value id tagvar test_tag gt lt s event gt lt a gt You can assign a new value to a tag variable using the assign command as follows note you must target the element in which the variable is defined Example 9 13 Assigning a New Value to a Variable lt div id tagvar2 gt Powered by BPC lt div gt lt a gt Click here to show me the tag variable must target the element on which the tag is defined lt s event b on command gt lt s task b action alert b value id tagvar S test_tag gt lt s task b action assign b select id tagvar2 b target id tagvar test tag fs lt s task b action alert b value id tagvar Stest_tag gt lt s event gt lt a gt The following example demonstra
112. fer is used to defer loading until the buffer element is selected the b buffer tag only works as a child of a deck control for example lt b buffer b url data file xml gt e s execute defining the s execute tag as the root tag of your loaded file instructs 2004 2006 Backbase B V All Rights Reserved 43 Backbase Manual Version 3 1 4 the BPC to see the loaded file as an instruction set instead of a static content file giving you complete control over what needs to happen when this file is loaded For more information see Response Files p 47 You can use the s loading control to give feedback to the users about any load action taking place For more information see Loading p 69 3 4 1 Including Files A key technique when developing an SPI application is to separate functionality into dis tinct modules defined in XML files and to include these files into your application using the s include tag Include files are well formed XML files that contain BXML and HTML Include files contain for example data behaviors and custom controls styling and be havior or they can contain a small module such as a shopping cart Include files can also be very large and themselves contain multiple nested include files Using the s include tag is the most common way to retrieve and place application data and resources When the BPC finds an s include tag it loads and parses the contents before rendering the rest of the
113. following example the root panelset has three rows the top row is 40 pixels the botton row is 20 pixels and the middle row takes up the remaining space Each row in the panelset is defined using a panel The middle row contains a nested panelset that di vides the row into three columns the first column is 80 pixels the last column is 130 pixels and the middle row takes up the remaining space Example 5 1 Defining Panelsets lt b panelset b rows 40px 20px style color white b minwidth 300px b minheight 200px gt lt b panel style background color A8DAFF color 666 padding 5px 0 0 5px gt Company heading lt b panel gt lt b panelset b cols 80px 130px gt lt b panel style background color E3F5A5 color 666 padding 5px 0 0 5px gt Navigation section lt b panel gt lt b panel style background color 64747F color white padding 5px 0 0 5px gt Content section lt b panel gt lt b panel style background color FDF260 color 666 padding 5px 0 0 5px gt Context sensitive information lt b panel gt lt b panelset gt lt b panel style background color 7D8FCE color white padding 5px 0 0 5px gt Status information lt b panel gt lt b panelset gt Internet Explorer performs slower if ancestor elements of a panelset have the style attribute height 100 To resolve this set the parent elements that have 100 height or 100 width to overflow auto Or overflow hidden 5 1 2 D
114. for combining episodes contrasting high levels of scientific and technical realism with transcendental mysticism lt span gt lt p gt lt p style background color FOFOFO font size 10 b behavior movedown gt The Seven Samurai amp gt amp gt lt span at moveddown gt takes place in war ridden 16th century Japan where a village of farmers look for ways to ward off a band of marauding robbers lt span gt cp lt div gt You can place the s super tag as a child element of an s event s parallel or s sequential tag 7 2 User Defined Controls You can use the s htmlstructure tag to create your own controls Using HTML struc tures improves the implementation of declarative interfaces by supplying a central defini tion of user interface controls and HTML code sequences You can then use these in your web application using custom tags the b name attribute of the s htmlstructure tag The Backbase controls located in the C Backbase 3_1_4 controls backbase directory provide examples of how to implement this tag The child nodes of the s htmlstructure tag belong to the HTML space Elements and attributes that belong to the BXML space cannot be included within this tag except for the b behavior attribute extending HTML elements and also the s innercontent tag For more information see Behaviors p 109 and Backbase Walkers p 39 7 2 1 s htmistructure The s htmlstructure tag encompasses XHTML tags and their
115. g You must specify the b name attribute for the s xm1 tag You can then use the name to uniquely reference it The contents of the s xm1 tag must be well formed as with when you define the XML in a separate XML file For example Example 8 1 Datasource lt s xml b name catalog gt lt products gt lt product gt lt name gt Apple lt name gt lt description gt A Trendy Computer lt description gt lt product gt lt product gt lt name gt PC lt name gt lt description gt A Functional Computer lt description gt produce lt products gt lt s xml gt 8 1 2 Stylesheet A stylesheet is XML defining a set of instructions that performs transformations The stylesheet can be a separate file or it can be part of the main body of XML In both cases the s stylesheet tag is the root tag and the b name attribute is used to uniquely identify it The contents of the stylesheet are a series of templates which use XPath to match parts of the data source When matched fragments and pieces of information from the data source are then incorporated with parts of the template The result of this process is re turned to the application and inserted at the specified destination By applying instruc tions in the stylesheet you can transform the data source from its original format into al most any other format The following XSLT tags are supported within the s stylesheet tag 2004 2006 Backbase B V All Rights Reserved
116. g a relative XPath expression for example form or by using ancestor form 1 which ensures that you get the parent form no matter how many elements are in between You can actually use b action submit b target id main on any element However you must not use it on an HTML input type submit element otherwise the form is sent twice The same applies to the HTML button element that also frequently has a default submit action 3 5 3 Defining Response Files A response file is a BPC file that is sent as the response when a form is submitted The XML standard requires that the document contains only one root node which defines the namespaces it uses The file does not need contain an XML declaration or a DOCTYPE declaration The following is an example of a response file that is used when a form is submitted When you submit the form the result of the request replaces the element often the form element that is targeted using the b destination attribute The result of a form sub mission must be XHTML or BXML For example Example 3 14 Response File lt div id formresponse xmlns http www w3 org 1999 xhtml xmlns b http www backbase com b xmlns s http www backbase com s gt lt p gt Thank you for entering your details lt p gt lt div gt 4 The response file must include namespace declarations for the XHTML and BXML elements it contains It is good practice to declare the XHTML and BXML
117. gered and the b action attribute specifies the command to execute when the element s command event fires The events supported by Backbase include the standard ones supported by JavaScript such as click mouseover Or mousenter Backbase also introduces other events such as dragreceive mousedeeper and command Most commands trigger a corresponding event For example a b action alert command triggers an alert event that you can respond to using b on alert However some commands such as load and send do not trigger events For more information see the Command section of the BXML Reference 6 1 1 Defining Event Handlers You can define event handlers in several ways The following list the ways and why you should use them e Inline for any XHTML or BXML element you can define the b action attribute and specify the command specific attributes e Event Tag you can define the s event tag inline as direct child nodes of XHTML or BXML elements or you can define the event anywhere in the document in which case defining a b on attribute in the element triggers the event handler Event bubbling ensures that events are passed to parent elements For more information see Event Bubbling p 104 e Behavior Tag you can wrap the event handler in a s behavior in which the element needs to reference the behavior explicitly using the attribute b behavior the value is the name of the behavior Behaviors can
118. group true gt lt tr gt lt td b behavior focus gt The Seven Samurai lt td gt lt td b behavior focus gt Drama lt td gt Ef ES SEPS lt td b behavior focus gt City of God lt td gt lt td b behavior focus gt Drama lt td gt ice lt tr gt lt td b behavior focus gt Donnie Darko lt td gt lt td b behavior focus gt Drama lt td gt ie ABS lt td b behavior focus gt 2001 A Space Odyssey lt td gt lt td b behavior focus gt Drama lt td gt lt i gt lt tbody gt lt table gt lt div You can navigate through the table rows and columns using the arrow keys Figure 6 3 Focus Model Table Commands and Keys Drama Drama Drama Drama 2001 4 Space Odyssey 6 5 Drag And Drop and Resizing Drag and drop and resize are two extremely useful and widely used ways for users to manipulate UI elements with the mouse You can make almost any element draggable and resizable with BXML For example you can drag and drop table rows aiv elements inline span elements list items and form elements In Backbase these are implemented declaritively as follows Set the b drag attribute to make an element draggable Set the b draggroup attribute to make a group of elements draggable via one of its elements e Set the b dragreceive attribute to make an element a receiver to drop draggable elements e Set the b resize attribute to make an object resizable You can use Backbase variables w
119. gt 20 lt ta gt EM ERS lt tbody gt lt table gt 8 3 3 Sorting on Numerical Values If either the text value of the cell or the value of the b sortvalue attribute can be suc cessfully converted to a floating point or integer number the sorting routine will auto 2004 2006 Backbase B V All Rights Reserved 120 Backbase Manual Version 3 1 4 matically take the numerical value to issue the comparison The following code would allow the BPC to use the b sortvalue to sort the Age column instead of the textual value of the table cell Example 8 13 Sorting on Numerical Values lt td b sortvalue 32 gt thirty two lt td gt 2004 2006 Backbase B V All Rights Reserved 121 Backbase Manual Version 3 1 4 Chapter 9 Client Side Data and Business Logic 9 1 Defining Task Execution You can declaratively implement client side business logic using the s task tag e Conditional logic using the s choose s when and s otherwise tags e Conditional tests using the b test tag e Sequences of tasks using s tasklist s parallel and s sequential 9 1 1 Defining Tasklists to Group Commands You can wrap an event handler in an s tasklist that defines a series of commands s task tags that are carried out when the event is triggered In other words the s tasklist tag is a container for a sequence of commands The s tasklist contains s task tags that are executed when the tasklist is called You can call
120. gt lt s event b on rmbup b bubble false gt lt s task b action select b target id contextmenu gt lt s task b action position b type place b target id contextmenu b destination b position at pointer gt lt s event gt lt b contextmenu id contextmenu gt lt b contextmenurow b label Open b shortcut ctrl o gt lt b contextmenurow b label Close this file gt 2004 2006 Backbase B V All Rights Reserved 60 Backbase Manual Version 3 1 4 lt b contextmenurow b label Sub gt lt b contextmenu gt lt b contextmenurow b label Save b shortcut ctrlt s gt lt b contextmenurow b label Something gt lt b contextmenurow b label Submenu gt lt b contextmenu gt lt b contextmenurow b label Something gt lt b contextmenurow b label Something b shortcut ctrlta gt lt b contextmenurow b label Something gt lt b contextmenu gt lt b contextmenurow gt lt b contextmenurow b label Something b shortcut ctrl z gt lt b contextmenu gt lt b contextmenurow gt lt b contextmenurow b label Sub gt lt b contextmenu gt lt b contextmenurow b label Save b shortcut ctrl s gt lt b contextmenurow b label Something gt lt b contextmenurow b label Submenu b disabled true gt lt b contextmenu gt lt b contextmenurow b label Something gt lt b contextmenurow b label Something b shortcut ctrlta gt lt b contextmenurow b l
121. gt lt td gt The Godfather lt td gt lt td gt Crime lt td gt lt td gt Francis Ford Coppola lt td gt ice lt tr b drag a b dragmode outline hidden gt lt td gt Scarface lt td gt lt td gt Crime lt td gt lt td gt Brian De Palma lt td gt ice lt tbody gt lt table gt lt table b behavior b listview style position absolute top 150px left 30px width 400 gt lt thead gt See lt th gt Movie lt th gt lt th gt Genre lt th gt lt th gt Directory lt th gt ie lt thead gt lt tbody style height 10px b dragreceive a gt Gee J gt lt tbody gt lt table gt The b dragmode outline hidden indicates that the dragged element is immediately re moved from its containing element Figure 6 4 Hidden Drag Movie Genre Directory Language Donnie Darko Drama Richard Kelly English The Godfather Crime Francis Ford Coppola English Scarface r f Ertme Brien De Palme P E ss 2004 2006 Backbase B V All Rights Reserved 100 Backbase Manual Version 3 1 4 The b dragmode outline none indicates that an empty space occupied by the dragged element remains in the containing element until the drop is completed Figure 6 5 None Drag Movie Genre Directory The Seven Samurai Drama Akira Kurosawa The Godfather Crime Francis Ford Coppola Gca tace sii AnS CRE TTC eee Pelee gt www www www ww ww wwe we wwe we wee we ee ww ee ee ee we ee e
122. gt 10k to 19k lt option gt lt option value 20_29 gt S20k to 29k lt option gt lt option value 30_39 gt 30k to 39k lt option gt lt option value 40_49 gt S40k to 49k lt option gt lt option value 50_plus gt 50k lt option gt lt select gt lt td gt CAE lt tr gt lt td gt lt td gt lt input type submit value submit gt lt td gt EJES lt tbody gt lt table gt lt form gt Example 9 4 Response File lt xml version 1 0 encoding UTF 8 gt lt div gt The form has been submitted lt div gt If you want to use the functionality in the orms xml you must use s include to load the file Default behaviors are then defined for the elements form input select and textarea Backbase provides the following attributes for validating form fields e b required specify whether the field is mandatory true or optional false e b valid sets the state of a field to true false or required e b pattern specify a regular expression standard JavaScript library Backbase provides the following events for form fields valid sets the b valid attribute to true invalid sets the b valid attribute to false required sets the b valid attribute to required validate checks fields with b required attribute executes b pattern attribute and puts the result back in the b valid attribute Backbase provides the following events for forms the implementation is in th
123. he result is put The transform command has the following attributes e b stylesheet specify the name of the stylesheet using the syntax S lt stylesheetName gt e b datasource specify the name of the data source using the syntax lt dataSourceName gt e b destination an XPath statement used to indicate the target element in the document into which the result of the transformation is placed For more information see XPath Axis p 131 e b mode specifies how the result of the transformation is placed relative to the target The attribute can have the values asfirstchild aslastchild before replace replacechildren The default value is replace Example 8 3 Transforming Data Using Stylsheets lt div id output gt lt s event b on construct gt lt s task b action transform b stylesheet Sstylesheet b datasource Sdatasource b destination id output b mode aslastchild gt lt s event gt lt diwe 8 1 4 Loading Data and Stylesheets from the Server You can load XML data and XSLT stylesheets from the server and access them from vari ables for client side transformations You can use this functionality to do transformations client side enhancing the responsiveness of a Backbase front end Since the Backbase 2004 2006 Backbase B V All Rights Reserved 115 Backbase Manual Version 3 1 4 templating system is based on XSLT the syntax on the client is the same as that used for heavier tra
124. hen you use non standard XML entities the default is false 3 5 Submitting Forms In Backbase you can submit forms using the standard HTML form submission or using Backbase enabled form submission In both cases standard HTTP is used for communic ation between the BPC and the web server using the standard HTML action and method attributes to indicate respectively the name of the file to send the form content to and the submit method post or get to use The advantage of using Backbase form submission rather that standard HTML form sub mission is that the form submission is done using an Ajax request You can therefore in sert the result of the form submission into the current page rather than with HTML form submission that results in a full page refresh This section contains the following subjects describing form submission Standard HTML Form Submission p 46 Backbase Form Submission p 46 Defining Response Files p 47 Using the submit Command p 48 Sending XML to the Server p 49 2004 2006 Backbase B V All Rights Reserved 45 Backbase Manual Version 3 1 4 3 5 1 Standard HTML Form Submission In Backbase you can can use standard HTML form submission where the submit causes the browser to go to another page when the form data is passed as query parameters or POST data depending on the form method The form looks and works exactly as a nor mal HTML form for example Example 3 12 Standard HTML For
125. iful b state selected b url data bella_short xml gt lt b tab b label The Godfather b url data godfather_short xml gt lt b tabbox gt 2004 2006 Backbase B V All Rights Reserved 65 Backbase Manual Version 3 1 4 Where for example the b url data bella short xm1l contains the following Example 5 13 Response File lt div xmins http www w3 org 1999 xhtml xmlns b http www backbase com b xmlns s http www backbase com s gt lt h3 gt Life Is Beautiful La Vita bella 1997 lt h3 gt lt p gt Italian language film which tells the story of an Italian Jew Guido Orefice played by Roberto Benigni who lives ina romantic fairy tale but must learn how to use that dreamy quality to survive a concentration camp with his young son Joshua lt p gt lt div gt For more information see Defining Response Files p 47 and Lazy Loading p 39 5 4 7 Taskbar The taskbar control is used to manage windows It creates tabs at the bottom of the screen for each open window Figure 5 12 Backbase Taskbar Open window 1 Open window 2 Open window 3 bs 2 ao a Pe aru Wve Seven Sumarai z J xj A 19 an It an influer amp fairy Kubrick The film takes place in war ridden 16th century quali Japan where a village of farmers look for ways to youn ward off a band of marauding robbers EJ Life Is Beautiful La 2001 A Space Seven Sumarai
126. ing robbers The Seven Samurai is widely regarded as one of the greatest Japanese films ever made lt lt lt Show less 3 2 1 Targeting the HTML Space A Backbase application is defined within the xmp tags of your single page interface SPI The xmp tags mark the BXML space the BXML and HTML elements that are parsed by the BPC engine and rendered in the BXML Tree By default targeting works on tree elements in the BXML space However within your Backbase application you can demarcate areas that belong to the HTML space using b xhtm1 tags elements within these tags are not parsed by the BPC Putting elements in the HTML space is useful for integration with ex isting applications and to improve performance by using XHTML for simple mark up and simple UI elements the innercontent of Backbase controls belong to the HTML space for more information see Defining HTML Structures p 110Y As elements within the b xhtmi tags are not parsed by the BPC you cannot by default 2004 2006 Backbase B V All Rights Reserved 39 Backbase Manual Version 3 1 4 target these elements because they do not have a node set representation in the BXML tree To enable you to target elements in the HTML space Backbase provides the follow ing custom XPath functions known as walkers e html for targeting nodes in the HTML space The htm1 walker instructs the BPC to go to the representation in the DOM Tree e bxmi allows you to switch from the
127. inherit from other behaviors and can be used by several elements The following are examples defining event handlers e On the element itself b action attribute It is executed as the event takes place which means that the event is fired when the user clicks on an element lt a b action alert b value Hello gt Click me lt a gt When you define a command without an event the b on command event is the default event that is triggered e Asthe s task child element of an event handler which is declared by the s event 2004 2006 Backbase B V All Rights Reserved 87 Backbase Manual Version 3 1 4 tag lt a gt Click me lt s event b on command gt lt s task b action alert lt s event gt lt a gt b value Hello gt As the b action attribute of the s event tag This is a shorthand notation for the example above lt a gt Click me lt s event b on command lt a gt b action alert b value Hello gt As the s task child element of the s execute tag This special event handler is triggered the moment the newly loaded data is parsed by the BPC runtime It is similar to s event b on construct lt S execule gt A lt s task b action alert lt s execute gt b value Hello gt As the s task child element of the s if s when and s otherwise tags Tasks within the s if and s when tags are executed only when the test can be satisfied Tasks within the s
128. ion select b target ul li 3 gt lt s event b on mouseleave b action select b target ul li 4 gt Interact with this area to show the mouse events lt div gt lt ul gt lt li b behavior mouse active gt Click lt li gt lt li b behavior mouse active gt Double click lt 1i gt lt li b behavior mouse active gt Area enter lt 1i gt lt li b behavior mouse active gt Area leave lt 1i gt lt ul gt lt s behavior b name mouse active gt lt s state b on select b normal mouse active gt lt s state b on deselect b normal gt lt s event b on select gt lt s fxstyle b time 500 gt lt s task b action deselect gt lt s event gt lt s behavior gt lt style type text css gt mouse active color red font weight bold lt style gt For more information on events see Input Events p 89 6 3 2 Capturing Keys You can use the s keys tag to map a command to a key or keys The s keys tag re quires the attributes b keys and b action Any additional attributes form the argu ments for the command The value of the b keys attribute can be the key character case is ignored or the decimal ASCII value of the key For example 27 is the Esc key The b action defines the command that is executed when the key s is pressed The s whenactive tag is a wrapper for the s keys tag to provide the application context for when the keys are active The keys are only active when the
129. is 9 00 false if price is 9 90 gt Greater than price gt 9 80 true if price is 9 90 false if price is 9 80 gt Greater than or price gt 9 80 true if price is 9 90 equal to false if price is 9 70 or Boolean disjunction price 9 80 or true if price is 9 80 A or B price 9 70 false if price is 9 50 and Boolean conjunction price gt 9 00 and true if price is 9 80 A and B price lt 9 90 false if price is 8 50 mod Modulus division 5 mod 2 1 remainder eq Equals price eq 9 80 true if price is 9 80 false if price is 9 90 ne Not equal price ne 9 80 true if price is 9 90 false if price is 9 80 It Less than price lt 9 80 true if price is 9 00 false if price is 9 80 le Less than or equal to price le 9 80 true if price is 9 00 false if price is 9 90 gt Greater than price gt 9 80 true if price is 9 90 false if price is 9 80 ge Greater than or price ge 9 80 true if price is 9 90 equal to false if price is 9 70 is Ordering identity sal HOt t as all child elements of comparison between current the parent element nodes except the current node except Difference of except all child elements of sequences the parent element considered as sets of except the current nodes node intersect Includes a node in following p all lt p gt elements of the result if it is in intersect the context node both the two sets Smyvar provided they are descendents of the node in variable Smyvar gt The following is a list of unsupport
130. isabled cannot respond to user input events and can only be enabled using a system event enable Takes place when an element is enabled an element once disabled cannot respond to user input events and can only be enabled using a system event load Takes place when a document is loaded and parsed by the BPC open Takes place when a node in a treelist or menu is opened remove Takes place when element is destroyed by a remove command select Takes place when an element is selected submit Takes place when a form is submitted 6 2 Sequence of Event Triggering This section describes the initial execution order of events for left mouse double click right mouse double click drag and drop and focus and blur It is important to remember that if a user action causes multiple events to be triggered they are triggered asynchronously To force the events to execute synchronously that is one by one use the s lock tag and target an element that serves as the locking element 2004 2006 Backbase B V All Rights Reserved 91 Backbase Manual Version 3 1 4 6 2 1 Left Mouse Button Double Click When a left mouse button double click action takes place the event sequence is as fol lows mousedown mouseup command click mousedown not in IE mouseup not in IE command not in IE click not in IE dblclick 10 00 S Oy UTB OO Roe 6 2 2 Right Mouse Button Double Click When
131. ithin event handlers defined for drag and drop functionality For more information see Backbase Variables p 6 5 1 Dragging and Dropping Elements To make an element draggable add a b drag attribute to the element and enter a logical 2004 2006 Backbase B V All Rights Reserved 99 Backbase Manual Version 3 1 4 String identifier as its value In the following example you can drag and drop the entire table and also drag and drop each row in the table to reorganize the table or to drag elements from one ta ble to another The b dragmode indicates the appearance of the dragged element The b dragreceive the elements that can receive draggable elements the value is the logic al String identifier of the element that can be recieved Example 6 15 Drag And Drop lt table b behavior b listview b drag outline example b dragmode real style position absolute top 30px left 30px width 400 gt lt thead gt lt tr gt lt th gt Movie lt th gt lt th gt Genre lt th gt lt th gt Directory lt th gt ibn lt thead gt lt tbody b dragreceive a gt lt tr b drag a b dragmode outline none gt lt td gt The Seven Samurai lt td gt lt td gt Drama lt td gt lt td gt Akira Kurosawa lt td gt ie lt tr b drag a b dragmode outline hidden gt lt td gt Donnie Darko lt td gt lt td gt Drama lt td gt lt td gt Richard Kelly lt td gt lt i gt lt tr b drag a b dragmode outline none
132. ium size and has a smooth coat a heavy thick set low swung body a massive short faced head wide shoulders and sturdy limbs Height 31 40 cm Weight 24 25kg Temperament The bulldog is not a vicious dog breed and gets along well with both humans and sometimes other dog breeds Bulldogs are very friendly but stubborn and protective lt desc gt lt items gt lt item gt lt id gt EST 6 lt id gt lt desc gt Medium size non sporting dog lt desc gt lt listCost gt 18 5 lt listCost gt lt unitCost gt 12 0 lt unitCost gt lt image gt dog1 jpg lt image gt lt attribute gt Male Adult lt attribute gt lt item gt lt item gt lt 10enST 7 lt 10 lt desc gt Medium size non sporting dog lt desc gt lt i Sit CO site len Sa IIET COSES lt unitCost gt 12 0 lt unitCost gt lt image gt dog1 jpg lt image gt lt attribute gt Female Puppy lt attribute gt lt item gt lt items gt lt product lt see the Backbase 3_1_4 starterkits petshop catalog xml file for the complete datasource gt q progucts lt category gt lt categories gt lt s xml gt 2004 2006 Backbase B V All Rights Reserved 116 Backbase Manual Version 3 1 4 8 2 Browser Templating Browser templating involves using the XML Parser built into the client browser to trans form a piece of XML from its original format into another XML format such as XHTML using XSLT To implement browser templating in Backbase you need to defin
133. iv 2004 2006 Backbase B V All Rights Reserved 104 Backbase Manual Version 3 1 4 id parent element When a user clicks anywhere inside the div for example in a nes ted div element the click event bubbles up the hierarchy looking for an event handler for the click event Event bubbling therefore occurs on all objects except for the div ele ment which contains the s event tag extended with the b bubble false attribute Clicking any of the other elements triggers an alert box with the text Event bubbling The link Three has an additional click event handler defined It is triggered first before event bubbling takes place Example 6 21 Event Bubbling lt div id parent gt lt s event b on click b action alert b value Event bubbling gt lt div gt lt a gt One lt a gt CON lt div gt lt a gt Two lt a gt lt s event b bubble false b on click gt lt div lt div gt lt a gt Three lt a gt lt s event b on click b action alert b value Local alert gt lt div gt lt div gt Event bubbling applies to user input events such as click command and mouseover but not for events such as select and show For more information see User Input Events p 89 6 7 Adding Effects A transition is a visual effect that is split up into a number of steps from start to finish in such a way that it appears animated A transition is formed by one or more s fxstyle tags with one or more
134. k and is available in its event handler which puts the local variable value in a alert box Clicking the second link however results in an XPath error because the local variable is not available within the context of that element Example 9 10 Declaring Local Variables lt a gt lt s event b on mouseenter gt 2004 2006 Backbase B V All Rights Reserved 125 Backbase Manual Version 3 1 4 lt s variable b name test_ local b select Hello World b scope local gt lt s task b action trigger b event command b target id trgl gt lt s event gt Click to register and trigger alert lt a gt lt a id trgql gt lt s event b on command gt lt s task b action alert b value test local gt lt s event gt Click here to try and access the local variable lt a gt You can assign a new value to a local variable using the assign command as follows Example 9 11 Assigning a New Value to a Variable lt a gt Click here to assign a new value to the variable lt s event b on command gt lt s task b action assign b select Hello Mum b target Stest_local gt lt s task b action trigger b event command b target id trgl gt lt s event gt lt a gt 9 3 3 Tag Variables A tag variable is available within the scope of the element in which it is defined and ex ists for the lifespan of the application In the following example a tag variable is s
135. ld element down the BXML tree hierarchy It is triggered on the element 2004 2006 Backbase B V All Rights Reserved 89 Backbase Manual Version 3 1 4 Event Description which the dragged element enters drag leave Takes place when the element that is being dragged is moved from a child element to a parent element It is triggered on the child element drag receive Takes place on the element which receives the element that has been dragged and dropped drag reenter Takes place when the element that is being dragged is moved from the child element to a parent element up the BXML tree hierarchy It is triggered on the element which the dragged element reenters drag start Takes place when the drag action commences It is triggered on the element that is being dragged inactive Take places on an element when it or a child node loses focus mousedeeper Takes place the cursor moves over the children of an element mousedown Takes place an element receives the mouse pressed down input mouseenter Takes place when an element received the mouse over input mouseleave Takes place when an element receives the mouse out input mouseup Takes place when an element received the mouse unpressed input mousereenter Takes place when the pointing device s cursor moves out of the children of an element the cursor leaves the child
136. lement is inactive when it or a child node does not have focus is blurred The active and inactive events take place on elements when they change their state e enable and disable An element in the focus model focus root group or item can be enabled the de fault or disabled by setting the b disabled false attribute The enable and disable events takes place when an element s enables or disabled state changes No user input events can be triggered on an element that is disabled only system events You can change the value of the attribute using the s setatt tag use the s with tag to set attributes on elements other than the current for example lt s event b on disable gt lt s setatt b disabled true class input standard gt lt s event gt You can also use the set or remove commands for changing or removing attribute values Note Event bubbling applies to the events in the focus model Event bubbling ensures that events are passed to parent elements although you can block these events being triggered using the b eventblock false attribute For more information see Event Bubbling p 104 6 4 2 Implementing the Focus Model in the HTML Space You can implement the focus model for tables in the HTML space by adding the attribute b focustype htmltable to the b xhtm1 tag Each cell of the table is then a focusitem that can get focus using the keyboard arrow keys The bpc_focusCurrentElement
137. lor 80FFB3 width 400px height 100px gt These elements are in the HTML Space lt span gt Clicking the button toggles the display style property of this element in the HTML Space lt span gt lt div lt b xhtml gt In the following example the second link targets elements in the HTML space using the html1 walker and once in the HTML space it targets elements within b bxm1 element using the bxm1 walker Example 3 5 BXML Space Walker lt a b action alert b value following b xhtml html div span gt To HTML Space lt a gt lt span gt lt span gt lt a b action alert b value following b xhtml html bxml b bxml b box gt To BXML Space within HTML Space lt a gt lt b xhtml gt lt div gt lt span gt This element is in the HTML Space lt span gt lt b bxml gt lt b box gt This box is in the BXML Space lt b box gt lt b bxml gt lt div gt lt b xhtml gt In the HTML space you must target attributes using the JavaScript conventions For example you target the class attribute using the syntax b value html div myClassName To target the class attribute in the BXML space use the syntax bxm1 div class 2004 2006 Backbase B V All Rights Reserved 40 Backbase Manual Version 3 1 4 3 2 2 Commands for the HTML Space You cannot use all the commands available in the BXML language on elements in the HTML space The following is a list of commands you
138. low the state selected or deselected of the observed element e Event bubbling ensures that events are passed to parent elements You can 2004 2006 Backbase B V All Rights Reserved 102 Backbase Manual Version 3 1 4 disable this behavior by setting the attribute b bubble false e b eventblock deactivate events on elements when needed 6 6 1 State At any one time an element in a Backbase application can be in a state selected or ina state deselected You can specify the default state of an element using the b state at tribute specify a value selected or deselected Most BXML tags show a visible reaction according to their state for example a modal is active and visible when it is in the selec ted state and is hidden when it is in the deselected state You can use behaviors to define the visual representation of an element when in one of its base states selected or deselected For more information see Behaviors p 109 If an element is triggered by a select action while the element already is in the selected state or vice versa the element event handler is not triggered For example Example 6 17 Setting State lt div b state selected gt lt s event b on select b action show gt lt s event b on construct b action select gt ave 6 6 2 b followstate Followstate allows you to synchronize elements based on state changes You can add the b followstate attribute to an elem
139. ls using the BXML client controls b button b combobox b datepicker b selectbox b slider and b spinner 5 7 1 Button A button control creates a customizable button element that can contain any XHTML markup Example 5 25 Creating a Button Control lt b button b action alert b value Hello gt Alert lt b button gt 5 7 2 Combobox The Combobox control is a textarea field with a drop down listbox containing alternative values from a fixed set The b combobox tag contains child b combo option tags defining the list box The b combobox tag b name attribute is the name of the input field that is sent on a form submit You can specify an initial value using the b value attribute or b text to set the initial text that appears in the box The b combobox also can have the b style attribute to indicate the styling for the input field The b combo option tag b value attribute is the value of a value representation pair Figure 5 26 Backbase Combobox Bl J Blade Runner 1982 dir Ridley Scott Blue Velvet 1986 dir David Lynch Example 5 26 Creating a Combobox lt b combobox b width 300px b name fieldvalue b text B gt lt b combo option b value 1 gt 2001 A Space Odyssey 1968 dir Stanley Kubrick lt b combo option gt lt b combo option b value 2 gt A Clockwork Orange 1971 dir Stanley Kubrick lt b combo option gt lt b combo option b value 3 gt A Hard Day s Night 1964 dir Richard
140. lt s behavior gt lt div style position absolute left 50px top 50px gt lt textarea b behavior focusl gt Textarea 1 Enter some text lt textarea gt lt textarea b behavior focusl gt Textarea 2 Enter some text lt textarea gt lt textarea b behavior focusl gt Textarea 3 Enter some text lt textarea gt lt div gt The b focusindicator attribute visualizes the focused element by creating a dotted line around the element In the example above the focus model is implemented but would not be visible without b focusindicator set to true The following example demonstrates how you can implement the focus cellup and fo cus cellup commands in a table and how you can override the default keys Example 6 14 Table Cell Up and Down Keys lt s include b url controls backbase b listview b listview xml gt lt s behavior b name focus b focusitem true b focusindicator true gt lt s whenactive gt lt s keys b keys up b action focus cellup b bubble true gt lt s keys b keys down b action focus celldown b bubble true gt 2004 2006 Backbase B V All Rights Reserved 98 Backbase Manual Version 3 1 4 lt s whenactive gt lt s behavior gt lt div focusroot true gt lt table b behavior b listview style position absolute left 20px top 25px gt lt thead gt lt tr gt lt th gt Movie lt th gt lt th gt Genre lt th gt EJ E lt thead gt lt tbody b focus
141. lt xsl template gt lt xsl stylesheet gt 4 Note the difference between the XSLTs namely the different namespace declarations and the xsl output and the xsl sort tags available in XSLT 1 0 The following is the films xm1 datasource used in the example above Example 8 10 films xml lt films gt lt film gt lt title gt The Seven Samurai lt title gt lt director gt Akira Kurosawa lt director gt lt genre gt Drama lt genre gt lt language gt Japanese lt language gt lt film gt lt film gt lt title gt City of God lt title gt lt director gt Fernando Meirelles lt director gt lt genre gt Drama lt genre gt lt language gt Portuguese lt language gt L e A lt film gt lt title gt The Godfather lt title gt lt director gt Francis Ford Coppola lt director gt lt genre gt Crime lt genre gt lt language gt English lt language gt lt film gt lt film gt lt title gt Carlito s Way lt title gt lt director gt Brian De Palma lt director gt lt genre gt Crime lt genre gt lt language gt English lt language gt lt a lt film gt lt title gt Apocalypse Now lt title gt lt director gt Francis Ford Coppola lt director gt lt genre gt War lt genre gt lt language gt English lt language gt lt film gt lt films gt 4 Firefox has a known problem running files using the xs1t extension on Apache web server when the Content Type iS application xslt xml A solutio
142. m Submission lt form id main action response php method post gt lt table gt lt tr gt lt td gt Name lt td gt lt td gt lt input name name type text size 40 gt lt td gt lt i gt lt tr gt lt td gt Data lt td gt lt ede lt textarea name data gt lt td gt fes lt table gt lt input type submit value Send gt lt form gt For the submit button you can use either lt input type submit value Send gt or lt button type submit gt Send lt button gt they both work the same The default type of an input element is text and the default type of a button is usually submit although this can vary from browser to browser It is therefore recommended to always specify the type explicitly if you are using the standard HTML elements 3 5 2 Backbase Form Submission To define Backbase enabled form submission you must define the following attributes on the form element e b destination an XPath statement that targets an element in the BXML tree to specify at which point in your XML document the result is inserted The destination is often the form itself but can be any element in the document e b mode controls how the result of the request is inserted relative to the given b destination Possible values are after asfirstchild aslastchild before replace the default and replacechildren If you do not specify a b dest ination on your form a standard HTM
143. ment the command event is the default event that is triggered In the above example therefore writing lt b box gt lt a gt Click here to see if your Backbase installation is working lt a gt lt b box gt is equivalent 2 1 1 System Tags s tags s prefixed tags are used for system tags Each s tag has its own specific attributes The following illustration provides an overview of the s tags 2004 2006 Backbase B V All Rights Reserved 30 Backbase Manual Version 3 1 4 Figure 2 2 Backbase S Tags S tags SSS eee PEE programming actions templating communication history if task for each ae httpcode bookmark choose setatt if attribute loading tooltip when setstyle otherwise call template default keys otherwise fxstyle template copy of gfxset whenactive behavior copy of value of element event attribute when choose super valueof with textnode lock variable sequential script parallel initatt 2 1 2 Backbase Controls Backbase controls are the visual interface controls that are defined in the b namespace Each b tag has its own specific attributes and you can also apply generic attributes to these elements The following illustration provides an overview of the Backbase out of the box controls 2004 2006 Backbase B V All Rights Reserved 31 Backbase Manual Version 3 1 4 Figure
144. ml 0 50 549 51 454 controls dynamic default xml 0 un ui tools tools xml 0 JININ 10 iC J re N v ul 51 828 GET controls dynamic b box b box xml 0 52 GET table xsit 0 52 GET films xml 0 02 GET tools tool_menu xml 0 bt N NN 101010 nn ow uw H N Jl mm jimm jm eee ee mm m 4 t n 05 GET tools tool_io_inspector xml 0 1 5 3 Quick Inspector The Quick Inspector allows you to get information on a BXML element over which the mouse is currently hovering Open the Quick Inspector and move the mouse or any other pointing device over an element to get more information on the element s attrib utes 2004 2006 Backbase B V All Rights Reserved 24 Backbase Manual Version 3 1 4 Figure 1 32 Quick Inspector Backbase Quick Inspector x Move your mouse over any HTML element to see tag details Tag a b behavior alert b state deselected 1 5 4 Reporters Creates an overview of the building blocks used in the construction of your web applica tion Behaviors Ids TaskLists Gfxsets and Key Bindings Figure 1 33 Reporters Backbase Reporter BEHAVIORS x A IDs Behaviors Tasklists GFX Sets Key bindings TOOL_KEYBOARD TOOL setoption TOOL image tool window tool windownhead tool windove clasebutton teol windovw maximizerestorebutton tool tabboss The following table provides an overview of the
145. mp Backbase Foundation E Understanding BXML and BPC Hello World B Hello World This is a basic Hello World example It simply consists of an Showing and Hiding alert command on a link tag b deck Introducing the BXML Tree B Asynchronous Command Execution Rich User Interfaces Client Side Data and Business Logic Click here Development and Debugging View Source Edit 1 5 Runtime Developer Tools Backbase has runtime developer tools that provide detailed information your runtime Backbase web application You can access the developer tools via the Backbase Tools menu which is available in the browser at runtime by pressing the Esc key Pressing the Esc shows and hides the menu The following image shows the Tools menu in a browser window Figure 1 19 Backbase Tools Backbase startup page Mozilla Firefox _ fox File Edit View Go Bookmarks Tools Help Customize Links ww Q Click here to see if your Backbase installation is working Jre Developer Tool Alt 1 I O Inspector Alt 2 Quick Inspector Alt 3 Reporter Alt 4 Preferences Alt 5 The following table provides an overview of the available tools Tools Description Developer Tool Shows a selected element in the document tree and provides detailed information on that element such as its HTML or BXML source code its DOM attributes how the 2004 2006 Backbase B V All Rights Reserved 18 Backbase Manual
146. n Locking For Explicit Synchronization p provides another examples of defining a custom event 6 1 3 Input Events The following table describes the user input events you can use in Backbase Event Description active Take places on an element when it or a child node gets focus blocked mousedown Takes place instead of a normal mousedown event when the left mouse button is pressed on an element that is blocked from receiving input events blur Takes place when a field loses focus focus Takes place when a field gets focus change Takes place when the content of an input field has changed child lost Takes place on the parent of an element which has been successfully dragged and dropped or moved click Takes place when the left mouse button is clicked over an element command Takes place when an element is selected by user input mouse or keyboard dblclick Takes place when the left mouse button is clicked twice over an element drag deeper Takes place when an element that is being dragged is moved from a parent element to a child element down the BXML tree hierarchy It is triggered on the parent element drag drop Takes place when an element is succesfully dropped on a receiving element It is triggered on the element that is being dropped drag enter Takes place when the element that is being dragged is moved from the parent element to a chi
147. n for this when using the xs1t extension on the Apache Web server is to edit the content type application xml in the mime types file in the conf directory of Apache to add the xslt extension xml xsl xslt Alternatively you can use the xsi extension which has the normal application xml content type 8 3 Table Sorting In BXML you can extend normal tables with sorting functionality If you want to make use of table sorting with BXML the rows in tables must always be nested in the XHTML thead or tbody elements never as direct children of the table element The listview control also presents a sortable table that you can scroll through For more information see Listview p 79 8 3 1 Sorting on Table Cell Values 2004 2006 Backbase B V All Rights Reserved 119 Backbase Manual Version 3 1 4 Sorting in a table means organizing all the rows based on the value of the ta elements contained therein Usually sorting takes place when the user clicks a column heading is suing in the background a sort command on a ta element that is part of a tr within a thead You do not need to specify a target when the command is defined for such a ta When calling the sort command from anywhere else in the interface the b target at tribute should point to the id of a valid column heading Example 8 11 Sorting on Cell Values lt table class TABLE table sortable true gt lt thead gt lt Cr gt lt td b action sort b t
148. n of a web application The navpanel assumes the full the height and width of its parent element The b navpanelbody contains the content A b navpanel typically has multiple b navpanelhead and b navpanelbody elements only one of which can be selected at any time selecting one automatically deselects the oth er 2004 2006 Backbase B V All Rights Reserved Backbase Manual Version 3 1 4 Figure 5 9 Backbase Navpanel The Seven Samurai 1954 2001 A Space Odyssey 1968 An influential science fiction film directed by Stanley Kubrick Life Is Beautiful 1997 In the following example the navpanel contains three navpanelheads and navpanelbod ies You can use the b state attribute to define which of the heads is opened on startup Example 5 10 Creating a Navpanel Control lt div style height 500px width 200px gt lt b navpanel b singular strict gt lt b navpanelhead gt The Seven Samurai 1954 lt b navpanelhead gt lt b navpanelbody gt lt p gt A movie by Akira Kurosawa starring Takashi Shimura and Toshiro Mifune lt p gt lt b navpanelbody gt lt b navpanelhead gt 2001 A Space Odyssey 1968 lt b navpanelhead gt lt b navpanelbody gt lt p gt An influential science fiction film directed by Stanley Kubrick lt p gt lt b navpanelbody gt lt b navpanelhead b state selected gt Life Is Beautiful 1997 lt b navpanelhead gt lt b navpanelbody gt lt p gt A Italian language film which t
149. n server interaction takes place to inform the user about what is taking place When the file fin ishes loading the HTML is automatically removed from the document Define the loading control as follows e You can define your own loading control using the s loading tag to define the HTML to display while the application is loading a response file e If you want to use loading with Backbase styling applied include an s include tag to your startup file using the following syntax 2004 2006 Backbase B V All Rights Reserved 69 Backbase Manual Version 3 1 4 lt s include b url controls backbase s loading s loading xml gt Where the b ur1 attribute refers to the location of custom control in your Backbase installation 3_0_1 directory 5 5 3 Infobox The infobox control provides additional information to the user that they can interact with The infobox appears when it receives a command to display that information In foboxes can contain nested infoboxes that stay open until you click outside the infobox Figure 5 20 Backbase Infobox Life Is Beautiful La Vita bella 1997 A Italian language film which tells the story of an Italian Jew Guido Orefice played by Roberto Benigni who lives in a romantic fairy tale but must learn how to use that dreamy quality to survive a concentration camp with his young son Joshua played by Giorgio Cantarini More info gt gt In the following example the first i
150. n which you can view the results of an XPath search Execute BXML tab in which you can add and execute BXML code on the selected element If you want to monitor all the actions executed in your application set debug t rue on the body element Figure 1 20 Backbase Developer Tool Select element icon Enter XPath query Selected element details 9 Backbase Developer Tool BXML body div s default s htmistructure s behavior text link s event Runtime Tracer Search Results Execute BXML text mn z Prie view v irtica Info Debug leustem Am style 14 07 59 437 lt s task b action setpanelset b rows concat text cookie tool ins height b target gt 4 07 59 437 lt s task b action set b target b resize b value n gt comment text comment text div 7 078 Loading controls dynamic b button b button xml with method GET 3 BPC version 3 1 1 DEV 20051205 1225 STANDALONE is running 3 Loading controls dynamic default xml with method GET and payload div div b backbase Document tree The following describes how to use the Developer Tools based on a simple scenario 1 Create a start up file and add the following code lt s behavior b name alert gt lt s event b on command gt A lt s task b action alert b value You have a working Backbase installation gt lt s event gt lt s behavior gt lt b box gt
151. navigation concept In an AJAX application the visible content of a page is determined dynamically based on the user input and this does not always correspond to simply navigating to new content For example in an application where an overview of products is shown based on the user filtering criteria products hidden when a user applies a filter as opposed to separate pages being shown To update the URL on the fly to bookmark a location in a Single Page 2004 2006 Backbase B V All Rights Reserved 106 Backbase Manual Version 3 1 4 Interface you have to use the fragment identifier The fragment identifier is the string that appears after the mark and this part can be updated dynamically without reload ing the page When the fragment identifier is updated the browser also adds this to its history so the same mechanism automatically supports the back and forward buttons Based on this fragment identifier the application can determine how to act You can capture browser history in Backbase powered web applications using the s history and the b name browser attribute to program the browser Back and the Forward navigation buttons using events and tasks For example Example 6 24 Browser History lt s behavior b name history gt lt s event b on select gt lt s history b name browser gt lt s task b action select gt lt s history gt lt s event gt lt s behavior gt When the s history is processed
152. nfobox that appears contains a link to another in fobox The b target attribute define what to trigger with the select command The b mode attribute indicates where the infobox is positioned Since the infobox does not disappear when you move the mouse you can interact the content for example to click the link to the second infobox Example 5 18 Creating an Infobox Control lt div gt lt a b action select b target id infol b mode at pointer gt Beautiful lt a gt lt b infobox id infol style width 250px gt lt h2 gt La Vita bella 1997 lt h2 gt lt p gt A Italian language film which tells the story of an Italian Jew Guido Orefice played by Roberto Benigni who lives in a romantic fairy tale but must learn how to use that dreamy quality to survive a concentration camp with his young son Joshua played by Life Is Giorgio Cantarini lt p gt lt a b action select b target id info2 gt More info amp gt amp gt lt a gt lt b infobox gt lt b infobox id info2 style width 250px gt lt h2 gt La Vita bella 1997 cont d lt h2 gt lt p gt Guido tries to comfort Joshua by pretending that their imprisonment is just an elaborate game The film also stars Nicoletta Braschi lt p gt lt b infobox gt aive 5 5 4 Statusbar The statusbar control is an information bar usually presented at the bottom of an applica tion Specify the postioning of the b statusbar using CSS for example
153. nously in a separate thread By default therefore multiple command threads can be active at the same time It is important to realize however that the commands defined within each event handler are executed by default synchronously Within each thread therefore the commands are by default executed sequentially one by one 4 All commands also trigger events of the same name For example an alert command triggers an alert event For more information see Defining Event Handlers p 87 You can overrule the default asynchronous sychronous command execution using the fol lowing BXML tags e s lock tag you can lock the processes thread on a specfied target element in which case each event triggered is queued and executed synchronously If in the meantime events are triggered on elements that do not have a lock applied those events are executed asynchronously the lock only applies to a target element e b async attribute within a thread you can specify that a command execute asynchronously by setting the attribute b async true s parallel specify that s xstyle commands run in parallel e s sequential specify that s fxstyle commands run sequentially In the following example the behavior defines an event handler for the select and one for the deselect Each event triggers a new command executed asynchronously in its own thread Within the event handler the commands are executed synchronously Example 4 1 Asynch
154. nre gt Sci Fi lt genre gt lt genre gt Drama lt genre gt lt genre gt Action lt genre gt 2004 2006 Backbase B V All Rights Reserved 127 Backbase Manual Version 3 1 4 lt genre gt Thriller lt genre gt lt film gt lt film id 3 gt lt title gt American Beauty lt title gt lt release gt 1999 lt release gt lt description gt A 1999 drama film that explores themes of love freedom self liberation family and the American Dream lt description gt lt genre gt Drama lt genre gt ajea lme lt ftilms gt For information on using variables in XSLT transformations see Templating p 114 and Browser Templating p 117 9 3 5 Getting and Setting Variables from JavaS cript You can access user defined global local and tag variables from inline JavaScript the s script element using the Backbase _vars varName 0 variable You can also set a new value to a variable using the bpc setVariable sName sValue sScope func tion In the following example a global variable is created when the page is constructed Clicking the link executes a JavaScript alert box that contains the string value contained in the variable Example 9 17 Getting Variables in JavaScript lt div id my div b myatt Hello world gt lt s event b on construct gt lt s variable b name myTag b scope global b select string b myatt gt lt s event gt a Give lt a gt Click here to get myT
155. ns lt div gt lt s event b on command gt lt s variable b name data gt lt s task b action load b url data films xml b destination data gt lt s task b action alert b value data gt lt s task b action string2xml b variable data gt lt s task b action remove b target data genre gt lt s task b action alert b value S data gt lt s task b action set b target data films film 1 title text b value The 5th Element gt lt s task b action alert b value data gt lt s event gt Where the content of the films xml file is follows Example 9 16 films xml lt xml version 1 0 gt lt films gt lt ftilm id 1 gt lt title gt The Fifth Element lt title gt lt release gt 1997 lt release gt lt description gt 250 years in the future life is threatened by the arrival of Evil and only The Fifth Element can save the world lt description gt lt genre gt Action lt genre gt lt genre gt Adventure lt genre gt lt genre gt Sci Fi lt genre gt lt genre gt Thriller lt genre gt lt ti ime Srii PME lt title gt Blade Runner lt title gt lt release gt 1982 lt release gt lt description gt In a future where genetically manufactured beings called replicants are used for dangerous and degrading work in Earth s off world colonies specialist police units Blade Runners hunt down and retire kill escaped replicants on Earth lt description gt lt ge
156. nsformations on the server side The following code example is taken from the Backbase petstore starter kit It shows how XML data and XSLT stylesheets are loaded using a load command Following the load you can call the stylesheet and datasource using variables name Example 8 4 Loading Data and Stylesheets lt s task b action load b url stylesheet xml b destination gt lt s task b action load b url catalog xml b destination gt lt s task b action transform b stylesheet Sproducts b datasource Scatalog b destination id main content b mode aslastchild gt Where the stylesheet xml contains the following Example 8 5 Contents of stylesheet xml lt s stylesheet b name products gt lt s template b match gt lt b deck style height 400px gt lt s apply templates b select categories category gt lt b deck gt lt s template gt lt s template b match category gt lt see the Backbase 3_1_4 starterkits petshop stylesheet xml file for the complete stylesheet gt lt s stylesheet gt And where catalog xml contains the following Example 8 6 Contents of catalog xml lt s xml b name catalog gt lt categories gt lt category gt lt id gt DOGS lt id gt lt name gt Dogs lt name gt lt products gt lt product gt lt id gt dogl bulldog lt id gt lt name gt Bulldog lt name gt lt desc gt General Appearance The Bulldog is of med
157. ntrols for example by using the Backbase skins for some controls or basic styling for others It is recommended to create a separate folder in controls directory for example custom in which to create your own custom controls For more information see Back base Controls p 110 The controlpath setting has no influence on the menubar and treelist controls To use these controls you must add an s include to the path of this control for example s include b url controls backbase b menubar b menubar xml The b skinbase attribute specifies whether the default xm1 file in the controlpath dir ectory is loaded or not specify none or default The default xml is your control s con figuration file that contains default behaviors styling and layout for frequently used con structs such aS infobox tooltip selectbox and slider It also contains definitions for default validation behavior It is recommended to use the file as a central location where you can include miscellaneous behavior and styling Loading the file automatically is a convenient way to ensure your applications default look and feel the file has an in cludes to the default css located in your controls directory The file has rules such as Example 5 37 Default CSS font size 1llpx font family Verdana Geneva Arial Helvetica sans serif color rgb 102 DOS MOMENT The default css is loaded after the normal CSS includes To overrule this b
158. o configuration attributes b controlpath and b skinbase For more information see Setting the Control Path p 84 2 1 4 Events and Commands Events add interactivity to your SPI Most events are User Events p 89 that are triggered when the user does something such as clicking a button but there are also System Events p 91 that are not directly caused by the user for example the con struct event fires when a page is constructed When an event takes place you can define the actions or commands that should take place by defining an event handler for the event The following illustration provides an overview of the Backbase commands 2004 2006 Backbase B V All Rights Reserved 33 Backbase Manual Version 3 1 4 Figure 2 5 Backbase Commands Commands a n GUI Tree Communication Visual functionality Fast access Programming manipulation _ es _ load position backward select deselect execute copy focusitem next O O OA submit scrollto forward select deselect show hide js move focusitem previous 6 O O OA send resize maximize visible zsort trigger remove focusgroup next serversync fxtile restore visible invisible invisible assign render focusgroup previous A sort movedown moveup set focus celldown O O print addclass removeclass resync focus cellup O O tile setclass opacity alert focus 5 store
159. oduced the following axis and short cuts e is a shortcut for the preceding sibling axis e is a shortcut for the following sibling axis e object is an axis that enables you to get the values of properties of selected nodes e style is axis that enables you to get CSS properties of selected nodes The following table describes the XPath Axis Axis Name Shorthand Notation Description Syntax Examples Glia Moises Shorthand If an axis is not specified the child is used implictly Selects all or specified children of the context node child selects all the child elements the context node child p 2 selects the second p child of the context node ancestors parent grandparent and so on of the context node The closest ancestor its parent comes first in the node list parent Selects the parent of the select the Shorthand context node grandparent of the context node ancestor Selects all or specified ancestor selects all ancestors ancestor table selects all table ancestors ancestor b window 1 selects the first b window ancestor ancestor or self Selects the context node and all or specified of its ancestors parent grandparent and so on ancestor or self ancestor or self table ancestor or self b windd attribute Shorthand Selects all attributes of the context node e selects all the attributes of the context no
160. ody gt lt b navbox gt lt div gt lt br gt lt div gt lt b navbox b followstate id openclose style width 250px gt lt b navhead gt Life Is Beautiful lt b navhead gt 2004 2006 Backbase B V All Rights Reserved 103 Backbase Manual Version 3 1 4 lt b navbody gt lt p gt A Italian language film which tells the story of an Italian Jew who uses his fantastical imagination to survive a concentration camp with his young son Joshua lt p gt lt b navbody gt lt b navbox gt lt div gt 6 6 3 b observe The b observe attribute passes all events triggered on the observed element to the ob server element The value of the b observe attribute is an XPath expression targeting the observed element The observer element observes all the events of the observer ele ment For the observer element to respond to an observed element event you need to create an event and prefix the event name with observe for example b on observe command The b observe is a more generic implementation of b followstate Example 6 19 Observe lt p id observed b cursor pointer gt lt s event b on command gt lt s task b action show hide b target 2 gt lt s event gt lt div gt Click here to show and hide the lt em gt observed lt em gt element lt div gt lt div style font weight bold color 04435E gt This is the observed element lt div gt o gt lt p b observe id obse
161. ogical structure of an XML document rather than its surface syntax It models an XML document as a tree of nodes which are of different types such as element nodes attribute nodes and text nodes XPath also provides basic facilities for manipulation of strings numbers and booleans The information in this section is designed to provide an overview of the XPath Axis functions and operators supported by Backbase and provides some simple XPath ex amples For more information on XPath see the BXML Reference PDF or W3Schools XPath Tutorial http www w3schools com xpath 10 2 1 XPath Axes 2004 2006 Backbase B V All Rights Reserved 131 Backbase Manual Version 3 1 4 An axis defines a node set relative to the current node The location path consists of one or more steps each separated by a slash and can be absolute or relative An absolute location path starts with a slash and a relative location path does not For example an absolute location path step step and a relative location path is step step Each step is evaluated against the nodes in the current node set The syntax for a location step is axisnam nodetest predicate where e an axis defines the tree relationship between the selected nodes and the current node e anode test identifies a node within an axis e zero or more predicates to further refine the selected node set Next to the standard XPath axis Backbase has intr
162. omputed Style tab to view the style properties that have been computed by the client browser layout manager for the selected element to render the object These properties differ for each browser layout manager Figure 1 25 Computed Style Tab BXML Data DOM Node Name MozBackgroundInlinePolicy MozBackgroundOrigin MozBinding MozBorderLeftColors Computed Style Behaviors Variables Value gt none border continuous lt 9 Click the Behaviors tab to view the behaviors used by the selected element Figure 1 26 Behaviors Tab BXML Data DOM Node Behavior Computed Style Behaviors Variables 10 Click the Variables tab to view the variables that are defined and accessible for the selected element Figure 1 27 Variables Tab BXML Data DOM Node Global scope Name bpc_path bpc_version bpc_controlpath bpc_fxTimeout lt Computed Style Behaviors Variables A Value 3 1 1 DEV 20051205 1225 STANDALONE controls dynamic 10 v 11 Perform a search of your document by entering an XPath expression for example e Enter b box and press Search e Inthe Search Results tab click the link and switch to the HTML tab to view the HTML Data for the selected element 2004 2006 Backbase B V All Rights Reserved 22 Backbase Manual Version 3 1 4 Figure 1 28 HTML Tree Y Backbase Developer Tool X LA Search b box Search BX
163. onal purposes each navbox is a separate element that typically contains additional information loosely related to the others 2004 2006 Backbase B V All Rights Reserved 62 Backbase Manual Version 3 1 4 Figure 5 8 Backbase Navbox M System Tasks View System Tasks Add or remove programs Change a setting Other Places My Network Places My Documents Details Details My Computer Example 5 9 Creating a Navbox Control lt div style background color 3399FF width 280px padding 10px height 300px gt lt b navbox style width 250px gt lt b navhead gt System Tasks lt b navhead gt lt b navbody gt lt a gt View System Tasks lt a gt dor gt lt a gt Add or remove programs lt a gt dor gt lt a gt Change a setting lt a gt lt b navbody gt lt b navbox gt dor gt lt b navbox style width 250px b open true gt lt b navhead gt Other Places lt b navhead gt lt b navbody gt lt a gt My Network Places lt a gt dor gt lt a gt My Documents lt a gt lt br gt lt a gt Details lt a gt lt b navbody gt lt b navbox gt dor gt lt b navbox style width 250px gt lt b navhead gt Details lt b navhead gt lt b navbody gt lt a gt My Computer lt a gt lt b navbody gt lt b navbox gt lt div gt 5 4 4 Navpanel The Navpanel is a control that the user can expand or collapse by clicking the head and can be used for the main navigatio
164. ontrolpath controls backbase b skinbase none gt lt xmp b backbase true gt lt div b action alert b value You have a working Backbase installation gt Click here to see if your Backbase installation is working lt div gt lt xmp gt lt body gt lt html gt The following table describes the elements of the startup file Elements Description IDOCTYPE definition The XHTML standard defines three Document Type Definitions It is recommended that you use XHTML 1 0 Strict DTD Namespaces In the html tag enter the XHTML namespace and the BXML namespace declarations for b and s tags lt script gt In the head section of the startup file define the script to handle the variables for booting the BPC In this example the bpc is a relative path body onload bpc boot loads the BPC with a relative path to the boot js 2004 2006 Backbase B V All Rights Reserved 35 Backbase Manual Version 3 1 4 Elements Description The body tag runs the bpc boot method when the document has been loaded The method has a parameter which is used to indicate the path of the BPC b controlpath controls backbase indicates the path to the controls you want to use b skinbase the default xml file For more information see Setting the Control Path p 84 xmp The xmp tag marks the BXML space The b backbase true attribute indicates all BXM
165. ordless samurai to fight for them against a band of marauding robbers The Seven Samurai is widely regarded as one of the greatest Japanese films ever made lt p gt lt p b action show hide b target id sbox showhide a gt lt a style display none gt amp 1lt amp lt amp lt Show less lt a gt lt a gt Read more amp gt amp gt amp gt lt a gt lt p gt lt b box gt The following image shows the page in an initial state Figure 3 3 Show Hide Initial State The Seven Samurai 1954 A movie by Akira Kurosawa starring Takashi Shimura and Toshiro Mifune Read more gt gt gt In the example the following line defines a simple event handler that shows or hides the elements it targets based on the elements s current state p 103 Example 3 2 Simple Event Handler lt p b action show hide b target id sbox showhide a gt The b target uses absolute targeting to target the element whose id is sbox showhide and relative targeting to target all a link elements in the context node The b box is a custom control used for layout purposes wrapping its contents in a box and applying simple styling Figure 3 4 Show Hide Clicked State The Seven Samurai 1954 A movie by Akira Kurosawa starring Takashi Shimura and Toshiro Mifune The film takes place in war ridden 16th century Japan where a village of farmers hire seven ronin lordless samurai to fight for them against a band of maraud
166. pace p 39 3 Test your code by running the file from your file system To run the file from a web server you first need to do some configuration For more information on configuring your web server with Backbase see the Getting Started PDF in the c Backbase 3_1_4 docs directory The PDF describes how to configure the Apache and IIS web servers but you can use any web server 4 See section 2 3 Booting and Initialization for an explanation of a startup file 1 4 Developer Resources To help you get up to speed developing a Backbase application the following developer resources are available e Backbase Explorer an interactive test area with code samples you can try out and test e Starter Kits sample Backbase applications designed to help get you started developing more complex web applications e User Manual Code Samples you can cut and paste the examples provided in this manual into a startup file and test e BXML Reference detailed reference information on the Backbase b and s tags commands and events XPath and Backbase JavaScript functions is available as a PDF in the Cc Backbase 3_1_4 docs directory or as Online Help see Backbase Tools e Backbase Tools runtime developer tools and BXML reference documentation are available When you have a running Backbase application press the Esc button to display the Backbase Tools menu Figure 1 13 BXML Reference Online Help J Tools Preferences_Heln BX
167. page You include a file using the following syntax Example 3 8 Including Files lt s include b url your data file xml gt The Starter Kits located in the default installation directory C Backbase 3_1_4 starterkits demonstrate the use of s include For example the Forms starter kits starterkits forms forms html startup file has the following in cludes Example 3 9 Including Files lt s ine lude b url controls backbase default xml gt lt s include b url controls backbase b button b button xml gt lt s include b url controls backbase b window b window xml gt lt s include b url forms xml gt The first include is to default xml1 containing miscellaneous application behavior and styling for b panel and s loading The second and third include the custom control files that define behavior and styling for the button and window controls and the last in cludes is to the behavior and events used in the forms starter kit These files are loaded parsed and rendered when the application starts up 3 4 2 Load Command The load command allows you to load data from an external file and place the content of that file in a specified location The load command has the following attributes e b url contains the URL targeting the data to be included e b destination contains an XPath expression targeting the destination node where the file is loaded If the expression targets multiple
168. posal as you have in XPath You can access these variables using the Backbase _vars JavaScript variable using the following syntax _vars myvar 0 All variables are nodelists and are represented as an array of values Therefore even if the nodelist only contains one value you have to retrieve it from the array for example using 0 You can also access the current node using the _current variable in the ex ample below this is the div element For example Example 9 21 Using JavaScript Variables lt div gt lt s event b on construct gt lt s variable b name myvar b select b scope local gt CS SCHIpE lt _vars myvar 0 style backgroundColor blue _current style color white gt Sec lt s event gt This text will be white on a blue background lt div The Backbase JavaScript variables _vars and current can only be used within JavaScript you cannot use them within XPath 9 4 3 Escaping JavaScript 2004 2006 Backbase B V All Rights Reserved 129 Backbase Manual Version 3 1 4 You must always properly escape the inline JavaScript contained in the s script tag oth erwise the characters within your code causes XML parse errors It is recommended to encapasulate the script within s script tags using XML comments Example 9 22 Escaping JavaScript Using XML Comments 4s acer AMIE Add your own JavaScript gt Se Cape If your script contains XML sensitive char
169. ppears smooth and sequential A logarithmic transition b motion log on the other hand starts gradually and increases in size with each step This causes the motion to be very slow at first and very rapid at the end You can also use your own custom JavaScript function to determine how the motion occurs e b cancel Determines what happens when two contradictory effects are activated at the same time For example imagine that a button has an event handler for a mouseenter event which starts a color transition If the same button has another event handler for a mouseleave event which starts an opposing color transition then you can have two conflicting transitions if the user moves the mouse cursor enters and leaves the button quickly By default b cancel is true the first transition is immediately aborted when the second transition is triggered If the b cancel is set to falsefalse then the first transition is allowed to complete before the second transition is started 6 8 Capturing Browser History and Bookmarking In a Multi Page Interface MPI web site each page has a unique URL These URLs can be used to bookmark your location and the browsing history is just a list of those URLs in the order you visit them An AJAX application uses a Single Page Interface SPI that has a single URL contents are dynamically included into the same page making it difficult for the user to bookmark a specific location Bookmarks are based on a page
170. preceding sibling Start from context node self and retrieve the second sibling before the context node id mylayer 2 unique id second sibling with the same element type Start from the unique ID element and attempt to find the second sibling of the same type as the element with the unique ID For example if mylayer is a div it returns the second sibling div element selas ALVIZ self parent parent named child div elements select second child Start from the context node self walk up through two parents match all div elements and select the second child element in the div elements id mainlayer div b state selecte Hu ique id children that are div elements where attribute b state is selected Start from the unique ID element and return all child elements of type div where the attribute b state is set to selected id mainlayer div b state selected b behavior button and unique id children that are div elements where attribute b state is selected and attribute b behavior is button Start from an the unique ID element and return all div child elements where the attribute b state is set to selected and the attribute b behavior is set to button id mainlayer div b state selecte and b behavior Vist inique id children that are div elements where attribute b state is 2004 2006 Backbase B V All Rights Reserved 136 Backbase M
171. previous next setstruct blur setstatus settitle formxml oR A show hide transform A A Legend settext xsl transform O Indicates commands that can also target elements in HTML space string2xml A Indicates commands z that can also target elements gt in XML space A xml2string bxml2string html2string In Backbase you can attach an event to any element in the UI You then create an event handler to determine what takes places when the event is triggered for example what should happen when a user clicks on a link An event handler is a container for executing commands The event handler handles the event by executing a command or series of commands 4 For more information on event handling see Defining Event Handlers p 87 There are also widget specific commands bufferdirty datepicker and setpanelset 2004 2006 Backbase B V All Rights Reserved 34 Backbase Manual Version 3 1 4 2 2 Backbase Presentation Client The Backbase Presentation Client is a robust and generic GUI rendering engine which provides a declarative client side runtime for developing AJAX Rich Internet Applications The BPC operates in all main browsers is ultra light and is fully compatible with Web Standards like XHTML CSS JavaScript XML and XPath this set of technologies is com monly referred to as AJAX The Backbase Presentation Client runs in most browsers Once activated within the web browser the BP
172. r XPath variable used to test what XML parser the browser supports and depending on the result loads the respective XSLT and puts the resulting string into the xsit variable e Task commands the last defines commands to e Load the datasource films xmi and put the resulting String into the sdata variable Convert the xsit variable from a String to XML Convert the data variable from a String to XML Transform the contents of the data variable using the xs1t variable and moved to a specific destination target in the application in this example the context node Because the result of a load command is a String you have to convert the String to XML to make an XML document that the browser can use for templating For better performance it can be useful to set the String in the HTML space instead of the BXML space To do this in the above example uncomment the s variable b name string b scope global declaration and the s task b action set b target innerHTML b value string The xsl transform then needs to put the result of the transformation into the global variable b destination S string which is used by the set action to push the result into the HTML space The following is the table xslt stylesheet used in the example above for an XSLT 1 0 compliant browser to transform the data Example 8 8 table xsit lt xml version 1 0 encoding UTF 8 gt lt xsl stylesheet version 1 0 b name stylesheet
173. r modal box would be rendered according to the specific CSS p modal class properties Some widgets require a default skin which contains the basic style and behavior definitions These widgets are the slider the datepicker the modal dialog the infobox and the tooltip 7 3 User Defined Attributes BXML is an XML based language which means that you can add your own attributes to elements defined within a unique namespace In the following example the b tree con trol has custom attributes defined in the c namespace You must then remember to in clude a namespace declaration in your document for example xm lns c http www mysite com c As with any other attribute you can target these elements using XPath and read out their values In the example clicking the tree node triggers an event handler defined within a behavior in which the following tasks are defined e The first task is a load command the url attribute uses curly brackets to indic ate to the BPC to resolve the XPath expression and return the result as a String In this case it targets the custom attribute c myur1 and returns the value data xml The b destination indicates where the contents of the file are loaded it resolves the value of the custom attribute c mytarget which itself contains an XPath ex pression targeting the element whose id is welcome and selects the h2 child ele ment of this element e The second task is an s render that adds a te
174. ren of the element s box receive Takes place when an element receives an element as a result of a copy move or render actions resizewindow Takes place when the browser window is resized triggered on the body tag rmbclick Takes place when a user clicks an element with the right mouse button rmbdown Takes place when an element receives the right mouse button pressed down input rmbup Takes place when an element received the right mouse button unpressed input Note You must set the b bubble attribute to false on the body tag disactivate the standard browser pop up menus 2004 2006 Backbase B V All Rights Reserved 90 Backbase Manual Version 3 1 4 Event Description scrollwindow Takes place when the browser window is scrolled slide Takes place when the user moves the thumb of a slider control Event bubbling ensures that events are passed to parent elements Event bubbling only applies to input events For more information see Event Bubbling p 104 6 1 4 System Events The following table describes the system events you can use in Backbase Event Description close Takes place when a node a b treelistrow in a treelist is closed construct Takes place when the system is done with parsing an element deselect Takes place when an element is deselected disable Takes place when an element is disabled an element once d
175. rols 7 3 User Defined Attributes Chapter 8 Defining Data Bindings 8 1 Templating 8 2 Browser Templating 8 3 Table Sorting 2004 2006 Backbase B V All Rights Reserved 13 14 18 29 34 35 37 38 41 43 45 51 53 54 55 57 57 60 68 71 74 78 81 83 83 85 86 87 91 92 94 99 102 105 106 109 110 112 114 117 119 Backbase Manual Version 3 1 4 Chapter 9 Client Side Data and Business Logic 9 1 Defining Task Execution 9 2 Client Side Validation 9 3 Defining Variables 9 4 Using JavaScript Chapter 10 Appendix 10 1 Performance Tuning 10 2 XPath 2 10 3 Browser Compatibility 2004 2006 Backbase B V All Rights Reserved 122 122 124 128 131 131 137 Backbase Manual Version 3 1 4 Chapter 1 Introduction 1 1 Backbase Rich Internet Applications The objective of Backbase software is to enable web developers to create Rich Internet Application RIA In an RIA the processing is done client side allowing you to build dy namic interactive web sites that behave more like a desktop application than a tradition al web application To create an RIA you therefore need a solution that deals with browser limitations and the limitations of HTML interactive dynamic and customizable web applications require features that HTML and the browser platform do not support such as being able to drag and drop elements Backbase provides the following solution to address these limitations
176. ronous Execution lt s behavior b name diveffect gt lt s event b on select gt lt s fxstyle b background color ffff00 b time 5000 b async true gt lt s fxstyle b width 50px b height 50px gt lt s fxstyle b left 50px gt lt s fxstyle b left 50px gt lt s event gt lt s event b on deselect gt lt s fxstyle b width 50px b height 50px gt lt s fxstyle b left 50px gt lt s fxstyle b left 50px gt lt s event gt lt s behavior gt lt p gt lt a b action select b target id changingdiv gt Click Here to Start lt a gt lt p gt lt div gt lt div style position relative background color 0000ff height 50px width 50px b behavior diveffect id changingdiv gt lt div gt lt p gt lt a b action deselect b target id changingdiv gt Click Here to End lt a gt 16 lt div gt When you click the link Click Here To Start the select command is triggered on the 2004 2006 Backbase B V All Rights Reserved DL Backbase Manual Version 3 1 4 div element id changingdiv which in turn triggers the event handler defined in the behavior The select event handler asynchronously changes color the s fxstyle has the b async true attribute and the other xstyles to change size and position each execute synchronously The effect is that the element s background color is changing even while it is being resized and move
177. rresponds to the CSS active and mousedown event e b disabled the style class to use when the element is disabled For example you can assign CSS classes to each state of the element to change the look amp feel of an element as follows Example 7 1 Defining State Behaviors lt div b behavior statebehavior gt Click or hover here to see the lt code gt s state lt code gt Caginactione HE lt s behavior b name statebehavior gt lt s state b on deselect b normal sb b hover sb sb hover b press sb sb press gt lt s state b on select b normal sb sb selected b hover sb sb selected sb hover b press sb sb selected sb press gt lt s event b on command b action select deselect gt lt s behavior gt lt style type text css gt 85 border 2px solid 889 padding 3em cursor pointer sb hover background red sb selected background blue color white sb press background yellow lt style gt The CSS classes that are applied to an element using the s state tag are concatenated to existing classes applied to an element 7 1 2 Inheriting Behaviors A behavior can inherit a behavior that has an event handler defined for the same event The event after the s super tag is only processed after the execution of the inherited be havior In the following example the behavior called movedown defines an event handler for 2004 2006 Backbase B V All Rights Reserved 109
178. rved b cursor pointer gt lt s event b on observe command gt lt s task b action show hide b target 2 gt lt s event gt lt div gt The lt em gt Observing lt em gt element mimics the behavior of the observed element lt div gt lt div style font weight bold color CE0000 gt Observing Element lt div gt lt p gt 6 6 4 b eventblock Setting the b eventblock attribute to true on an element disables all user input events on it and its children You can use the b eventblock attribute to create modal dialogs where only the modal dialog responds to user input You can overrule the eventblock by using the blocked mousedown event Example 6 20 Blocking Events lt div b eventblock true gt lt s event b on blocked mousedown b action alert b value Please Close the Dialog gt lt a gt Click me lt a gt lt die 6 6 5 Event Bubbling Event bubbling ensures that when an event is triggered that the event is passed to par ent elements For example when you click a button the click event is triggered If an event handler is defined for that element for the click event it is triggered The click event then bubbles through the object hierarchy until it reaches the top most level the document object and triggers all event handlers defined for the click event unless you set a attribute b bubble false In the following example an b on click event handler is defined within the d
179. rved 74 Backbase Manual Version 3 1 4 Figure 1 3 Resizing e gt aB Test Equipment Finds Life In Mars like Conditions Thursday 6 October 2005 Read full article DIY News writes In a test of equipment that might one day be used to search for biological activity on Mars researchers discovered life tucked deep inside a frozen Norwegian volcano a test region said to have geology similar to that of Mars The test instruments discovered a rare and complex microbial community living in blue ice vents inside a frozen volcano which is the kind of evidence scientists have been searching for on the Red 3M has first Grid and Grow app partners Another important element of Layout are Controls To get an idea of these controls look at the examples in the Backbase Explorer The Explorer is available on the web site www backbase com or in your Backbase installation directory It features all the Back base out of the box controls such as the following form elements tabs toolbar and search box with button used in the RSS Reader example 2004 2006 Backbase B V All Rights Reserved 8 Backbase Manual Version 3 1 4 Slashdot Figure 1 4 Control Features Results Advanced Saved j FE Live Archive Full text search and ji Title search and Author a gt amp Date 2days M O From Tmo _ ES Source C Al Sources Backbase Forum Slashdot Infoworld Ajaxian Or
180. s and b namespaces in the root element even if the file does not currently use any of these elements in case these elements are added later Note that in Firefox the BPC adds BXML namespaces to the XML even if they are not declared However in Internet Explorer the namespaces are not added therefore not declaring the namespaces causes the load to fail The server can respond with data as with the example above or with an instruction set by defining the s execute tag as the root tag of your reponse file s execute instructs the BPC to see the loaded file as an instruction set instead of a static data file giving you complete control over what needs to happen when the file is loaded For example when a form is submitted you often want to leave the interface as it is and 2004 2006 Backbase B V All Rights Reserved 47 Backbase Manual Version 3 1 4 inform the user using for example a modal dialog whether the form was successfully submitted By defining a modal dialog in the response that is sent information is not lost and the user can correct errors in the form The following provides an example of defin ing a response file using s execute the response is rendered as the last child in the body element Example 3 15 Response File Using s execute lt s execute xmlns s http www backbase com s xmlns b http www backbase com b xmlns http www w3 org 1999 xhtm1 gt lt s render b destination b mode asl
181. s and columns The b listgrid has child elements b listgridhead and b listgridbody and have b datatypes The b datagridhead defines the head and contains a b datagridrow in which the head er for each column is defined using a b listgridheadcell element The b listgridbody defines the body element The content of the lt b listgridbody gt is an HTML table that must be dynamically loaded into the body using the b ur1 attrib ute You can specify the following for the b ur1 attribute e An XML file that contains raw XML that is transformed using one of the XSLTs defined in the attributes b template or b template ies e An XML file that contains an HTML table body attributes and children e Any other file type such as PHP or ASP that contains and returns raw XML The XML is transformed using one of the XSLTs defined in the attributes b template or b template ies The b listgrid can also have b datatypes child elements that defines a form element that is applied in the cell of a table Basically you can define any HTML or BXML form ele ment that fits within a cell such as a select box text input type b spinner or b datepicker Figure 5 33 Backbase Listgrid M at m Spinner Text Numbers a gt 1 Roger 2 Terry Ss g Q In the following example the b ur1 specifies an XML file containing raw XML and uses the XSLTs in the b template and b template ie5 to transform the data
182. s lock tag is used for thread locking to prevent two events executing simultan eously forcing the events to execute sequentially You can lock any element in the docu ment tree using the b target attribute The example below demonstrates the principles behind locking and the Asynchronous Command Execution for event execution The following list describes the elements defined in the example below e s behavior the 1ock move behavior contains two event handlers one to handle the moverright event and the other on the moveleft event The moveright event handler has a lock that uses relative XPath targeting to target an element e XHTML link elements the first a tag contains a b action trigger command that is used to trigger the moveright event The b target table 1 tbody tr is an XPath expression that targets starting from the context node the a element the first sibling element that a table element and selects all the table row elements in the table body e XHTML table elements the first table contains four rows and each row uses the lock move behavior The second table is at start up an empty table that is the destination target of the moveright event Example 4 5 Locking lt s behavior b name lock move gt lt s event b on moveright gt lt s lock b target gt lt s task b action move b source b destination table 1 tbody b mode aslastchild gt lt s fxstyle b cancel fals
183. sibling div element and its children Clicking the link triggers a set command that tar gets the variable specifically a text value of a child node It results in the node set being updated with the value Example 9 6 Variables Are By Reference lt div gt lt s event b on construct gt lt s variable b name byreference b select following sibling div 1 b scope global gt lt s event gt 2004 2006 Backbase B V All Rights Reserved 124 Backbase Manual Version 3 1 4 he lt div gt Backbase lt div gt Rich lt div gt Internet lt div gt Applications lt div gt Gave lt div gt L CnN lt a b action set b target Sbyreference div div text b value RIA gt Click here to see the node set updated lt a gt Global variable names must be unique within the context of the entire application and local and tag variable names must be unique within the context of the element in which they are defined Conflicts between variable names defined using different scopes are resolved in the order of importance tag local global 9 3 1 Global Variables Global variables are available within the scope of your entire application In the following example you declare a global variable within the link element command event handler Example 9 7 Declaring a Global Variable lt a gt lt s event b on command gt lt s variable b name test_global b select Hello World b scope global g
184. sition absolute width 250p height 200px tops 5px Terc 9 Ops ne lt b windowhead gt Seven Sumarai lt b windowhead gt lt b windowbody gt lt p gt The film takes place in war ridden 16th century Japan where a village of farmers look for ways to ward off a band of marauding robbers lt p gt lt b windowbody gt lt b window gt lt b windowarea gt lt b panel gt lt b panel gt lt b taskbar gt h StesthutronsEe lt b taskbar gt lt b panel gt lt b panelset gt 5 4 8 Toolbar The Toolbar control is used to present a navigation bar that can contain images buttons and selectors such as spinner and select box The elements that are placed in the but tonbar are only limited in height The buttonbar occupies the full width of an area Figure 5 13 Backbase Toolbar Toolbar Et iff a In the following example when the page is constructed the items in the toolbar are cre ated using default images that are available in your Backbase controls directory the XPath concat function is used to find the images relative to the b controlpath set on the body tag Example 5 15 Creating a Toolbar Control lt xmp b backbase true b controlpath controls backbase gt lt div gt lt h1 gt Toolbar lt h1 gt lt b toolbar gt lt b toolbaritem gt lt img alt style height 14px width 26px gt lt s event b on construct b target src b action set b value concat bpc_controlpath
185. t lt s event gt Click this link to create a global variable lt a gt When you have declared the variable you can access from anywhere in your application as follows Example 9 8 Getting a Global Variable lt a b action alert b value test_global gt Click here to see the value contained in the variable lt a gt You can assign a new value to a global variable using the assign command as follows Example 9 9 Assigning a New Value to a Variable lt a b action assign b target Stest_global b select Hello Mum gt Click here to assign a new value to the variable lt a gt 9 3 2 Local Variables A local variable is available within the scope of the element in which is triggered and is passed automatically along with any event calls within the event handler In this way local variables allows you to pass parameters from one behavior or event handler to an other As a local variable is local to the current processing thread when you trigger an other event in your application within the context in which the variable was created the local variable will also be available in the called event A local variable is cleared from memory when the original execution thread ends The following example contains two link elements the first link element has a mouseenter event handler that declares a local variable and triggers a command action in the second link the local variable is passed on to the second lin
186. t WEATHER You have 6 unread emails Amsterdam The Netherlands Today gt Reminders Aii Sunny clear sides Finish portal design M 1 l 26 C Make demo icons 2 A Buy tolet paper ryt Tomorrow Sunny some douds News HEADLINES BR 522 jax and Baron 2004 2006 Backbase B V All Rights Reserved Search the internet Go INFORMATION This window can be used for all kinds of things You can drag me around too 16 Backbase Manual Version 3 1 4 Figure 1 17 Petshop Starter Kit Pet Shop CG DOGS Select an animal v Sort by name Sort by price Powered by BACKRASE 1 4 2 Backbase Explorer MISTORY T CART Items LE Sub Total Produet Qty Pace D REMOVE 1 CHECKOUT The Backbase Explorer shows samples of the concepts explained in the Backbase User Manual The structure of the explorer is identical to that of this manual so you can easily cross reference the resources The explorer is an interactive user interface where you can view and try out sample code and add your own code You can access the Backbase Ex plorer from the following URL http www backbase com demos explorer The Backbase Explorer is also delivered as part of your Backbase installation in your Backbase 3_1_4 explorer directory 2004 2006 Backbase B V All Rights Reserved 17 Backbase Manual Version 3 1 4 Figure 1 18 Backbase Explorer Backbase Explorer E a
187. t Movie lt th gt lt th gt Genre lt th gt EP ETS lt thead gt lt tbody gt lt tr gt lt td gt The Seven Samurai lt td gt lt td gt Drama lt td gt lt cite gt ena lt td gt The Godfather lt td gt lt td gt Crime lt td gt ice lt tbody gt lt table gt Is received on the server as Example 3 19 XML that is sent to the server lt b backbase gt lt tr gt lt td gt The Seven Samurai lt td gt lt td gt Drama lt td gt Ej ES lt ET gt lt td gt The Godfather lt td gt 2004 2006 Backbase B V All Rights Reserved 49 Backbase Manual Version 3 1 4 lt td gt Crime lt td gt ire lt b backbase gt 2004 2006 Backbase B V All Rights Reserved 50 Backbase Manual Version 3 1 4 Chapter 4 Asynchronous Execution 4 1 Asynchronous Execution Events add interactivity to your SPI when the user does something an event takes place although there are also some events that are not directly caused by the user for ex ample the construct event fires when a page has been constructed In Backbase you can attach an event to any element in the UI You must then create an event handler to determine what takes place when the event is triggered An event handler is a container for executing commands It handles the event by executing a command or series of commands A Backbase application uses the Asynchronous Execution system each event that is triggered is executed asynchro
188. tate after the button has been pressed Figure 1 9 State Change E http www backbase com demos RSS aid 70473 2 E http www backbase com demos RSS aid 70 156 3 Slashdot One moment please Slashdot p Live Archive Live Archive Friday 7 October Friday 7 October 15 03 MySQL To Be ikea Of The Database M 15 03 MySQL To Be ikea Of The Database M 14 17 Firefox 1 5 Beta 2 Released 14 17 Firefox 1 5 Beta 2 Released 11 18 Mandriva Linux 2006 Released 11 18 Mandriva Linux 2006 Released 8 35 Court Rules in Favor of Anonymous B 8 35 Court Rules in Favor of Anonymous B o aS 5 me Firefox 1 5 Beta 2 Rel Mandriva Linux 2006 f Friday 7 October 2005 Fridsy 7 October 2005 Read full article Read full article In the initial state you see that the article is selected in the article list This is because the state of the article is selected which has a different style applied a light blue back ground When the button is pressed the following happens The new article is loaded in the article pane The state of the old article is set to deselected and becomes red The state of the new article is set to selected and it gets the blue background The URL is updated with a new Article identifier and a new history index Therefore the individual actions are triggering responses in different parts of the application using the shared functionality from the Foundation and the Application Layers Data Layer The RSS Rea
189. te functionality for reuse and to sep arate the structure of the document from the behavior You can use behaviors to do the following e Define the visual representation of an element when in one of its base states selected or deselected using the s state tags e Define the instructions tasks and commands that are executed when an event takes place using the s event tag For more information on events see Defining Event Handlers p 87 Define the keys that active within an element s whenactive Set the initial attributes for an element using s initatt In BXML you define a behavior using the s behavior tag The name of the behavior for example s behavior b name mybutton iS used to assign the behavior to a UI ele ment for example b button b behavior mybutton Behaviors can inherit from other behaviors allowing you to create a hierarchy of frequently used events and commands 7 1 1 Responding to State Changes CSS You can use behaviors to define the visual representation of an element when in one of its base states selected or deselected When in either of the states you can specify with a CSS class how the element appears during the following mouse states e b normal the style class to use when the element is in its base state e b hover the style class to use when the mouse hovers over the element corresponds to CSS hover and mouseover event e b press the style class to use when the element is being pressed co
190. ted by this issue forgetting one div may still results in a full performance hit e Use a small JavaScript file bpc js for optimizing resources For more information see Preloading JavaScript p 10 1 1 Preloading JavaScript The Backbase JavaScript libraries include a small JavaScript file bpc 4s that you can use for optimizing resources when placing links to Backbase Startup Files in normal HTML Web Pages The bpc js file partially loads the BPC when the web browser is using less system resources The moment the user clicks the link that loads the Backbase Startup File most of the resources are already loaded therefore improving the speed of page download This causes a significant part of the libraries to be already cached when loading the next page improving the download performance Example 10 1 lt xmldecl version 1 0 encoding UTF 8 gt lt doctype gt lt html xmlns http www w3 org 1999 xhtml xmlns b http www backbase com b xmlns s http www backbase com s gt lt head gt lt title gt Traditional HTML Page lt title gt lt script type text javascript src 3_1_4 bpc bpc js gt lt script gt lt head gt lt body gt lt hl gt Traditional HTML Page lt h1 gt lt p gt For more information please consult the Backbase DevNet on our web site lt p gt lt body gt lt html gt 10 2 XPath 2 XPath is a language for addressing parts of an XML document which operates on the ab stract l
191. tes that you can use the same tag variable name within 2004 2006 Backbase B V All Rights Reserved 126 Backbase Manual Version 3 1 4 different elements Example 9 14 Using Same Tag Names lt s behavior b name x gt lt s event b on construct gt lt s variable b name tag b select b scope tag gt lt s event gt lt s behavior gt lt div id divl b behavior x gt Backbase lt div id div2 b behavior x gt Rich lt div id div3 b behavior x gt Internet lt div id div4 b behavior x gt Applications lt div gt SON lt div gt a eln lt a b action alert lt a b action alert lt a b action alert lt a b action alert divl tag gt Get 1 lt a gt Deya h s cer Cer 2e e gt div3 Stag gt Get 3 lt a gt div4 Stag gt Get 4 lt a gt value id value id value id value id 9 3 4 Using Variables for Transformations Variables are also particularly useful for performing transformations BXML is an XML based language therefore you can load XML into variables and then manipulate the con tent by performing actions such as remove and set In the following example you load the XML from an external file into a variable convert the contents to XML remove all lt genre gt elements and set the text of one of the elements At each stage an alert box shows you the result Example 9 15 Performing Transformations lt div gt Click here to see transformatio
192. the tasklist from an event or by using the execute command e You call a tasklist from an event handler using the syntax b on lt EventName gt lt myTaskListName gt e You call the tasklist using the execute command use the b tasklist attribute to specify the name of the tasklist to execute lt code gt b action execute b tasklist taskListName lt code gt The name of a tasklist should be unique If multiple tasklists with the same name exist the last defined tasklist is executed For example Example 9 2 Defining Tasklists lt input type text b oninvalid dob_invalid gt lt s tasklist b name dob_invalid gt lt s task b action show b target id dob_invalid_msg gt lt s task b action hide b target id dob_required_msg gt Rais tasse 9 2 Client Side Validation The validation requirements of an application are specific for each application Backbase provides a generic solution for standard form and field validation and provides a custom validation file for the most frequently occuring field constraints e Default Validation Behavior Backbase provides default validation behavior to validate forms and fields in the default xm1 file located in your Backbase installation Backbase 3_1_4 controls directory e Custom Validations the forms xm1 located in your Backbase installation C Backbase 3_1_4 backbase controls directory contains a BXML field validation library you can use directly
193. the tasks it contains are added to the browser history list resulting in a updated URL containing the fragment identifier for example 0 1 and so on every new history item increments the number Bookmarking in an SPI application requires you to identify state changes in your AJAX site to locate the best positions to add history items You can then create bookmarks by adding a b bookmark attribute to the s history tag For example Example 6 25 Bookmarking lt s history b name browser b bookmark id gt lt s task b action select gt lt s history gt The contents of the b bookmark attribute are used for the bookmark part of the URL The attribute can contain a String but usually it is an XPath expression For example b bookmark id uses XPath to take the ID from the element the s history tag has been applied to You can construct more advanced bookmarks using the concat XPath function In the following example you can bookmark each tab in the tabbox When you click the tabs note that the URL changes for example SevenSamurai 2 allowing you to bookmark it Each tab uses a behavior called history When a tab is selected the s history tag creates a new history item for the tab using the id attribute to bookmark the tab The b name browser attribute enables the user to navigate back and forward using the browser history buttons The b on construct event is triggered when the application is re loa
194. tion b value 6 gt Poland lt b option gt lt b option b value 7 gt Sweden lt b option gt lt b option b value 8 gt Denmark lt b option gt lt b option b value 9 gt Netherlands lt b option gt lt b option b value 10 gt Belgium lt b option gt lt b select gt ORO Om Om Om Om Ono Mm Omar 5 7 5 Slider The slider control is a horizontal or vertical gauge that the user can slide within a defined range The range is defined using the attributes b start and b end and the attributes You can give the range a b step value defining increments and decrements You can handle the change in the slider using the slide event Example 5 29 Creating a Slider Control lt div style height 100 gt lt input type text b connect id sliderl value gt lt b slider id sliderl b orientation horizontal b start 1 b end 10 value 5 gt lt div You can set your own image for the control using s gfxset For more information see the BXML Reference Manual 5 7 6 Spinner The spinner control displays up and down arrows to allow the user to navigate through the values in a value list usually numbers If the cursor is in the input field you can also change the value by pressing the up down arrow key You can specify the attributes b start b value b step b end to specify respectively and b style 2004 2006 Backbase B V All Rights Reserved 77 Backbase Manual Version 3 1 4 Figure 5 29
195. to an element using the syntax lt tr b behavior fx color gt When a mouseenter event takes place the background color of the element gradually changes to the color 7d8fce over the course of 250 milliseconds When a mouseleave event takes place the background color of the element gradually changes to the color 7d8fce over the course of 1000 milliseconds Example 6 23 Defining Color Transitions lt s behavior b name fx color gt lt s event b on mouseenter gt lt s fxstyle b background color 7d8fce b time 250 gt lt s event gt lt s event b on mouseleave gt lt s fxstyle b background color ffffff b time 1000 gt lt s event gt lt s behavior gt 6 7 2 Controlling Transitions You can specify the following attributes to control a transition effect e b time Indicates in milliseconds how long an effect takes to complete Depending on the amount of time given the transition will be completed in more or less steps The number of steps it takes to complete the transition is not solely determined by the amount of time given however it is also determined by the processor speed of the machine which runs the browser that is performing the transition The faster the machine the smoother the transition will appear e b motion Determines how the individual steps of the transition relate to one another In a linear transition b motion linear all steps of the transition are of equal size so the motion a
196. to virtually any XHTML tag or B tag When you move your mouse to the edges of an element with the b resize attribute ad ded the cursor changes into a resize cursor to indicate the element is resizable Hold your mouse button down and move it in the desired direction to resize the element As it is not always desirable for an element to be unlimitedly resizable you can set the b minwidth and b minheight attributes to set the minimum width and height of an ele ment in pixels for example 200px The value of the b resize attribute indicates the directions in which you can resize the element all top bottom left and right side nw top and left side only n top side only ne top and right side only e right side only se bottom and right side only s bottom side only sw bottom and left side only 2004 2006 Backbase B V All Rights Reserved 101 Backbase Manual Version 3 1 4 e w left side only e horizontal left and right side only e vertical top and bottom side only The code below shows examples of resizable objects Try also setting the attribute b resizemode to the values line outline Or real Example 6 16 Resizing Elements lt div b resize all class MyClass gt You can resize this border amp lt div gt IN ALL DIRECTIONS lt div gt lt div b resize vertical b minheight 200px class MyClass gt You can resize this border amp lt div gt VERTICALLY lt div gt lt div b resize hori
197. tribute to make it possible to force a reload of a specific page e Implement the server side business logic that extracts the records from a data set and splits the records into pages This requires the synchronization of the client server control interaction and the implementation differs depending on your back end environment e Backbase Net Server and Backbase Java Server synchronization with the server is handled automatically See the relevant server documentation e PHP JSP or ASP synchronization with standard back ends is handled using the b url attribute and by concatenating the attribute values that are attached as a query string to the url 4 The control paging attributes only define what the control wants to receive you must implement what it actually receives on the server side implementation In other words the control renders all the data it receives from the server 5 9 2 Lazy Loading Controls such as b tree and b tabbox support lazy loading In other words the content is not loaded before the user actually needs it To implement lazy loading you need to use the b url and the populate event The b url attribute is used to send data to the server The attribute values are concatenated and attached as a query string to the url A b dirty attribute is used to mark an element for reloading When the b dirty attribute is set to false on an element the element is not reloaded directly but only when the in form
198. tributes are used to describe UI components data structures behavi ors event handling and command execution BXML stands for Backbase eXtensible Markup Language and it is a valid XML application BXML uses two namespaces indic ated by b and s The B tags are usually visible to the end users for example b window defines a control and S tags are system tags that are not visible for example s task The BPC is the client side runtime engine that interprets BXML tags and renders the res ult in the browser window The BPC is a JavaScript application that is loaded automatic ally in the browser completely transparent to the end user Once activated the BPC translates the BXML at runtime into a standard DOM tree the DOM tree is the browser s internal representation of a web page that is rendered by the browser Because BPC and BXML are based on native browser technology existing DHTML technologies XHTML JS CSS remain fully functional within BXML pages You can also freely mix BXML with XHTML and CSS 1 2 2 Functional Overview The following illustration provides an overview of the various layers in the Backbase soft ware and their subcomponents Figure 1 1 Backbase Framework Backbase Framework Components Layer Layout User Defined Backbase i i Rich Patterns Controls Controls skins Multimedia Forms Application layer Drag and l Data Focus State Drop Resize Binding Templating Tools Back i i i Effects uaa Bookmark Styling
199. ts are used for example a smooth opening of the search window An animation can not easily be captured in a screenshot but the following illustration gives you an impres sion of what happens when you press the close button the search pane slides away while the article columns gradually expand Figure 1 7 Animations and Effects 4 BACKBASE AJAX RSS Reader Download About Loo tC SY Sai Advanced Advanced Saved Infoworld A and and O From To Fj All Sources Backbase Forum Slashdot Infoworld Ajaxian date v O ascending descending Live Archive z A Thursday 6 October aa Thi 2 02 Motorola confirms 9 layoff of 1 900 employees Wednesday 5 October F 7 1 33 Windows XP SP3 preview surfaces on Ge Web z 23 59 Oracle finds supply 4 chain niche for i PeopleSoft lt VhAA Minn CEO anllis far About the Backbas This RSS reader is a prototype appl download the source code ofthis ar Obviously functionality must be able to work together Navigating between messages is a good example On the toolbar you find a newer article and older article buttons 2004 2006 Backbase B V All Rights Reserved 10 Backbase Manual Version 3 1 4 Figure 1 8 Newer and Older Article Naivigation Buttons a E une When you click on the older post button on the left you see the initial state and on the right the s
200. u can also reuse your existing JavaScript code The Components Layer is the most visible part of user interfaces It contains the Layout Manager Backbase Controls user defined controls and Rich Form Controls The Layout provides the overall layout of the page panels and windows Backbase Controls are the interactive elements in an interface that combine styling and behavior for example a listview sortable table combobox or slider You can extend the Backbase Controls De velopers can also create their own controls or reuse controls made by others These are known as User Defined Controls A special type of control are the Form Controls which provide support for conditional form input validation and so on You can also multimedia elements such as Flash Java and other media types that use plug ins The Application Layer contains commonly used functionality for creating user inter faces For example the Focus Model is implemented in Backbase Controls to make the user interface navigable using the keyboard For native web browser controls the browser manages focus but for DHTML controls focus needs to be managed separately This is the role of the Focus Engine This layer also contains functionality for effects animations drag and drop resizing and form validation Linking up with the browser backwards and forwards button and bookmarking is also supported features are nor mally labor intensive to implement The color scheme and st
201. uential Processing lt s event b on select gt lt s fxstyle b font size 20px gt lt s fxstyle b color 33FF33 gt lt s event gt You can also implicitly execute s fxstyle commands in parallel by defining multiple styles in a single s fxstyle tag in which case all the style transitions are animated in parallel For example Example 4 3 Multiple Inline Style Effects lt s event b on select gt lt s fxstyle b font size 20px b color 33FF33 gt lt s event gt You can explicitly control whether s fxstyle and s task tags are executed in parallel or sequentially by grouping them between s sequential Or s parallel tags In the fol lowing example the first transitions for changing the font size and color change in paral lel and when completed the font size and the color return to their original values se quentially Example 4 4 Sequential and Parallel Processing lt s event b on command gt lt s parallel gt lt s fxstyle b font size 20px gt lt s fxstyle b color f 0000 gt lt s parallel gt lt s sequential gt lt s fxstyle b font size 12px gt lt s fxstyle b color 0000ff gt lt s sequential gt lt s event gt Note Since sequential is the default behavior you can omit the s seqential tags from 2004 2006 Backbase B V All Rights Reserved 52 Backbase Manual Version 3 1 4 the s fxstyle tags 4 2 Locking For Explicit Synchronization The
202. usgroup and focusitem elements to allow you to navigate forwards and backwards through these elements implemented using commands Command Default Key focusitem next Arrow Keys right and down 2004 2006 Backbase B V All Rights Reserved 94 Backbase Manual Version 3 1 4 Command Default Key focusitem previous Arrow Keys left and up focusgroup next tab focusgroup previous shift tab focusroot next ctrl right focusroot previous ctrl down focus celldown Table command to focus the same column in the next row no default focus cellup Table command to focus the same column in the previous row no default Note Focus commands do not trigger events of the same name The following example demonstrates visually the focus model The focus model elements change color to indicate the state changes that are triggered as you navigate through the elements Example 6 10 Focus Model lt s behavior b name focusobject gt lt s event b on construct gt lt s setstyle b padding 10px b background color 0099FF gt lt purple lt s event gt lt s event b on active gt lt s setstyle b background color 00D856 gt lt green gt lt s event gt lt s event b on inactive gt lt s setstyle b background color D85500 gt asec gt lt s event gt lt s event b on focus gt lt s setstyle b background color white gt lt s
203. vel of the same name see The Godfather novel written by Mario Puzo directed by Francis Ford Coppola and starring Marlon Brando and Al Pacino System Skin The Godfather 1972 The Godfather is a film adaptation of the novel of the same name see The Godfather novel written by Mario Puzo directed by Francis Ford Coppola and staming Maron Brando and Al Pacino Clase the Modal The styling applies to Backbase controls styles the components of your web application not the entire web application 5 11 1 Setting the Control Path You must set the b controlpath attribute on the body tag to indicate the user interface controls you want to use By default if you do not specify the b controlpath the con trols contained in the 3_1_4 controls dynamic folder are used In a default installa tion the dynamic folder contains controls with Backbase skinning applied Set the b controlpath using a relative path to the controls directory for example 2004 2006 Backbase B V All Rights Reserved 84 Backbase Manual Version 3 1 4 Example 5 36 Controlpath lt body onload bpc boot b controlpath controls backbase b skinbase none gt You should copy and paste the controls you want to use automatically in your application into the folder specified by the b controlpath You can also remove controls that you are not using to improve performance and you can also mix the styling used for different co
204. vent handler for the custom event is defined in a behavior that results in an alert dialog box appearing when the event is triggered Example 6 7 Custom Events lt s behavior b name write gt lt s event b on press_a_key gt lt s task b action alert b value A is hot key gt lt s event gt lt s event b on press c key gt lt s task b action alert b value C is hot key gt lt s event gt lt s event b on press_f_key gt lt s task b action alert b value F is hot key gt lt s event gt lt s event b on press_g_key gt lt s task b action alert b value G is hot key gt lt s event gt 2004 2006 Backbase B V All Rights Reserved 88 Backbase Manual Version 3 1 4 lt s whenactive gt lt s keys b keys a lt s keys b keys c lt s keys b keys f lt s keys b keys g lt s whenactive gt lt s behavior gt lt div style position lt textarea style width keys lt textarea gt lt div gt action trigger saction trigger saction trigger action trigger 300px height absolute left 20px top 55px 100px gt Start writing and find the active event press_a_key b target id dest gt revent press_c_key b target id dest gt revent press_f_ key b target id dest gt event press_g_key b target id dest gt id dest b behavior write gt The code example in the sectio
205. w ee ee ee eee wee eee eee eens The b draggroup also identifies a draggable element You can use it make an element such as a window draggable and specify the element such as the head that it can be dragged by You indicate the gripping point for dragging by setting the b drag attribute on the element with the same identifier as the b draggroup attribute An element receiving draggable elements can be empty but it must have its own space in the BXML tree You can place drag and drop elements in relative static or absolute positions e Relatively positioned or static elements must be dropped into a receiving group otherwise they are return to their starting position When they are dropped into the receiving group they snap to the appropriate position within the receiving group s flow If they are larger than the receiving group they will cause the receiv ing group to resize e Absolutely positioned elements remain where they are being dropped even if they are not dropped into a receiving group When dropped into a receiving group absolutely positioned elements do not incorporate themselves into the receiving element s flow Set b overflowfix true on the b draggroup element to prevent Internet Explorer from crashing when using b dragmode real 6 5 2 Resizing Elements You can resize any relatively or absolutely positioned element by adding the b resize at tribute to it You can add the b resize attribute
206. xample 27 is the Esc key For more information on defining keyboard shortcuts see Capturing Keys p 93 3 If you change the location of your configuration file you must specify the location in the b devconfig attribute on the body tag on your startup file For example 2004 2006 Backbase B V All Rights Reserved 26 Backbase Manual Version 3 1 4 lt body nad See 200k appar ta b devconfig myRootDir tool_devconfig xml gt lt body gt 1 5 8 Creating Custom Messages In Backbase you can add custom messages to your code using the b action msg com mand You can view your custom messages in the alertbar or add them to the Runtime Tracer In the following example you create a custom message that creates the message generating a custom message and then change the tools preferences and runtime tracer settings to have the message displayed 1 Create a start up file and add the following code lt a gt Click here to generate a custom message lt s event b on command gt lt s task b action msg b value generating a custom message gt lt s event gt lt a gt Run the application in your browser Press Esc to open the Backbase Tools Choose Tools gt Preferences In the Backbase Tool Preferences dialog select the Custom checkbox URW Figure 1 35 Backbase Tool Preferences Backbase Tool Preferences l LJ Alert Critical Error Warning _ Debug Custom When an
207. xtnode to the h2 element the value of which is also derived by evaluating an XPath expression that targets the value of the b label attribute in the case Films Example 7 7 User Defined Attributes lt b tree b label Films b behavior loadindata c mytarget id welcome c myurl data xml i gt lt s behavior b name loadindata gt lt s event b on command gt lt s task b action load b url c myurl b destination xpath c mytarget div gt lt s render b destination xpath c mytarget h2 gt lt s textnode b label b label gt lt s render gt lt s event gt lt s behavior gt lt div id welcome gt ch he lt div gt lt div gt lt div gt Where data xml contains Example 7 8 User Defined Attributes lt xml version 1 0 gt lt table xmlns http www w3 org 1999 xhtml xmlns b http www backbase com b xmlns s http www backbase com s gt lt thead gt lt tr gt lt th gt Movie lt th gt lt th gt Director lt th gt E ERS lt thead gt lt tbody gt lt tr gt lt td gt The Seven Samurai lt td gt lt td gt Akira Kurosawa lt td gt EERS LETS lt td gt Donnie Darko lt td gt lt td gt Richard Kelly lt td gt 2004 2006 Backbase B V All Rights Reserved 112 Backbase Manual Version 3 1 4 Che Er lt td gt The Godfather lt td gt lt td gt Francis Ford Coppola lt td gt Lors lt tbody gt lt table gt 2004 2006 Backbase B V
208. yling of borders drop shad ows and so on are part of the Styling sub component Loading XML data asynchronously is what is commonly referred to as AJAX These components take care of loading ma nipulating and binding of data Backbase takes it several stages further by adding func tionality for XSLT transformations sorting and binding data to Backbase Controls user interface controls Furthermore the Component Layer can seamlessly access data from the Application Layer The Tools Layer consists of tools that developers need for effective development Back base has IDE plug ins for Visual Studio Eclipse and Dreamweaver as well as browser based debugging and information tools 1 2 3 Example The RSS Reader In this section the Backbase RSS Reader is used to illustrate the functional overview The RSS Reader is an application that displays 4 different RSS feeds and it shows new articles as they arrive 2004 2006 Backbase B V All Rights Reserved 6 Backbase Manual Version 3 1 4 Figure 1 2 RSS Reader 4 BRCKBASE AJAX RSS Reader Download About ODO ISERE EEE Advanced D Show Hide Columns e z Al Infoworld Slashdot J Ajaxian W Wikipedia Live Archive _ Live Archive cw aA Live Archive I Live Archive a a a A Thursday 6 October Thursday 6 October Wednesday 5 October Thursday 6 October 2 02 Moto confirms 9 34 Test Equipment Finds Life
209. zontal b minwidth 200px class MyClass gt You can resize this border amp lt div gt HORIZONTALLY lt div gt lt style type text css gt MyClass position relative border 2px solid 000 background 00C0C0 margin 10px padding 10px font family Verdana font size 10px lt style gt The following list presents additional functionality and information about resizing e Limiting resizing you can limit the resizing of an element using the attributes b minwidth b minheight b maxwidth and b maxwidth and you can specify an XPath query which where the element cannot be resize outside of b resizeconstraint e b resizemode line when you specify the attribute b resizemode line you can also use the b lineconstraint attribute to specify an element using XPath from which the line gets its height or width from e Sbpc_resizeLine you can use this XPath variable to specify the styling which needs to be applied when line resizing by default it is set to border 4px solid AAA e Panelset resizing the default b resizemode for panelset resizing is line You can override this by specifing the b resizemode on the panelset element you want to resize for example you can set the bottom and top panels to respectively b resizemode real and b resizemode outline You can resize panels with percentages em and px A panel specified with cannot be resized When you res ize percentages the percentages are maintained

Defining Event Handlers [Backbase Manual]

Contents

Download Pdf Manuals

Related Search

Related Contents