Les thèmes ne sont pas un concept nouveau. Vous en avez probablement déployé quelques-uns en utilisant des styles et des classes de feuilles de style en cascade (CSS) pour formater l’aspect et la convivialité de vos sites Web. L’utilisation d’un framework standardise l’approche et réduit la quantité de travail et de code à écrire.

jQuery UI est désormais la norme industrielle pour la mise en œuvre des thèmes. Il existe d’autres choix, comme Dojo (couplé à Dijit) ou Ext JS, mais jQuery UI combine les thèmes avec l’utilisation de widgets, qui sont les éléments avec lesquels les utilisateurs interagissent les sélecteurs de dates ou les boutons. Lorsque l’on dissèque les rouages internes des fichiers qui composent un thème jQuery UI, on ne trouve rien d’autre que du CSS et du JavaScript. Mais c’est le processus de réflexion et la normalisation qui sont entrés dans cette utilisation de CSS et de JavaScript qui font de jQuery UI une si excellente plateforme pour construire l’aspect et la convivialité d’un site Web.

Thèmes jQuery UI

La plateforme jQuery UI se compose de deux sous-cadres : un cadre de widgets, qui contient la Widget Factory et un ensemble de widgets couramment utilisés, et le cadre CSS. Le Widget Factory fournit la base de tous les widgets jQuery UI, y compris les widgets courants inclus dans l’ensemble de widgets. Lorsque vous créez des widgets, utilisez l’un des widgets courants de l’ensemble comme point de départ ou créez-en un de toutes pièces. Une fois que vous savez où se trouvent les widgets communs, ouvrez l’un d’entre eux dans votre éditeur préféré et affichez le code. À partir de là, modifiez ce code et générez un widget personnalisé (en utilisant l’un des autres widgets comme point de départ) ou créez-en un avec une structure similaire.

La structure des dossiers des thèmes de jQuery UI

Avant de continuer à regarder les différents fichiers et leur contenu, téléchargez l’un des thèmes de la plateforme jQuery UI (voir Sujets connexes pour un lien). Le fichier ZIP téléchargé contient trois dossiers : css, js et development-bundle. Le dossier development-bundle contient un dossier nommé themes, dans lequel sont conservés les thèmes jQuery UI en cours de développement. Le dossier themes contient à son tour un dossier portant le nom du thème sélectionné/téléchargé (tel que UI lightness) ainsi qu’un dossier nommé base. Ce dossier contient un point de départ pour vos propres thèmes. Il est toujours téléchargé, quel que soit le thème sélectionné.

Le dossier css contient un dossier portant le nom du thème téléchargé. Ce dossier de thème contient un fichier CSS qui intègre le balisage CSS de tous les composants ou widgets. Toutefois, le dossier development-bundle contient également un dossier themes/ (où figure le nom réel du thème choisi) qui contient les fichiers CSS individuels pour chaque composant ou widget. Cette structure permet de trouver et de modifier plus facilement les changements dans vos propres thèmes. La figure 1 montre la structure du dossier themes.

Figure 1. Structure du dossier themes

Voir l’image en taille réelle

Tous les fichiers du dossier ne sont pas répertoriés dans la figure 1, mais les plus importants sont ici. Le fichier jquery.ui.all.css importe les fichiers jquery.ui.base.css et jquery.ui.theme.css, ce qui facilite l’importation des fichiers en utilisant uniquement le fichier jquery.ui.all.css. Le fichier jquery.ui.base.css importe le fichier jquery.ui.core.css et tous les autres fichiers de composants et de widgets du même dossier (non représenté sur la figure 1.). Le fichier jquery.ui.core.css contient des classes communes partagées par tous les fichiers de widgets. Il fournit les classes CSS de base pour tous les widgets jQuery UI (dans le thème) ainsi qu’une visibilité et un positionnement communs pour les widgets. Le dernier fichier important est le fichier jquery.ui.theme.css, qui fournit l’apparence et le comportement communs partagés par tous les widgets du thème ainsi que le thème lui-même.

Le fichier jquery.ui.theme.css comporte trois types de styles différents :

