neue Nutzeroberfläche für del.icio.us dank AJAX
Bei diesem Besuch ist mir heute der del.icio.us direc.tor aufgefallen.
Warum diese Seite so beliebt ist, ist schnell klar. Eine neue leicht zu bedienende und intuitive Benutzeroberfläche (UI - User Interface)
die Johnvey Hwang da per AJAX zusammengebaut hat, überzeugt schnell.
Da mich auch immer interessiert, wie solche Sachen funktionieren, habe ich mich mal daran gemacht, und habe mir den Quelltext angeschaut.
Hier sind meine Ergebnisse:
Johnvey bietet ein Bookmarklet, welches die ganze Sache startet:
javascript:void((function() {
var element=document.createElement(’script’);
element.setAttribute(’src’, ‘http://johnvey.com/features/deliciousdirector/dboot.js’);
document.body.appendChild(element)})())
Im Prinzip ganz einfach, wenngleich ich selbst nie auf solche Ideen kommen könnte. Es wird ein Element "script"
mit dem Attribut "src" mit dem Wert "http://johnvey.com/features/deliciousdirector/dboot.js" erzeugt nud
dem body-element angehangen. Dies ergibt also quasi folgenden Code:
Das reicht doch wohl als Analyse, oder?
Nein, na gut!
Schauen wir uns also das referenzierte Script (dboot.js) auch noch an.
‘; ‘; ‘; ‘; ‘; ‘; ‘; ‘; ‘; ‘; Loading your del.icio.us bookmarks… ‘; © 2005 Johnvey Hwang. del.icio.us direc.tor project page. Released under the GPL. ‘;
var d = ‘
d += ‘
Tag Browser
d += ‘
d += ‘
d += ‘
d += ‘
d += ‘
d += ‘
d += ‘
d += ‘
d += ‘
Bookmarks
d += ‘
d += ‘
function init() {
var i, a, main;
document.body.innerHTML = “”;
document.body.innerHTML = d;
for(i=0; (a = document.getElementsByTagName(”link”)[i]); i++) {
if(a.getAttribute(”rel”).indexOf(”style”) != -1) {
a.disabled = true;
}
}
var ns = document.createElement(”link”);
ns.rel = “stylesheet”;
ns.type = “text/css”;
ns.href = “http://johnvey.com/features/deliciousdirector/d.css”;
document.body.appendChild(ns);
var js = document.createElement(”script”);
js.language = “javascript”;
js.src = “http://johnvey.com/features/deliciousdirector/d.js”;
document.body.appendChild(js);
document.title += ” (Direc.tor)”;
}
init();
Nun, hier baut sich Johnvey ein Grundgerüst für den del.icio.us direc.tor. Ein Suchformular, 6 Unterfenster und ein Prozessfenster,
alle durch ein eigenes Div repräsentiert. Mit der init function bindet er ein StyleSheet (d.css) und ein Javascript in diese Seite ein.
Das CSS setzt "nur" ein paar Farben und positioniert die einzelnen DIVs. Keine allzu besonderen Kniffe.
Nun also doch noch ein Blick in das neue Javascript (d.js):
Ausgeführt wird folgender Code:
var rd = new jvDeliciousFinder();
function start() {
rd.init();
paintBrowser(null, 1);
document.getElementById(”q”).focus();
document.getElementById(”h”).checked = rd.hilite;
}
window.onload = start;
start();
es wird also ein neuer jvDeliciousFinder erzeugt und mit rd.init() initiiert. Was dort passiert, ist recht einfach.
Es werden einige Objekte erzeugt, die später noch gebraucht werden, wie z.B. this.xslProc oder this.xmlReq. Letzterer
wird benutzt, um alle Links aus del.icio.us zu lesen, die der Benutzer dort gespeichert hat.
this.allPosts = this.xmlReq.getDocument(”/api/posts/all”);
Mit paintBrowser(null,1); wird der Browser das erste Mal geladen. Dies bedeutet, das in dem DIV mit der ID "br1" alle Tags
des Benutzers angezeigt werden, welche dann weiter selektiert werden können.
Der Rest ist schon fast Geschichte. Es existieren noch Funktionen, die z.B. den Suchbegriff hervorheben oder die Liste der Links nach den Tags filtern.
Das Ganze wird unter anderem durch dynamisch erzeugten XSL erreicht.
Die dazu benutzen Funktionen sind zum Teil recht kompliziert, wenngleich sehr effizient. Es lohnt sich auf jeden Fall mal einen Blick darauf zu werfen ;)
[LINKS:]
Written by Administrator on June 27th, 2005 with
no comments.
Read more articles on CSS and Javascript.
- [+] Digg: Feature this article
- [+] Del.icio.us: Bookmark this article
- [+] Furl: Bookmark this article