Skin-Webanwendungen mit Xkins

Ein Skin bezieht sich auf das Erscheinungsbild einer Benutzeroberfläche. Es gibt einer Webanwendung ein anderes Erscheinungsbild. Ein Skin ändert die Darstellung der Benutzeroberfläche, wenn ein Benutzer auf eine Schaltfläche klickt, ändert jedoch nicht das Verhalten der Benutzeroberfläche. Eine Änderung der Skin führt somit zu einer Änderung des Erscheinungsbilds einer Anwendung. Um diese Änderung zu erreichen, muss Ihre Webanwendung jedoch wissen, wie eine Skin verwendet wird.

Warum sollten Sie eine Webanwendung überhaupt häuten? Nun, es gibt verschiedene Motive für die Verwendung von Skins, aber sicherlich sind sie nicht immer ein Muss. In einer einfachen Anwendung wäre das Skinnen übertrieben, aber in einigen Situationen, wie in der folgenden Liste beschrieben, müssen Sie sich mit Skins befassen:

  • Wenn die Skin eine Systemanforderung ist: Wenn der Benutzer seine eigene Skin auswählen oder sogar seine eigene erstellen kann.
  • Wenn Sie einem Unternehmenskomponenten-Framework Skin-Funktionen zuweisen möchten: Wenn Sie unterschiedliche Lösungen für unterschiedliche Clients erstellen, können Sie alle Ihre Komponenten (Taglibs) wiederverwenden, wenn Ihre Komponenten über Skinning-Funktionen verfügen, indem Sie einfach die Skin jedes Clients ändern.
  • Wenn je nach Geschäftsszenario ein anderer Skin benötigt wird: In einem Marktplatz oder einer Multi-Banking-Anwendung arbeiten beispielsweise verschiedene Entitäten im selben System, und Sie müssen die Anwendung gemäß dem Unternehmensimage des Benutzers kennzeichnen.

Das Skinnen einer Webanwendung ist keine leichte Aufgabe. Sie können Cascading Style Sheets verwenden und den Pfad eines Bildes ändern, aber Sie sind auf das beschränkt, was Sie mit CSS tun können. Wenn Sie eine Komponente haben, die in jedem Skin völlig anders aussieht, dh wenn sich der HTML-Code in jedem Skin unterscheidet, hilft Ihnen CSS nicht weiter. Sie können jedoch CSS verwenden, wenn das Problem durch einfaches Ändern der Stile behoben wird.

Ein guter Ansatz zum Erstellen eines Skins besteht darin, jedes Teil der Benutzeroberfläche zu bestimmen und diese Teile zu verallgemeinern, um jedem ein Aussehen zu verleihen. Wenn Sie beispielsweise in Skin A eine Frame-Komponente haben, die nur eine einfache Tabelle ist, und in Skin B eine komplexere Tabelle mit Kopf- und Fußzeilen, Bildern und sogar Sounds, sollte anderes HTML (mehr und mehr ) vorhanden sein für jeden Skin-Frame generiert. Nehmen wir als Beispiel an, dass in Skin A der HTML-Code generiert werden muss, um ein Label zu rendern:

Das ist mein Label

In Skin B wird ein Label folgendermaßen gerendert:

   
Das ist mein Label

Wie Sie sehen können, unterscheiden sich diese beiden Teile der Benutzeroberfläche in jeder Skin vollständig. Beide haben die gleichen Informationen ( This is my Label), werden jedoch mit unterschiedlichen HTML-Tags gerendert. Diese Funktionalität konnte mit CSS allein nicht erreicht werden. Möglicherweise könnte die Verwendung von Extensible Stylesheet Language Transformations oder XSL eine Option sein. Oder Sie könnten Xkins verwenden.

Was ist Xkins?

Xkins ist ein Framework, das Skins für Ihre Webanwendung verwaltet. In den frühen serverseitigen Java-Tagen haben Sie HTML in ein Servlet fest codiert. Dann kam JSP (JavaServer Pages), mit dem Sie Ihren HTML-Code außerhalb von Java-Code platzieren können. Heutzutage haben wir das gleiche Problem mit Taglibs, deren HTML-Tags in Java-Code fest codiert sind. Mit Xkins können Sie HTML mit einer zusätzlichen und leistungsstarken Funktion außerhalb Ihres Codes platzieren: Skins. Ausführliche Informationen zu Xkins finden Sie auf der Xkins-Homepage.

Abbildung 1 zeigt die Rolle von Xkins in einer Webanwendung.

