Backbase Intro

Enterprise Ajax - Client Edition

Béla Vargabvarga [at] internetwire [dot] de

mailto:[email protected]


BackbaseEnterprise Ajax - Client Edition

Béla Vargabvarga [at] internetwire [dot] de



Backbase Enterprise FrameworkBéla Varga

Das Unternehmen hinter Backbase

- gegründet 2003

- Zentrale in San Mateo - California

- Büro in Amsterdam

- ca. 80 Angestellte

www.backbase.com

2

http://www.backbase.com

http://www.backbase.com

Backbase Enterprise FrameworkBéla Varga 3

- dynamischen laden von Daten und Elementen (JSON,XML)

- Javascript für die clientseitige Logik

- XHMTL/CSS für die Darstellung

Teile der Benutzeroberfläche ein und ausblendenCSS Werte veränderndynamischen erzeugen und löschen von XHMTL Elementen

eventgesteuerte Ereignisseclientseitige Validierung

Ajax Grundprinzipen


Zielsetzung des Frameworks:

- Web Standards (W3C) bündeln & erweitern

- Komplexität von Webapplikationen verringern

- Browser Quirks verbergen

DOM, Events, XML, Xpath, XSLT, Schema, XInclude, SMIL

Widgets (objektorientiert)

Backbase JavaScript API

Model Tree - Backbase XML Dokument

View Tree - der Browser DOM

Controller - Applikations und Widget Logik

Eigene deklarative Sprache - XEL

4


Backbase Technologien

- Client Core (closed source)

- BTL Backbase Widget Bibliothek

TDL - Element Definitionssprache

XEL und JavaScript runtime

JavaScript API und Kommandos

- XML Namespaces

Elemente aus verschiedenen Auszeichnungssprachen

5

Vorgefertigte und eigene Elemente

Definition der Bezeichnung und des Tags des Namensraumes


TDL (Tag Description Language)

- Wird von der Core Engine verarbeitet

- Eigene Widgets (Klassen)

- View Templates

- ObjektorientiertKonstruktor / Destruktor

Attribute / Eigenschaften und Methoden

Mehrfache Vererbung

Abstrakte Klassen und Interfaces

- Alle Elemente erben von DOM ElementenUmsetzung der W3C DOM Spezifikation

6

ClassAttributeMethodEvent Handler


TDL - View Templates

- beschreibt das Aussehen des Elements im Browser

- erlaubt das Verschachteln von Elementen

- XML oder JavaScript verwendbar

8

- nur ein root Knoten erlaubt

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


TDL - Attributes

- Tag: <attribute>

- kann beim initialisieren des Elementes gesetzt werden

- optional kann beim setzen und verändern des Wertes Code ausgeführt werden

9

- erlaubt nur string Werte

<mapper>

<changer>

Wird beim intialisieren und Änderung des Attributes ausgeführt

Wird nur bei Änderungen des Attributes ausgeführt


TDL - Property

- Tag: <property>

- kann alle JavaScript Typen (string, boolean, array, object) speichern

- optional können setter und getter Methoden gesetzt werden

10

<setter>

<getter>


TDL - Methoden

- Tag: <d:method>

11

- Argumente: <d:argument>

- Ist durch Subklassen überschreibbar

- aufruf durch element.methoden() oder <e:call/>


XEL (Declarative Execution Language)

- wird von der Core Engine verarbeitet

- Grundfunktionalitäten

- austauschbar durch JavaScript

12

Funktion und Methodeaufrufe

Variablen, Schleifen, Iteration, Error Handling

- plattformunabhängige Definition der Client Logik

- Vereinfachung von JavaScriptasynchrones Laden

DOM Manipulation

- nahtlose Einbindung von XPath


XEL vs. JS

13

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


DOM Manipulation

- alle Element besitzen die W3C DOM Level 2 API

- XEL Methoden

14

createElement, create TextNodeappendChild, removeChild

childNodes

- bb Core JavaScript API

bb.controller.destructChildren()

<c:destroy with="id(myDiv)" />


XPath

15

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


XSLT - Beispiel

16

...

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

...

Backbase Enterprise FrameworkBéla Varga 17

Tag 2


TDL - Behavior

- wiederkehrende Funktionalitäten Kapseln

18

- Darstellung und Funktion trennen

- Tag: <d:behavior/>

- Folgende Elemente können verwendet werden:

<d:attribute/>

<d:method/>

<d:property/>

<d:handler/>

<d:resources/>

- BTL Behavior: drag, resize, remoteData, userEdit


TDL - Vererbung

- Attribut: extends

19

- 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

bb.callSuper()bb.instanceOf()

- OOP Methoden:


TDL - Constructor

20

- 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, dannDOMNodeInsertedIntoDocument verwenden


XPath

21

- selektiert Teile einer XML Struktur

- Verwendung in XEL

- Verwendung in JavaScript

bb.evalute(`xpath`, oTarget)

select=``with=``

bb.evaluteSmart(`xpath`, oTarget)


XPath

22

self

precendingsibling

precendingsibling

followingsibling

ancestor

ancestor

