> Tech > Plug-ins jQuery UI

Plug-ins jQuery UI

Tech - Par iTPro - Publié le 26 mars 2012
email

Afin d’utiliser la bibliothèque UI, vous devez d’abord la télécharger à partir du site jQuery UI (jqueryui.com). Au niveau de la page d’accueil, vous pouvez consulter les thèmes disponibles au moyen de la Theme Gallery, puis télécharger une version personnalisée de la bibliothèque.

Lorsque vous préparez votre téléchargement, sélectionnez avec soin les composants souhaités (par défaut, tous sont sélectionnés), la version de bibliothèque désirée (en général, vous sélectionnez la plus récente) et un des thèmes préconfigurés.

Téléchargez le fichier ZIP sur votre ordinateur et décompressez-le. Sous ce dossier dézippé, plusieurs sous-dossiers doivent être visibles, notamment les dossiers CSS et JS.

Ajoutez le thème personnalisé téléchargé à votre projet en copiant le dossier de style nommé à partir du répertoire CSS vers le dossier Content de votre projet MVC. Copiez la bibliothèque de script jQuery UI personnalisée à partir du dossier JS vers le dossier Scripts de votre projet. J’ai télécharge la dernière version (version 1.8.4) au moment de la rédaction de l’article. Si vous envisagez de déployer votre projet au moyen des Web Deployment Packages, n’oubliez pas d’ajouter le dossier de style et le fichier JavaScript à votre projet Visual Studio, sinon l’application s’exécutera dans votre environnement local, mais échouera pour une raison mystérieuse en production.

L’architecture ASP.NET MVC est, comme son nom l’indique, constituée de Modèles, de Vues et de Contrôleurs. Les Modèles sont simplement des classes de données qui peuvent facultativement être enrichies d’attributs DataAnnotation. Toutes les URL sont converties en appels à une méthode publique sur un Contrôleur.

Le Contrôleur manipule les données qui lui sont passées et crée les données nécessaires à la Vue, puis appelle (indirectement) la Vue. Le rôle principal d’une Vue est d’assurer le rendu des données créées par le Contrôleur. Les Vues sont similaires aux pages ASP.NET, mais n’ont aucun code sous-jacent. Les Vues peuvent être fortement typées, et escomptent donc qu’un contrôle configure un objet de données qui leur est passé pour le rendu. Cet objet est accessible dans toute la Vue via une variable de Modèle fortement typée. Pour faciliter le rendu des contrôles à base de formulaire, tels que les zones de texte et les cases d’option, les Vues utilisent un ensemble de méthodes HtmlHelper, accessibles via une variable Html. Ces méthodes d’extension accèdent aux données du Modèle et aux métadonnées concernant ce dernier, généralement sur la base d’attributs DataAnnotation associés à la classe et aux champs de Modèle.

Ajoutez le script suivant à la page maître de la page de Vue (par défaut, Site.master), en remplaçant par le nom du style téléchargé avec votre bibliothèque jQuery UI. Dans mon exemple, j’ai employé le style « redmond »:

‹link href= »/<br />jquery-ui-1.8.4.custom.css »)%> » rel= »stylesheet » type= »text/<br />css » />   
‹script type= »text/javascript » src= »jquery-1.4.1.min.js »)%> » >  
‹script type= »text/javascript » src= »jquery-ui-1.8.4.custom.min.js »)%> » >

Assurez-vous que la balise de script concernant la bibliothèque de base jQuery, dans notre cas jquery-1.4.1.min.js, apparaît avant la balise pointant vers la bibliothèque jQuery UI, ou une erreur du type « ‘jQuery’ is undefined » sera renvoyée lors de l’exécution de l’application.

Pour ajouter le contrôle de calendrier de sélection de date à une page de Vue, employez d’abord la méthode d’extension HtmlHelper TextBox afin d’ajouter un contrôle Textbox à la Vue, annoté avec votre choix de nom de classe :

