Applicare skin alle applicazioni Web che utilizzano Xkins

Uno skin si riferisce all'aspetto di un'interfaccia utente; conferisce a un'applicazione Web un aspetto diverso. Uno skin cambia il modo in cui viene visualizzata l'interfaccia utente quando un utente fa clic su un pulsante, ma non cambia il comportamento dell'interfaccia utente. Un cambiamento nello skin si traduce quindi in un cambiamento nell'aspetto di un'applicazione, ma per ottenere tale modifica, l'applicazione Web deve sapere come usare uno skin.

Perché dovresti applicare lo skin a un'applicazione Web in primo luogo? Ebbene, ci sono diversi motivi per usare le skin, ma di certo non sono sempre un must. In una semplice applicazione, lo skin sarebbe eccessivo, ma in alcune situazioni, come descritto nell'elenco seguente, è necessario gestire gli skin:

  • Quando la skin è un requisito di sistema: Quando l'utente può selezionare la propria skin o persino crearne una propria.
  • Quando si desidera fornire funzionalità di skin a un framework di componenti aziendali: se si creano soluzioni diverse per client diversi, è possibile riutilizzare tutti i componenti (taglib), se i componenti hanno funzionalità di skin, semplicemente cambiando lo skin di ciascun cliente.
  • Quando è necessaria una skin diversa in base a uno scenario aziendale: ad esempio, in un marketplace o un'applicazione multi-banking, entità diverse stanno lavorando nello stesso sistema ed è necessario marcare l'applicazione in base all'immagine aziendale dell'utente.

Creare la pelle di un'applicazione Web non è un compito facile. Puoi utilizzare Cascading Style Sheets e modificare il percorso di un'immagine, ma sei limitato a ciò che puoi fare con CSS. Se hai un componente che ha un aspetto completamente diverso in ogni skin, cioè se l'HTML è diverso in ogni skin, CSS non ti aiuterà. Tuttavia, potresti usare i CSS se il semplice cambiamento degli stili risolve il tuo problema.

Un buon approccio alla creazione di una skin consiste nel determinare ogni parte dell'interfaccia utente e generalizzare queste parti per applicare un aspetto a ciascuna di esse. Ad esempio, se, nello skin A, hai un componente frame che è solo una semplice tabella e, nello skin B, una tabella più complessa con intestazioni, piè di pagina, immagini e persino suoni, dovrebbe essere diverso HTML (more e tages) generato per ogni cornice della pelle. Ad esempio, supponiamo che nella skin A, l'HTML che deve essere generato per rendere un'etichetta sia:

Questa è la mia etichetta

Ora, nella skin B, ecco come verrebbe resa un'etichetta:

   
Questa è la mia etichetta

Come puoi vedere, queste due parti dell'interfaccia utente differiscono completamente in ogni skin. Entrambi hanno le stesse informazioni ( This is my Label), ma vengono visualizzati con tag HTML diversi. Questa funzionalità non può essere ottenuta con il solo CSS. Forse l'utilizzo di Extensible Stylesheet Language Transformations o XSL potrebbe essere un'opzione. Oppure potresti usare Xkins.

Cos'è Xkins?

Xkins è un framework che gestisce le skin per la tua applicazione Web. Nei primi giorni di Java lato server, si codificava l'HTML in un servlet. Quindi, è arrivato JSP (JavaServer Pages) per consentirti di inserire il tuo HTML al di fuori del codice Java. Al giorno d'oggi, abbiamo lo stesso problema con i taglib che hanno tag HTML hardcoded nel codice Java. Usando Xkins, puoi inserire HTML al di fuori del tuo codice con una funzionalità aggiuntiva e potente: le skin. Per informazioni dettagliate su Xkins, visitare la home page di Xkins.

La figura 1 illustra il ruolo di Xkins in un'applicazione Web.

Un'applicazione Web che utilizza Xkins e Struts tramite taglib segue questo ciclo di vita della richiesta:

  • Struts inizializza Xkins con il plug-in Xkins.
  • Il controller Struts riceve la richiesta HTTP.
  • Struts esegue il processo e lo inoltra alla visualizzazione della pagina JSP.
  • La pagina JSP utilizza i tagli per il rendering della pagina.
  • Il taglib utilizza Xkins attraverso la facciata Xkins: XkinProcessor.
  • XkinProcessor ottiene la skin dell'utente e il modello che il taglib comanda per il rendering.
  • XkinProcessorutilizza l' TemplateProcessorassociato al modello.
  • Il TemplateProcessorè la classe responsabile del rendering del pezzo dell'interfaccia utente che compone la pelle. Il TemplateProcessorpotrebbe utilizzare Velocity, JBYTE (Java Template Engine), Groovy, o altro motore di template per rendere l'uscita.
  • Il TemplateProcessorutilizza le risorse dalla pelle (elementi e percorsi) e restituisce il risultato del trattamento modello per la taglib.
  • Il taglib esegue il rendering del risultato dell'elaborazione del modello nel browser Web.

