Hi,
das ist für mich die größte Überraschung seit Jahren. Zum einen gibts auf jQuery massig gute UI-Komponenten (umsonst) und mit dojo scheint das auch absolut machbar zu sein.
Bin kurz davor eine SelectBox Gruppe zu erzeugen, die von dijit.form.FilteringSelect erben.
Hab dafür ein Notes-Projekt (ist auf 8, geht mit jeder Version von Notes ab 4), bin aber auf research Gründen erstmal mit einem vereinfachten Beispiel am üben.
Der Anwendungsfall ist recht typisch.
Auf der Seite sind mehrere Select-Boxen zum Suchen von Dokumenten.
Die Select Boxen sind hierarchisch. Im vereinfachten Beispiel ist es Land - Bundesland/State - Stadt.
Hat der Anwender in Land : 'alle' gewählt, sind in den Auswahlboxen Bundesland und Stadt alle Auswahlen möglich.
Ist in Land 'Deutschland' gewählt, werden jeweils nur deutsche Bundesländer und Städte in den unteren Auswahlboxen angeboten.
Ist in Land 'alle' gewählt und in Bundesland 'California' stehen in der Auswahlbox Bundesländer alle Bundesländer und in Städte nur kalifornische Städte.
Beim anfänglichen Laden der Seite und bei einem Wechsel in einer der Select Box schickt die Webseite einen Ajax Requests an den Server und der Server sendet Json Objekte zurück. Daraufhin ändern sich die Auswahlen.
Das eigentlich bemerkenswerte für mich ist, dass ich diese GroupSelect (TM) mit relativ wenig Code offenbar als gekapselte Child-Klassen von dijit.form.FilteringSelect schreiben kann. Das voll nervivge an JavaScript in den letzten beiden Jahren war für mich nämlich immer, dass man für ein feature 3 oder 4 Funktionen tendentiell verstreut über die Seite hatte. Wenn ich sone Funktionalität in eigene dijit-Klassen auslagern kann, wird das a) übersichtlicher und b) wiederverwendbarer.
JavaScript hat nix mit Java zu tun. JavaScript ist Lisp mit C Syntax. Die Framework unterstützen eine Menge, schützen aber nicht von der Sprache JavaScript.
Hier ein Auszug aus dem Source code als Beleg. Sowas geht nicht in Java:
},
getData: function(url_call, call_as_init){
try {
dijit.byId("dialogWait").show();
// to prevent programmatic value changes of select widgets fire up a new getData call
// TODO-> put the dijit in constructor or kind of a static like class variable. Might exist, not sure (axel, 09-05-21)
afterLoad = false;
//if (cache[url_call] != null)
// return cache[url_call]; // TODO caching (axel, 09-05-19)
console.log("getData called with '" + url_call + "'")
this.call_as_init = call_as_init,
dojo.xhr("Get", {
url: url_call,
handleAs: "json",
timeout: 10000,
load: dojo.hitch(this, function(responseObject, ioArgs){
try {
console.debug("from server == " + dojo.toJson(responseObject, true));
//cache[url_call] = responseObject;
if (this.call_as_init) {
this.deleteAllItemsSelect();
this.addItemsSelect(responseObject);
}
for (i=0; i< this.dependantSelect.length;i++) {
curDependantSelect = this.dependantSelect[i];
curDependantSelect.deleteAllItemsSelect();
curDependantSelect.addItemsSelect(responseObject);
}
afterLoad = true;
// TODO-> put the dijit in constructor or kind of a static like class variable. Might exist, not sure (axel, 09-05-21)
dijit.byId("dialogWait").hide();
}
catch (error) {
errorhandler(error);
afterLoad = true;
dijit.byId("dialogWait").hide();
}
}),
error: function(error, ioArgs){
afterLoad = true;
Absolut brauchbar ist die in weiten Teilen freie und Eclipse-basierte IDE Aptana.
Und
http://www.jslint.com/ als code Verifizierer.
Guter google talk:
http://www.youtube.com/watch?v=hQVTIJBZook