[Workshop] Ajax Crashkurs mit Prototype

[steffenk]

Viele werden es kennen - der Kunde möchte was besonderes. Web 2.0 - das kennt jeder, da bewegt sich viel, Inhalte werden aktualisiert ohne Neuladen etc.

Sicherlich, es gibt viele Seiten, die übertreiben, aber es hat viel gutes:

* Server wird entlastet
* eine (G)UI erlaubt raffinierte Designs
* prototype macht extrem viel Spass
* ist hip
* kenn ich nicht, wollte ich aber immer mal mich mit beschäftigen

Ok, irgendwas motiviert also dazu, sich mit diesen Frameworks zu beschäftigen, nur welches?

Tja, es gibt so viele verschiedene, aber sie haben doch alle was gemeinsam:
* sie basieren auf Javascript
* sie haben gemeinsamen Syntax
* vieles ist von prototype abgeschaut, das ist quasi der Urvater dieser frameworks.

Seit der Version 1.6 hat sich doch viel getan und prototype verliert den muffigen Geruch einstiger Tage. Mit den Effekten von scriptaculous hat man eine ansehnliche Bibliothek, mit der sich das meiste bewältigen lässt. Und last not least: kennste eine kennste alle

Gut, da meine Zeit begrenzt ist, werde ich diesen Workshop in kleinen Häppchen präsentieren, wenn es Interessenten gibt, und nicht ein Hammerlanges Tutorial auf einmal schreiben. Es ist also etwas zum mitmachen.

Lust auf mehr?
Hier eine Seite zum reinschnuppern, die auf prototype basiert:
http://www.nasa.gov/

Und hier die offizielle Seite mit Download:
http://www.prototypejs.org/

[phpBuddy]

Hallo Steffen,

die Idee ist auf jeden Fall TOP und wird bestimmt ein instant classic.
Leider habe ich momentan auch nicht viel Zeit um ausgiebig mitzumachen, aber reinlesen würde ich auf jeden Fall, da mich das Thema auch interessiert.

[Malleus]

Hallo Steffen,
Du weißt ja was ich im Allgemeinen von JS-Frameworks halte , aber an Deinem Workshop werd' ich teilnehmen. Mich interessiert vor allem die Performance.

Bis Bald!

Frank

[steffenk]

schön, dann werd ich Häppchenweise beginnen.Frank, es geht auch um Generelles, wie OOP mit JS. Ausserdem wirst Du staunen, das man mit wenigen Zeilen sich sehr komfortabel durchs Dom hangeln kann, die Macht der Selektoren.

Ich versprech, das es auch Dir Spass machen wird