• Conteneur – Ce style définit le thème conteneur, tel que ui-widget, ui-widget-content ou ui-widget-header.
• États – Ce type de style est utilisé par les widgets jQuery UI pour définir l’aspect du widget lorsque l’utilisateur interagit avec lui. Les classes comprennent ui-state-default, ui-state-hover et ui-state-active.
• Cues – Lorsque quelque chose se produit dans l’application (pas par l’action de l’utilisateur), ces classes modifient l’apparence du widget. Les classes comprennent ui-state-highlight, ui-state-error, et ui-state-disabled.

Widgets communs

Cette section examine un exemple de code qui utilise certains widgets communs pour construire une application d’exemple. Cet exemple contient un widget de curseur, un bouton qui ouvre une boîte de dialogue et une boîte de dialogue qui affiche la valeur actuelle du curseur chaque fois qu’elle est ouverte. La figure 2 présente un instantané de l’application.

Figure 2. Un exemple d’application utilisant des widgets communs

Voir image à taille réelle

La liste 1 fournit le fichier d’index HTML.

La liste 1. Exemple d’application utilisant des widgets communs

La liste 2 présente le fichier JavaScript associé (index.js).

La liste 2. Le fichier JavaScript associé pour l’application d’exemple

La configuration initiale a lieu dans l’en-tête avec le code suivant :

Après avoir lié le CSS, les fichiers JavaScript sont inclus.

Les trois widgets de cette application sont définis à l’aide d’instructions <div> pour la plupart (sauf pour le bouton, qui a déjà une balise en HTML). Ces widgets sont définis dans le code suivant :

<div style="margin-bottom:10px;"></div><button>Display Value</button><div></div>

Enfin, retardez la construction effective des widgets dans le code JavaScript jusqu’à ce que la page ait été entièrement chargée par le navigateur, comme indiqué dans le Listing 3.

Liste 3. Construction des widgets

Chacun des widgets déjà mentionnés est construit avec ce code. La boîte de dialogue et le bouton se voient attribuer des fonctions à des événements spécifiques. Par exemple, on indique à l’événement de clic du bouton qu’il doit ouvrir la boîte de dialogue lorsqu’il est cliqué. Quant à la boîte de dialogue, on lui demande de modifier son texte pour indiquer la valeur actuelle du curseur, ce qu’elle fait à chaque fois qu’elle est ouverte.

Il existe deux façons de modifier l’apparence d’un widget. Vous pouvez passer des valeurs au constructeur, ainsi que tous les paramètres de constructeur requis pour le widget. Par exemple :

$("#dlg_popup").dialog( { autoOpen: false, draggable: true });

Ou vous pouvez appeler des méthodes sur le widget après sa création, comme suit.

$("#dlg_popup").dialog({ draggable: false });

La plupart des widgets courants ont de nombreuses options associées qui peuvent être définies. En outre, si vous choisissez d’ignorer ces options, les widgets les définissent à des valeurs par défaut, ce qui vous permet de définir et de modifier ce qui est nécessaire.

Événements des widgets

Parce que les widgets sont fondamentalement des objets JavaScript, ils peuvent être configurés avec des événements qui se déclenchent pendant la durée de vie de l’application du site web. Au fur et à mesure que ces événements se déclenchent, ils sont capturés soit par le code JavaScript fourni par votre site Web, soit traités au sein des widgets (par défaut).

La mise en œuvre du comportement par défaut de tous les widgets est bien documentée par l’équipe jQuery UI pour chaque widget commun. Vous pouvez cependant injecter votre propre code pour gérer un ou plusieurs événements d’un widget choisi. Voici un exemple de code pour mettre en place la réception d’un événement :

$( "#dlg_popup" ).dialog({ drag: function(event, ui) { ... }});

Cet exemple particulier s’accroche à l’événement drag, qui est déclenché lorsque la boîte de dialogue est glissée. L’ellipse (…) montrée dans l’exemple est l’endroit où le code individuel peut être placé pour gérer et mettre en œuvre le code de l’événement.

Méthodes de widget

Les méthodes (comme dans tout langage familier) sont associées au widget et permettent l’exécution de fonctionnalités pré-écrites sur un widget particulier pour lui faire effectuer une action spécifique. Voici un exemple d’appel de la méthode d’un widget :

$("#dlg_popup").dialog("moveToTop");

