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

AutoSave für AJAX-Formulare

Timo Holzherr

AJAX in ACTION 2007, 06.11.2007, Frankfurt

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

Agenda

Was ist AutoSave?

Praktische Anwendungen

Formulareingaben überwachen

Zeitintervalle steuern, Eingaben zählen

AJAX-Request absenden

Formular-Validierung

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

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

AUTOSAVE BEI MY NERO

AutoSave bei My Nero

Blog-Editor

Regelmäßiges

Speichern im

Hintergrund

AutoSave bei My Nero

Recovery-Feature auf dem Login-Screen

AUTOSAVE BEI GOOGLE MAIL

AutoSave bei Google Mail

Während der Eingabe der E-

Regelmäßiges Speichern der

Eingaben

AutoSave bei Google Mail

Der Benutzer findet die automatisch gespeicherte E-Mail im Ordner Entwürfe

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

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

Klasse FormObservable

Speichert die Liste

der Observer

Initialisiert die Klasse an einer

Form-Node

Sendet ein Event an alle

ObserverFügt einen

Observer hinzu

Klasse FormObservable

var observable = new FormObservable( document.forms[0] ); observable.addObserver( { onupdate: function() { alert(“Form element has been updated.“); } } );

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

Events, die überwacht

werden sollen

Methode, die später die

Events verarbeitet

bind: Methode aus der Bibliothek Prototype [1] Setzt den Kontext der Methode auf die Instanz thisJS-Event-Handling: Ansonsten Verlust des Kontextes

Jedem Formular-

Element wird call als Event-

Listener hinzugefügt

Hier: Event-Implementierung nur für Mozilla Firefox

Empfohlen: Bibliothek für Browser-Abstraktion

Bsp.: Prototype [1]

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

Dabei wird jedes Formularelement auf eine

Änderung geprüft

FormObservable:

Merkt sich lokal für jedes Element den letzten Wert

Observers über eine Änderung informieren

Wertänderung lokal merken

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

Klasse FormObservable: _loadDefaultValues

FormObservable = function( formNode ) { … // Initialisierung der Event-Handler this._loadDefaultValues(); }

Nach der bereits erwähnten Initialisierung:

Laden der Default Values

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

BEISPIEL OBSERVABLE [2]

var observable = new FormObservable( document.forms[0] ); observable.addObserver( { onupdate: function() { alert(“Form element has been updated.“); } } );

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

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

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

Klasse AutoSave

var as = new AutoSave( document.forms[0], 5 );

as.addObserver( { ontimeout: function(){ /* AJAX Request senden */ }, onupdate: function() { /* aktivieren */ } } );

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

Klassenvariable _interval wird initialisiert.

Referenziert Timeout, um es wieder zu stoppen var to = window.setTimeout( callback, zeit );

window.clearTimeout( to );

FormObservable instanzieren

und Observer hinzufügen

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)

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

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

BEISPIEL AUTOSAVE[2]

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

Klasse AutoSave: HitsCounter

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

Klasse Note

Konkrete Anwendung von AutoSave.js

Verwendet AutoSave

Observer-Events

update: aktivieren

timeout: Daten senden, deaktivieren

hitslimit: Daten senden, deaktivieren

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“

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)

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

DEMONSTRATION ERGEBNIS

• Framework für AutoSaving

• Kann universell eingesetzt werden

• AJAX-Requests und Persistence müssen selbst implementiert werden

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

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

Documents

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

Ajax v. Röhnsaler Bach SZ: 2138666 17.12..03 SchH3, IP3 ... Ajax DSH-Spezial.pdfDSH-SPEZIAL 03/2007 43 Dennis Rohde Eigentümer & Hundeführer Ajax habe ich im Alter von 21 Monaten

Einführung in AJAX - hdm-stuttgart.de · 1 Einführung in AJAX Seminar Internet SS2007 Von Anna-Lena Martin, Natalie Meffert und Eva Szanto Was ist Ajax?

22067 U4 U1 MCS · 2014-06-17 · AJaX-Anwendungen Verfügung stehen. „Xajax“, „Sajax“ oder „Xoad“ sind Klassen-bibliotheken für PHP, die es ermöglichen, AJaX zu nutzen,

Xajax – Ein Ajax-Framework f" ur PHP

Webtechnologien für das Frontend & Javascribt( AJAX ) vs Flash( Flex )

Flash, Ajax & Barrierefreiheit

Ajax and JavaScript mit Ruby on Rails

Das Praxisbuch für Web-Entwickler Ajax JavaScript Ajax fileAjax Jan Winkler 2. aktualisierte Auflage FRANZIS > JavaScript-Grundlagen beherrschen und anwenden > Ajax-Anwendungen verstehen

Timo Heinrich - ciando.com

FWP Aktuelle Technologien zur Entwicklung verteilter Java … · 2020-05-17 · Faces (JSF) und AJAX an. Schildern Sie die Grundlagen von AJAX. Erläutern Sie wie sich AJAX seit JSF

Ajax - Inner Dances

ASP.NET Ajax Daniel Walzenbach Developer Evangelist Microsoft Deutschland GmbH .

AJAX und Comet - se.uni-hannover.dese.uni-hannover.de/priv/lehre_2010sommer_ · AJAX und Comet 28.04.2010 4 Klassische Webseiten-Model • Benutzeraktion auf Webseite führt zu Anfrage

2010 - Basta!: REST mit WCF 4, Silverlight und AJAX

Timo Jankowski Taktische - download.e-bookshelf.de

Die Hochzeit von Dani & Timo

Java Servlets und AJAX

17.Timo Darf Nicht Sterben

Zentrale Abschlussarbeit Deutsch Realschule 2007/08 Informationsveranstaltung für die Fachberaterinnen und Fachberater der Staatlichen Schulämter 06.11.2007.

JavaScript und Ajax mit Rails