[danis`]

Ich künde hier auch mal interesse an,
Zeit habe ich leider z.Zt. auch kaum - werde aber versuchen soweit wie möglich mitzumachen, und ansonsten mitzulesen!

[Malleus]

@Steffen:
Ich glaub' Dir schon, daß da einiges komfortabel ist, aber ist es auch schnell? Das Handikap bei diesen Frameworks ist ja immer, daß man eine neue "Sprache" lernen muß, aber wie gesagt, ich laß mich überraschen.

[steffenk]

Frank, es ist schnell.
Das Entscheidene für mich ist aber auch, das die Entwicklung schnell ist, d.h. man integriert das mit wenigen Zeilen, und das ist viel Wert, da meist das Budget für tagelange Entwicklung nicht reicht.

Für Deine Spiele ist native wahrscheinlich das Beste, hier geht es eher um triviale Sachen für Websites: Inhalte updaten, AJAX Response mit php, Ein-/Ausblenden etc.

[steffenk]

ok, let's go

fangen wir mit den Vorberreitungen an. Ladet Euch das vorberreitete Framework herunter und packt es in ein Verzeichnis, das ihr vom Browser aus erreicht.

Was ist in dem "Starterkit" ?

* eine index.html mit einem Grundlayout (von Stu Nicolls geliehen)
* im Ordner js/lib die neueste prototype Bibliothek
* unsere erste Klasse in js/workshop.js

Ok, wir schauen uns diese Klasse mal an

var TPStarter = Class.create({
	
	initialize: function() {
		// initialize event listeners
		Event.observe(document, 'dom:loaded', function(){
			this.registerEventListeners();
		}.bind(this));
		
	},
	
	registerEventListeners: function() {
		$$('a.nav').invoke('observe', 'click', this.toggleMenu);
	},
	
	toggleMenu: function(event) {
		var activeMenu = event.element(event);
		
			// reset the currently highlighted menu
		$$('a.nav').invoke('removeClassName', 'active');
			//activate current menu
		$(activeMenu).addClassName('active');
		//console.info(activeMenu.text);
	}
});

var MyFirstClass = new TPStarter;

ok, der Reihe nach

Klasse

Was wir da haben, ist eine Klasse in Javascript mit Methoden (oder Funktionen). Diese Klasse besitzt einen "Konstruktur", nämlich initialize.

Konstruktor heisst nichts anderes, als das diese Methode automatisch aufgerufen wird, wenn die Klasse instanziert und heisst immer "initialize".
In unserem Fall passiert das zuletzt:
var MyFirstClass = new TPStarter;

Was machen wir im Konstruktor?

Wir richten sogenannte Event listener ein, d.h. wir beobachten Events und reagieren auf bestimmte.
Da das erst funktioniert, wenn die Seite im Browser geladen ist, warten wir auf das Event "dom:ready".

Event Listener
Event.observe(document,'dom:ready',function(){...}
Der Syntax des "Observers" lautet: Event.observe(element,event,function)

Statt function(){..} können wir auch eine Methode in unserer Klasse aufrufen, z.B. this.Methode (<= alle Elemente und Funktionen der Klasse werden mit dem Schlüsselwort this angesprochen)

Innerhalb unserer Funktion rufen wir unsere Methode registerEventListeners auf, in der wir weitere Listener starten wollen

Selektoren
In der Funktion registerEventListeners sehen wir ein eigenartiges Konstrukt, es handelt sich um Selektoren, d.h. wir wollen ein Element ansprechen.
So kennt es jeder:
var a = document.getElemntById('myid');
So gehts mit dem Selector:
var a = $('myid');

ok, das ist ja noch recht simpel. Nun wollen wir aber unsere Menüklicks abfangen. Diese haben alle die Klasse nav, also fragen wir alle Elemente ab, die a sind und nav als Klasse haben:
$$('a.nav')
Das Ergebnis ist ein Array mit allen links mit der Klasse nav. Anstatt in einer Schleife alle durchzugehen, benutzen wir invoke - d.h. alles was wir dann machen wird jedem Element des Arrays zugewiesen
$$('a.nav').invoke('observe', 'click', this.toggleMenu);
heisst also: füge jedem Element das zum Selektor passt einen Klickhandler zu, der bei Klick in die Funktion toggleMenu springt.

http://www.prototypejs.org/api/utility

Die Reaktion auf den Klick
ok, wir wollen dem geklickten Menü die Klasse active hinzufügen, ausserdem muss natürlich allen anderen diese Klasse entfernt werden. Zuerst entfernen wir mit dem gleichen Selektor:
$$('a.nav').invoke('removeClassName', 'active');
merke: removeClassName mimmt nur die angegebene Klasse raus, die Klasse nav bleibt erhalten.

Ok, nun dem Element die Klasse active hinzufügen:
$(activeMenu).addClassName('active');

Gut, das soll für den Anfang genügen. Um zu sehen, das alles funktioniert, empfehle ich Firefox + Firebug. Öffnet Firebug, klickt auf Inspect und beobachtet, wie sich das Html ändert. Bei Script könnt ihr auch einfach Breakpunkte setzen, mit F11 Einzelschritt oder mit F8 weiterlaufen lassen.
Ausserdem ist die Console später wichtig, um Ajax Header und Response zuu beobachten, oder um einfache Debuganweisungen auszugeben.

[steffenk]

Auf zur nächsten Runde. Wie es scheint, sind keine Fragen aufgetaucht.

Wir haben ja einen Eventlistener, der auf Klicks im Menü reagiert. Diese werden dann in der Funktion toggleMenu ausgewertet.
Das problem was wir dort haben, ist das this sich nicht mehr auf unsere Klasse bezieht, sondern auf das Event, wir können also nicht einfach mit
this.myFunction()
eine Funktion der Klasse aufrufen.

Um das zu können, verändern wir den Observer:

$$('a.nav').invoke('observe', 'click', this.toggleMenu.bindAsEventListener(this));

Was ist das?
In Prototype sind alle Core-Elemente Objekte (array, string, function) (ja, auch function!)
Das irre in JS ist, das man jedes beliebige Core-Objekt erweitern kann.
Die function() hat u.a. die Eigenschaft
bind() und
bindAsEventListener()

Benutzen wir die mit dem Parameter this, können wir weiterhin mit this Objekte unserer Klasse benutzen.

Ok. Wir wollen nun Ajax nutzen, um den Inhalt eines Divs dynamisch zu befüllen.

Hierzu benutzen wir ein sehr einfaches Objekt: Ajax.Updater
Der Aufruf ist sehr leicht, hier unsere Funktion:

showPage: function(id) {
	new Ajax.Updater('innerContent', 'php/ajax.php', {
		parameters   : 'ajaxID=content&show=' + id
	});
}

Wir sehen, das es 3 Parameter gibt:
'innerContent' - das Element (also die id) das befüllt werden soll
'php/ajax.php' - das Script an das der Ajax-Request geschickt wird
{...} - zusätzliche Parameter.

Wir wollen uns das mit firebug genauer ansehen. Wir öffnen firebug und die Console. Nun klicken wir auf das Menü.
Ah - wir sehen in der Konsole den Aufruf des Scripts.
Es ist ein POST-Aufruf ( das ist Standard). Bei Headers sehen wir was als Header übergeben wurde, bei POST sehen wir unsere Parameter, und bei RESPONSE das was zurückgeliefert wurde.
Prima, funktioniert einwandfrei, wir haben mit ganz wenigen Zeilen einen Ajax-Updater

Hier nochmal unsere ganze Klasse:

// unser erstes Objekt

var TPStarter = Class.create({
	
	initialize: function() {
		// initialize event listeners
		Event.observe(document, 'dom:loaded', function(){
			this.registerEventListeners();
		}.bind(this));
		
	},
	
	registerEventListeners: function() {
		$$('a.nav').invoke('observe', 'click', this.toggleMenu.bindAsEventListener(this));
	},
	
	toggleMenu: function(event) {
		var activeMenu = event.element(event);
		
			// reset the currently highlighted menu
		$$('a.nav').invoke('removeClassName', 'active');
			//activate current menu
		$(activeMenu).addClassName('active');
			// show something
		this.showPage(activeMenu.id);
	},
	
	showPage: function(id) {
		new Ajax.Updater('innerContent', 'php/ajax.php', {
			parameters   : 'ajaxID=content&show=' + id
		});
	}
});

var MyFirstClass = new TPStarter;

Die aktualisierten Dateien gibts hier.

[MuschPusch]

Hi Steffen,

erstmal danke fuer den workshop... Hab ich wirklich noch was bei gelernt. Was ich nicht ganz verstehe ist dieses Stueck:

Wir haben ja einen Eventlistener, der auf Klicks im Menü reagiert. Diese werden dann in der Funktion toggleMenu ausgewertet.
Das problem was wir dort haben, ist das this sich nicht mehr auf unsere Klasse bezieht, sondern auf das Event, wir können also nicht einfach mit
this.myFunction()

Was ich nicht verstehe ist das Verhalten von this. Warum bezieht sich das ganze nicht mehr auf die Klasse? Und warum dann auf einmal wieder schon. Hat weniger mit Prototype zu tun sondern mehr das ich das ganze Objekt orientierte noch nicht so ganz verstehe...

Gruss Volkan

[steffenk]

Hi Volkan,

Events sind ja globale Objekte/Methoden, das heisst sie werden nicht "in der Klasse" ausgeführt. Das heisst auch, das in den Events die eigene Klasse nicht bekannt ist.
Um das zu erreichen, benutzt man für die Listener die bind-Methode, d.h. man macht den Eventlister die Klasse bekannt.

[MuschPusch]

Hallo,

wem das immer noch nicht so ganz deutlich ist, dem fehlen einfach so wie mir die gewissen Javascript Grundlagen...

Mein weg des Verstehens dieses einzigen Satzes:

http://www.prototypejs.org/api/function/bind

noch nicht...

http://alternateidea.com/blog/articl...pe-and-binding

noch nicht...

http://www.digital-web.com/articles/...in_javascript/

Und dann wars auch bei mir so weit...

[steffenk]

danke, das dürfte sicher einigen Lesern helfen!

Ich geb zu das ich damit auch länger gebraucht habe, aber Scope ist gerade bei Klassen ein immer wiederkehrendes Thema, da man ja genau diese Kapselung des Namespaces erreichen will.