Skytecs Entwicklerblog

Sharepoint und die Downloads aus dem Web Part

Eigentlich ist die Anforderung ganz einfach und keineswegs unüblich: Man will auf einer Website irgendeine Datei dynamisch generieren, beispielsweise einen Excel-Report, die man dann per Klick auf einen Button zum Download anbietet. Sowas ist im Regelfall nicht schwer, außer natürlich, wenn man ein “Web Part” für Sharepoint baut. Wenn man das tut ist, wie ich inzwischen weiß, ziemlich vieles schwer, schmerzhaft und generell mehr oder weniger unbefriedigend.

An sich ist die Sache aj auch in ASP ganz easy und in vielen Blogposts beschrieben, beispielsweise bei den Dotnetslackers. Das Problem ist nur, dass bei diesem Ansatz die Datei erst nach einem Postback generiert und an den Client geschickt wird, dieser Postback aber das momentan angezeigte Formular nicht neu vom Server lädt. Problem? Wieso Problem?

Ganz einfach: Sharepoint meint es gut mit uns und sorgt per JavaScript dafür, dass Formulare nicht öfter als einmal abgeschickt werden können, beispielsweise durch amokklickende Benutzer. Das führt dazu, dass nach dem Download der Datei das Formular hinüber ist, d.h. es nicht mehr abgeschickt werden kann, weil es ja schon mal abgeschickt wurde. Sehr blöde, und die Lösungen, von denen ich gelesen habe, waren allesamt extrem kompliziert zu implementieren, weil sie irgendwelche speziellen Download-Handler vorgesehen haben. Mensch, Leute, ich habe eine Deadline und nicht beliebig viel Budget - ich brauche eine EINFACHE Lösung. Meinetwegen auch einen kleinen Hack.

Einen solchen Hack habe ich dann auch hinbekommen. Diese Resubmit-Sperre wird von Sharepoint nämlich im onsubmit-Handler des Formulars aufgerufen, so dass man nur beim Klick auf den Downloadbutton genau diesen Handler wegschießen muss:

exportButton = new Button();
exportButton.Text = “Generate some Excel stuff”;

// the handler method generates the file, writes it to the response and ends the response.
exportButton.Click += onExcelExportClicked;

// erase the form’s onsubmit handler when the button is clicked
exportButton.OnClientClick = “this.form.onsubmit = function() {return true;}”;

Hässlich, ja, und eventuell auch gefährlich, wenn man nicht aufpasst, aber es funktioniert. Die nächste Verbesserung wird sein, dass ich irgendwie nach dem Download den ursprünglichen onsubmit-Handler wieder herstelle oder so - aber das mache ich erst, wenn ich es brauche.

(Nur, falls irgendwer sich wundert: Das Posting mit dem identischen Codebeispiel im MSDN-Forum ist nicht geklaut, sondern auch von mir.)

Extraschöne Web-GUIs mit “ExtJS”

GUI-Toolkits für JavaScript gibt es wie Sand am Meer, nur in größerer Menge. Ich habe auch schon so manches davon gesehen und ausprobiert, von einfachsten Funktionssammlungen bis hin zu richtig dicken Bibliotheken. Dabei habe ich aber selten ein Stück Software gefunden, dessen Output mir so gut gefallen hat wie der des Javascript-GUI-Toolkits “ExtJS”. Mann, ist das Zeug hübsch!

Etwas nachteilig ist höchstens, dass man nicht sofort rafft, womit man es überhaupt zu tun hat, wenn man die oben verlinkte Website ansurft, ohne vorher einen Hinweis zu bekommen. Um meinen geschätzten Lesern die Sucherei zu ersparen, möchte ich deswegen noch kurz auf die Dokumentation zu ExtJS hinweisen. Da gibt es nämlich unter dem Menüpunkt “Examples and Demos” ein paar Beispiele für das, was das Dingsbums eigentlich tut. Sagte ich schon, dass die Komponenten da wirklich sehr hübsch aussehen?