Conceptuellement, les options et les méthodes sont différentes. Notez cependant que la valeur d’une option peut être modifiée ou récupérée à l’aide d’une implémentation de type méthode, comme le montre l’exemple suivant.

$("#dlg_popup").dialog("option", "autoOpen", false);

Commutation de thèmes

Le code peut être inclus dans les fichiers HTML et JavaScript qui donnent la possibilité de changer de thème à la volée en utilisant un menu déroulant. Le Listing 4 montre les modifications à apporter au code source HTML pour effectuer un tel changement.

Liste 4. Changement de thèmes à la volée

La liste 5 montre le code source JavaScript.

La liste 5. Code source JavaScript pour changer les thèmes à la volée

$(document).ready(function(){ $('#switcher').themeswitcher();...});

La figure 3 montre l’application d’exemple après ces modifications.

Figure 3. L’application d’exemple après les modifications du code

Voir l’image en taille réelle

Lancez à nouveau la page HTML dans votre navigateur, et visualisez les résultats. Vous pouvez maintenant cliquer sur la liste déroulante pour changer de thème. Le thème sélectionné est téléchargé en arrière-plan si nécessaire.

Bien que l’utilisation de l’outil de changement de thème soit parfaite pour les sites de non-production (pour tester et visualiser les résultats), ce n’est pas une bonne idée pour les sites de production. L’outil s’appuie sur un serveur tiers pour héberger les thèmes, et vous ne serez pas sûr des résultats que l’utilisateur voit.

Encore une autre façon de tester les thèmes jQuery UI est d’utiliser l’outil ThemeRoller, qui est disponible uniquement pour Mozilla Firefox (voir Sujets connexes pour un lien). Après avoir installé l’outil (en tant que bookmarklet dans Firefox), ouvrez la galerie et sélectionnez les thèmes pour les afficher. Choisissez un thème et cliquez sur le lien de téléchargement. Une fois téléchargé, extrayez le dossier du thème, placez-le dans votre dossier jQuery UI et faites-y pointer vos fichiers HTML.

Cet outil est bien plus utile que pour simplement changer de thème, cependant. Il vous permet également de construire des thèmes personnalisés plus facilement que si vous deviez les déployer à la main.

Création de thèmes uniques

En utilisant le site Web ThemeRoller (qui s’exécute dans la plupart des navigateurs populaires ; voir Sujets connexes pour un lien), des modifications peuvent être apportées à un thème jQuery existant (comme point de départ) pour créer un thème unique. Ainsi, il n’est pas nécessaire de créer le thème à partir de zéro. Cela signifie également qu’une expertise en CSS n’est pas nécessaire et que l’outil vous permet de visualiser les modifications apportées aux thèmes et aux widgets existants à la volée. La figure 4 présente le site ThemeRoller (à ne pas confondre avec le bookmarklet ThemeRoller, qui s’exécute dans Firefox).

Figure 4. Le site ThemeRoller

Voir image en taille réelle

Cliquer sur la galerie vous permet de sélectionner n’importe lequel des thèmes existants. Ce faisant, vous changez les styles CSS et les images que les widgets de l’échantillon utilisent pour refléter le changement. En cliquant sur le bouton Modifier associé à un thème, vous accédez à l’onglet « Roll Your Own », où vous pouvez apporter des modifications aux styles CSS associés au thème. Si vous ne choisissez pas un thème à modifier et que vous commencez à l’onglet « Roll Your Own » sans thème sélectionné, vous construisez simplement un thème à partir de zéro.

Enfin, en cliquant sur Télécharger le thème, vous téléchargez le thème sélectionné comme un thème personnalisé contenant toutes vos modifications de thème. Notez que jQuery UI et ses thèmes prennent en charge de nombreuses fonctionnalités CSS3, ce qui signifie que tous les principaux navigateurs sont pris en charge (sauf les versions antérieures de Windows Internet Explorer).

L’onglet « Roll Your Own » de ThemeRoller est joliment organisé pour que vous puissiez rapidement trouver et modifier ce que vous cherchez. L’onglet contient les sections importantes suivantes (entre autres) :

