};
La valeur « : » est tout à fait correcte comme nom de propriété d'un objet, mais elle impose l'utilisation de la notation à crochets car la notation pointée (expr.:) provoquerait une erreur.
Cette fonction va itérer parmi tous les éléments possibles
et devra retourner pour chacun d'eux true si l'élément doit être conservé, false sinon.
Elle prend quatre paramètres automatiques :
• elem : l'élément DOM en cours de traitement ;
• rang : le compteur pour l'itération en cours ;
• donnees : un ensemble d'informations que nous détaillerons plus tard ;
• collection : la collection que nous sommes en train de parcourir.
Pour l'instant, seuls les deux premiers paramètres peuvent nous être utiles. Voici comment les utiliser avec deux exemples simples.
// Exemple 1 : récupérer tous les éléments positionnés (propriété CSS position différente de static)
$.expr[':'].positionned = function(elem){
return $(elem).css('position') != 'static';
};
// Exemple 2 : récupérer les éléments de rang pair
$.expr[':'].pair = function(elem, index){
return index%2;
};
Maintenant que vous avez créé votre sélecteur, il ne vous reste plus qu'à l'utiliser dans vos scripts :
$(':positionned').css('box-shadow', '0 0 10px 2px gold');
$('#footer :pair').css('box-shadow', '0 0 10px 2px red');
Attention aux performances lorsque vous combinez des sélecteurs de type CSS avec des sélecteurs personnalisés comme dans le second exemple, nous y reviendrons plus tard.
3. Ajouter des paramètres à votre sélecteur
Vous avez probablement déjà rencontré des sélecteurs jQuery prenant des paramètres (par exemple :eq() ou :has()). Là encore, il vous est tout à fait possible de reproduire cela avec vos paramètres personnalisés.
Pour gérer les paramètres passés au sélecteur, nous allons utiliser le paramètre donnees de la fonction de rappel.
Ce paramètre correspond à un tableau contenant quatre données :
• le sélecteur complet ;
• le nom du sélecteur ;
• le type de quotes utilisé ;
• les paramètres du sélecteur.
Développement Web
Les derniers tutoriels et articles
Créer des sélecteurs jQuery personnalisés
Dans cet article, nous allons voir comment adapter jQuery à nos besoins en créant nos propres sélecteurs.
L'exemple suivant va vous montrer à quoi correspondent
Que nous allons appliquer à l'élément HTML suivant :
<div id="testSelecteur" style="background-color:
silver; height: 2em; margin: 5px 0;">Élément créé pour tester les paramètres du sélecteur.</div>
Nous avons rajouté join(' / ') dans le message d'alerte afin de ne pas confondre la chaine "parametre1, paramètre2"
du second exemple avec deux valeurs distinctes du tableau.
Le sélecteur peut être appelé de trois façons différentes : $ (':testParams'), $(':testParams()') et $ (':testParams(paramètres)'). Les valeurs respectives du dernier paramètre seront : undefined, '' (chaine vide) et paramètres. Attention à bien prendre en compte que les deux premières possibilités sont supposées être équivalentes.
Nous allons donc pouvoir utiliser l'indice 3 de ce tableau pour gérer nos paramètres.
Nous allons créer un sélecteur qui récupérera les éléments possédant un attribut HTML5 data-*.
Pour rappel, HTML5 a introduit ce type d'attribut afin de pouvoir y stocker des données personnalisées manipulables en JavaScript via l'objet dataset.
Les développeurs de jQuery ont rendu l'objet data() compatible avec cette API tout en facilitant son utilisation et nous allons nous en servir pour notre sélecteur. Si aucun paramètre n'est passé, on recherchera tous les éléments ayant un attribut de type data-*, sinon, nous ne rechercherons que ceux ayant au moins un attribut correspondant à ceux passés en paramètre. Notre sélecteur se nommera hasData.
$.expr[':'].hasData = function(elem, index, noms) {
// On commence par stocker l'objet data de l'élément en cours dans une variable
$dataElem = $(elem).data(); vérifier la présence pour chacun d'eux
var tabNoms = noms[3].replace(/\s/g, '').split(',');
var retour = false;
$.each(tabNoms, function(i, nom){
if($dataElem[nom] !== undefined){
Et voilà, nous avons désormais un sélecteur personnalisé acceptant des paramètres.
4. Aller plus loin : utilisation des sélecteurs personnalisés
Il existe quelques précautions à prendre pour optimiser le code utilisant des sélecteurs personnalisés (ou des utilisez des sélecteurs combinés contenant une syntaxe non compatible avec ces méthodes du DOM, jQuery va être obligé de parcourir tous les éléments concernés par la sélection pour déterminer lesquels garder.
Cela ne signifie pas qu'il ne faut pas utiliser les sélecteurs personnalisés, mais juste qu'il faut essayer autant que possible de séparer leur utilisation de celles des sélecteurs compatibles CSS.
À titre d'exemple, si vous souhaitez récupérer les éléments ayant un attribut data-* enfants d'un élément possédant un identifiant donné, évitez la syntaxe
$('#element :hasData');
mais préférez séparer la recherche de l'élément possédant l'identifiant de celle des éléments possédant l'attribut :
$('#element').find(':hasData')
Plus la page contiendra d'éléments, plus le gain de performances sera important.
Cette règle s'applique bien entendu à vos sélecteurs personnalisés, mais aussi aux sélecteurs natifs de jQuery ne correspondant pas aux standards CSS (globalement, tous ceux commençant par ':').
Notez que cette règle s'applique aussi dans d'autres cas. Si votre sélecteur doit d'abord rechercher un identifiant (quelle que soit la suite de la recherche), il est recommandé de séparer la récupération de cet élément du reste du sélecteur.
Dans cette optique, il est important de se souvenir qu'un second paramètre peut être passé à la fonction $() qui correspond au contexte auquel se réfère la recherche.
Ainsi, des sélecteurs tels que $('#element :hasData') ou $ ('#element span') seraient avantageusement remplacés par
$(':hasData', '#element') ou $('span', '#element').
5. Conclusion
La création de sélecteurs personnalisés est particulièrement simple si l'on connaît les mécanismes internes de jQuery. Néanmoins, retenez bien ces deux
points importants lorsque vous créez vos nouveaux sélecteurs :
• attention à ne pas écraser des sélecteurs existants, pour cela, vous pouvez commencer votre code par une condition telle que if(!('selecteur' in
$.expr[':'])){...} ;
• souvenez-vous que l'utilisation d'un sélecteur personnalisé implique de parcourir tous les éléments pour déterminer lesquels correspondent, ciblez donc convenablement votre recherche avant d'utiliser vos propres sélecteurs.
Retrouvez l'article de Didier Mouronval en ligne : Lien 19
Développement Web avec Maven Tomcat et Jetty
1. Introduction
Tout d'abord, une première question qui peut vous venir à l'esprit :
Mais pourquoi ces plugins plutôt qu'un simple Tomcat installé sur un répertoire à part ?
L'objectif de ces plugins est multiple :
• accélérer votre cycle de développement ;
• centraliser dans votre code source une configuration qui marche.
En alternative vous auriez pu :
• installer Tomcat ;
• préconfigurer Tomcat pour accueillir votre application ;
• copier le fichier war généré dans le répertoire webapps.
Cette stratégie est fastidieuse, interrompt votre cycle de développement et nécessite que vous préconfiguriez votre conteneur Tomcat de la même façon pour tout le monde dans l'équipe.
Une variation de la méthode ci-dessus aurait été de faire pointer un fichier de contexte d'un Tomcat préinstallé sur vos sources. Cela évite la copie du fichier, mais pas la nécessité d'avoir un Tomcat préconfiguré et uniforme sur toutes les machines.
Une autre variante consiste à utiliser le plugin WTP
d'Eclipse. Là encore, il y a un effort de configuration à refaire sur chaque poste.
Ici nous allons insister sur un principe simple et pourtant fondamental en informatique : DRY (Don't Repeat Yourself : Lien 20). Si vous devez reconfigurer votre environnement de travail pour chaque nouvel arrivant, c'est de la perte de temps.
Checkout and Run : notre objectif c'est qu'un nouvel arrivant sur un projet n'ait qu'à cloner le repository et puisse être tout de suite opérationnel.
Si on souhaite accélérer son cycle de développement et éviter les redémarrages trop fréquents, on pourrait aussi utiliser Jrebel : Lien 21. Il existe d'ailleurs un plugin Maven pour créer votre fichier rebel.xml à partir de votre POM : Lien 22. Cette approche ne s'oppose pas à celle que nous allons détailler ici.
2. Configuration de base 2.1. Tomcat
Commençons par la configuration de base de cet article.
Démarrons par le projet 1.developpez-webapp : Lien 23.
Le seul point d'attention pour l'instant c'est que nous allons déclarer le plugin Tomcat dans le fichier pom.xml dans la section build -> pluginManagement :