Eine Webanwendung, die Xkins und Struts über Taglibs verwendet, folgt diesem Anforderungslebenszyklus:

  • Struts initialisiert Xkins mit dem Xkins-Plug-In.
  • Der Struts-Controller empfängt die HTTP-Anforderung.
  • Struts führt den Prozess aus und leitet ihn an die JSP-Seitenansicht weiter.
  • Die JSP-Seite verwendet Taglibs zum Rendern der Seite.
  • Die Taglib verwendet Xkins durch die Xkins-Fassade : XkinProcessor.
  • XkinProcessor Ruft den Skin des Benutzers und die Vorlage ab, die die Taglib zum Rendern befiehlt.
  • XkinProcessorverwendet die TemplateProcessormit der Vorlage verknüpfte.
  • Dies TemplateProcessorist die Klasse, die für das Rendern des UI-Teils verantwortlich ist, aus dem die Skin besteht. Sie TemplateProcessorkönnen Velocity, JBYTE (Java By Template Engine), Groovy oder eine andere Template Engine verwenden, um die Ausgabe zu rendern.
  • Der TemplateProcessorverwendet die Ressourcen aus dem Skin (Elemente und Pfade) und gibt das Ergebnis der Vorlagenverarbeitung an die Taglib zurück.
  • Die Taglib rendert das Ergebnis der Vorlagenverarbeitung in den Webbrowser.

Xkins behandelt das Hautmanagement anhand der folgenden Grundkonzepte:

  • Halten Sie die gesamte HTML-Generierung von Java-Code fern: Taglibs generieren normalerweise HTML-Code. Das Ändern dieses Codes erfordert das Ändern des Java-Codes und das erneute Bereitstellen der Anwendung. Mit Xkins können Sie die HTML-Generierung externalisieren, indem Sie HTML in Definitionsdateien (XML-Dateien) einfügen. Darüber hinaus können Sie mit Xkins einfache HTML-Formatierungs-Tags von JSP-Seiten fernhalten, um das Erscheinungsbild der Anwendung weiter zu externalisieren.
  • Definieren einer Skin-Struktur: Vorlagen, Ressourcen und Pfade bilden eine Skin. Ressourcen können entweder Konstanten oder Elemente wie Bilder und CSS-Dateien sein. Durch das Definieren von Pfaden können Sie Ihre Skin-Dateien organisieren. Durch das Definieren von Vorlagen können Sie die Teile der Benutzeroberfläche in Ihrer gesamten Anwendung wiederverwenden.
  • Erweiterungen des Xkins-Frameworks zulassen: Sie können Xkins erweitern, um Ihre eigene Vorlagensprache für das Rendern entsprechend Ihren Anforderungen zu verwenden. Wenn Sie beispielsweise eine Bilderzeugung benötigen, können Sie einen Vorlagenprozessor implementieren, der eine Vorlage verwendet und ein Bild generiert. Xkins wird mit Vorlagenprozessoren geliefert, die auf Velocity und JBYTE basieren. Wenn Sie beispielsweise Groovy bevorzugen, können Sie einen Groovy-Vorlagenprozessor erstellen, um Ihre UI-Teile zu rendern.
  • Teilen der Benutzeroberfläche in grundlegende Elemente: In Xkins können Sie alle Teile der Benutzeroberfläche entfernen und damit Vorlagen erstellen. Auf diese Weise können Sie diese Teile wiederverwenden und alles ändern, was Sie benötigen, um eine Haut anders aussehen zu lassen.
  • Verwenden Sie die Vererbung, um die Skin-Wartung zu minimieren: In Xkins kann ein Skin andere Skins erweitern und alle Vorlagen, Pfade und Ressourcen verwenden, über die das übergeordnete Skin verfügt. Auf diese Weise reduzieren Sie die Vorlagenwartung.
  • Verwenden Sie Komposition zum Erstellen von Skins: Zusätzlich zur Vererbung verwendet Xkins Komposition, um die Wartung zu minimieren und die Wiederverwendung Ihrer Vorlagen zu fördern. Mit dieser Funktion können Benutzer ihre eigenen personalisierten Skins aus Ihrer Anwendung erstellen, indem sie verschiedene Teile der Benutzeroberfläche aus vorhandenen Skins auswählen.
  • Definieren eines Skin-Typs: Mithilfe eines Skin-Typs können Sie sicherstellen, dass alle in eine Xkins-Instanz geladenen Skins mindestens dieselben Vorlagen wie der Typ haben. Ein Skin-Typ ist der Skin, den alle anderen Skins erweitern müssen, um in einer Xkins-Instanz gültig zu sein. Mit Xkins-Instanz meine ich eine Gruppe von Skins, die zur Verwendung durch die Webanwendung zusammen geladen wurden.

Ein wichtiger Vorteil von Xkins ist, dass sich der gesamte HTML-Code an einem Ort befindet. Wenn Sie ihn optimieren müssen, ändern Sie einfach die Vorlagen. Wenn Ihre Seiten beispielsweise zu groß sind, ermitteln Sie, wo sich die übermäßige HTML-Generierung befindet, oder entscheiden Sie, welche Bilder entfernt werden sollen, und ändern Sie dann die Vorlagen, um die Seitengröße zu verringern. Sie könnten auch einen leichtgewichtigen Skin für Benutzer haben, die mit langsamen Verbindungen auf Ihre Webanwendung zugreifen, und eine umfassendere Skin-Benutzeroberfläche für Breitbandbenutzer.

