Enterprise Ajax - Client Edition
Béla Varga
bvarga [at] internetwire [dot] de

Backbase
Enterprise Ajax - Client Edition
Béla Varga
bvarga [at] internetwire [dot] de

Das Unternehmen hinter Backbase
- gegründet 2003
- Zentrale in San Mateo - California
- Büro in Amsterdam
- ca. 80 Angestellte
www.backbase.com
Béla Varga Backbase Enterprise Framework
2

Ajax Grundprinzipen
- dynamischen laden von Daten und Elementen (JSON,XML)
- Javascript für die clientseitige Logik
eventgesteuerte Ereignisse
clientseitige Validierung
- XHMTL/CSS für die Darstellung
Teile der Benutzeroberfläche ein und ausblenden
CSS Werte verändern
dynamischen erzeugen und löschen von XHMTL Elementen
Béla Varga Backbase Enterprise Framework
3

Zielsetzung des Frameworks:
- Web Standards (W3C) bündeln & erweitern
DOM, Events, XML, Xpath, XSLT, Schema, XInclude, SMIL
- Komplexität von Webapplikationen verringern
Widgets (objektorientiert)
Model Tree - Backbase XML Dokument
View Tree - der Browser DOM
Controller - Applikations und Widget Logik
Eigene deklarative Sprache - XEL
- Browser Quirks verbergen
Backbase JavaScript API
Béla Varga Backbase Enterprise Framework
4

Backbase Technologien
- Client Core (closed source)
TDL - Element Definitionssprache
XEL und JavaScript runtime
JavaScript API und Kommandos
- BTL Backbase Widget Bibliothek
Vorgefertigte und eigene Elemente
- XML Namespaces
Elemente aus verschiedenen Auszeichnungssprachen
Definition der Bezeichnung und des Tags des Namensraumes
Béla Varga Backbase Enterprise Framework
5

TDL (Tag Description Language)
- Wird von der Core Engine verarbeitet
- Eigene Widgets (Klassen)
- Objektorientiert
Konstruktor / Destruktor
Attribute / Eigenschaften und Methoden
Mehrfache Vererbung
Abstrakte Klassen und Interfaces
- View Templates
- Alle Elemente erben von DOM Elementen
Umsetzung der W3C DOM Spezifikation
Béla Varga Backbase Enterprise Framework
6

Class
Attribute
Method
Event Handler

TDL - View Templates
- beschreibt das Aussehen des Elements im Browser
- erlaubt das Verschachteln von Elementen
- nur ein root Knoten erlaubt
- XML oder JavaScript verwendbar
<d:template type="text/javascript">
var oRoot = document.createElement('div');
var oGate = document.createElement('div');
oRoot.appendChild(oGate);
return [oRoot, oGate];
</d:template>
<d:template type="application/xhtml+xml">
<div>
<div>
<d:content/>
</div>
</div>
</d:template>
Béla Varga Backbase Enterprise Framework
8

TDL - Attributes
- Tag: <attribute>
- kann beim initialisieren des Elementes gesetzt werden
- erlaubt nur string Werte
- optional kann beim setzen und verändern des Wertes
Code ausgeführt werden
<mapper>
Wird beim intialisieren und Änderung des Attributes ausgeführt
<changer>
Wird nur bei Änderungen des Attributes ausgeführt
Béla Varga Backbase Enterprise Framework
9

TDL - Property
- Tag: <property>
- kann alle JavaScript Typen (string, boolean, array, object)
speichern
- optional können setter und getter Methoden gesetzt werden
<setter>
<getter>
Béla Varga Backbase Enterprise Framework
10

TDL - Methoden
- Tag: <d:method>
- Argumente: <d:argument>
- Ist durch Subklassen überschreibbar
- aufruf durch element.methoden() oder <e:call/>
Béla Varga Backbase Enterprise Framework
11