Websites javascriptig versounden

Es gibt ein paar Dinge im Web, die mich ernsthaft aufregen: Deppen Leerzeichen, der Standart, die fehlerhafte Verwendung des Apostroph’s und Websites, die Musik machen. Gegen das letztgenannte Übel kann man natürlich etwas tun, indem man den Sound abschaltet - wenn man das aber mal vergisst und mitten in der Nacht unerwartet von einer Website mit Sound angebrüllt wird, weiß man, wieso ich mich so aufrege.

Wie dem auch sei: Das Volk wünscht es, das Volk bekommt es. Das Leben ist kein Ponyhof und der Dienstleister nicht vetoberechtigt, wenn ein Kunde Sound im Web total gut findet. Abgesehen davon ist es ja manchmal sogar recht sinnvoll, Soundfiles abzuspielen, beispielsweise als Hörbeispiel auf einer Bandhomepage.

Motiviert durch die Argumente des zweiten Absatzes möchte ich also auf die JavaScript-Bibliothek “SoundManager 2″ hinweisen, die eine API zur Nutzung der Soundfunktionen von Flash in JavaScript bietet. Die Beispiele sehen wirklich recht gut aus, insbesondere dieser schnuffige MP3-Player im Winamp-Stil - und wenn man sowas braucht, freut man sich sicher darüber, es dank dieser erfreulicherweise BSD-lizensierten Lib nicht selber bauen zu müssen.

Tooltipps für Runterlader

Tooltipps sind total super - wenn eine Software sich mit Hilfe dieser Biester halbwegs selbst erklärt, kann man sich das Lesen des Handbuchs schreiben. Manchmal sogar das Schreiben besagten Dokuments, was noch viel, viel feiner ist als die erste Ersparnisvariante. Mal ganz ehrlich: Wer schreibt schon gerne Doku?

Damit es mit dem Nichtschreiben so richtig klappt und man dabei auch ein Nichtimplementieren zugrunde legen kann, sollte man sich die Sammlung praktischer Tooltipp-Scripts für Websitebasteleien bookmarken, die ich bei Dr. Web gefunden habe. Gut geklaut ist bekanntlich besser als schlecht selbst gemacht, und Zeit spart man damit auch noch. Zeit, die man in das Verfassen der leider nicht automatisch generierbaren Texte stecken kann. Oder in World of Warcraft, je nach persönlicher Präferenz und Leidensfähigkeit der Anwender.

Nur am Rande angemerkt: Am allergeilsten finde ich die minimalistischen Tooltipps mit reinem CSS - ich finde es geradezu unglaublich geil, wie man ganz ohne Script alles das hinkriegt, was man haben will. Noch dazu mit derart primitivem Markup… Extrem schick. Muss ich gelegentlich auch mal irgendwo verwenden.

Diagramme mit JavaScript erzeugen

Für eine klassische schwarzwälder Kirschtorte braucht man einen Ofen, für ein Tortendiagramm ohne Sahne und Fruchteinlage reichen im Regelfall ein Webserver und ein paar Grafikfunktionen nebst einem Minimum an Gehirnschmalz. Wer seine Diagramme auf dem Server generiert, muss allerdings damit rechnen, heutzutage nicht mehr als besonders “hip” zu gelten, ja, nichtmal als “alete”. Schließlich leben wir im Jahrtausend des clientseitigen Scriptings, in dem nur noch alte Säcke, Anzugträger und Entwickler mit gesundem Menschenverstand (bedauernswerte Randgruppen also) auf die Idee kommen, irgendwelche Logik auf dem Server auszuführen.

