Exemples de customisation

Modifié par jhurst le 2022/04/28 16:42

Support du glissement gauche et droite pour changer de page de Tableau de Bord (Tablettes tactiles)

Cet exemple montre comment ajouter le support des gestes tactiles ("Gestures") de glissement gauche et droite pour changer de page de tableau de bord sur les tablettes tactiles (iPad et Android).

Il montre l'ajout de nouveaux styles CSS dans le tableau de bord, ainsi que l'ajout de Javascript custom.

Dans un premier temps nous mettrons en place l'animation de glissement entre deux pages grâce aux animations CSS supportées par les navigateurs récents des tablettes tactiles, combinées à du code Javascript.

Ensuite, nous ajouterons la détection de glissement gauche et droite, afin de changer de page par ce geste.

Important :

Comme expliqué dans les chapitres précédents, il est conseillé de garder une copie de sauvegarde des modifications que vous faites dans les fichiers déployés par des .WAR. Lors d'une prochaine mise à jour, vous perdrez ces modifications et il faudra les ré-incorporer dans les nouveaux fichiers déployés.

Notes :

  • Vous pouvez tester les modifications dans un navigateur récent. Nous vous conseillons Chrome pour ses outils de développement intégrés (sans installation de plug-in). A mitiger en fonction de votre base d'utilisateur.
  • La modification de certains types de fichiers pourra entraîner des dysfonctionnements dans l'application. Il est préférable de faire une copie de sauvegarde de vos fichiers avant modifications, afin de pouvoir revenir à un état stable.
  • Si le navigateur de test choisi n'affiche pas vos modifications après la sauvegarde du ou des fichiers concernés, pensez à effacer le cache du navigateur.

Animation de changement de page (CSS)

Ouvrir le fichier <DDE install>/apache-tomcat/digdash_dashboard/dashboard.css en édition. Ajouter à la fin de ce fichier les lignes suivantes :

.in, .out {
         -webkit-animation-timing-function: ease-in-out;
         -webkit-animation-duration: 350ms;
}
.slide.in.right {
         -webkit-transform: translateX(0);
         -webkit-animation-name: slideinfromright;
}
.slide.out.right {
         -webkit-transform: translateX(100%);
         -webkit-animation-name: slideouttoright;
}
.slide.in.left {
         -webkit-transform: translateX(0);
         -webkit-animation-name: slideinfromleft;
}
.slide.out.left {
         -webkit-transform: translateX(100%);
         -webkit-animation-name: slideouttoleft;
}
@-webkit-keyframes slideinfromright {
         from { -webkit-transform: translateX(100%); }
         to { -webkit-transform: translateX(0); }
}
@-webkit-keyframes slideinfromleft {
         from { -webkit-transform: translateX(-100%); }
         to { -webkit-transform: translateX(0); }
}
@-webkit-keyframes slideouttoleft {
         from { -webkit-transform: translateX(0); }
         to { -webkit-transform: translateX(-100%); }
}
@-webkit-keyframes slideouttoright {
         from { -webkit-transform: translateX(0); }
         to { -webkit-transform: translateX(100%); }
}
.x-hide-display.slide.out {
         position: absolute;
         left:0px;
         height: 0px !important;
         background-color: red;
         display: block !important;
}

Ces classes définissent les différentes animations CSS que nous allons utiliser pour le déplacement des pages lors d'un changement de page du tableau de bord.

Sauvegarder le fichier dashboard.css.

Animation de changement de page (Javascript)

Ouvrir le fichier <DDE install>/apache-tomcat/digdash_dashboard/js-dashboard.js en édition. Ajouter à la fin de ce fichier les lignes suivantes :

function canChangeCurrentPage(nextPage)
{
   var currentPage = getCurrentPage();
   var slideDir = -1; //slide to left
    if (currentPage && nextPage
   && ddCtrl.pageList[currentPage] && ddCtrl.pageList[nextPage])
    {
       if (ddCtrl.pageList[currentPage].role
       != ddCtrl.pageList[nextPage].role)
        { //role change
              return true; //no slide
        }
       //check direction to slide
        if (ddCtrl.pageList[currentPage].pos
       > ddCtrl.pageList[nextPage].pos)
        { //slide to right
            slideDir = 1; //slide to right
        }
    }
   if (currentPage)
    {
       var pageDiv = document.getElementById(currentPage);
       if (pageDiv && pageDiv.slideable)
        {
            pageDiv.className += " slide out "
               + (slideDir == -1 ? "left" : "right");
            pageDiv.style.top = pageDiv.parentNode.offsetTop
               + "px";//fix a shift issue
        }
    }
   if (nextPage)
    {
       var pageDiv = document.getElementById(nextPage);
       if (pageDiv && pageDiv.slideable)
        {
            pageDiv.className += " slide in "
               + (slideDir == -1 ? "right" : "left");
        }
    }
   return true;
}

