JQuery UI

Cet article est une ébauche à compléter. Une ébauche est une entrée ayant un contenu (très) maigre et qui a donc besoin d'un auteur.

Introduction

jQuery UI est une collection d'éléments utiles dans le développement d'une interface utilisateur construits sur la base de la bibliothèque JavaScript : jQuery. Parmi ses éléments on trouve :

• Des interactions comme par exemple le drag&drop
• Des "widgets" (composants d'interface graphique) tels que des boutons, des tabs, etc.
• Des effets pour changer dynamiquement l'apparence d'éléments sur l'înterface (e.g. changement de couleur, faire apparaître/disparaître un élément, etc.)
• Des thèmes avec des propriétés CSS pour la mise en page d'éléments interactifs

Ces éléments peuvent se combiner entre eux (par exemple un éléments peut proposer un effet à la fin d'une interaction). De plus, le code JavaScript de jQuery UI est compatible avec la bibliothèque jQuery et peut-être intégré également avec du JavaScript pur. De cette manière, il est assez simple de personnaliser les éléments afin qu'ils produisent les comportements souhaités pour l'application.

Grâce à sa flexibilité, jQuery UI peut être utilisé dans différents types de projets. De plus, il s'agit d'une bibliothèque open-source qui est mise à jour régulièrement et qui propose, tout comme sa bibliothèque "mère", des plugins utiles.

Le site officiel du projet propose une série de démo qui montrent les potentialités de la bibliothèque. Il suffit de choisir un des éléments pour voir des exemples d'application.

Installation

Comparée à l'installation de jQuery, pour laquelle il suffit d'ajouter un lien au fichier JavaScript, l'installation de jQuery UI est plus complexe. Avant tout, il faut bien faire attention que jQuery UI ne contient pas automatiquement la bibliothèque "mère" : il est par conséquent nécessaire inclure dans la page aussi le lien à la bibliothèque jQuery.

Ensuite, jQuery UI met à disposition la possibilité de personnaliser le download de la bibliothèque en choisissant seulement les éléments dont on a besoin pour notre application. De ce fait, on peut réduire la taille des fichiers à inclure.

Download de jQuery UI

Le download de jQuery UI se fait en trois étapes à travers le Download Builder.

Étape 1

Il faut d'abord choisir la version de jQuery UI à utiliser. Dans la plupart des cas, la version "stable" est le bon choix à faire. Il faut cependant faire attention à la compatibilité avec la version de la bibliothèque "mère" jQuery.

Étape 2

Ensuite, il faut choisir les éléments de la bibliothèque dont nous avons besoin pour notre application. On peut à ce propos cocher ou ne pas cocher les cases correspondantes aux différents éléments pour les inclure ou exclure du download. Parfois on ne sait pas à l'avance si on aura besoin ou moins d'un élément, donc on peut très bien tout inclure dans une version de la bibliothèque utile pour la phase de développement, et une fois déterminé les éléments utilisés, télécharger une deuxième version de la bibliothèque qui exclus les éléments inutiles.

Étape 3

Enfin, on peut choisir un thème graphique pour les éléments de la bibliothèque. Sur la page de download il n'est pas possible de voir les différents thèmes, mais il est possible de télécharger un thème différent dans un deuxième temps et substituer tout simplement le fichier CSS. Il est également possible de choisir le "scope" du thème graphique, ce qui est utile dans le cas d'utilisation de deux thèmes sur la même page. En laissant le champ vide, le thème sera apppliqué automatiquement à toute la page. Pour plus de détails sur les thèmes voir plus bas dans la page.

Fichiers téléchargés

Une fois déterminé le thème graphique, il faut cliquer sur le bouton Download. Vous obtenez ainsi un fichier zip qui contient plusieurs fichiers :

Voici une description du contenu :

• Le dossier "external" contient un autre dossier jquery à l'intérieur duquel se trouve le fichier jquery.js, il s'agit de la bibliothèque "mère" jQuery. Ce fichier doit être inclu dans votre page, autrement les fonctionnalités dynamiques de jQuery UI ne seront pas disponible. Vous pouvez également inclure la bibliothèque jQuery d'une manière différente, telle que décrite dans la page de ce wiki dédiée à la bibliothèque
• Le dossier "images" contient des fichiers graphiques utilisées dans la feuille de style CSS, elle doit donc être présente dans votre application et son positionnement relative au fichier CSS doit rester le même.
• Le fichier index.html propose des exemples d'éléments disponibles à travers jQuery UI. Il n'est pas nécessaire pour le fonctionnement.
• Les fichiers jquery-ui.css et jquery-ui.min.css contiennent exactement le même code, mais la version .min est comprimée et donc sa taille est inférieure. Ces fichiers contiennent les déclarations de style des éléments. Un des deux fichiers doit être inclus, il est mieux d'utiliser la version .min.
• Les fichiers jquery-ui.js et jquery-ui.min.js contiennent encore une fois le même code (voir le point précédent). Ces fichiers contiennent le code JavaScript nécessaire pour les éléments dynamiques. Un des deux fichiers doit être inclus, il est mieux d'utiliser la version .min.
• Les autres fichiers représentent des déclarations CSS supplémentaires, comme par exemples les différents couleurs par rapport aux différents thèmes graphiques disponibles. Ils ne sont pas strictement nécessaires pour le fonctionnement, mais ils offrent des caractéristiques graphiques supplémentaires.

Fichiers obligatoires à inclure dans votre page

En résumé, il est nécessaire d'inclure au moins trois fichiers dans votre page HTML :

<link rel="stylesheet" href="jquery-ui.min.css">
<script src="external/jquery/jquery.js"></script>
<script src="jquery-ui.min.js"></script>