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

   - dynamischen laden von Daten und Elementen (JSON,XML)
   - Javascript für die clientseitige Logik...
Zielsetzung des Frameworks:

   - Web Standards (W3C) bündeln & erweitern
         DOM, Events, XML, Xpath, XSLT, Schema, ...
Backbase Technologien

   - Client Core (closed source)
         TDL - Element Definitionssprache
         XEL und JavaScri...
TDL (Tag Description Language)

    - Wird von der Core Engine verarbeitet
   - Eigene Widgets (Klassen)
   - Objektorient...
Class
Attribute
Method
Event Handler
TDL - View Templates

     - beschreibt das Aussehen des Elements im Browser
     - erlaubt das Verschachteln von Elemente...
TDL - Attributes

     - Tag: <attribute>
    - kann beim initialisieren des Elementes gesetzt werden
    - erlaubt nur st...
TDL - Property

     - Tag: <property>
     - kann alle JavaScript Typen (string, boolean, array, object)
     speichern
 ...
TDL - Methoden

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

     - Ist durch Subklassen überschreibbar
     - a...
XEL (Declarative Execution Language)

    - Vereinfachung von JavaScript
       asynchrones Laden
       DOM Manipulation
...
XEL vs. JS
   <button>
       <e:handler event="click" type="application/xml">

              <c:create destination="id('p...
DOM Manipulation

    - alle Element besitzen die W3C DOM Level 2 API
     createElement, create TextNode
     appendChild...
XPath


   "ancestor::form"

   "descendant::input[@name = 'myInput']"


   "id('myElement')//w4:element[@value = 'myValue...
XSLT - Beispiel


   ...

   <e:variable name="xmlSource">
     <c:load url="data.xml" />
   </e:variable>

   <e:variable...
Tag 2

Béla Varga   Backbase Enterprise Framework
                                             17
TDL - Behavior

      - Tag: <d:behavior/>
      - wiederkehrende Funktionalitäten Kapseln
      - Darstellung und Funktio...
TDL - Vererbung

     - Attribut: extends
     - Erben von element oder behavior
     - Alle Elemente erben von dom:elemen...
TDL - Constructor

    - Logik ausführen wenn das Element initialisiert wird
     - Wird ausgeführt bevor das Element in d...
XPath

    - selektiert Teile einer XML Struktur

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


     - Verw...
XPath

                                          ancestor

                                          ancestor
 precending
...
XPath
     <library>

       <book>

         <chapter/>
         <chapter>

             <section>

                <para...
XPath
     <library>                            library ist parent von book

       <book>

         <chapter/>
         <...
XPath
     <library>                            library ist parent von book

       <book>                             die...
XPath
     <library>                            library ist parent von book

       <book>                             die...
XPath
     <library>                            library ist parent von book

       <book>                             die...
XPath
     <library>                            library ist parent von book

       <book>                             die...
XPath Notation

    /                                document root

    .                                current element

...
XPath Axis

     - Eine Achse ist ein Satz an Knoten relativ zu einem Knoten
     - A::B = selektiere B von der Achse A

 ...
Backbase Element




                   Backbase Explorer




Béla Varga       Backbase Enterprise Framework
             ...
XInclude

    - Einbinden von externen XML Dateien
      <xi:include href="myWidgetDefinition.xml"/>

      <?xml version=...
Core/DOM API - Commands

     - bb JavaScript Core API
       bb.construct()
       bb.evaluate()
       bb.callSuper()
  ...
Events

    - Eine Ereignis ist „etwas das zu einem best. Zeitpunkt passiert“

     - Ereignisse haben keine Dauer

    - ...
Ereignis Arten

    - User Interface (DOM Level 3 UIEvent)
       focus, blur, resize, scroll, ...

    - Mouse Event (DOM...
onkeyup vs. onkeydown


    - onkeyup wird einmal gefeuert, onkeydown wird solang
    gefeuert bis die Taste gedrückt ist,...
Event-Fluss

    1.) capturing phase - Absteigen zum Zielelement
       Das Ereignis steigt vom obersten Knoten (document)...
Event DOM API Methoden

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

    - TDL Handler Tag
        <d:handler event=`click` />

    - XEL Handler Tag
        <b:button>
      ...
Ereignisse steuern

    - Event-Bubbling verhindern
       Das Ereignis hat keine Bubbling Phase.

       bb.command.fireE...
Events vs. Methods

    - Event
      Benachrichtung
      kann in abgeleiteten Klassen nicht überschrieben werden


     ...
Server - Client Kommunikation

    - siehe Google Docs




Béla Varga         Backbase Enterprise Framework
              ...
SMIL (smile)

    - Synchronized Multimedia Integration Language
    - W3C Auszeichnungssprache für multimediale Inhalte
 ...
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
Nächste SlideShare
Wird geladen in …5
×

Backbase Intro

1.710 Aufrufe

Veröffentlicht am

Backbase Javascript Framework Course

Veröffentlicht in: Technologie
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.710
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
11
Aktionen
Geteilt
0
Downloads
8
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Backbase Intro

  1. 1. Enterprise Ajax - Client Edition Béla Varga bvarga [at] internetwire [dot] de
  2. 2. Backbase Enterprise Ajax - Client Edition Béla Varga bvarga [at] internetwire [dot] de
  3. 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. 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. 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. 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. 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
  8. 8. Class Attribute Method Event Handler
  9. 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. 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. 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. 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. 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. 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. 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
  16. 16. 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
  17. 17. 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
  18. 18. Tag 2 Béla Varga Backbase Enterprise Framework 17
  19. 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. 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. 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. 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. 23. XPath ancestor ancestor precending sibling following self sibling precending sibling descendant Béla Varga Backbase Enterprise Framework 22
  24. 24. XPath <library> <book> <chapter/> <chapter> <section> <paragraph/> <paragraph/> </section> </chapter> </book> </library> Béla Varga Backbase Enterprise Framework 23
  25. 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. 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. 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. 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. 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. 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. 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. 32. Backbase Element Backbase Explorer Béla Varga Backbase Enterprise Framework 31
  33. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 43. Server - Client Kommunikation - siehe Google Docs Béla Varga Backbase Enterprise Framework 42
  44. 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. 45. Vielen Dank! Béla Varga netzzwerg [at] googlemail [dot] com
  46. 46. Vielen Dank! Béla Varga netzzwerg [at] googlemail [dot] com
  47. 47. Vielen Dank! Béla Varga netzzwerg [at] googlemail [dot] com

×