Die letzten 2 Monate habe ich mich partiell mit Extrem JavaScript beschäftigt, eigentlich war es auch wieder nicht so extrem. Aber es war die Website mit dem meisten JavaScript, die ich bisher erstellt habe.
Dabei kamen unter anderem auch ComponentArt-Tools zum Einsatz. Im Großen und Ganzen nehmen diese recht viel ab. Allerdings stellt sich wie immer heraus, dass für die speziellen Wünsche ordentlich viel Code notwendig ist.
Das Customizen und Erweitern von Funktionen hat sich durch den Einsatz von jQuery stark vereinfacht, es aber notwendig die Möglichkeiten von jQuery möglichst komplett einzusetzen. Die Standardmöglichkeiten von jQuery sind schon sehr mächtig, hier sind vor allem die Manipulations- und Animationsmechanismen zu nennen. Es passiert leider immer wieder oft, dass man den Selector nicht korrekt angibt. Der Selector ist schon ein riesiges Thema für sich. Ein sehr guter Artikel zu jQuery ist im CoDe-Magazin veröffentlicht, den kann ich nur Empfehlen. Ebenso muss man wirklich die Dokumentation von jQuery loben.
$(<selector>) - $(„#id“) - $(„.cssClass“) – $(„element“)
Die Rückgabe jeder jQuery-Funktion ist ein jQuery-Object. In einem jQuery-Object findet man eine Liste mit den gefundenen Objekten, per Index kann jedes einzelne Zugegriffen werden. Es ist allerdings nicht notwendig auf jedes einzeln zuzugreifen, da jQuery-Funktionen auf alle Elemente in dem aktuellen jQuery-Objekt wirken. Durch $(„p“).css(„color“, „#f00“) erhalten alle p-Elemente die Vordergrundfarbe rot. Am meisten macht das „Spielen“ mit den Effekten Spaß, $(„.ajaxContent“).fadeOut(500,function(){$(this).fadeIn(500);}); - so flackert kurz der Inhalt. Sehr einfach ist es auch einen Parent mit bestimmtem Selector zu finden, hierzu muss die Methode parents verwendet werden. z. B. $(this).parents(<selector>).
Der Zugriff auf Webservices oder WCF-AjaxServices klappt am besten mit den Microsoft ASP.NET AJAX-Funktionen. Dazu muss der ScriptManager auf der Seite verwendet werden und anschließend der Service referenziert werden.
1: <asp:ScriptManagerProxy ID="proxy" runat="server">
2: <Services>
3: <asp:ServiceReference Path="~/Ausschreibung/GridControl.svc" />
4: </Services>
5: </asp:ScriptManagerProxy>
Hinweis: JavaScript erlaubt keinen Zugriff auf andere Domains, so dass der Webservice nicht in einer anderen Domain und auch nicht auf einem anderen Server-Port laufen darf.
Außerdem ist noch das Type-System (Stichwort: prototype) mit den im Visual Studio hinterlegten Templates eine tolle Sachen. Es lassen sich mit den Templates recht leicht eigene JavaScript-Klassen erschaffen.
Etwas mehr nerven hat mich das Thema JavaScript-Events gekostet. Im Gegensatz zu .NET-Events referenziert this nicht das Objekt, dass sich registriert hat, sondern den Sender des Events. Sowohl mit jQuery als auch mit ASP.NET Ajax kann man allerdings die Informationen über den Empfänger (Registrar) mitgeben.
$(<selector>).bind(„click“, <myobject (this)>, function(event){var myobject=event.data});
$addHandlers(element,{click, onClick},myObject);
Jetzt noch einmal zurück zum ComponentArt-Grid, wir wollten eine hierarchische Darstellung des Grids, allerdings ohne auf Ajax zu verzichten. Derzeit unterstützt das Grid im WebService-Mode nur begrenzt diese Funktion. Durch den Artikel im Support-Forum hat es sich lösen lassen. Einige Tipps fehlen allerdings, wie verhält es sich mit Paging, was ist mit Sortierung, was ist mit …. Beim Laden der Objekte müssen diese auch in der Hierarchie der Grid-Level geladen werden. Nach einigen Bugs in meinem Code und einigen kleinen Fehler funktionierte anschließend auch das Paging, dazu ist wichtig, welche Properties gesetzt werden. Hier meine Erkentnisse:
1. Größe der Seite setzen - grid1.set_pageSize(itemsWithinAPage);
2. Anzahl der ignorierenden Einträge in der Ergebnismenge - grid1.set_recordOffset(0);
3. Ergebnisse laden - grid1.load(resultArray);
4. Setzen der Seitenzahl - grid1.set_pageCount(pagesCount);
5. Endlich darstellen der Ergebnisse - grid1.render();
Ich musste leider feststellen, dass es gar nicht wichtig ist, wenn die Anzahl der Gesamtentreffermenge gesetzt wird, entscheidend ist das korrekte Setzen der Seitenzahl (Punkt 4)ä Ebenso muss die Property für die „GroupingPageSize“ groß genug sein, da sonst die Ergebnisse ohne Rückmeldung nicht mehr dargestellt werden.
Keine Kommentare:
Kommentar veröffentlichen