XEL (Declarative Execution Language)
- Vereinfachung von JavaScript
asynchrones Laden
DOM Manipulation
- plattformunabhängige Definition der Client Logik
- nahtlose Einbindung von XPath
- wird von der Core Engine verarbeitet
- austauschbar durch JavaScript
- Grundfunktionalitäten
Funktion und Methodeaufrufe
Variablen, Schleifen, Iteration, Error Handling
Béla Varga Backbase Enterprise Framework
12

XEL vs. JS
<button>
<e:handler event="click" type="application/xml">
<c:create destination="id('productList')"
mode="appendChild">
<li>New item</li>
<li>New item</li>
<li>New item</li>
<li>New item</li>
</c:create>
</e:handler>
</button>
das gleiche in JavaScript? 4 x createElement, 4 x
createTextNode, appendChild ...
Béla Varga Backbase Enterprise Framework
13

DOM Manipulation
- alle Element besitzen die W3C DOM Level 2 API
createElement, create TextNode
appendChild, removeChild
childNodes
- XEL Methoden
<c:destroy with="id(myDiv)" />
- bb Core JavaScript API
bb.controller.destructChildren()
Béla Varga Backbase Enterprise Framework
14

XPath
"ancestor::form"
"descendant::input[@name = 'myInput']"
"id('myElement')//w4:element[@value = 'myValue']"
"following-sibling::td[2]"
"concat( 'input', '[1]')"
"model()/id('myDiv')"
"view()/id('myDiv')"
Béla Varga Backbase Enterprise Framework
15

XSLT - Beispiel
...
<e:variable name="xmlSource">
<c:load url="data.xml" />
</e:variable>
<e:variable name="stylesheet">
<c:load url="datastyle.xsl" />
</e:variable>
<c:transform select="$xmlSource" stylesheet="$stylesheet"
destination="id('myDiv')" mode="appendChild" />
...
Béla Varga Backbase Enterprise Framework
16

Tag 2
Béla Varga Backbase Enterprise Framework
17

TDL - Behavior
- Tag: <d:behavior/>
- wiederkehrende Funktionalitäten Kapseln
- Darstellung und Funktion trennen
- Folgende Elemente können verwendet werden:
<d:attribute/> <d:property/>
<d:method/> <d:handler/>
<d:resources/>
- BTL Behavior: drag, resize, remoteData, userEdit
Béla Varga Backbase Enterprise Framework
18

TDL - Vererbung
- Attribut: extends
- Erben von element oder behavior
- Alle Elemente erben von dom:element
- Mehrfachvererbung möglich (right-to-left priority)
- Anwenden von Interfaces durch implements
- Abstrakte Elemente erzeugen durch abstract Attribut
- Überschreibar sind attribute, property, method
- OOP Methoden:
bb.callSuper()
bb.instanceOf()
Béla Varga Backbase Enterprise Framework
19

TDL - Constructor
- Logik ausführen wenn das Element initialisiert wird
- Wird ausgeführt bevor das Element in den DOM Baum
eingefügt wird
- Wird meistens verwendet um Properties zu initialisieren
- Wenn das Element in den DOM Baum eingefügt wird, dann
DOMNodeInsertedIntoDocument verwenden
Béla Varga Backbase Enterprise Framework
20

XPath
- selektiert Teile einer XML Struktur
- Verwendung in XEL
select=``
with=``
- Verwendung in JavaScript
bb.evalute(`xpath`, oTarget)
bb.evaluteSmart(`xpath`, oTarget)
Béla Varga Backbase Enterprise Framework
21

XPath
ancestor
ancestor
precending
sibling
following
self
sibling
precending
sibling descendant
Béla Varga Backbase Enterprise Framework
22

XPath
<library>
<book>
<chapter/>
<chapter>
<section>
<paragraph/>
<paragraph/>
</section>
</chapter>
</book>
</library>
Béla Varga Backbase Enterprise Framework
23