Beachten Sie, dass Sie Xkins zusammen mit CSS verwenden können. Tatsächlich wird die Verwendung von CSS für Schriftstile und -farben empfohlen, da durch die Wiederverwendung von CSS-Klassen nicht jedes Mal die Schriftfläche explizit angegeben werden muss, wodurch die Seitengröße minimiert wird.

Ein Skin kann zur einfachen Bereitstellung in einer Webanwendung in eine einzelne Datei (Zip-Datei) gekapselt werden. Wenn Sie einen Skin-Typ definieren, können Skins von Drittanbietern zu Ihrer Webanwendung hinzugefügt werden, wenn sie dem von Ihnen deklarierten Skin-Typ entsprechen.

Sie können Xkins auf viele Arten verwenden, aber die Verwendung von Xkins mit Taglibs bietet den besten Ansatz in einer Webanwendung. Mit diesen Tags können Sie Ihre Seiten generieren oder Ihre vorhandenen Tags dekorieren.

Eine Haut definieren

Hier sind einige Tipps zum Definieren einer Haut:

  • Hautfarben bestimmen; Verwenden Sie globale Konstanten, damit andere Skins sie erweitern und überschreiben können.
  • Erstellen Sie wiederverwendbare Vorlagen für jede Taglib.
  • Create templates with elements that can be overridden by an extending skin, so the whole template doesn't have to be rewritten to change the UI's appearance.
  • Create a basic skin for your Web application and use it as the type for your Xkins instance.
  • Avoid placing HTML inside Java code. If you have a taglib, servlet, or even a JSP page that has HTML code, consider migrating this HTML to an Xkins template.

Example

We now walk through the phases of defining, designing, developing, and deploying Xkins in a simple Web application that requires skin management. In our example, we implement an application that registers subscribers for two online bookstores: Amazing and Barnie & Nibble. The application will be used in both sites (through a frame, a portlet, or whatever format the stores choose), but must have a look and feel specific to each bookstore.

To implement our application, we follow these steps:

  1. Obtain HTML pages with each skin
  2. Determine skins' templates
  3. Create the skins
  4. Use the skins
  5. Deploy the Web application

Obtain HTML pages with each skin

First of all, we receive the graphical design of the page provided by each bookstore. That material could be the page prototypes and should contain all possible page elements appearing in the application to be skinned (in our example, just one page)—see Figures 2 and 3.

As we can see, both pages have different colors, images, and field layouts. In addition, the required information indicators differ, plus Amazing's buttons are in GIF format, while Barnie & Nibble's button is an HTML button with styles.

Determine skins templates

Now we must clip pieces of these pages to generalize some templates for our application to use. We could start from zero, or we could base our HTML dissection in a basic skin used to create forms. This basic skin comes with the Xkins framework in Xkins Forms tags. Xkins Forms is an implementation of taglibs that uses Xkins to generate forms for Web applications.

The basic skin defines frame, field, button, etc. We should use this skin and add the templates our application needs (for instance, the branding). This basic skin also allows us to use Xkins Forms tags to generate our JSP pages.

Let's see a list of the templates we need:

  • frame: The table containing the whole form
  • frameMandatoryCaption: The text indicating mandatory fields
  • field: Coordinates the layout of both label and input
  • fieldLabel: The piece of text containing a label
  • fieldLabelMandatory: Piece of text indicating a mandatory label
  • fieldInput: Controls input
  • fieldInputMandatory: Indicates the input is mandatory
  • button: The command button to execute the action
  • branding: The branding corresponding to each bookstore

Create the skins

Once the different pieces of our UI are determined, we create both skins using Xkins. We start by naming them in the xkins-definition.xml file:


  

Now, we must create a directory structure in our Web application's ROOT directory according to the defined configuration file shown in Figure 4.

In each subdirectory, we place the definition.xml file describing the skin. We will walk through some templates of the skin. To see all of the example's templates, download the source code from Resources.

Let's look at the skin definition syntax contained in the definition.xml file of Amazing's skin:


  

base is the default skin that comes with Xkins Forms and helps us skin our application. Amazing's skin extends it (so does Barnie & Nibble's). We now start overriding the base skin's templates for each skin, starting with the field template:

</strong> $label $input <strong></strong><td align=right><b>$label:</b></td><strong></strong><td align=right><b>$label:</b></td><strong></strong><td colspan="$colspan">$input (Optional)</td><strong></strong><td colspan="$colspan"><strong>$input</strong></td><strong>

Alle oben genannten Vorlagen sind Velocity-Vorlagen. Beachten Sie, dass die Parameter an die Vorlage übergeben werden und Variablen wie $colspanverwendet werden können. Diese Parameter werden von der übergeben XkinsProcessor, die von der Taglib aufgerufen wird.