Comment par programmation générer des formulaires avec
un nombre de zones variables ?
Comment exploiter ensuite les valeurs saisies avec WebDev et gérer
l'affichage d'une popUp ?
| Gérer
des formulaires dynamiquement E. Roumegou |
Comment par programmation générer des formulaires avec
un nombre de zones variables ? |
|
 |
C'est ce que nous allons détailler ici. Voici quelques exemples de ces popup qui évoluent en fonction de ce qui est paramétré dans des tables mySQL. On personnalise ainsi l'étiquette, le type de la zone, la taille de la saisie, les différentes valeurs de listes etc... Le principe est simple, on va : |
soit un lien lienmoderes vsur la page Appelante.
| WL Clic (onclick) de lienmodeRes (Navigateur) |
|
NBINFO est un champs caché qui contient le nombre d'infos de saisies que contiendra le formulaire. Cette zone est alimentée d'un précédent traitement qui a affiché le détail des résultats. Selon le nombre, on taillera la fenêtre de façon différente.
| Clic de lienmodeRes (serveur) |
|
fgMajResultat est
la fonction qui va permettre d'agencer le formulaire.
Ensuite, on regarde si la page MAJRESULT (la popUp) existe dèjà
en tant que contexte et sinon on ouvre cette page en lui passant les paramètres.
Dans le cas où elle existe déjà, on met à jour les
champs de cette fenêtre, notamment le champs flag qui est un champs caché
qui va nous permettre de gérer la fermeture de la popUp en code navigateur.
Vous noterez aussi la préparation de la procédure RefreshLaPage
qui va être executé depuis la popUp.
Le PageActualise(MAJRESULT)
provoque ensuite l'affichage de la fenêtre.
 |
dans cette page, on retrouve :
|
procédure Navigateur
| function RefreshLapage(nlig) { _C1(nlig); } |
Cette procédure effectue le clic de la table qui provoque le raffraichissement du libellé HTML. Vous aurez trouvé le nom de cette fonction en épluchant le code source généré par WebDev.
en déclaration globale, on initialise les champs avec nos paramètres.
En onload navigateur, si le code flag est à 2, c'est que l'on est déjà
passé et que l'on peut fermer la popup, c'est à dire le navigateur
ouvert indépendemment pour cette popup. Au préalable, on execute
la procédure Navigateur passée en paramètre (RefreshLapage('i');
i étant le n° de ligne de la table)
| function JS_FermeMAJRESULT() { eval(sCodeJS); self.close(); } |
On passera ensuite la main au code Fermeture de MAJRESULT (serveur) qui là, va réactualiser notre page appelante.
C'est cette fonction globale qui va générer notre code Html.
Je vous la livre dans son intégralité.
Rappel du principe :
Récupération dans des tables mySQL de la description de la saisie.
Préparation des zones formulaires en initialisant aussi par les valeurs
courantes. Pour chaque type de zone, on a une chaine de code HTML, avec la description
et l'étiquette de la zone et eventuellement les fonctions javascript
de contrôle à appeler.
Préparation d'un ordre SQL de type UPDATE
PEOPLE_RESULT SET MACOL1=%MACOL1%,MACOL2=%MACOL2% WHERE RES_ID=122
En préparant le formulaire, on substitue par des ChaineConstruit les
noms des variables, leur contenu, etc dans les séquences de code HTML
Remarques : Pour accèder aux bases (mySQL), j'utilise
les accès alternatifs et ma classe c_GestionSQL, plus d'infos ici
Le copier coller ne fait pas apparaître le code indenté ni
la coloration syntaxique. Cela ne rend pas la lecture facile mais vous permettra
de recopier ce code.
| PROCEDURE fgMajResultat(pId) lCurReq est un entier commande est chaîne NumCol,i,j est un entier tValNum est un tableau de 15 réels tLib est un tableau de 27 chaînes tUse est un tableau de 15 entiers tValAlpha est un tableau de 12 chaînes wCh,wCh1,wCh2,wch3,wCh4,wchamp,wchamp2 est chaîne POD_DESC est chaîne CodeHTML est chaîne sqlcmd,colmaj,lischp est chaîne pod_list_25,pod_list_26,pod_list_27 sont des chaînes sqlcmd="UPDATE PEOPLE_RESULT SET %1 WHERE RES_ID="+pId monSQL:RAZ() monSQL:AddWhere("PEOPLE_RESULT.RES_ID="+pId) SI fSQL:mySQLExec(commande,lCurReq) ALORS SINON // Formate le champs HTML // valeur type texte CAS 5 // français colmaj="";lischp="" RENVOYER CodeHTML+"§§"+ChaîneConstruit(sqlcmd,colmaj)+"§§"+lischp |
| WL Clic (onclick) deBouton1 (Navigateur) |
|
LISCHAMP contenant la liste de nos Zones de formulaires, on va par une boucle remplacer les %var% par le contenu de ces variables; ceci par la fonction JSPropriété avec value.
| Clic de Bouton1 (serveur) |
|
La première partie du traitement est nécessaire pour le traitement
des dates qui doit se trouver en YYYY-MM-DD en mySQL. Cela ne peut se gérer
par la commande SQL qu'à partir de la version 4.1, d'où le test.
Une fois que l'on est Ok, on execute la commande de mise à jour; on peut
alors fermer la page et on met donc le flag à 2. On reviendra dans la
page appellante par le code Serveur Fermeture.
| function CtrlDate(objet,msgerr) { with (objet) // Pour l'objet en paramètre { valeur=objet.value if (isDate(value)) // Si valeur est pas une date correcte { return true; } else { if (msgerr!="") {alert(msgerr);} objet.select(); // Resélectionne le champ objet.focus(); // Resélectionne le contenu return false; } } } |
| function CtrlNum(objet,msgerr) { with (objet) // Pour l'objet en paramètre { valeur=parseInt(value); if (isNaN(valeur)) // Si valeur n'est pas numérique { if (msgerr!="") {alert(msgerr);} objet.select(); // Resélectionne le champ objet.focus(); // Resélectionne le contenu return false; } else { return true; } } } |
| unction isDate(d) { // Cette fonction permet de vérifier la validité d'une date au format jj/mm/aa ou jj/mm/aaaa if (d == "") // si la variable est vide on retourne faux return false; e = new RegExp("^[0-9]{1,2}\/[0-9]{1,2}\/([0-9]{2}|[0-9]{4})$"); if (!e.test(d)) // On teste l'expression régulière pour
valider la forme de la date // On sépare la date en 3 variables pour vérification,
parseInt() converti du texte en entier // Si l'année n'est composée que de 2 chiffres on complète
automatiquement // Définition du dernier jour de février // Nombre de jours pour chaque mois // Enfin, retourne vrai si le
jour est bien entre 1 et le bon nombre de jours, idem pour les mois, sinon
retourn faux |