XPath
<library> library ist parent von book
<book>
<chapter/>
<chapter/>
<section>
<paragraph/>
<paragraph/>
</section>
</chapter>
</book>
</library>
Béla Varga Backbase Enterprise Framework
24

XPath
<library> library ist parent von book
<book> die beiden chapter sind children
von book
<chapter/>
<chapter/>
<section>
<paragraph/>
<paragraph/>
</section>
</chapter>
</book>
</library>
Béla Varga Backbase Enterprise Framework
25

XPath
<library> library ist parent von book
<book> die beiden chapter sind children
von book
<chapter/>
<chapter/> die beiden chapter von book sind
siblings (haben beide den gleichen
<section> parent)
<paragraph/>
<paragraph/>
</section>
</chapter>
</book>
</library>
Béla Varga Backbase Enterprise Framework
26

XPath
<library> library ist parent von book
<book> die beiden chapter sind children
von book
<chapter/>
<chapter/> die beiden chapter von book sind
siblings (haben beide den gleichen
<section> parent)
<paragraph/>
<paragraph/> library, book, und der zweite
chapter sind ancestors von
</section> section
</chapter>
</book>
</library>
Béla Varga Backbase Enterprise Framework
27

XPath
<library> library ist parent von book
<book> die beiden chapter sind children
von book
<chapter/>
<chapter/> die beiden chapter von book sind
siblings (haben beide den gleichen
<section> parent)
<paragraph/>
<paragraph/> library, book, und der zweite
chapter sind ancestors von
</section> section
</chapter>
die beiden chapter, die section,
</book>
und die beiden paragraphs sind
descendants von book
</library>
Béla Varga Backbase Enterprise Framework
28

