Faddie bloggt – schon wieder!

Dojo Tutorial mit Grid – Teil 5: Events

Heute kümmern wir uns um einen Ajax-Statusindikator. Das fördert die Usability unserer Seite, weil der Browser für Ajax-Aufrufe normalerweise keine Ladeanimation anzeigt (das Ding oben rechts im Browser). Also machen wir das selbst!

Zunächst benötigen wir so ein animiertes .gif, dass wir als Statusindikator verwenden können. Auf dieser Seite hier gibt’s jede Menge davon: http://www.napyfab.com/ajax-indicators/

Update: Der obere Link hat sich in Rauch aufgelöst, in der Zwischenzeit kann hier Abhilfe geschaffen werden: http://www.ajaxload.info/

Ich habe mich für dieses auffällige Exemplar entschieden:

Jetzt müssen wir es nur noch schaffen, dass diese Grafik immer dann angezeigt wird, wenn Dojo Inhalte vom Server nachlädt. Hierfür verwenden wir wieder Dojo Events, bloß diesmal nicht mit Browserereignissen (onClick usw.), sondern mit eigenen Ereignissen.

Kümmern wir uns aber erstmal um den HTML-Teil.

<div class="warten" id="indikator">
	Bitte warten...<br />
	<img src="progressbar_long.gif" />
</div>

Wir haben hier einen einfachen <div>-Container. Ich habe bewusst keinen schickes Dialog Dijit verwendet, weil das hier auch angezeigt werden soll, wenn Dojo noch nicht geladen worden ist.

Damit es aber wenigstens ein bisschen was her macht, hier der CSS-Teil.

.warten {
	display:none;
	position:absolute;
	top:80px;
	left:20px;
	padding:10px;
	border:1px solid gray;
	background-color:white;
 	z-index:999;
}

Wir legen den <div>-Container zum Teil über das Suchformular, damit der Indikator auch ins Auge springt. Damit uns der Indikator beim Surfen ohne Javascript nicht auf die Nerven geht, lassen wir ihn vorerst ausgeblenden (display:none).

Unter den <style>-Block kommt ein kleiner Javascript-Block hinzu, um das Element einzublenden:

<script type="text/javascript">document.write('<style type="text/css">.warten{display:block;}</style>');</script>

Jetzt können wir den HTML-Part verlassen und zum wirklichen Javascript-Teil übergehen.

In der Funktion “init”, die bekanntlich von Dojo nach dem vollständigen Laden der Seite, inkl. aller Scripts, aufgerufen wird, tragen wir folgendes ein:

topics[0] = dojo.subscribe("seiteAktiv", null, indikatorWechseln);

Das Array “topics” sollte vorher natürlich präsent sein. Da wir ohnehin schon so viele globale Variablen haben, warum nicht noch eine mehr… setzen wir das Array doch hinter die globalen Grid-Variablen.

var ddata;
var grid;
var store;
var layout = [ view1 ];
var topics = [];

Dojo verwendet für eigene Ereignisse einen Event-Queue. Man kann sich wie ein Abo vorstellen und Dojo ist der Postbote vom Postamt “topics” (jeder Abonnent bekommt einen eigenen Platz im Array topics).

Mit “dojo.subscribe” erstellt man einen Abonnenten, der ganz wahnsinnig oft in seinen Briefkasten guckt Zusätzlich sagt man mit der Funktion noch, was der Abonnent mit dem Telegramm machen soll. Unser Abonnent heißt “seiteAktiv” und soll “indikatorWechseln” machen – abhängig davon, was in dem Telegramm steht.

Wir verschicken diese Telegramme mit der Funktion “dojo.publish”.

dojo.publish("seiteAktiv", ["ja"]);

Unser leicht nervöser Abonnent schaut umgehend in den Briefkasten und findet sein Telegramm. Er ruft die Funktion “indikatorWechseln” mit dem Wert “ja” auf, denn das stand ja in dem Telegramm.

Zusammenfassend etwas abstrakter: in ein Array, hier “topics[]“, werden die “listener” mit der Funktion “subscribe” erstellt. Mit dojo.publish werden diese dann angesprochen. Der “listener” ruft dann die Funktion auf mit dem übergebenen Wert aus, hier die Funktion “indikatorWechseln” mit dem Wert “ja”.

Die Funktion indikatorWechseln will natürlich auch erstellt sein:

function indikatorWechseln(evt) {
	if (evt=="ja") dojo.byId('indikator').style.display='block';
	else dojo.byId('indikator').style.display='none';
}

Hier geschieht nicht viel, wenn der Wert vom Parameter “evt” “ja” ist, wird der <div>-Container eingeblendet, sonst nicht.

Wenn wir jetzt alles erstellt haben, brauchen wir nur noch in der “init”-Funktion am Ende das Telegramm versenden, dass die Seite nicht mehr aktiv ist – also folgendermaßen:

dojo.publish("seiteAktiv", ["nein"]);

Jetzt können wir mit dojo.publish den Indikator so oft wir wollen an- und ausschalten. Sinnvoll ist das bei unserer “mein_submit”-Funktion: einmal vor der Kommunikation mit dem Server mit “ja” und einmal danach mit “nein”.

Wieder einmal die ganze mein_submit Funktion in ihrer ganzen Pracht

function mein_submit (event) {
	// Den Standard-Submit und das Verlassen
	// der Seite verhindern
	dojo.stopEvent(event);
	dojo.publish("seiteAktiv", ["ja"]);
	// das Textfeld auslesen
	var textfeld_name = dijit.byId("txt_name").getValue();
	// Prüfen, ob das Textfeld leer ist
	if (textfeld_name =='') {
		alert ('Sie müssen einen Namen eintragen');
		dojo.publish("seiteAktiv", ["nein"]);
		return false;
	}
	else {
		// Umlaute in HTML-Entitäten konvertieren
		textfeld_name = htmlFromUmlaut(textfeld_name);
		// Parameter für asynchrone Übertragung (Ajax)
		var kw = {
			// Hier liegt die dynamische Seite
			url: "gridtut_request.php",
			// wird bei Server-Antwort aufgerufen
			load: function(data){
					// Server-String auswerten und Grid updaten
					var ergebnis = eval('('+data+')');
					updateGrid(ergebnis);
					dojo.publish("seiteAktiv", ["nein"]);
			},
			// wird bei Server-Fehler aufgerufen
			error: function(data){
			        alert("Es ist ein Fehler aufgetreten: " + data);
			        dojo.publish("seiteAktiv", ["nein"]);

			},
			// Werte, die übertragen werden
			content: {  txt_name: textfeld_name,
						js_aktiv: 'ja'}
		};
		dojo.xhrPost(kw);
	}
}

Man sieht, dass wir für jeden Ausstiegspunkt aus der Funktion auch dem Indikator bescheid geben müssen.

Wer noch mag, kann die “indikatorWechseln”-Funktion noch so aufboren, dass der Such-Button während der Aktivität deaktiviert ist. Sowas halte ich bei einer “Speichern”Funktion allerdings sinnvoller.

So, Events haben wir abgehakt! Bleibt noch das Popup im nächsten Teil.

Step-8 zum Runterladen: Gridtut-8-js Gridtut-8-html