‹%= Html.TextBox(« TestDatePicker »,
Model.TestDatePicker.ToString(« d »),
new { @class = « myDatePickerClass » })%>

Toutes les pages de Vue fortement typées ont accès à une variable de Modèle qui représente une instance d’une classe C# et est passée à la Vue par un Contrôleur. Dans ce cas, le Modèle référence une classe qui contient un champ DateTime intitulé TestDatePicker.

Notez que cette fonction annexe (helper) TextBox définit une valeur formatée initiale pour le champ TestDatePicker au moyen de la méthode ToString(). C’est nécessaire car le contrôle jQuery DatePicker applique son option dateFormat uniquement une fois que vous sélectionnez une date dans le contrôle de calendrier.

Ensuite, ajoutez le script jQuery à votre page maître. La classe recherchée, dans ce cas myDatePickerClass, doit concorder à celle ajoutée à TextBox:

    ‹script type= »text/javascript »>
      $(document).ready(
          function () {
              $(« .myDatePickerClass « ).datepicker({
                  buttonImage: ‘         images/calendar.gif »)%>’,
                  dateFormat: ‘m/d/yy’,
                  showOn: ‘button’,
                  buttonImageOnly: true
              })
          }
      );
  ‹/script>

Ouvrez la page. Lorsque vous cliquez sur l’icône de calendrier à droite de la zone de texte, vous devez voir le contrôle de calendrier de la figure 1. La sélection d’une date remplit le champ de texte. Vous pouvez aussi modifier la date dans la zone de texte et elle sera reflétée dans le calendrier contextuel.

Notez que jQuery ne vous permet pas de saisir une date non valide dans le champ de texte. Il est utile d’examiner plus avant le mode de fonctionnement du script jQuery. Pour ajouter un script qui s’exécute lorsque le navigateur charge une page, une déclaration de fonction est placée à l’intérieur de la fonction jQuery ready(). La fonction ready() garantit que votre fonction s’exécutera uniquement après le chargement complet du modèle DOM. De manière cohérente avec jQuery, la fonction ajoutée commence par rechercher toutes les balises avec un attribut de classe « myDatePickerClass ».

Pour chaque balise trouvée dans la recherche, jQuery appelle la méthode datepicker() afin d’ajouter la fonctionnalité de calendrier.

Le sélecteur de date reconnaît près de 50 options pour modifier son comportement. Ces options incluent la spécification de l’image à employer pour la sélection de la fenêtre contextuelle, le format de la date et le fait que le calendrier s’affiche lorsque vous accédez au champ de texte ou lorsque vous cliquez sur une icône d’image, même si vous pouvez ou non modifier la date dans le champ de texte. Pour une liste complète, consultez la documentation sur le site de jQuery (jquery.com).

Pour modifier l’aspect de tous les contrôles jQuery UI, il est possible d’utiliser l’outil ThemeRoller sur le site jQuery UI. Pour remplacer uniquement les attributs de style de sélecteur de date, remplacez-les par votre propre feuille de style. N’oubliez pas d’ajouter le lien vers votre feuille personnalisée après la feuille de style jQuery UI, ou aucun élément de remplacement n’apparaîtra dans le contrôle. En guide d’exemple des modifications possibles, vous pouvez faire en sorte que le contrôle de calendrier soit plus petit, ce en ajoutant ce qui suit à votre feuille de style CSS :

.ui-datepicker { font-size: 80%; }

Téléchargez gratuitement cette ressource

Les 7 étapes d’un projet de dématérialisation RH

Les 7 étapes d’un projet de dématérialisation RH

Dans ce livre blanc, nous vous donnons les clés pour concevoir votre projet de dématérialisation RH. Vous découvrirez chacune des étapes qui vous permettront d’apporter de nouveaux services aux collaborateurs, de vous adapter aux nouvelles pratiques et de renforcer la marque employeur.

Tech - Par iTPro - Publié le 26 mars 2012