ComponentArt Web.UI 2008.1

Man hat die Aufgabe eine bestimme Webanwendung zu entwickeln. Gewöhnlich fängt man bei der Datenbank an, kümmert sich um das OR Mapping, entwickelt die Business Logik, testet diese und kommt irgendwann bei der GUI an. Beim durchsuchen der Visual Studio Toolbox stellt man dann fest, das das ein oder andere Control einfach nicht vorhanden ist, welches gerade dringend benötigt wird.
Wie wäre es zum Beispiel mit einem coolen Editor im Office 2007 Design inklusive Spellchecker, einem Ajax-Dateibrowser, oder mit einem Multiple-File–Uploadcontrol mit Fortschrittsanzeige?

Die Firma ComponentArt hat sich auf die Erstellung solcher Controls spezialisiert. In diesem Artikel werden einige ausgewählte Controls aus der Web.UI.2008 Suite vorgestellt. Es wird auch gezeigt, wie die Controls in eigene Webanwendungen eingebunden werden können.

Die folgende Grafik gibt einen Überblick, welche Controls im Paket enthalten sind Die blau markierten Controls werden im Artikel näher vorgestellt.

Die Combobox

Eine Combobox? Gibt’s doch schon im Visual Studio Werkzeugkasten, wird sich der ein oder andere Entwickler denken. Richtig, eine Combobox gibt es schon. Die Combobox von ComponentArt bringt eine ganze Reihe von sinnvollen Features mit sich, die den Anwender und den Entwickler sicher beeindrucken werden.

Zunächst gibt es die Möglichkeit, eine ganz einfache Combobox darzustellen, diese kann nicht viel mehr als die alt bekannte Combobox, jedoch lässt sie sich über Attribute an das Design der Seite anpassen. Entweder wird ein Verweis auf eine CSS Klasse oder ein Verweis auf eine Grafik im Markup eingebettet.
Auszug auf dem Markup der einfachen Combobox:

ItemHoverCssClass="ddn-item-hover"
CssClass="cmb"
HoverCssClass="cmb-hover"
DropHoverImageUrl="images/ddn-hover.png"

Das Design kann sich sehen lassen:

Die Höhe der Combobox kann der User beliebig mit der Maus verändern, das ist bei langen Listen sehr sinnvoll. Für dieses Feature brauch der Combobox nur folgende Deklaration hinzugefügt werden:

<DropDownFooter><div class="ddn-ftr"></div></DropDownFooter>

Die Items der Combobox können nicht nur aus reinem Text bestehen, sie können auch mit eigenen CSS Klassen formatiert werden:

<Items>
    <ComponentArt:ComboBoxItem ClientTemplateId="StyleItemTemplate" Text="Normal" Value="" />
    <ComponentArt:ComboBoxItem Enabled="false" CssClass="brk" />
    <ComponentArt:ComboBoxItem ClientTemplateId="StyleItemTemplate" Text="Heading 1"
                            Value="font-size:18px;font-weight:bold;color:#800000;" />
    <ComponentArt:ComboBoxItem Enabled="false" CssClass="brk" />
</Items>

Mit etwas Geschick lassen sich so sehr ansprechende Designs entwickeln:

In Internetforen und Newsgroups treten häufig Fragen wie diese auf: "Wie kann ich mehrere Spalten in einer Combobox anzeigen?" Es gibt mehr oder weniger zielführende Lösungsansätze. Die hier vorgestellte Combobox kann dem Entwickler viel Kopfzerbrechen abnehmen.

Für dieses Ergebnis ist nur folgende Deklaration notwendig:

<ComponentArt:ClientTemplate ID="itemTemplate">
    <table border="0" cellpadding="0" cellspacing="0" width="100%">
        <tr class="dataRow">
            <td class="dataCell" style="width: 200px;">
                ## DataItem.getProperty('Text') ##
            </td>
            <td class="dataCell" style="width: 100px;">
                ## DataItem.getProperty('CountryCode') ##
            </td>
            <td class="dataCell">
                ## DataItem.getProperty('Coordinates') ##
            </td>
        </tr>
    </table>
</ComponentArt:ClientTemplate>

Für die Spalten in der Combobox wird eine HTML Tabelle in das Template eingefügt, die Daten werden per Datenbindung aus einer DataTable geholt, die im Code-Behind zur Verfügung gestellt wird.

Die Toolbar

Die Toolbar ist eine Container der verschiedene Elemente aufnehmen kann. Es können entweder ToolbarItems oder CustomContent-Elemente aufgenommen werden. Ein CustomContent-Element könnte zum Beispiel eine Combobox sein, wie sie oben vorgestellt wurde.
In dieser Grafik werden einige Elemente der Toolbar gezeigt.

Das Verhalten des Elements ToggleCheck ist vergleichbar mit Checkboxen, es können mehrere Elemente gleichzeitig ausgewählt werden. Beim ToggleRadio Element kann nur eine Option ausgewählt werden. Die Logik hierfür wird erledigt die Toolbar auf der Clientseite. Beim Postback können alle Zustände abgefragt werden.

Der Editor

Dieses Control ist wahrscheinlich das Control mit den meisten Funktionen aus der gesamten Web.UI Suite. Dementsprechend komplex ist auch das Markup. Die Beispieldeklaration für diesen Editor hier zu veröffentlichen wäre auf Grund der Größe nicht sinnvoll. Es sei aber gesagt, das es nach kurzer Einarbeitungszeit nicht schwer fällt, den Editor an die eigenen Bedürfnisse anzupassen. Dabei helfen die zahlreichen Codebeispiele die kostenlos bei ComponentArt heruntergeladen werden können.