Xkins affronta la gestione della pelle seguendo questi concetti di base:

  • Mantieni tutta la generazione di HTML fuori dal codice Java: Taglibs di solito genera codice HTML. La modifica di questo codice richiede la modifica del codice Java e la ridistribuzione dell'applicazione. Xkins ti consente di esternalizzare la generazione di HTML inserendo l'HTML nei file di definizione (file XML). Inoltre, Xkins consente di mantenere i tag di formattazione HTML semplici fuori dalle pagine JSP per esternare ulteriormente l'aspetto dell'applicazione.
  • Definisci una struttura di skin: modelli, risorse e percorsi compongono uno skin. Le risorse possono essere costanti o elementi come immagini e file CSS. La definizione dei percorsi ti aiuta a organizzare i tuoi file skin. La definizione dei modelli ti aiuta a riutilizzare le parti dell'interfaccia utente in tutta l'applicazione.
  • Consenti estensioni al framework Xkins: puoi estendere Xkins per utilizzare il tuo linguaggio modello per il rendering in base alle tue esigenze. Se hai bisogno, ad esempio, della generazione di immagini, puoi implementare un elaboratore di modelli che prenda un modello e generi un'immagine. Xkins viene fornito con processori modello basati su Velocity e JBYTE. Se preferisci Groovy, ad esempio, potresti creare un processore di modelli Groovy per eseguire il rendering dei tuoi pezzi dell'interfaccia utente.
  • Dividi l'interfaccia utente in elementi di base: in Xkins, puoi rimuovere tutti i pezzi dell'interfaccia utente e creare modelli con essi. In questo modo, puoi riutilizzare questi pezzi e cambiare tutto ciò di cui hai bisogno per far sembrare una pelle diversa.
  • Usa l'ereditarietà per ridurre al minimo la manutenzione degli skin: in Xkins, uno skin può estendere altri skin e utilizzare tutti i modelli, i percorsi e le risorse di cui dispone il genitore. Pertanto, si riduce la manutenzione del modello.
  • Usa la composizione per creare skin: oltre all'ereditarietà, Xkins utilizza anche la composizione per ridurre al minimo la manutenzione e promuovere il riutilizzo dei tuoi modelli. Con questa funzione, gli utenti possono creare le proprie skin personalizzate dall'applicazione selezionando diversi pezzi dell'interfaccia utente da skin esistenti.
  • Definisci un tipo di skin: utilizzando un tipo di skin, puoi assicurarti che tutti gli skin caricati in un'istanza Xkins abbiano almeno gli stessi modelli del tipo. Un tipo di skin è lo skin di cui devono estendersi tutti gli altri skin per essere validi in un'istanza Xkins. Per istanza Xkins, intendo un gruppo di skin caricati insieme per essere utilizzati dall'applicazione Web.

Un vantaggio importante offerto da Xkins è che tutto l'HTML è in un unico posto e, se è necessario ottimizzarlo, è sufficiente modificare i modelli. Ad esempio, se le tue pagine sono troppo grandi, rileva dove si trova l'eccessiva generazione di HTML o decidi quali immagini potrebbero essere rimosse, quindi modifica i modelli per ridurre le dimensioni della pagina. Potresti anche avere una skin leggera per gli utenti che accedono alla tua applicazione Web con connessioni a bassa velocità e un'interfaccia utente più ricca per gli utenti a banda larga.

Nota che puoi usare Xkins insieme a CSS. Infatti, l'uso di CSS è consigliato per stili e colori dei caratteri, perché il riutilizzo delle classi CSS evita la necessità di indicare esplicitamente il tipo di carattere ogni volta, riducendo così al minimo le dimensioni della pagina.

Uno skin può essere incapsulato in un singolo file (file zip) per una facile distribuzione in un'applicazione Web. Se si definisce un tipo di skin, è possibile aggiungere skin di terze parti all'applicazione Web se sono conformi al tipo di skin dichiarato.

È possibile utilizzare Xkins in molti modi, ma l'utilizzo di Xkins con taglib offre l'approccio migliore in un'applicazione Web. Puoi utilizzare questi tag per generare le tue pagine o per decorare i tuoi tag esistenti.

Definire una pelle

Ecco alcuni suggerimenti per definire una pelle:

  • Determina i colori della pelle; usa costanti globali in modo che altri skin possano estenderle e sovrascriverle.
  • Crea modelli riutilizzabili per ogni 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>

Tutti i modelli sopra sono modelli di velocità. Si noti che i parametri vengono passati al modello e $colspanpossono essere utilizzate variabili come . Questi parametri vengono passati da XkinsProcessor, che viene chiamato dal taglib.