Backbase Intro

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 Benutzeroberﬂäche ein und ausblenden
CSS Werte verändern
dynamischen erzeugen und löschen von XHMTL Elementen

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

4

Backbase Technologien

- Client Core (closed source)
TDL - Element Deﬁnitionssprache
XEL und JavaScript runtime
JavaScript API und Kommandos

- BTL Backbase Widget Bibliothek
Vorgefertigte und eigene Elemente

- XML Namespaces
Elemente aus verschiedenen Auszeichnungssprachen
Deﬁnition der Bezeichnung und des Tags des Namensraumes

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 Speziﬁkation

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>

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

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>

10

TDL - Methoden

- Tag: <d:method>
- Argumente: <d:argument>

- Ist durch Subklassen überschreibbar
- aufruf durch element.methoden() oder <e:call/>

11

XEL (Declarative Execution Language)

- Vereinfachung von JavaScript
asynchrones Laden
DOM Manipulation

- plattformunabhängige Deﬁnition 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

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 ...

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()

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')"

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" />

...

16

Tag 2

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

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()

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

20

XPath

- selektiert Teile einer XML Struktur

- Verwendung in XEL
select=``
with=``

- Verwendung in JavaScript
bb.evalute(`xpath`, oTarget)
bb.evaluteSmart(`xpath`, oTarget)

21

XPath

ancestor

ancestor
precending
sibling

following
self
sibling
precending
sibling descendant

22

XPath
<library>

<book>

<chapter/>
<chapter>

<section>

<paragraph/>
<paragraph/>

</section>

</chapter>

</book>

</library>

23

XPath
<library> library ist parent von book

<book>

<chapter/>
<chapter/>

<section>

<paragraph/>
<paragraph/>

</section>

</chapter>

</book>

</library>

24

XPath

<book> die beiden chapter sind children
von book
<chapter/>
<chapter/>

<section>

<paragraph/>
<paragraph/>

</section>

</chapter>

</book>

</library>

25

XPath

von book
<chapter/>
<chapter/> die beiden chapter von book sind
siblings (haben beide den gleichen
<section> parent)
<paragraph/>
<paragraph/>

</section>

</chapter>

</book>

</library>

26

XPath

von book
<chapter/>
<section> parent)
<paragraph/>
<paragraph/> library, book, und der zweite
chapter sind ancestors von
</section> section
</chapter>

</book>

</library>

27

XPath

von book
<chapter/>
<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>

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

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

30

Backbase Element

Backbase Explorer

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

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 ofﬁzielle Weg nach W3C ist nicht immer der einfachste
- Vereinfachte Kommandos
create, load, move, position

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

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...

35

onkeyup vs. onkeydown

- onkeyup wird einmal gefeuert, onkeydown wird solang
gefeuert bis die Taste gedrückt ist, deshalb

onkeyup verwenden!

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, ...

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`);

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()` />

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 deﬁniert wurde.
Beispiel: Link besitzt click-Ereignis.

event.preventDefault();
bb.command.fireEvent(oElement,`click`, true, true);

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!

41

Server - Client Kommunikation

- siehe Google Docs

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);

43

Vielen Dank!

Béla Varga
netzzwerg [at] googlemail [dot] com

Backbase Intro

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (6)

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie Backbase Intro

Ähnlich wie Backbase Intro (20)

Backbase Intro