Intégration d’un composant jquery UI dans WebDev

Dans un de mes projets de développement avec Webdev j’étais contraint d’intégrer un sélecteur de valeurs entre 2 bornes tel que l’on voit assez souvent sur les sites de vente en ligne pour rechercher les produits ou le prix se situe dans la fourchette entre MIN et MAX.

http://jqueryui.com/demos/slider/range.html

J’ai tout d’abord commencé mes recherches dans Webdev pour voir si un tel composant existe. Après avoir constaté son inexistence, je me suis naturellement tourné vers jQueryUI. N’étant pas un expert de Webdev, je me suis demandé s’il était possible d’y parvenir de l’intégrer vu la philosophie de programmation Webdev et son code HTML anarchique.

A la fin, je me suis rendu compte que l’intégration d’un « composant » jQueryUI dans webdev est vraiment très simple.  Ci-dessous je décris différentes étapes de l’intégration d’un « slider » dans une page Webdev. Il se peut que la manière dont je procède n’est pas la meilleure, mais c’est la mienne 🙂 Par contre, je ne tournerais pas la tête d’une autre manière d’intégrer un composant jQuery dans un projet Webdev.

Voici donc comment moi je fais :

Tout d’abord il faut choisir un composant que nous souhaitons intégrer, ici je prends comme exemple le « slider » qui représente les valeurs de 2 bornes :

Avant de commencer il faudra se rendre sur le site de jqueryui -> jqueryui.com afin de télécharger le framework, ici au moment de la rédaction de l’article il s’agit de la version 1.8.16 stable pour jquery 1.3.2 et supérieur .
Copiez le contenu de l’archive dans le dossier projet_WEB (dossiers css, js, res). Par la suite, vous pouvez soit ouvrir le fichier index de l’archive pour voir comment le slider de base est généré, mais comme il y a plusieurs « versions » de slider, vous pouvez aller sur la page de démo et choisir celui qui vous intéresse afin de l’afficher dans une page isolé. Ceci facilitera la lecture du code HTML.

http://jqueryui.com/demos/

Choisisssez « range slider » -> http://jqueryui.com/demos/slider/#range

Cliquez sur « new window » – puis affichez la source de la page.

 

Ce qui nous intéresse est la partie qui se trouve entre balises <head> et </head>

Vous devez adapter la partie css pour qu’elle corresponde à vos paramètres ainsi que la partie script pour définir les bornes min et max du slider ainsi que les valeurs par défaut.

Ici min = 0 et max = 100

Valeurs initiales sont 25 et 75

$(function(){
// Slider
$('#slider').slider({
range: true,
min: 0,
max: 100,
values: [25, 75]

 

Passons maintenant dans Webdev et faisons apparaître le slider sur une nouvelle page.Double-cliquez sur la page en question et choisissez l’onglet avancé puis HTML

Collez le code qui correspond à votre configuration, ici chez moi :

<title>jQuery UI Example Page</title>
<link type=”text/css” href=”css/ui-lightness/jquery-ui-1.8.16.custom.css” rel=”stylesheet”/>
<script type=”text/javascript” src=”js/jquery-1.6.2.min.js“></script>
<script type=”text/javascript” src=”js/jquery-ui-1.8.16.custom.min.js“></script>
<script type=”text/javascript”>
$(function(){
$(‘#slider’).slider({
range: true,
min: 0,
max:100,
values: [25, 75],
slide: function( event, ui ) {
$( “#A2” ).val( “” + ui.values[ 0 ] + ” – ” + ui.values[ 1 ] );
}
});
$( “#A2” ).val( “” + $( “#slider” ).slider( “values”, 0 ) + ” – ” + $( “#slider” ).slider( “values”, 1 ) );
});
</script>

Déposez par la suite le composant champ HTML sur la page. C’est là que nous allons construire le slider en faisant un double-clic sur le composant et en copiant le code HTML suivant :

<h2>Slider</h2>

<div id=”slider”></div>

Ici demoheaders car j’utilise le CSS d’origine. Vous êtes libres de définir vos propres classes.
Et voici le slider affiché dans la page HTMLMaintenant il va falloir récupérer les valeurs de 2 bornes. Pour l’exemple, j’ai fait le choix d’afficher les valeurs dans un champ de saisiePour ce faire déposez un champ de saisie dans la page – je lui donne comme nom Webdev « valeur_slide » et comme libellé « Min – Max ». Prenez notre que ces valeurs sont une référence Webdev pour l’utilsiation avec WLangage, vous verrez par la suite que le nom HTML du composant n’est pas le même !

Voici donc la page :

Il va falloir par la suite afficher le code source de la page pour trouver l’id et nom du champ afin de le passer au scripte pour remplissage :

Entouré en bleu l’id et nom HTML du champ (A2)

 

Nous allons donc revenir dans le code HTML de la page et adapter le code pour que le remplissage du champ se fasse correctement :

Et voici le slider s’affichant dans la page avec le champ qui contient la valeur

 

 

Il est donc tout à fait possible d’intégrer jquery et jquery UI dans une page Webdev. Ce à quoi il faut faire l’attention c’est de bloquer la génération de pages HTML une fois que vous avez obtenus le résultat voulu car il est possible (je n’ai jamais eu le cas) que suite à la recompilation du projet Webdev régénère les pages HTML et qu’il modifie les noms (A2).
Vous pouvez le faire dans l’onglet « Avancé » – « Optimisation du code HTML – « Personnalisé » et « Ne plus générer le fichier HTML »

Bon dev!

5 réponses

  1. J´ai essayé de reproduire le “slider” dans mon Webdev 16 mais cela ne marche pas. Puis-je vous envoyer le projet pour que vous puissiez y jeter un coup d´oeil et m´indiquez ce qu´il cloche. Merci d´avance.
    Cordialement
    Giraud Brésil

    1. Moi aussi J´ai essayé de reproduire le « slider » dans mon Webdev 17 mais cela ne marche pas.vous avez arriver a resourdre le problème??

  2. Hi,

    (Forgive my English).

    Really nice article, I managed to get multiple vertical sliders working without too much effort. Just one thing you might explain though. How do I trigger an WB event once the slider value has changed. I can write the result to an entry field but I would like to write some WB code once the slider has been moved, at the moment I am using a button after the values have been set.

    Regards,

    Anthony.

Répondre à Anthony Robinson Annuler la réponse

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *