Imprimer

Stage Amar Halassa Semaine18

Passage à l'Ajax

Comme la bande passante des téléphones portables est très limitée, et que leurs performances peinent à réinterpréter tous les fichiers Javascipt inclus dans les pages, la solution qui semble plus évidente et de recharger les pages en Ajax, donc un seul chargement et une seule interprétation des fichiers javascript, qui s'effectue au chargement de la première page.

Pour appeler un fichier PHP en Ajax dans Mediboard, nous avons besoin du nom du fichier PHP ainsi que du nom du module au quel il fait partie, ce qui nous oblige pour l'instant, de faire le traitement des pages appelées par Ajax dans le module System? et c'est le fichier list_modules_pages.php qui nous renvoie la liste des modules et des pages en réponse à des appels Ajax.

Ces changements ont remis en cause tout le processus de navigation de Mediboard mobile, en premier la fonction javascript qui envoie les appels Ajax:

loadHref = function (path,system,params,form) {
  
    var tabpath = path.split("/");
    if(tabpath[tabpath.length-1] == ""){
      tabpath.splice(tabpath.length-1,tabpath.length-1);
    }
  
    if(system){
      var url = new Url('system','list_modules_pages');
      if(tabpath[0]){
        url.addParam("module", tabpath[0]);
      }
      if(tabpath[tabpath.length-1]!= tabpath[0]){
        url.addParam("node_ajax", tabpath[tabpath.length-1]);
      }
    }
    else {
      var url = new Url(tabpath[0],tabpath[tabpath.length-1]);
      if (params){
        url.mergeParams(params);
      }
      if(form){
        url.addFormData(form);
      }
    }
    
    Back.addPage(tabpath);
    Back.setPreviousPage(tabpath)
    url.requestUpdate("content");
}
Cette fonction a pour rôle d'appeler list_modules_pages.php du module system si on est dans un noeud de l'arbre de navigation donc on aura la liste des noeuds ou des feuilles (fils/filles) ou bien une page finale d'un module different de System. A la fin, cette fonctions appelle deux autres fonctions de l'objet Back;

  • addPage() qui permet de mettre à jour le "select" de la barre de menu pour informer de la page en cours et pouvoir remonter dans l'arborescence.
  • setPreviousPage() elle permet de définir l'adresse de la page précédente pour le bouton retour arrière de la barre de menu.

L'objet "Back"

var Back = {
  pages : [],
  previous_page : "",
  
  setPreviousPage : function (pathway){
    this.previous_page ="";
    var j = 0;
    while (j < pathway.length-1){
      this.previous_page = this.previous_page + pathway[j]+"/";
      j++;
    }
  },
  
  addPage : function (pathway) {
    var i = 0;
    //verifier si la page est deja dans le tableau 
    this.pages = pathway; 
    newPath    = "";
    this.pages.each(function(e){
      newPath = newPath + e + "/";
    });
    $("select_menu").update();
    $("select_menu").insert("<li class='menuHead' style='display: block;' >"+$T("mod-"+newPath+"-mob-court")+"</li>");
    link = "loadHref('','system')"; 
    $("select_menu").insert("<li style='text-align:left' onclick="+link+" style='display: none' >Accueil</li>");
     
     
     var tiret = "-";
     newPath   = "";
     
     this.pages.each(function(e){
       newPath= newPath + e + "/";
       if(e == Back.pages[Back.pages.length-1]) {
         $("select_menu").insert("<li style='text-align:left' class='selected' style='display: none' >"+tiret+$T("mod-"+newPath+"-mob-court")+"</li>");
       }
       else {
         if(e == Back.pages[0]) {
           link = "loadHref('"+e+"','system')"; 
         }
         else {
           link = "loadHref('"+newPath+"','system')"; 
         }
         $("select_menu").insert("<li style='text-align:left' onclick="+link+  ">"+tiret+$T("mod-"+newPath+"-mob-court")+"</li>");
       }
       tiret = tiret+" -";
     });
  },

  clear : function() {
    this.pages = [];
  }
};

Problème des locales en Javascript

Comme on ne recharge pas la barre de menu, les nom des pages affectés à cette dernière ne pourront pas être traduits en PHP, donc on est obligé de passer un tableau de 'locales' qui sera récupéré en JSON et utilisé en javascript. Cette procédure existe déjà dans Mediboard normal , mais elle charge toutes les locales de tous les modules, ce qui est très lourd pour un téléphone portable, donc une petite modification a été effectuée sur cette fonction pour faire la différence entre un mobile et un ordinateur afin de charger que les locales mobile dans le premier cas.

Ajouts et corrections

Les ajouts concernent la liste des perfusions qui est désormais accessible, les posologies sont maintenant affichées dans des modales, ainsi que l'utilisation de l' autocomplete? pour la recherche de cibles dans le cas d'une transmission pour le "dossier suivi" du module Soins?.

Une meilleure gestion de l'heure des interventions.


Dernièrement modifié par amar1629 points  .
Modifiée dernièrement le vendredi 04 de juin, 2010 17h35m07.

Sponsors privilégiés

Mediboard project