3. 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
4. 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
5. 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
6. 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
7. 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
9. 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
10. 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
11. 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
12. 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
13. 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
14. 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
15. 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
19. 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
20. 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
21. 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
22. 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
23. XPath
ancestor
ancestor
precending
sibling
following
self
sibling
precending
sibling descendant
Béla Varga Backbase Enterprise Framework
22
25. XPath
<library> library ist parent von book
<book>
<chapter/>
<chapter/>
<section>
<paragraph/>
<paragraph/>
</section>
</chapter>
</book>
</library>
Béla Varga Backbase Enterprise Framework
24
26. 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
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/>
</section>
</chapter>
</book>
</library>
Béla Varga Backbase Enterprise Framework
26
28. 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
29. 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
30. 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
31. 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
32. Backbase Element
Backbase Explorer
Béla Varga Backbase Enterprise Framework
31
33. 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
34. 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
35. 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
36. 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
37. 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
38. 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
39. 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
40. 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
41. 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
42. 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
43. Server - Client Kommunikation
- siehe Google Docs
Béla Varga Backbase Enterprise Framework
42
44. 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
45. Vielen Dank!
Béla Varga
netzzwerg [at] googlemail [dot] com
46. Vielen Dank!
Béla Varga
netzzwerg [at] googlemail [dot] com
47. Vielen Dank!
Béla Varga
netzzwerg [at] googlemail [dot] com