XPath Notation
/ document root
. current element
.. parent of the current element
/library/* all elements in /library
section every section element that is child of the
current element
every section element in a chapter in
/library/book/chapter/section every book in the library
root: /element
anywhere: //element
current: element
Béla Varga Backbase Enterprise Framework
29

XPath Axis
- Eine Achse ist ein Satz an Knoten relativ zu einem Knoten
- A::B = selektiere B von der Achse A
self::element
parent::element
ancestor::element
descendant::element
preceding-sibling::element
following-sibling::element
Béla Varga Backbase Enterprise Framework
30

Backbase Element
Backbase Explorer
Béla Varga Backbase Enterprise Framework
31

XInclude
- Einbinden von externen XML Dateien
<xi:include href="myWidgetDefinition.xml"/>
<?xml version="1.0" encoding="utf-8"?>
<d:tdl>
...
</d:tdl>
- Verweis wird durch den Inhalt des Dokuments ersetzt
Bitte Reihenfolge beachten
Béla Varga Backbase Enterprise Framework
32

Core/DOM API - Commands
- bb JavaScript Core API
bb.construct()
bb.evaluate()
bb.callSuper()
bb.instanceOf()
- bb JavaScript DOM API
oElement.getProperty()
oElement.removeChild()
oElement.addEventListener()
- der offizielle Weg nach W3C ist nicht immer der einfachste
- Vereinfachte Kommandos
create, load, move, position
Béla Varga Backbase Enterprise Framework
33

Events
- Eine Ereignis ist „etwas das zu einem best. Zeitpunkt passiert“
- Ereignisse haben keine Dauer
- Ereignisse werden durch den Anwender oder durch die
Anwendung ausgelöst
- Backbase hat die W3C DOM Events implementiert
Béla Varga Backbase Enterprise Framework
34

Ereignis Arten
- User Interface (DOM Level 3 UIEvent)
focus, blur, resize, scroll, ...
- Mouse Event (DOM Level 3 MouseEvent)
click, mousedown, mouseover, ...
- Model Changes (DOM Level 3 Mutation Events)
DOMNodeInserted, DOMAttrModified ...
- HTML Events (gehen auch ohne Backbase)
load, select, submit ...
- Custom Events (BTL oder eigene)
mouseenter, mynewevent...
Béla Varga Backbase Enterprise Framework
35

onkeyup vs. onkeydown
- onkeyup wird einmal gefeuert, onkeydown wird solang
gefeuert bis die Taste gedrückt ist, deshalb
onkeyup verwenden!
Béla Varga Backbase Enterprise Framework
36

Event-Fluss
1.) capturing phase - Absteigen zum Zielelement
Das Ereignis steigt vom obersten Knoten (document) bis zum Zielelement des Ereignisses.
Auf diesen Weg werden alle Handler ausgeführt, die für den Ereignistyp für die Capturing-
Phase registiert sind
bb.html.addEventListener(element,`focus`, handler, true)
2.) target phase - Zielelement erreicht
Das Ereignis erreicht ein Ziel Element und löst alle zuständigen Handler aus.
3.) bubbling phase - Aufsteigen vom Zielelement
Das Ereignis steigt im DOM Baum von einem Eltern Element zum nächsten, bis der
document Element erreicht ist und löst unterwegs alle zuständigen Handler aus.
Jedes Event hat Phase 1 und 2 aber nicht alle haben Phase 3!
focus, blur, ...
Béla Varga Backbase Enterprise Framework
37

Event DOM API Methoden
- Eventhandler/listener erstellen
<d:handler event=`click` />
<d:handler event=`click` match=`.class` />
oElement.addEventListener(`click`,myFunction,false);
- Eventhandler/listener löschen
oElement.removeEventListener(`click`,myFunction,false);
- Event auslösen
oElement.fireEvent(oTarget,`click`);
Béla Varga Backbase Enterprise Framework
38

Event Handling
- TDL Handler Tag
<d:handler event=`click` />
- XEL Handler Tag
<b:button>
<e:handler event=`click` />
</b:button>
- XEL Attribute
<b:button e:onclick=`myMethod();` />
- DOM Event Listener
oElement.addEventListener();
- HTML Event Handler (laufen ohne Backbase Engine)
<div onclick=`myMethod()` />
Béla Varga Backbase Enterprise Framework
39

Ereignisse steuern
- Event-Bubbling verhindern
Das Ereignis hat keine Bubbling Phase.
bb.command.fireEvent(oElement,`click`, false);
- Event-Fluss in der Phase 1 beenden
Target und Bubbling Phase fallen aus. Das Ereignis erreicht nie sein Ziel Element.
event.stopPropagation();
- Standardaktionen verhindern
Browser führen standardmäßig Ereignisse aus ohne das eines definiert wurde.
Beispiel: Link besitzt click-Ereignis.
event.preventDefault();
bb.command.fireEvent(oElement,`click`, true, true);
Béla Varga Backbase Enterprise Framework
40

Events vs. Methods
- Event
Benachrichtung
kann in abgeleiteten Klassen nicht überschrieben werden
ich.habDurst!
- Method
Kommando
kann in abgeleiteten Klassen überschrieben werden
du.holMirMalWasZuTrinken!
Béla Varga Backbase Enterprise Framework
41

Server - Client Kommunikation
- siehe Google Docs
Béla Varga Backbase Enterprise Framework
42

SMIL (smile)
- Synchronized Multimedia Integration Language
- W3C Auszeichnungssprache für multimediale Inhalte
- Wird in Backbase für visuelle Effekte verwendet
- BasicInlineTiming, RepeatTiming, TimeManipluations und
BasicAnimation bereits integriert
var oAnimationInfo = {
attributeName: "height",
attributeType:"CSS", dur: "1s", to: "250px", fill: "freeze"
}
bb.smil.animate(this, oAnimationInfo);
Béla Varga Backbase Enterprise Framework
43

Vielen Dank!
Béla Varga
netzzwerg [at] googlemail [dot] com

Vielen Dank!
Béla Varga
netzzwerg [at] googlemail [dot] com

Vielen Dank!
Béla Varga
netzzwerg [at] googlemail [dot] com