Création d'un CSS réduit pour GXT

Le portail utilise la librairie GXT uniquement pour les tableaux triables et paginables. GXT fournit un seul CSS pour tous les widgets. Ce CSS a actuellement une taille de 111.000 octets environ (à la version 1.1.4). Puisque seul un sous-ensemble est utilisé, il est possible de remplacer ce CSS par un fichier réduit à 15.000 octets environ. Cela réduit le volume à télécharger par chaque utilisateur du portail.

Le fichier pouvant avoir évolué d'une version à l'autre de GXT, il faut recommencer l'opération à chaque fois qu'une nouvelle version de la librairie est déployée.

Voici quelques instructions pour créer un tel fichier CSS réduit :

• Extraire le fichier com/extjs/gxt/ui/public/css/ext-all.css du jar gxt.jar.
• Renommer ce fichier en ext-mini.css.
• Editer le fichier ext-mini.css en enlevant toutes sauf celles décrites ici. En général, le fichier contient des blocs séparés par des lignes vides. Il est préférable de garder un bloc complet. Pour chaque bloc sont donnés le début des noms des classes CSS à conserver. Si par exemple il faut garder my-tbl, il faut aussi garder my-tbl-data.
  • garder le bloc du début, qui initialise tous les éléments à vide et zéro.
  • garder le bloc concernant ext-el-mask, x-mask-loading, x-hidden
  • garder le bloc concernant les boutons : x-btn
  • garder le bloc concernant la toolbar : x-toolbar, x-tbar, x-statusbar
  • garder le bloc concernant x-grid-panel
  • garder le bloc concernant x-panel
  • garder le bloc concernant x-vsplitbar, x-hsplitbar, ...
  • garder le bloc concernant les tableaux : my-tbl
• Ajouter ce fichier à gxt.jar. Attention, il faut qu'il soit dans le jar avec le chemin complet donné plus haut. Il faut donc respecter toute l'arborescence au moment de modifier le jar.
• Modifier les tags GLU des pages HTML portal.html et myData.html, en remplaçant l'utilisation de ext-all.css par ext-mini.css.
• Déployer le jar modifié, ainsi que les nouvelles pages HTML.

Une alternative est de ne pas changer le nom du fichier CSS, c'est à dire de modifier directement le fichier ext-all.css. Dans ce cas, il n'y a pas besoin de modifier les fichiers HTML du portail. L'un des avantages de cette manière de faire, est qu'il est possible de déployer une nouvelle version de la librairie sans avoir besoin de faire obligatoirement ce travail.

-- PascalWassong - 26 Nov 2008