Die Präsentation wird geladen. Bitte warten

Die Präsentation wird geladen. Bitte warten

AutoSave für AJAX-Formulare Timo Holzherr AJAX in ACTION 2007, 06.11.2007, Frankfurt.

Ähnliche Präsentationen


Präsentation zum Thema: "AutoSave für AJAX-Formulare Timo Holzherr AJAX in ACTION 2007, 06.11.2007, Frankfurt."—  Präsentation transkript:

1 AutoSave für AJAX-Formulare Timo Holzherr AJAX in ACTION 2007, , Frankfurt

2 AutoSave für AJAX-Formulare AJAX IN ACTION Timo Holzherr Timo Holzherr Web Application Developer bei der Nero AG / Karlsbad Web-Community My Nero (PHP5, AJAX) Online Services für verschiedene Nero-Applikationen Lehrauftrag bei der Berufsakademie Stuttgart Vorlesung Software-Engineering 2 Betreuung von Studienarbeiten, Thema Compiler-Entwicklung

3 AutoSave für AJAX-Formulare AJAX IN ACTION Timo Holzherr Agenda Was ist AutoSave? Praktische Anwendungen Formulareingaben überwachen Zeitintervalle steuern, Eingaben zählen AJAX-Request absenden Formular-Validierung

4 AutoSave für AJAX-Formulare AJAX IN ACTION Timo Holzherr Was ist AutoSave? Auf AJAX basierendes Feature Für HTML-Formulare Automatisches Speichern der Benutzer-Eingaben Eingaben überwachen Änderungen regelmäßig zum Server übertragen Recovery-Feature Browser-Absturz Versehentliches Schließen des Browserfensters