descendant


XPath

23

<library>

<book>

<chapter/> <chapter>

<section>

<paragraph/> <paragraph/>

</section>

</chapter>

</book>

</library>


XPath

24

<library>

<book>

<chapter/> <chapter/>

<section>


</section>

</chapter>

</book>

</library>

library ist parent von book


XPath

25

<library>

<book>


<section>


</section>

</chapter>

</book>

</library>


die beiden chapter sind children von book


XPath

26

<library>

<book>


<section>


</section>

</chapter>

</book>

</library>



die beiden chapter von book sind siblings (haben beide den gleichen parent)


XPath

27

<library>

<book>


<section>


</section>

</chapter>

</book>

</library>




library, book, und der zweite chapter sind ancestors von section


XPath

28

<library>

<book>


<section>


</section>

</chapter>

</book>

</library>




library, book, und der zweite chapter sind ancestors von section

die beiden chapter, die section, und die beiden paragraphs sind descendants von book


XPath Notation

29

/

.

..

/library/*

section

/library/book/chapter/section

document root

current element

parent of the current element

all elements in /library

every section element that is child of the current element

every section element in a chapter in every book in the library

root: /element anywhere: //elementcurrent: element


XPath Axis

30

self::element

parent::element

ancestor::element

descendant::element

preceding-sibling::element

following-sibling::element

- Eine Achse ist ein Satz an Knoten relativ zu einem Knoten

- A::B = selektiere B von der Achse A


Backbase Element

31

Backbase Explorer


XInclude

32

- 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 ersetztBitte Reihenfolge beachten


Core/DOM API - Commands

33

- der offizielle Weg nach W3C ist nicht immer der einfachste

create, load, move, position

- Vereinfachte Kommandos

- bb JavaScript Core APIbb.construct()bb.evaluate()bb.callSuper()bb.instanceOf()

- bb JavaScript DOM APIoElement.getProperty()oElement.removeChild()oElement.addEventListener()


Events

34

- 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


Ereignis Arten

35

- User Interface (DOM Level 3 UIEvent)

- Model Changes (DOM Level 3 Mutation Events)

- HTML Events (gehen auch ohne Backbase)

- Custom Events (BTL oder eigene)

focus, blur, resize, scroll, ...

DOMNodeInserted, DOMAttrModified ...

- Mouse Event (DOM Level 3 MouseEvent)

click, mousedown, mouseover, ...

load, select, submit ...

mouseenter, mynewevent...


onkeyup vs. onkeydown

36

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

onkeyup verwenden!


Event-Fluss

37

1.) capturing phase - Absteigen zum Zielelement

2.) target phase - Zielelement erreichtDas Ereignis erreicht ein Ziel Element und löst alle zuständigen Handler aus.

3.) bubbling phase - Aufsteigen vom ZielelementDas 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.

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

Jedes Event hat Phase 1 und 2 aber nicht alle haben Phase 3!

bb.html.addEventListener(element,`focus`, handler, true)

focus, blur, ...


Event DOM API Methoden

38

- Eventhandler/listener löschen

- Eventhandler/listener erstellen<d:handler event=`click` />

oElement.addEventListener(`click`,myFunction,false);

oElement.removeEventListener(`click`,myFunction,false);

- Event auslösenoElement.fireEvent(oTarget,`click`);

<d:handler event=`click` match=`.class` />


Event Handling

39

- 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 ListeneroElement.addEventListener();

- HTML Event Handler (laufen ohne Backbase Engine)<div onclick=`myMethod()` />


Ereignisse steuern

40

- Event-Fluss in der Phase 1 beenden

- Standardaktionen verhindernBrowser führen standardmäßig Ereignisse aus ohne das eines definiert wurde. Beispiel: Link besitzt click-Ereignis.

event.stopPropagation();

Target und Bubbling Phase fallen aus. Das Ereignis erreicht nie sein Ziel Element.

event.preventDefault();

- Event-Bubbling verhindern

bb.command.fireEvent(oElement,`click`, false);

Das Ereignis hat keine Bubbling Phase.

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


Events vs. Methods

41

- Event

Benachrichtung

kann in abgeleiteten Klassen nicht überschrieben werden

- Method

Kommando

kann in abgeleiteten Klassen überschrieben werden

ich.habDurst!

du.holMirMalWasZuTrinken!


Server - Client Kommunikation

42

- siehe Google Docs


SMIL (smile)

43

- Synchronized Multimedia Integration Language

- W3C Auszeichnungssprache für multimediale Inhalte

- Wird in Backbase für visuelle Effekte verwendet

var oAnimationInfo = { attributeName: "height", attributeType:"CSS", dur: "1s", to: "250px", fill: "freeze"}

bb.smil.animate(this, oAnimationInfo);

- BasicInlineTiming, RepeatTiming, TimeManipluations und BasicAnimation bereits integriert

Vielen Dank!

Béla Varganetzzwerg [at] googlemail [dot] com



Vielen Dank!




Vielen Dank!




Backbase Intro

Technology

bla varga

current element

vielen dank

section element

view templates

element

tag

oelement