Der Editor wird in zwei Designs ausgeliefert, einmal in BlackIce und in ArcticWhite.
Diese Design können über CSS geändert werden. Wer etwas Zeit investiert, kann eigene Designs komplett selbst entwickeln.

Der Editor bietet folgende Features die nicht auf den ersten Blick erkennbar sind:

• Ajax - Rechtschreibprüfung
• Dialogboxen
• suchen und ersetzen
• Einfügen von Text und Einfügen von Text mit gleichzeitigem entfernen der Formatierung

Für Entwickler wäre ein SyntaxHighliting sinnvoll gewesen, dieses ist leider nicht inklusive kann aber mit freien Komponenten nachgerüstet werden.

Calendar

Das Kalender Control kann in ganz unterschiedlichen Darstellungen genutzt werden. Es ist möglich, es als normale Monatsübersicht einzusetzen und so als Date Picker zu nutzen, interessanter ist aber die Date-Range-Picker Darstellung. Mit Hilfe dieser Darstellung können Start und Enddatum getrennt voneinander ausgewählt werden. Soll der Kalender auf einer Webseite nicht im Vordergrund stehen, bietet sich die Popup Darstellung an.
Für eine Urlaubsplanung unverzichtbar ist die Disabled Days Darstellung, in dieser Darstellung sind bestimmte Tage nicht auswählbar. Diese Tage sind dann durchgestrichen.

Ajax Kalender als Date Picker  


Disabled Days Darstellung

Zum Ende des Artikels soll gezeigt werden, wie einfach der Schedule Calendar im Code Behind mit Daten gefüllt werden kann. Der Schedule Calendar gleicht der Monatsdarstellung des Terminkalenders in Microsoft Outlook.
Als Datenquelle für den Kalender dient eine einfache XML Datei. Es ist natürlich auch möglich, die Daten aus einer Datenbank zu holen.

<months>
  <month index="0">
    <day number="2">
      <item>Conference</item>
    </day>
    <day number="3">
      <item>Conference</item>
    </day>
    :
  </month>
</months>

Es werden in der XML Datei nur die Tage aufgelistet, für die auch Termine vorhanden sind.
Um die Termine im Code Behind in den Kalender einzutragen, wird das Event DayRender genutzt. Das Argument e liefert den aktuellen Tag und den Monat. Mit der Methode e.Write() kann normaler HTML Code in die einzelnen Zellen des Kalenders geschrieben werden. Dadurch ist das Control sehr flexibel. Es können so zum Beispiel Links, Bilder oder Auflistungen in die Zellen des Kalenders geschrieben werden.

private void Calendar1_DayRender(object sender,
ComponentArt.Web.UI.CalendarDayRenderEventArgs e)
{
    var dayNumber = e.DayRenderInfo.DayNumberText;
    var monthIndex = (e.DayRenderInfo.Date.Month % 4).ToString();
    e.Output.Write("{0}<br />", dayNumber);
    var dayNode = monthDoc.SelectSingleNode(string.Format
    ("/months/month[@index={0}]/day[@number={1}]", monthIndex, dayNumber));
    if (dayNode != null)
    {
        var dayItems = dayNode.SelectNodes("item");
        foreach (XmlNode dayItem in dayItems)
        {
            e.Output.Write(dayItem.InnerXml);
            e.Output.Write("<br />");
        }
    }
}

  
Die Darstellung erinnert an Outlook, so wird sich der Anwender schnell mit Kalender zurechtfinden.

Fazit

Während des Tests ist aufgefallen, das die Controls nicht abwärtskompatibel sind. Daraus folgt, ein Projekt, welches zum Beispiel die Web.UI Version 2006 verwendet, kann nicht ohne viel Aufwand um die neuen Controls erweitert werden.

In diesem Artikel wurden nur 4 Controls von insgesamt 18 Controls vorgestellt. Jedes Control gibt es in verschiedenen Darstellungsformen wie beim Kalender Control deutlich wurde. Wer die Controls einmal live ausprobieren möchte, kann dies auf der Webseite von ComponentArt [1] tun. Dort gibt es ebenfalls Beispielcode zu allen Controls in VB und C#. Die Controls sind sehr flexibel im Markup, im Code Behind und über CSS konfigurierbar. Wem dies nicht ausreicht, der kann die Source Code License erwerben und kann eigene Erweiterungen implementieren.
In der Subscription License sind 10 kostenlose Support Anfragen enthalten, die Antwort auf diese Anfragen kommt innerhalb weniger Stunden und ist gut bis sehr gut. Auf der Webseite von ComponentArt steht ein Forum bereit das eine gute Alternative zum kostenpflichtigen Support darstellt. ComponentArt hat ein eigenes MVP Programm und verlinkt auf ihrer Webseite [3] auf verschiedene Blogs die sich mit diesen Controls beschäftigen.
Ob sich die Anschaffung dieses Control Paketes zum Preis vom knapp 1000$ für die Subscription License lohnt, muss letztendlich jeder für sich entscheiden.

[1] - http://www.componentart.com/webui/demos/
[2] - http://www.componentart.com/forums/
[3] - http://www.componentart.com/blogs/