Da das Streben nach Coolness dem Entwickler im Blute liegt und mir wiederum sehr am Glück meiner Leser gelegen ist, möchte ich also den Link zum JavaScript-Diagrammtoolkit “PlotKit” weitergeben, den mir der stets umtriebig recherchierende PRogalinski zugesteckt hat. Dieses Dings läuft rein clientseitig, verlangt wenig bis keine Ahnung bezüglich der Feinheiten der Diagrammerstellung und scheint dennoch Haarausfall bedingt durch Browserinkompatibilitäten weitestgehend zu vermeiden. Hurra. Ich werde trotzdem weiterhin entsprechende PNGs auf dem Server erzeugen, was man mir aufgrund meines wahrhaft biblischen Alters (ich wurde mitte der Siebziger des vergangenen Jahrhunderts geboren) bitte nachsehen möge.

Vektorgrafik mit JavaScript und Dojo

Ich bin immer wieder beeindruckt davon, was man heutzutage alles mit JavaScript machen kann. Wenn man nur schmerzbefreit genug ist, um sich so richtig mit der Materie auseinanderzusetzen, kriegt man nahezu alles irgendwie hin, wofür man sonst eine richtige Programmiersprache benutzt hätte - und das in der höchstens zehnfachen Zeit! OK, der Code sieht hinterher meistens aus wie die sprichwörtliche Kombination aus 10 Wollknäueln und 2 jungen Katzen, aber wer will in unserer schnellebigen Zeit schon noch alten Code pflegen? Genau, keiner. Zumindest nicht, wenn es JavaScript-Code ist.

OK, genug gemeckert, es wird Zeit für den eigentlichen Link, wegen dem ich diesen Post schreibe. Ich habe nämlich von THillerns einen Hinweis auf einen Artikel über Vektorgrafikprogrammierung mit Dojo und Javascript bekommen, den ich der kleinen (aber elitären) Leserschaft dieses Blogs keinesfalls vorenthalten will. Es könnte ja schließlich sein, dass man sowas mal ganz dringend braucht - und wenn es nur dafür ist, dass man einen rotierenden Wireframe-Schriftzug mit dem Text “JavaScript saugt dicke Hamster durch Gartenschläuche” im Browser darstellen möchte.

Lässig javascripten mit jQuery

Ich gestehe: Ich hasse JavaScript. Wenn ich irgendeine Chance habe, jemand anderem irgendwelche js-Tasks aufzuhalsen, schaffe ich diese Art von Aufgabe möglichst schnell möglichst weit von mir weg. Am liebsten mit Lichtgeschwindigkeit nach Timbuktu - soll sich doch irgendeine arme Sau dort mit dem Kram rumschlagen. Hauptsache, es bleibt nicht an mir selbst hängen.

Trotzdem muss ich zugeben, dass ich MHenzes letzten großen JavaScript-Fund ziemlich geil fand, nämlich das umfangreiche Framework für alles Mögliche namens “jQuery”. Mit dem Dings kann man von DOM-Manipulation bis AJAX so ziemlich alles abfackeln, was man so braucht, und dabei erlebt man einen abgefahrenen AHA-Effekt nach dem anderen.

Man stelle sich beispielsweise vor, dass man allen Links in einem Dokument eine bestimmte CSS-Klasse zuweisen will, vielleicht um ein Icon dranzupappen oder so. Das geht in jQuery geradezu unanständig einfach:

jQuery(”a”).addClass(”icondingsbums”);

Erster, fertig, gewonnen! Und ganz ohne Änderungen am Markup! Natürlich kann man dann noch hübsche Einblendeffekte benutzen, Teile im DOM-Baum kopieren, verschieben, in schwarzen Löchern verschwinden lassen oder nach Timbuktu verschicken, aber wer das genauer wissen will, sollte sich einfach mal die Doku ansehen. Für den täglichen Gebrauch empfehle ich übrigens statt der etwas unübersichtlichen default-Dokumentation die visuelle jQuery-Doku, in der findet man einfach schneller, was man braucht.

Mehrspaltige Websites mit YAML

Webdesign ist im Grunde eine recht uniforme Angelegenheit: Header, 1-3 Spalten Inhalt, Footer. Wie sehr die Hersteller zueinander inkompatibler Browser es verdient haben, aufs fürchterlichste gequält zu werden, merkt man spätestens dann, wenn die schön tabellenfrei erstellten Layouts auf jeder Seite anders aussehen, in Browser A der Footer über den Inhalt gerendert wird und Browser B mindestens eine Spalte versteckt. In solchen Situationen war ich schon mehr als einmal davon überzeugt, dass kein “Killerspiel” der Welt auch nur annähernd das Amokpotenzial einer durchschnittlichen Webseitenerstellung hat.

Schön ist es also, wenn man sich um solchen Low-Level-Mist erst gar nicht kümmern muss, beispielsweise weil man das CSS/Javascript-Tooldings namens “YAML” benutzt, das sich um dieses Spaltengefrickel kümmert. Wenn man sich solche Hilfsmittel beschafft hat, hat man auch gleich viel mehr Zeit, um sich um angenehmere Dinge zu kümmern, beispielsweise darum, dass jeder Browser die hübschen Popup-Divs anders rendert, die der Kunde unbedingt haben wollte. OK, auch hier kann es Amokdings geben, aber wenigstens wegen einer etwas anspruchsvolleren Sache als dem Grundlayout - da kommt man sich nicht ganz so bescheuert vor, wenn man vor Frust in die Schreibtischplatte beißen will.

Zwei wichtige Hinweise noch: Empfohlen hat’s PRogalinski und es gibt auch ein YAML-Dings für TYPO3.

Praktisch: Ein Colorpicker in DHTML

Farbe ist gut für Websites - weiße Schrift auf weißem Grund ist nicht besonders gut lesbar und vermittelt nicht auf den ersten Blick, was man zu vermitteln wünscht. Noch besser ist einstellbare Farbe, denn persönliche Vorlieben wie rote Schrift auf tiefblauem Grund sollten dort bleiben, wo sie hingehören: Auf dem Display des farbenblinden Entwicklers, der sowas toll findet. Allgemein geht der Trend ja zur freien Konfigurierbarkeit von allem Möglichen, und da ich Farbe für möglich halte, sollte man auch diese konfigurieren können. Verzeiht meine sprachliche Verwirrung an diesem Tag, ich bin irgendwie mental nur teilweise kohärent.

Auch teilweise kohärent kann ich aber gerade noch so den Link zu einem recht netten AJAX-Colorpicker namens “ColorJack” mit hübsch freier Lizenz ausbringen, wegen dem ich gerade das Administrationswerkzeug dieses Blogs auf meinen Bildschirm zu bringen beliebte. Sieht hübsch aus, macht genau, was es soll, passt. Sollte man viel öfter verwenden.

Tabellen mit AJAX und XSLT

Ich gebe zu, dass ich als oldschooliger (bitte lesen als: mittlerweile seniler) Ex-HTML-Hacker immer ein ganz komisches Gefühl habe, wenn es um AJAX geht. Die Ergebnisse sehen cool aus, aber tief in meinem Innersten bin ich fest davon überzeugt, dass die Bezeichnung “Teufelszeug” wahrscheinlich sehr zutreffend ist. Als ich heute einen Artikel über die Erzeugung von sortierbaren Tabellen mit AJAX, JavaScript und XSLT gelesen habe, hat sich dann auch erwartungsgemäß ein Druck im Bereich der Großhirnrinde gebildet, der möglicherweise dazu führen könnte, dass mir heute noch der Kopf platzt, sofern ich nicht eine sofortige Druckentlastung durch das codieren einer Website mit Tabellen als maßgeblichem Layoutwerkzeug durchführe. Mit Blind-GIFs natürlich. Und einem “under construction”-Logo. Ich denke, ich werfe gleich mal meinen Editor an und tue das, bevor schlimmeres passiert…