function animEndListener(ev)
{ //remove animation styles classes at the end of animation
    var pObj = ev.target;
    pObj.className = pObj.className.replace(/\sslide/g, "");
    pObj.className = pObj.className.replace(/\sin/g, "");
    pObj.className = pObj.className.replace(/\sout/g, "");
    pObj.className = pObj.className.replace(/\sright/g, "");
    pObj.className = pObj.className.replace(/\sleft/g, "");
}

function currentPageChanged(page, firstChange)
{
   if (firstChange && touch
       /* comment touch condition to debug on chrome */)
    {
       var pageDiv = document.getElementById(page);
       if (pageDiv)
        {
            pageDiv.slideable = true;
            pageDiv.addEventListener("webkitAnimationEnd",
                animEndListener, false);
            addSwipeEventListener(pageDiv);
            pageDiv.style.backgroundColor = "white";
        }
    }
}

Ces fonctions Javascript vont permettre de modifier le comportement du changement de page de tableau de bord et d'animer les transitions entre les pages.

Les fonctions currentPageChanged(page) et canChangeCurrentPage(page, firstChange) sont appelées par le moteur du tableau de bord. Par défaut elles ne sont pas implémentées :

  • canChangeCurrenPage(page) est appelée juste avant un changement de page du tableau de bord. Nous utilisons cette fonction pour démarrer les animations de la page sortante et de la nouvelle page. Ces animations se font juste par l'ajout sur les objet DOM représentant ces pages (DIV) des classes CSS d'animations que nous avons définies dans le CSS.
  • currentPageChanged(page, firstChange) est appelée juste après le changement de page effectif. Nous utilisons cette fonction pour initialiser (si firstChange est à true) un event listener de fin d'animation, nous permettant de "nettoyer" les classes CSS des DIV des pages de toute trace d'animations. C'est aussi dans cette fonction d'initialisation que nous allons accrocher la détection du glissement de doigt addSwipeEventListener (voir paragraphe suivant).

Détection du geste glissement gauche/droite (Javascript)

Toujours dans le fichier js-dashboard.js, ajouter le Javascript suivant qui implémente la détection d'un glissement du doigt ("Swipe") sur la tablette :

var maxTime = 150, //allow movement if < 150 ms  
  maxDistance = 100, //swipe movement of 100 pixels min to trigger
  startX = 0,
  startTime = 0,
  touch = "ontouchend" in document,
  startEvent = (touch) ? 'touchstart' : 'mousedown',
  moveEvent = (touch) ? 'touchmove' : 'mousemove',
  endEvent = (touch) ? 'touchend' : 'mouseup';

function addSwipeEventListener(target)
{
    target.addEventListener(startEvent, function(e)
    {
       if (startTime != 0)
        { //already started (multitouch gesture) => cancel
            startTime = 0;
            startX = 0;
        }
       else
        {
            startTime = e.timeStamp;
            startX = touch ? e.touches[0].pageX : e.pageX;
        }
    }, false);
    target.addEventListener(endEvent, function(e)
    {
            startTime = 0;
            startX = 0;
    }, false);
    target.addEventListener(moveEvent, function(e)
    {
       if (startTime == 0)
        {
           return;
        }
       var currentX = touch ? e.touches[0].pageX : e.pageX,
        currentDistance =
            (startX === 0) ? 0 : Math.abs(currentX - startX),
        currentTime = e.timeStamp;
       if (currentTime - startTime < 50)
        { //prevent default at the begining of the swipe
            e.preventDefault();
        }
       if (currentTime - startTime < maxTime
        && currentDistance > maxDistance)
        {
           if (currentX < startX)
            {    //swipe left code here
                 e.preventDefault();
                 nextPage();
            }
           else if (currentX > startX)
            {    //swipe right code here
                 e.preventDefault();
                 prevPage();
            }
            startTime = 0;
            startX = 0;
        }
    }, false);
}

function onChartDrawn(doc, dm, dmsel, chart)
{
   //also add the swipe event listener on each chart content
    addSwipeEventListener(doc);
}

La détection de glissement est faite sur le DIV de la page via le listener ajouté par la fonction currentPageChanged(page, firstChange) ainsi que sur chaque portlet de flux via la fonction onChartDrawn(doc, dm, dmsel, chart). Cette dernière est appelée par le moteur du tableau de bord après chaque affichage d'une portlet de flux. Par défaut elle n'est pas implémentée.

Sauvegarder le fichier js-dashboard.js.