AJAX mit Rico und prototype

Die Idee in unserem Raidverbund im grandiosen MMOG World of Warcraft, ein einheitliches Punktesystem zu entwickeln, brachte mich dann zu der längst überfälligen Idee, mich endlich mal mit Ajax zu beschäftigen.

Die bisherigen – manuell gepflegten – Punktelisten sollten von nun an durch eine einheitliche Applikation gepflegt werden. Ich entschied mich, das ganze mal mit dem Framework prototype.conio.net (Link offline) prototype zusammen mit der Erweiterung Rico zu machen. Und ich muss zugeben. Wow! Ich bin schwer beeindruckt, was man mit diesem Framework so alles anstellen kann.

Kernpunkt meiner Punkteapplikation, ist eine Aufstellung eines Raids. Ein Raid hat 40 Teilnehmer, die sich in acht Gruppen teilen. Mathegurus merken, dass macht fünf spieler pro Gruppe *g*. Es galt also eine Methode zu finden, aus einem Pool von ~300 Spielern, 40 auf eine einfache Art und Weise auf die Gruppen zu verteilen. Lange hab ich überlegt, wie dies am einfachsten zu handeln sei, bis mir Rico begegnete. Dieses JS-Script erlaubt komfortables anlegen und verwalten sogenannter Drag&Drop-Objekten und -Zielen. Das ermöglicht es, dass die Spieler aus der linken Leiste schlicht und ergreifend auf die Gruppenaufstellung in der Mitte gezogen werden können. Ferner kann man durch Drag&Drop die Positionen innerhalb der Aufstellung vertauschen (siehe Screenshot). Sobald ein Objekt (Spieler) auf einer Position „losgelassen“ wird, wird ein Ajax-Request abgeschickt, und die neue Position des Spielers wird in der Datenbank gespeichert! Super!

Oberfläche der Drag&Drop Anwendung
Das anlegen der Drop Zonen und Objekte ist dabei unfassbar einfach:

dndMgr.registerDropZone( new Rico.Dropzone('pos-1-1') );

definiert dabei eine „Drop-Zone“, also ein Block-Objekt (hier ein div-Element), auf dem „Draggables“ abgelegt werden können. Diese Draggables definieren sich:

dndMgr.registerDraggable( new Rico.Draggable('player-move','player-27') );

Neben dem einbinden der beiden JavaScript-Quellen reichen also diese beiden Zeilen, um eine Drag&Drop Applikation zu erstellen! Ich finde das sehr löblich und bemerkenswert – ich werde mal meine Fortschritte mit dem Programm hier mitteilen.

2 Kommentare to “AJAX mit Rico und prototype”

  1.  Sam schrieb am 01. Aug 2007 um 15:46 zitieren

    Danke für den guten Beitrag.
    Ich finde dieses Script auch prima, suche aber eine Möglichkeit, diese Aufstellung auch gleich zu speichern.

    Sprich: Habe 40 Spieler, die ich in einzelne Gruppen verteilen will – genau wie Du, aber will eben einen mySQL Request ausführen wenn ich Spieler 1 z.B. in Gruppe B gezogen habe, damit diese Verknüpfung auch in meiner mySQL Datenbank abgebildet wird. Wenn ich ihn dann von Gruppe B in Gruppe C ziehe, soll die Verbindung wieder geupdated werden.

    Sprich: Es müsste eine Möglichkeit geben eine Datenbankabfrage zu machen, wenn ich das Element droppe.

    Leider stehe ich total auf dem Schlauch, hast Du einen Tipp?

    Gruss,

    Sam

  2.  tiberian schrieb am 03. Aug 2007 um 10:34 zitieren

    Hi Sam,

    Such in der rico.js nach dem EIntrag
    //-------------------- ricoDropzone.jsRico.Dropzone = Class.create();

    Rico.Dropzone.prototype = {
    dort beginnt die Klasse, in der du ansetzten musst.
    accept: function(draggableObjects) {
    Diese Methode wird ausgeführt, wenn ein Objekt in eine Dropzone abgelegt wird. Dort habe ich am ende der Mehtode eingefügt:
    //Spieler
    var playerid = theGUI.getAttribute("id").split("-");
    var pos = this.htmlElement.getAttribute("id").split("-");
    //alert(ajaxEngine);
    ajaxEngine.sendRequest( 'savePosition',
    "player=" + playerid[1],
    „group=“ + pos[1],
    „pos=“ + pos[2] );

    htmlElement.appendChild(theGUI);
    Dann wird bei jedem „drop“ der Ajax Request verarbeitet, in dem du dann die SQL updates machen kannst (so wie ich auch)

    hth

Trackback-Adresse | RSS-Feed für die Kommentare abonnieren

Hinterlasse einen Kommentar:


(Wir behalten uns vor Kommentare von dummen Menschen entweder zu löschen oder exemplarisch für die Nachwelt zu konservieren. Dumme Kommentare mit Werbelinks müssen leider auf zweiteres Privileg verzichten.)

XHTML: Du kannst diese Tags verwenden:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>