autosave für ajax-formulare timo holzherr ajax in action 2007, 06.11.2007, frankfurt
TRANSCRIPT
![Page 1: AutoSave für AJAX-Formulare Timo Holzherr AJAX in ACTION 2007, 06.11.2007, Frankfurt](https://reader035.vdocuments.pub/reader035/viewer/2022062404/55204d6749795902118bca70/html5/thumbnails/1.jpg)
AutoSave für AJAX-Formulare
Timo Holzherr
AJAX in ACTION 2007, 06.11.2007, Frankfurt
![Page 2: AutoSave für AJAX-Formulare Timo Holzherr AJAX in ACTION 2007, 06.11.2007, Frankfurt](https://reader035.vdocuments.pub/reader035/viewer/2022062404/55204d6749795902118bca70/html5/thumbnails/2.jpg)
AutoSave für AJAX-Formulare
AJAX IN ACTION 2007 - 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
![Page 3: AutoSave für AJAX-Formulare Timo Holzherr AJAX in ACTION 2007, 06.11.2007, Frankfurt](https://reader035.vdocuments.pub/reader035/viewer/2022062404/55204d6749795902118bca70/html5/thumbnails/3.jpg)
AutoSave für AJAX-Formulare
AJAX IN ACTION 2007 - Timo Holzherr
Agenda
Was ist AutoSave?
Praktische Anwendungen
Formulareingaben überwachen
Zeitintervalle steuern, Eingaben zählen
AJAX-Request absenden
Formular-Validierung
![Page 4: AutoSave für AJAX-Formulare Timo Holzherr AJAX in ACTION 2007, 06.11.2007, Frankfurt](https://reader035.vdocuments.pub/reader035/viewer/2022062404/55204d6749795902118bca70/html5/thumbnails/4.jpg)
AutoSave für AJAX-Formulare
AJAX IN ACTION 2007 - 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
![Page 5: AutoSave für AJAX-Formulare Timo Holzherr AJAX in ACTION 2007, 06.11.2007, Frankfurt](https://reader035.vdocuments.pub/reader035/viewer/2022062404/55204d6749795902118bca70/html5/thumbnails/5.jpg)
AutoSave für AJAX-Formulare
AJAX IN ACTION 2007 - 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/)
…
![Page 6: AutoSave für AJAX-Formulare Timo Holzherr AJAX in ACTION 2007, 06.11.2007, Frankfurt](https://reader035.vdocuments.pub/reader035/viewer/2022062404/55204d6749795902118bca70/html5/thumbnails/6.jpg)
AutoSave für AJAX-Formulare
AJAX IN ACTION 2007 - Timo Holzherr
AUTOSAVE BEI MY NERO
![Page 7: AutoSave für AJAX-Formulare Timo Holzherr AJAX in ACTION 2007, 06.11.2007, Frankfurt](https://reader035.vdocuments.pub/reader035/viewer/2022062404/55204d6749795902118bca70/html5/thumbnails/7.jpg)
AutoSave für AJAX-Formulare
AJAX IN ACTION 2007 - Timo Holzherr
AutoSave bei My Nero
Blog-Editor
Regelmäßiges
Speichern im
Hintergrund
![Page 8: AutoSave für AJAX-Formulare Timo Holzherr AJAX in ACTION 2007, 06.11.2007, Frankfurt](https://reader035.vdocuments.pub/reader035/viewer/2022062404/55204d6749795902118bca70/html5/thumbnails/8.jpg)
AutoSave für AJAX-Formulare
AJAX IN ACTION 2007 - Timo Holzherr
AutoSave bei My Nero
Recovery-Feature auf dem Login-Screen
![Page 9: AutoSave für AJAX-Formulare Timo Holzherr AJAX in ACTION 2007, 06.11.2007, Frankfurt](https://reader035.vdocuments.pub/reader035/viewer/2022062404/55204d6749795902118bca70/html5/thumbnails/9.jpg)
AutoSave für AJAX-Formulare
AJAX IN ACTION 2007 - Timo Holzherr
AUTOSAVE BEI GOOGLE MAIL
![Page 10: AutoSave für AJAX-Formulare Timo Holzherr AJAX in ACTION 2007, 06.11.2007, Frankfurt](https://reader035.vdocuments.pub/reader035/viewer/2022062404/55204d6749795902118bca70/html5/thumbnails/10.jpg)
AutoSave für AJAX-Formulare
AJAX IN ACTION 2007 - Timo Holzherr
AutoSave bei Google Mail
Während der Eingabe der E-
Mail:
Regelmäßiges Speichern der
Eingaben
![Page 11: AutoSave für AJAX-Formulare Timo Holzherr AJAX in ACTION 2007, 06.11.2007, Frankfurt](https://reader035.vdocuments.pub/reader035/viewer/2022062404/55204d6749795902118bca70/html5/thumbnails/11.jpg)
AutoSave für AJAX-Formulare
AJAX IN ACTION 2007 - Timo Holzherr
AutoSave bei Google Mail
Der Benutzer findet die automatisch gespeicherte E-Mail im Ordner Entwürfe
![Page 12: AutoSave für AJAX-Formulare Timo Holzherr AJAX in ACTION 2007, 06.11.2007, Frankfurt](https://reader035.vdocuments.pub/reader035/viewer/2022062404/55204d6749795902118bca70/html5/thumbnails/12.jpg)
AutoSave für AJAX-Formulare
AJAX IN ACTION 2007 - 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
![Page 13: AutoSave für AJAX-Formulare Timo Holzherr AJAX in ACTION 2007, 06.11.2007, Frankfurt](https://reader035.vdocuments.pub/reader035/viewer/2022062404/55204d6749795902118bca70/html5/thumbnails/13.jpg)
AutoSave für AJAX-Formulare
AJAX IN ACTION 2007 - 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
![Page 14: AutoSave für AJAX-Formulare Timo Holzherr AJAX in ACTION 2007, 06.11.2007, Frankfurt](https://reader035.vdocuments.pub/reader035/viewer/2022062404/55204d6749795902118bca70/html5/thumbnails/14.jpg)
AutoSave für AJAX-Formulare
AJAX IN ACTION 2007 - Timo Holzherr
Klasse FormObservable
Speichert die Liste
der Observer
Initialisiert die Klasse an einer
Form-Node
Sendet ein Event an alle
ObserverFügt einen
Observer hinzu
![Page 15: AutoSave für AJAX-Formulare Timo Holzherr AJAX in ACTION 2007, 06.11.2007, Frankfurt](https://reader035.vdocuments.pub/reader035/viewer/2022062404/55204d6749795902118bca70/html5/thumbnails/15.jpg)
AutoSave für AJAX-Formulare
AJAX IN ACTION 2007 - Timo Holzherr
Klasse FormObservable
var observable = new FormObservable( document.forms[0] ); observable.addObserver( { onupdate: function() { alert(“Form element has been updated.“); } } );
![Page 16: AutoSave für AJAX-Formulare Timo Holzherr AJAX in ACTION 2007, 06.11.2007, Frankfurt](https://reader035.vdocuments.pub/reader035/viewer/2022062404/55204d6749795902118bca70/html5/thumbnails/16.jpg)
AutoSave für AJAX-Formulare
AJAX IN ACTION 2007 - 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
![Page 17: AutoSave für AJAX-Formulare Timo Holzherr AJAX in ACTION 2007, 06.11.2007, Frankfurt](https://reader035.vdocuments.pub/reader035/viewer/2022062404/55204d6749795902118bca70/html5/thumbnails/17.jpg)
AutoSave für AJAX-Formulare
AJAX IN ACTION 2007 - 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
![Page 18: AutoSave für AJAX-Formulare Timo Holzherr AJAX in ACTION 2007, 06.11.2007, Frankfurt](https://reader035.vdocuments.pub/reader035/viewer/2022062404/55204d6749795902118bca70/html5/thumbnails/18.jpg)
AutoSave für AJAX-Formulare
AJAX IN ACTION 2007 - 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
![Page 19: AutoSave für AJAX-Formulare Timo Holzherr AJAX in ACTION 2007, 06.11.2007, Frankfurt](https://reader035.vdocuments.pub/reader035/viewer/2022062404/55204d6749795902118bca70/html5/thumbnails/19.jpg)
AutoSave für AJAX-Formulare
AJAX IN ACTION 2007 - 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 thisJS-Event-Handling: Ansonsten Verlust des Kontextes
![Page 20: AutoSave für AJAX-Formulare Timo Holzherr AJAX in ACTION 2007, 06.11.2007, Frankfurt](https://reader035.vdocuments.pub/reader035/viewer/2022062404/55204d6749795902118bca70/html5/thumbnails/20.jpg)
AutoSave für AJAX-Formulare
AJAX IN ACTION 2007 - 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
![Page 21: AutoSave für AJAX-Formulare Timo Holzherr AJAX in ACTION 2007, 06.11.2007, Frankfurt](https://reader035.vdocuments.pub/reader035/viewer/2022062404/55204d6749795902118bca70/html5/thumbnails/21.jpg)
AutoSave für AJAX-Formulare
AJAX IN ACTION 2007 - 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]
![Page 22: AutoSave für AJAX-Formulare Timo Holzherr AJAX in ACTION 2007, 06.11.2007, Frankfurt](https://reader035.vdocuments.pub/reader035/viewer/2022062404/55204d6749795902118bca70/html5/thumbnails/22.jpg)
AutoSave für AJAX-Formulare
AJAX IN ACTION 2007 - 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
![Page 23: AutoSave für AJAX-Formulare Timo Holzherr AJAX in ACTION 2007, 06.11.2007, Frankfurt](https://reader035.vdocuments.pub/reader035/viewer/2022062404/55204d6749795902118bca70/html5/thumbnails/23.jpg)
AutoSave für AJAX-Formulare
AJAX IN ACTION 2007 - 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
![Page 24: AutoSave für AJAX-Formulare Timo Holzherr AJAX in ACTION 2007, 06.11.2007, Frankfurt](https://reader035.vdocuments.pub/reader035/viewer/2022062404/55204d6749795902118bca70/html5/thumbnails/24.jpg)
AutoSave für AJAX-Formulare
AJAX IN ACTION 2007 - 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
![Page 25: AutoSave für AJAX-Formulare Timo Holzherr AJAX in ACTION 2007, 06.11.2007, Frankfurt](https://reader035.vdocuments.pub/reader035/viewer/2022062404/55204d6749795902118bca70/html5/thumbnails/25.jpg)
AutoSave für AJAX-Formulare
AJAX IN ACTION 2007 - 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
![Page 26: AutoSave für AJAX-Formulare Timo Holzherr AJAX in ACTION 2007, 06.11.2007, Frankfurt](https://reader035.vdocuments.pub/reader035/viewer/2022062404/55204d6749795902118bca70/html5/thumbnails/26.jpg)
AutoSave für AJAX-Formulare
AJAX IN ACTION 2007 - 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
![Page 27: AutoSave für AJAX-Formulare Timo Holzherr AJAX in ACTION 2007, 06.11.2007, Frankfurt](https://reader035.vdocuments.pub/reader035/viewer/2022062404/55204d6749795902118bca70/html5/thumbnails/27.jpg)
AutoSave für AJAX-Formulare
AJAX IN ACTION 2007 - Timo Holzherr
Klasse FormObservable: _loadDefaultValues
FormObservable = function( formNode ) { … // Initialisierung der Event-Handler this._loadDefaultValues(); }
Nach der bereits erwähnten Initialisierung:
Laden der Default Values
![Page 28: AutoSave für AJAX-Formulare Timo Holzherr AJAX in ACTION 2007, 06.11.2007, Frankfurt](https://reader035.vdocuments.pub/reader035/viewer/2022062404/55204d6749795902118bca70/html5/thumbnails/28.jpg)
AutoSave für AJAX-Formulare
AJAX IN ACTION 2007 - 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(); }
![Page 29: AutoSave für AJAX-Formulare Timo Holzherr AJAX in ACTION 2007, 06.11.2007, Frankfurt](https://reader035.vdocuments.pub/reader035/viewer/2022062404/55204d6749795902118bca70/html5/thumbnails/29.jpg)
AutoSave für AJAX-Formulare
AJAX IN ACTION 2007 - Timo Holzherr
BEISPIEL OBSERVABLE [2]
var observable = new FormObservable( document.forms[0] ); observable.addObserver( { onupdate: function() { alert(“Form element has been updated.“); } } );
![Page 30: AutoSave für AJAX-Formulare Timo Holzherr AJAX in ACTION 2007, 06.11.2007, Frankfurt](https://reader035.vdocuments.pub/reader035/viewer/2022062404/55204d6749795902118bca70/html5/thumbnails/30.jpg)
AutoSave für AJAX-Formulare
AJAX IN ACTION 2007 - 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 } } );
![Page 31: AutoSave für AJAX-Formulare Timo Holzherr AJAX in ACTION 2007, 06.11.2007, Frankfurt](https://reader035.vdocuments.pub/reader035/viewer/2022062404/55204d6749795902118bca70/html5/thumbnails/31.jpg)
AutoSave für AJAX-Formulare
AJAX IN ACTION 2007 - 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
![Page 32: AutoSave für AJAX-Formulare Timo Holzherr AJAX in ACTION 2007, 06.11.2007, Frankfurt](https://reader035.vdocuments.pub/reader035/viewer/2022062404/55204d6749795902118bca70/html5/thumbnails/32.jpg)
AutoSave für AJAX-Formulare
AJAX IN ACTION 2007 - Timo Holzherr
Klasse AutoSave
Hält eine Instanz der Klasse FormObservable
vorInstanziert die Klasse an einer Form-Node,
Timeout konfigurierbar
Fügt einen Observer hinzu, delegiert FormObservable
Setzt alle Timeouts zurück
![Page 33: AutoSave für AJAX-Formulare Timo Holzherr AJAX in ACTION 2007, 06.11.2007, Frankfurt](https://reader035.vdocuments.pub/reader035/viewer/2022062404/55204d6749795902118bca70/html5/thumbnails/33.jpg)
AutoSave für AJAX-Formulare
AJAX IN ACTION 2007 - Timo Holzherr
Klasse AutoSave
var as = new AutoSave( document.forms[0], 5 );
as.addObserver( { ontimeout: function(){ /* AJAX Request senden */ }, onupdate: function() { /* aktivieren */ } } );
![Page 34: AutoSave für AJAX-Formulare Timo Holzherr AJAX in ACTION 2007, 06.11.2007, Frankfurt](https://reader035.vdocuments.pub/reader035/viewer/2022062404/55204d6749795902118bca70/html5/thumbnails/34.jpg)
AutoSave für AJAX-Formulare
AJAX IN ACTION 2007 - 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
![Page 35: AutoSave für AJAX-Formulare Timo Holzherr AJAX in ACTION 2007, 06.11.2007, Frankfurt](https://reader035.vdocuments.pub/reader035/viewer/2022062404/55204d6749795902118bca70/html5/thumbnails/35.jpg)
AutoSave für AJAX-Formulare
AJAX IN ACTION 2007 - 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 );
![Page 36: AutoSave für AJAX-Formulare Timo Holzherr AJAX in ACTION 2007, 06.11.2007, Frankfurt](https://reader035.vdocuments.pub/reader035/viewer/2022062404/55204d6749795902118bca70/html5/thumbnails/36.jpg)
AutoSave für AJAX-Formulare
AJAX IN ACTION 2007 - 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
![Page 37: AutoSave für AJAX-Formulare Timo Holzherr AJAX in ACTION 2007, 06.11.2007, Frankfurt](https://reader035.vdocuments.pub/reader035/viewer/2022062404/55204d6749795902118bca70/html5/thumbnails/37.jpg)
AutoSave für AJAX-Formulare
AJAX IN ACTION 2007 - 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)
![Page 38: AutoSave für AJAX-Formulare Timo Holzherr AJAX in ACTION 2007, 06.11.2007, Frankfurt](https://reader035.vdocuments.pub/reader035/viewer/2022062404/55204d6749795902118bca70/html5/thumbnails/38.jpg)
AutoSave für AJAX-Formulare
AJAX IN ACTION 2007 - 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; } }
![Page 39: AutoSave für AJAX-Formulare Timo Holzherr AJAX in ACTION 2007, 06.11.2007, Frankfurt](https://reader035.vdocuments.pub/reader035/viewer/2022062404/55204d6749795902118bca70/html5/thumbnails/39.jpg)
AutoSave für AJAX-Formulare
AJAX IN ACTION 2007 - 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
![Page 40: AutoSave für AJAX-Formulare Timo Holzherr AJAX in ACTION 2007, 06.11.2007, Frankfurt](https://reader035.vdocuments.pub/reader035/viewer/2022062404/55204d6749795902118bca70/html5/thumbnails/40.jpg)
AutoSave für AJAX-Formulare
AJAX IN ACTION 2007 - 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'; } } );
![Page 41: AutoSave für AJAX-Formulare Timo Holzherr AJAX in ACTION 2007, 06.11.2007, Frankfurt](https://reader035.vdocuments.pub/reader035/viewer/2022062404/55204d6749795902118bca70/html5/thumbnails/41.jpg)
AutoSave für AJAX-Formulare
AJAX IN ACTION 2007 - 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
![Page 42: AutoSave für AJAX-Formulare Timo Holzherr AJAX in ACTION 2007, 06.11.2007, Frankfurt](https://reader035.vdocuments.pub/reader035/viewer/2022062404/55204d6749795902118bca70/html5/thumbnails/42.jpg)
AutoSave für AJAX-Formulare
AJAX IN ACTION 2007 - Timo Holzherr
Klasse AutoSave: HitsCounter
![Page 43: AutoSave für AJAX-Formulare Timo Holzherr AJAX in ACTION 2007, 06.11.2007, Frankfurt](https://reader035.vdocuments.pub/reader035/viewer/2022062404/55204d6749795902118bca70/html5/thumbnails/43.jpg)
AutoSave für AJAX-Formulare
AJAX IN ACTION 2007 - Timo Holzherr
Klasse AutoSave mit HitsCounter
Neuer Parameter hitsLimitSpezifiziert die maximaleAnzahl ungespeicherterÄnderungen
Observer-Events: • update: Element hat sich geändert• timeout: Timeout wurde erreicht• hitslimit: Maximale Anz. an Änderungen erreicht
![Page 44: AutoSave für AJAX-Formulare Timo Holzherr AJAX in ACTION 2007, 06.11.2007, Frankfurt](https://reader035.vdocuments.pub/reader035/viewer/2022062404/55204d6749795902118bca70/html5/thumbnails/44.jpg)
AutoSave für AJAX-Formulare
AJAX IN ACTION 2007 - Timo Holzherr
Klasse Note
Konkrete Anwendung von AutoSave.js
Verwendet AutoSave
Observer-Events
update: aktivieren
timeout: Daten senden, deaktivieren
hitslimit: Daten senden, deaktivieren
![Page 45: AutoSave für AJAX-Formulare Timo Holzherr AJAX in ACTION 2007, 06.11.2007, Frankfurt](https://reader035.vdocuments.pub/reader035/viewer/2022062404/55204d6749795902118bca70/html5/thumbnails/45.jpg)
AutoSave für AJAX-Formulare
AJAX IN ACTION 2007 - 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“
![Page 46: AutoSave für AJAX-Formulare Timo Holzherr AJAX in ACTION 2007, 06.11.2007, Frankfurt](https://reader035.vdocuments.pub/reader035/viewer/2022062404/55204d6749795902118bca70/html5/thumbnails/46.jpg)
AutoSave für AJAX-Formulare
AJAX IN ACTION 2007 - 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)
![Page 47: AutoSave für AJAX-Formulare Timo Holzherr AJAX in ACTION 2007, 06.11.2007, Frankfurt](https://reader035.vdocuments.pub/reader035/viewer/2022062404/55204d6749795902118bca70/html5/thumbnails/47.jpg)
AutoSave für AJAX-Formulare
AJAX IN ACTION 2007 - Timo Holzherr
Speicherung der Daten (2)
![Page 48: AutoSave für AJAX-Formulare Timo Holzherr AJAX in ACTION 2007, 06.11.2007, Frankfurt](https://reader035.vdocuments.pub/reader035/viewer/2022062404/55204d6749795902118bca70/html5/thumbnails/48.jpg)
AutoSave für AJAX-Formulare
AJAX IN ACTION 2007 - 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
![Page 49: AutoSave für AJAX-Formulare Timo Holzherr AJAX in ACTION 2007, 06.11.2007, Frankfurt](https://reader035.vdocuments.pub/reader035/viewer/2022062404/55204d6749795902118bca70/html5/thumbnails/49.jpg)
AutoSave für AJAX-Formulare
AJAX IN ACTION 2007 - Timo Holzherr
DEMONSTRATION ERGEBNIS
• Framework für AutoSaving
• Kann universell eingesetzt werden
• AJAX-Requests und Persistence müssen selbst implementiert werden
![Page 50: AutoSave für AJAX-Formulare Timo Holzherr AJAX in ACTION 2007, 06.11.2007, Frankfurt](https://reader035.vdocuments.pub/reader035/viewer/2022062404/55204d6749795902118bca70/html5/thumbnails/50.jpg)
AutoSave für AJAX-Formulare
AJAX IN ACTION 2007 - Timo Holzherr
Verweise
[1] Prototype
http://www.prototypejs.org/
JS-Bibliothek für einfache DOM-Manipulation und AJAX-Requests
[2] Folien und Beispiele dieses Vortrags
http://timo.holzherr.de/aia2007