5 AutoSave für AJAX-Formulare AJAX IN ACTION Timo Holzherr AutoSave – Praktische Anwendungen Vor AJAX nur in Desktop-Applikationen Microsoft Office … Heute bei vielen Online-Services My Nero (http://my.nero.com/) Google Mail (http://mail.google.com/) …

6 AutoSave für AJAX-Formulare AJAX IN ACTION Timo Holzherr AUTOSAVE BEI MY NERO

7 AutoSave für AJAX-Formulare AJAX IN ACTION Timo Holzherr AutoSave bei My Nero Blog-Editor Regelmäßiges Speichern im Hintergrund

8 AutoSave für AJAX-Formulare AJAX IN ACTION Timo Holzherr AutoSave bei My Nero Recovery-Feature auf dem Login-Screen

9 AutoSave für AJAX-Formulare AJAX IN ACTION Timo Holzherr AUTOSAVE BEI GOOGLE MAIL

10 AutoSave für AJAX-Formulare AJAX IN ACTION Timo Holzherr AutoSave bei Google Mail Während der Eingabe der Regelmäßiges Speichern der Eingaben

11 AutoSave für AJAX-Formulare AJAX IN ACTION Timo Holzherr AutoSave bei Google Mail Der Benutzer findet die automatisch gespeicherte im Ordner Entwürfe

12 AutoSave für AJAX-Formulare AJAX IN ACTION Timo Holzherr Entwicklung eines AutoSave-Frameworks Trennung der Aufgaben i.Formulareingaben überwachen ii.Zeitintervalle steuern iii.Formulardaten absenden Verschiedene Klassen i.FormObservable.js ii.AutoSave.js iii.Note.js Vorteil der Trennung Komponenten können einzeln verwendet werden Bsp.: Live-Validierung von Formularen durch FormObservable

13 AutoSave für AJAX-Formulare AJAX IN ACTION Timo Holzherr Formulareingaben überwachen Eingaben des Benutzers müssen überwacht werden Registrieren für Events aller Form-Elemente onkeyup (Nach einem Tastendruck) onmouseup (Nach einem Mausklick) onblur (Verlassen eines Formularfeldes) onchange (Ändern einer Check- oder Dropdown-Box) Beim Auftreten dieser Events Prüfen, ob sich die Formularwerte geändert haben Mithilfe des Observer-Patterns Änderungen signalisieren

14 AutoSave für AJAX-Formulare AJAX IN ACTION Timo Holzherr Klasse FormObservable Speichert die Liste der Observer Initialisiert die Klasse an einer Form-Node Sendet ein Event an alle Observer Fügt einen Observer hinzu

15 AutoSave für AJAX-Formulare AJAX IN ACTION Timo Holzherr Klasse FormObservable var observable = new FormObservable( document.forms[0] ); observable.addObserver( { onupdate: function() { alert(Form element has been updated.); } } );

16 AutoSave für AJAX-Formulare AJAX IN ACTION Timo Holzherr Klasse FormObservable: Initialisierung FormObservable = function( formNode ) { var events = [ 'keyup', 'mouseup', 'blur', 'change' ]; var call = this._onFieldChange.bind( this ); for( var i=0; i < formNode.elements.length; i++ ) { var elem = formNode.elements.item( i ); for( var j=0; j < events.length; j++ ) { elem.addEventListener( events[j], call, true ); } Der Konstruktor erwartet ein HTML-Form-Objekt als Parameter

17 AutoSave für AJAX-Formulare AJAX IN ACTION Timo Holzherr Klasse FormObservable: Initialisierung FormObservable = function( formNode ) { var events = [ 'keyup', 'mouseup', 'blur', 'change' ]; var call = this._onFieldChange.bind( this ); for( var i=0; i < formNode.elements.length; i++ ) { var elem = formNode.elements.item( i ); for( var j=0; j < events.length; j++ ) { elem.addEventListener( events[j], call, true ); } Events, die überwacht werden sollen

18 AutoSave für AJAX-Formulare AJAX IN ACTION Timo Holzherr Klasse FormObservable: Initialisierung FormObservable = function( formNode ) { var events = [ 'keyup', 'mouseup', 'blur', 'change' ]; var call = this._onFieldChange.bind( this ); for( var i=0; i < formNode.elements.length; i++ ) { var elem = formNode.elements.item( i ); for( var j=0; j < events.length; j++ ) { elem.addEventListener( events[j], call, true ); } Methode, die später die Events verarbeitet

19 AutoSave für AJAX-Formulare AJAX IN ACTION Timo Holzherr Klasse FormObservable: Initialisierung FormObservable = function( formNode ) { var events = [ 'keyup', 'mouseup', 'blur', 'change' ]; var call = this._onFieldChange.bind( this ); for( var i=0; i < formNode.elements.length; i++ ) { var elem = formNode.elements.item( i ); for( var j=0; j < events.length; j++ ) { elem.addEventListener( events[j], call, true ); } bind: Methode aus der Bibliothek Prototype [1] Setzt den Kontext der Methode auf die Instanz this JS-Event-Handling: Ansonsten Verlust des Kontextes

20 AutoSave für AJAX-Formulare AJAX IN ACTION Timo Holzherr Klasse FormObservable: Initialisierung FormObservable = function( formNode ) { var events = [ 'keyup', 'mouseup', 'blur', 'change' ]; var call = this._onFieldChange.bind( this ); for( var i=0; i < formNode.elements.length; i++ ) { var elem = formNode.elements.item( i ); for( var j=0; j < events.length; j++ ) { elem.addEventListener( events[j], call, true ); } Jedem Formular- Element wird call als Event-Listener hinzugefügt

21 AutoSave für AJAX-Formulare AJAX IN ACTION Timo Holzherr Klasse FormObservable: Initialisierung FormObservable = function( formNode ) { var events = [ 'keyup', 'mouseup', 'blur', 'change' ]; var call = this._onFieldChange.bind( this ); for( var i=0; i < formNode.elements.length; i++ ) { var elem = formNode.elements.item( i ); for( var j=0; j < events.length; j++ ) { elem.addEventListener( events[j], call, true ); } Hier: Event-Implementierung nur für Mozilla Firefox Empfohlen: Bibliothek für Browser-Abstraktion Bsp.: Prototype [1]

22 AutoSave für AJAX-Formulare AJAX IN ACTION Timo Holzherr Klasse FormObservable: _onFieldChange FormObservable.prototype._onFieldChange = function( ) { … for( var i=0; i < formNode.elements.length; i++ ) { var elem = formNode.elements.item(i); var oldVal = this._getStoredValue( elem ); var newVal = elem.value; if( newVal != oldVal ) { this.notifyObservers( 'update' ); this._setStoredValue( elem, newVal ); } Wird vom JS-Event-Handling aufgerufen, wenn eines der überwachten Ereignisse eintritt keyup mouseup blur change

23 AutoSave für AJAX-Formulare AJAX IN ACTION Timo Holzherr Klasse FormObservable: _onFieldChange FormObservable.prototype._onFieldChange = function( ) { … for( var i=0; i < formNode.elements.length; i++ ) { var elem = formNode.elements.item(i); var oldVal = this._getStoredValue( elem ); var newVal = elem.value; if( newVal != oldVal ) { this.notifyObservers( 'update' ); this._setStoredValue( elem, newVal ); } Dabei wird jedes Formularelement auf eine Änderung geprüft

24 AutoSave für AJAX-Formulare AJAX IN ACTION Timo Holzherr Klasse FormObservable: _onFieldChange FormObservable.prototype._onFieldChange = function( ) { … for( var i=0; i < formNode.elements.length; i++ ) { var elem = formNode.elements.item(i); var oldVal = this._getStoredValue( elem ); var newVal = elem.value; if( newVal != oldVal ) { this.notifyObservers( 'update' ); this._setStoredValue( elem, newVal ); } FormObservable: Merkt sich lokal für jedes Element den letzten Wert

25 AutoSave für AJAX-Formulare AJAX IN ACTION Timo Holzherr Klasse FormObservable: _onFieldChange FormObservable.prototype._onFieldChange = function( ) { … for( var i=0; i < formNode.elements.length; i++ ) { var elem = formNode.elements.item(i); var oldVal = this._getStoredValue( elem ); var newVal = elem.value; if( newVal != oldVal ) { this.notifyObservers( 'update' ); this._setStoredValue( elem, newVal ); } Observers über eine Änderung informieren Wertänderung lokal merken

26 AutoSave für AJAX-Formulare AJAX IN ACTION Timo Holzherr Klasse FormObservable: Default Values Problem Formularelemente mit Default-Values Beim ersten Klick würde das System vermuten, dass sich Elemente mit Default-Values geändert haben Abhilfe Default-Values zu Beginn als Startwert merken

27 AutoSave für AJAX-Formulare AJAX IN ACTION Timo Holzherr Klasse FormObservable: _loadDefaultValues FormObservable = function( formNode ) { … // Initialisierung der Event-Handler this._loadDefaultValues(); } Nach der bereits erwähnten Initialisierung: Laden der Default Values

28 AutoSave für AJAX-Formulare AJAX IN ACTION Timo Holzherr Klasse FormObservable: _loadDefaultValues FormObservable.prototype._loadDefaultValues = function( ) { for( var i=0; i < this.form.elements.length; i++ ) { var elem = this.form.elements.item(i); this._setStoredValue( elem, elem.value ); } }; FormObservable = function( formNode ) { … // Initialisierung der Event-Handler this._loadDefaultValues(); }

29 AutoSave für AJAX-Formulare AJAX IN ACTION Timo Holzherr BEISPIEL OBSERVABLE [2] var observable = new FormObservable( document.forms[0] ); observable.addObserver( { onupdate: function() { alert(Form element has been updated.); } } );

30 AutoSave für AJAX-Formulare AJAX IN ACTION Timo Holzherr Observer-Notifications empfangen Empfangen der Observer-Notifications AJAX-Request muss an FormObservable gekoppelt werden Ansatz: var observable = new FormObservable( document.forms[0] ); observable.addObserver( { onupdate: function() { // AJAX Request senden } } );

31 AutoSave für AJAX-Formulare AJAX IN ACTION Timo Holzherr Observer-Notifications empfangen Problem Bei jedem Tastaturanschlag Übertragung der Änderung Viele HTTP-Requests Überlastung des Web-Servers Lösung Zeitverzögertes Senden der Daten Einstellbares Timeout

32 AutoSave für AJAX-Formulare AJAX IN ACTION Timo Holzherr Klasse AutoSave Hält eine Instanz der Klasse FormObservable vor Instanziert die Klasse an einer Form-Node, Timeout konfigurierbar Fügt einen Observer hinzu, delegiert FormObservable Setzt alle Timeouts zurück

33 AutoSave für AJAX-Formulare AJAX IN ACTION Timo Holzherr Klasse AutoSave var as = new AutoSave( document.forms[0], 5 ); as.addObserver( { ontimeout: function(){ /* AJAX Request senden */ }, onupdate: function() { /* aktivieren */ } } );

34 AutoSave für AJAX-Formulare AJAX IN ACTION Timo Holzherr Klasse AutoSave: Initialisierung AutoSave = function( form, saveTime ) { this._options = { form: form, saveTime: saveTime * 1000, // convert into milliseconds }; this._interval = null; this._observable = new FormObservable( form ); this._observable.addObserver( { onupdate: this._updateInterval.bind( this ), ontimeout: this.reset.bind( this ) } ); }; Die übergebenen Parameter werden gespeichert

35 AutoSave für AJAX-Formulare AJAX IN ACTION Timo Holzherr Klasse AutoSave: Initialisierung AutoSave = function( form, saveTime ) { this._options = { form: form, saveTime: saveTime * 1000, // convert into milliseconds }; this._interval = null; this._observable = new FormObservable( form ); this._observable.addObserver( { onupdate: this._updateInterval.bind( this ), ontimeout: this.reset.bind( this ) } ); }; Klassenvariable _interval wird initialisiert. Referenziert Timeout, um es wieder zu stoppen var to = window.setTimeout( callback, zeit ); window.clearTimeout( to );

36 AutoSave für AJAX-Formulare AJAX IN ACTION Timo Holzherr Klasse AutoSave: Initialisierung AutoSave = function( form, saveTime ) { this._options = { form: form, saveTime: saveTime * 1000, // convert into milliseconds }; this._interval = null; this._observable = new FormObservable( form ); this._observable.addObserver( { onupdate: this._updateInterval.bind( this ), ontimeout: this.reset.bind( this ) } ); }; FormObservable instanzieren und Observer hinzufügen

37 AutoSave für AJAX-Formulare AJAX IN ACTION Timo Holzherr Klasse AutoSave: _updateInterval AutoSave.prototype._updateInterval = function( ) { this._resetInterval(); this._interval = window.setTimeout( this._timeExceeded.bind( this ), this._options.saveTime ); }; Wird bei einem Update-Event des FormObservable aufgerufen (Änderungen am Formular)

38 AutoSave für AJAX-Formulare AJAX IN ACTION Timo Holzherr Klasse AutoSave: _updateInterval AutoSave.prototype._updateInterval = function( ) { this._resetInterval(); this._interval = window.setTimeout( this._timeExceeded.bind( this ), this._options.saveTime ); }; AutoSave.prototype._resetInterval = function() { if( this._interval ) { window.clearTimeout( this._interval ); this._interval = null; }

39 AutoSave für AJAX-Formulare AJAX IN ACTION Timo Holzherr Klasse AutoSave: _updateInterval AutoSave.prototype._updateInterval = function( ) { this._resetInterval(); this._interval = window.setTimeout( this._timeExceeded.bind( this ), this._options.saveTime ); }; Aufgerufene Methode: AutoSave._timeExceeded() Setzt this._interval zurück Löst mit notifyObservers das Event timeout aus Timeout starten

40 AutoSave für AJAX-Formulare AJAX IN ACTION Timo Holzherr BEISPIEL AUTOSAVE[2] var as = new AutoSave( document.forms[0] ); as.addObserver( { onupdate: function() { document.forms[0].draft.disabled = null; }, ontimeout: function() { alert(Saving form data.); document.forms[0].draft.disabled = 'disabled'; } } );

41 AutoSave für AJAX-Formulare AJAX IN ACTION Timo Holzherr Durchgehendes Tippen Problem Regelmäßiges Eingeben in ein Textfeld Das Formular wird nie automatisch abgeschickt Ansatz Eingaben zählen (Maus, Tastatur) Ab gewisser Anzahl an Änderungen das Speichern erzwingen

42 AutoSave für AJAX-Formulare AJAX IN ACTION Timo Holzherr Klasse AutoSave: HitsCounter

43 AutoSave für AJAX-Formulare AJAX IN ACTION Timo Holzherr Klasse AutoSave mit HitsCounter Neuer Parameter hitsLimit Spezifiziert die maximale Anzahl ungespeicherter Änderungen Observer-Events: update: Element hat sich geändert timeout: Timeout wurde erreicht hitslimit: Maximale Anz. an Änderungen erreicht

44 AutoSave für AJAX-Formulare AJAX IN ACTION Timo Holzherr Klasse Note Konkrete Anwendung von AutoSave.js Verwendet AutoSave Observer-Events update: aktivieren timeout: Daten senden, deaktivieren hitslimit: Daten senden, deaktivieren

45 AutoSave für AJAX-Formulare AJAX IN ACTION Timo Holzherr Speicherung der Daten (1) Implementierung des AJAX-Requests Abhängig vom eingesetzten AJAX-Framework Datenbank-Schema zum Ablegen der AutoSave-Daten Abhängig von der Anwendung Extra-Tabelle autosaves Inmitten der Nutzdaten: flag: draft

46 AutoSave für AJAX-Formulare AJAX IN ACTION Timo Holzherr Speicherung der Daten (2) Fall: Speicherung der Daten inmitten der Nutzdaten 1. AutoSave-Request würde einen neuen Eintrag anlegen INSERT INTO … Folge-Requests müssen diesen Datensatz aktualisieren UPDATE … WHERE ID = … Deshalb AutoSave-Request muss den PK zurückgeben Notizen id INT(10) PRIMARY KEY title VARCHAR(50) body TEXT lang VARCHAR(5) draft TINYINT(1)

47 AutoSave für AJAX-Formulare AJAX IN ACTION Timo Holzherr Speicherung der Daten (2)

48 AutoSave für AJAX-Formulare AJAX IN ACTION Timo Holzherr Formularvalidierung Beim Empfangen von Formularen Formularvalidierung Sind alle Felder ausgefüllt Überschreiten die Felder nicht die Maximallänge Bei AutoSave-Requests Keine oder nur einfache Validierung! Sonst: Keine AutoSave der Eingaben obwohl evtl nur ein Feld fehlt

49 AutoSave für AJAX-Formulare AJAX IN ACTION Timo Holzherr DEMONSTRATION ERGEBNIS Framework für AutoSaving Kann universell eingesetzt werden AJAX-Requests und Persistence müssen selbst implementiert werden

50 AutoSave für AJAX-Formulare AJAX IN ACTION Timo Holzherr Verweise [1] Prototype JS-Bibliothek für einfache DOM-Manipulation und AJAX-Requests [2] Folien und Beispiele dieses Vortrags


Herunterladen ppt "AutoSave für AJAX-Formulare Timo Holzherr AJAX in ACTION 2007, 06.11.2007, Frankfurt."

Ähnliche Präsentationen


Google-Anzeigen