Web Creator pro 7 : Comment faire des pages responsives

Le contexte 2018, WebCreator 7 et les pages responsives

WebCreator pro 7 est un outil très accessible pour faire des pages Web. Pour gérer des pages Mobile il faut lui adjoindre Mobile Creator.


De plus, LMSOFT l'éditeur de WebCreator vient de sortir un nouveau produit WebCreator Xpress orienté mobile fist qui permet de générer la version mobile et la version desktop d'un seul coup pour une même page.


Cependant, les utilisateurs avancés de WebCreator pro 7, peuvent au prix de quelques efforts de codage, dépasser les limites du logiciel pour faire des pages responsives.


L'approche n'est pas "Mobile first" qui consiste à concervoir les pages en premier pour la cible mobile mais "Desktop down". Le "Desktop down" consiste à partir d'une page créée pour ordinateur et à l'adapter aux écrans de taille réduite comme les smartphones.


Ce qui suit est à réserver à ceux qui ont une bonne connaissance de WebCreator pro 7 et qu'un peu de javascript ne fait pas peur.

Contraintes pour le responsive des pages WebCreator 7

Voici des règles simples à suivre lors de la conception de la page destinée à devenir responsive :


- Pour la page choisir une largeur de page par exemple 1100 (propriété onglet position)

- Pour la page positionner la hauteur en automatique (propriété onglet position)

- le limiter le nombre d'objets car chaque objet vous obligera à coder plus.

- Utiliser des panneaux (Panel) comme conteneur et pas des boites (Box)

- Les objets panneaux devront être impérativement flottants (propriété onglet position)

- Le positionnement des objets de même niveau (objets ayant le même parent direct) devra se faire en jouant sur l'ordre-Z dans la vue hiérarchique des éléments de la page.

- Les panneaux devront avoir la hauteur automatique (propriété onglet position).

- Eviter les margins et les padding sur les Panels.

  

Utilisation du fichier toolwc7.js

Le fichier toolwc7.js contient des fonctions qui se chargeront de définir les largeurs des éléments de la page selon un pourcentage de la largueur de l'écran.


Les fonctions de se fichier sont appelées à l'aide d'un fichier spécifique qu'il faudra créer manuellement pour chaque page à prendre en compte.


Il permet de définir deux points de ruptures : Le premier est la largeur de la page et le seconde est fixé à 460 px de large voir la variable PHONEWIDTH dans le fichier toolswc7.js


Par exemple pour la page de nom "page01"  il faudra créer le fichier page01.toolwc.js dans le dossier web.


Voici ci-dessous un squelette du fichier  page01.toolwc.js



var fctResize = function(e) {

   width = getLargeurAffichage();

   po = getLMObjectById("Page");


   if (width < po.oriw) {  // si la taille est inférieure à la largeur d origine de la fenetre

      o = document.getElementById("Page");

      o.style.width = "100%";       

      o.style.height = "initial";   


      // Dimentionnement des autres objet de la page...



     ...



    } else { Autrement l'écran est plus large que la page.


       // utile si la page est agrandie on doit rétablir les bonnes dimensions des objets

       // Mais l'on peut raisonnablement s'en dispenser.



    }

}


window.addEventListener("resize", fctResize); // permet à la fonction de traiter l'evenement  

                                              // resize du navigateur   


  

Ces deux fichiers toolwc7.js et le fichier spécifique à la page page01.toolwc.js doivent être rajouter manuellement dans le dossier web du projet.


Au niveau de la page WC7, la liaison avec ces fichiers  se fait dans l'onglet "Ajout de code personnalisé" et "Autre HTML et javascript"

Page WC7 et html généré

Il y aurai beaucoup de choses à dire mais l'essentiel à savoir  :

La partie Page est générée sous la forme d'un DIV rataché directement au BODY de la page dont l'Id est Page. Les panneaux sont générés avec des DIV.


Il faut savoir que les noms des objets dans la vue hiérarchique correspondent aux Id dans le code HTML généré.


Ces noms d'objet serviront en paramètre des fonctions javascript.


Remarque : La couleur définie en fond de page définira la couleur du BODY !

Page WebCreator 7 : exemple de page responsive

Voici un exemple simple de page avec 4 panneaux contenant chacun un objet texte.


Le nommage des objets a été choisi pour donner une certaine homogénéité mais peut être choisi à votre convenance.

Visuellement cette page donne ça :

Le résultat voulu consiste à avoir le panel1 et le panel4 qui prennent toute la largeur  de la page mais pas de l'écran.


Pour les panneaux 2 et 3, chacun doivent avoir comme largeur la moitié de l'écran et 100% de l'écran pour une résolution portable.


Le panneau 4 doit garder comme largeur maximale la largeur de la page dans l'environnement de design.

var fctResize = function(e) {

   width = getLargeurAffichage();

   po = getLMObjectById("Page");

   

      if (width < po.oriw) {

            o = document.getElementById("Page");

            o.style.width = "100%";       

            o.style.height = "initial";   


      panel_Resize( "Panel1", width ,"100%", "100%");       

            text_Resize("Text1",width,  "80%", "80%");            

            

      panel_Resize( "Panel2", width ,"50%", "100%");        

            text_Resize("Text2",width,  "80%", "80%");            

      

      panel_Resize( "Panel3", width ,"50%", "100%");        

            text_Resize("Text3",width,  "80%", "80%");            

      

      panel_Resize( "Panel4", width ,"100%", "100%");       

            text_Resize("Text4",width,  "80%", "80%");            

            

      } else {  // plus grand que 1100

            

            obj_RestaureTailleOri("Page");            

            obj_RestaureTailleOri("Panel1");

            obj_RestaureTailleOri("Panel2");

            obj_RestaureTailleOri("Panel3");

            obj_RestaureTailleOri("Panel4");

      }

}


window.addEventListener("resize", fctResize);   

Prise en compte des navigateurs mobiles

Pour un rendu correct sur certains navigateurs de smartphone, il est nécessaire d'ajouter le code suivant dans la section Outils / Google Analytics ou bien dans la section Outils / Meta tags.

< meta name="viewport"

      content="width=device-width,

                 initial-scale=1,

                 maximum-scale=3,

                 user-scalable=yes">

Téléchargement du projet Démo responsive.

Voici le projet sous la forme d'un fichier zip. Il contient tout le code source évoqué ci-dessus ainsi que la page page01.pag. Il a été généré avec la version 7.2.0.13 de WebCreator Pro 7.


Vous pouvez télécharger ce fichier contenant le projet de démo responsive avec  web creator pro 7 --> ICI

Donnez nous votre avis avec un message sur twitter :


Pensez à liker la page