• Paramètres de police – Permet des modifications générales de la police utilisée dans tout un thème.
• Rayon des coins – Contrôle l’arrondi (ou l’absence) des coins pour divers widgets.
• En-tête/barre d’outils – Fournit l’apparence des en-têtes utilisés dans les divers widgets.
• Contenu – Fournit des paramètres pour contrôler le corps principal des widgets.
• Cliquable – Contrôle divers états que les widgets utilisent.

En cliquant sur les options, vous remarquerez quelques choses intéressantes sur la construction de ces thèmes. Par exemple, les thèmes jQuery UI tirent parti des textures. Pour les voir à l’œuvre, cliquez sur Header/Toolbar dans ThemeRoller. Cliquez ensuite sur le bouton coloré au milieu. Une palette déroulante contenant des motifs parmi lesquels vous pouvez choisir apparaît. La texture sélectionnée est combinée avec la couleur d’arrière-plan de votre choix pour produire le motif utilisé par les en-têtes et les barres d’outils. Ce n’est là qu’une des utilisations des textures. Il en existe d’autres dans les thèmes de jQuery UI. Par exemple, modifiez la texture dans l’élément  » cliquable : état par défaut  » pour voir comment la modification affecte les boutons dans le thème sélectionné.

Une caractéristique intéressante des thèmes jQuery UI est l’utilisation des mises en évidence et des erreurs (également connues sous le nom de repères visuels). ThemeRoller offre un contrôle complet sur la façon dont ces repères visuels sont affichés aux utilisateurs. La texture, la couleur d’arrière-plan, les coins du contour, la couleur du texte et même la couleur de l’icône peuvent être modifiés (si une icône est affichée dans le repère). Les noms de ces styles sont affichés dans ThemeRoller, il suffit donc d’utiliser ces noms dans vos propres sites Web pour que ces styles soient appliqués selon les besoins au texte affiché aux utilisateurs.

Les modifications apportées aux différents paramètres produisent des modifications de l’URL dans votre navigateur. Le Listing 6 fournit une URL à titre d’exemple.

Listing 6. Exemple d’URL de ThemeRoller

Enregistrez et restaurez plus tard cette URL pour revenir et apporter d’autres modifications aux paramètres. Par exemple, copiez l’URL après avoir effectué des modifications et collez-la quelque part pour la conserver en lieu sûr. Fermez ensuite votre navigateur (ou l’onglet du navigateur contenant le site ThemeRoller) et rouvrez-le en utilisant l’URL copiée. Comme vous pouvez le voir, toutes vos modifications sont de retour, prêtes pour d’autres modifications.

Conclusion

On peut en dire beaucoup plus sur les internes de jQuery UI, mais vous devriez avoir les bases nécessaires pour commencer à expérimenter avec les thèmes de jQuery UI. Vous avez vu la structure des dossiers et des fichiers qui vous permettront de modifier un thème. Vous pouvez visualiser ou utiliser ces fichiers comme point de départ pour créer vos propres thèmes lorsque vous serez prêt.

Cet article a également couvert ThemeRoller et les pages du site web associées prenant en charge la modification des thèmes existants ainsi que la création de nouveaux thèmes à partir de zéro. Enfin, vous avez exploré le processus de sauvegarde et de restauration des modifications de thèmes sur le site Web de ThemeRoller.

Ressources téléchargeables

• PDF de ce contenu

• plateforme jQuery UI : Téléchargez jQuery UI pour tester et suivre cet article et les exemples qu’il fournit.
• ThemeRoller : Consultez le site Web ThemeRoller, qui vous permet de tester les thèmes existants de la plateforme jQuery UI, de personnaliser les thèmes existants ou de créer des thèmes personnalisés.
• developerWorks Zone de développement Web : Trouvez des articles couvrant diverses solutions basées sur le Web. Consultez la bibliothèque technique de développement Web pour un large éventail d’articles et de conseils techniques, de didacticiels, de normes et de Redbooks IBM.
• Versions d’évaluation des produits IBM : Téléchargez et mettez la main sur les outils de développement d’applications et les produits middleware de DB2, Lotus, Rational, Tivoli et WebSphere.
• developerWorks sur Twitter : Inscrivez-vous dès aujourd’hui pour suivre les tweets de developerWorks.