WebDev et Javascript - accès champs
Contenu du snippet
Salut à tous!
Point important avant de continuer: ce snippet ne concerne que les utilisateurs de WebDev! Ce snippet n a absolument aucuns interet sinon.
Second point important, on en est qu'à la phase beta: une implémentation minimum pour la gestion d'ûn nombre de champs restreint. Mais il faut aussi savoir que les champs pris en compte sont les champs "standard" que l on cherche à exploiter en JS avec webdev, donc champs de saisie, champs static, bouton et check box ... la table étant un cas particulier.
Je rajoute aussi que ce code fonctionne sur la version 18 de webdev (en soit il fontionnera très probablement sur les versions supérieur mais pourra devenir obselète, ce qui n est je crois pas le cas actuellement).
Je donnerai aussi quelques informations supplémentaires concernant les méthodes JS, génerées par WD, utiles à la fin.
Première partie :L'initialisation de la page - informations et code sur les variables.
Tous d'abord, il faut savoir que toute variable de type string, boolean ou numérique crée à l initialisation de la page sera disponible tel quel dans votre code javascript.
Point important: si vous avez une page avec paramètre, c'est a dire que la declaration globale commence par:
La variable
et donc dans le code javascript vous pourrez utiliser
Cependantune variable de type tableau ne sera pas utilisable en javascript! (pourquoi ils l ont pas implémenté, j en sais rien mais hé, c'est pcSoft). Bref pour récupérer un tableau WebDev en JS, il faudra donc le "mettre a plat" en webdev et le recréer en Javascript:
webdev
JS
(pour les tableau associatifs, même principe mais un peu plus lourd ... si y a des interessé je peux passer le code).
Seconde partie:Générer les varable en javascript correspondant aux champs
Dans cette partie, on va voir comment générer les variables javascript correspond au champs.
Par exemple, on a le champs de saisie ayant le nom
Par défaut, vous pourrez acceder en JS a l element en faisant :
et il y a des particuliaritées, par exemple un libelé:
sera lui accessible en JS en faisant:
(note supplémentaire: le libelé de notre box de saisie aura pour id lzA32).
ATTENTION tout n'est pas nécessairement déclaré! Par exemple
Comme vous le voyer c'est pas vraiment user friendly ... On va donc rajouter quelques traitement pour acceder au champ de saisie en javascript directement par son nom.
Dans la déclaration globale de la page, vous ajouterez une variable de type chaine (qui sera donc accessible en JS) :
Que l on implémente à l initialisation de la page (serveur), via une procédure récursive :
procedure
appel ( à l initialisation de la page )
note: j'utilise 'mySelf' (ou moimeme, c'est pareil) pour pouvoir utiliser ce code dans un template de page et donc pour ne pas avoir a recopier le code partout. Vous pouvez aussi directement donner le nom de la fenetre.
Maintenant que la partie serveur est faite, on passe à la partie client.
Note: On pourrait penser que la partie "load" client est faite au onLoad du body .. queneni, c'est une truc appelé par webdev à peu près au load du body mais dans un contexte propre!
On va donc créer une procédure local (browser), nommez la comme vous voulez, en haut a gauche cliquez sur le libellé "WL" pour passer en mode Javascript.
supprimez tout le contenu auto généré! oui oui, même la déclaration de la fonction! Il faut savoir que les procédure local browser, une fois passé en JS, on en fait le contexte global de la page, comme si vous étiez dans les balises script du header:
Vous pouvez copier dans cette partie ce code:
quelques explications:
- Les type, préfixes et suffixes, je les ai trouvé en analysant les contenus généré et en mettant des info de type de champs (je savais donc le champs, il me fallait son type).
-
Et bien sûr, apperler
Et c'est tout! Maintenant en javascript, on pourra récupérer le contenu de notre box de saisie en faisant simplement:
Plutot que
ou encore
L'Interet ? le code est plus lisible, et si pour une raison X ou Y le générateur webDev change l id d un champ, ca sera transparent.
Quelques astuces supplémentaires :
- Executer le traitement du click d un bouton depuis javascript :
(je n ai pas trouvé/cherché ce qu?étaient les 2 dernier paramètre, je n en ai pas eu besoin)
- Appeler une procédure webDev en ajax (normalement, on est obligé de passer par l event d'un élément de la page):
Ma page est : FEN_maPage
Ma procédure (server avec AJAX activé): maFonction , qui prendra 1 paramètre
(je n ai pas vraiment compris l interet de "[id champ]", généralement je renseigne l id du champ qui contient le paramètre à envoyer mais c'est vous qui voyez.)
important, si vous n avez pas de champ qui appel la fonction ajax native webDev, ca ne marchera pas, il faut ajouter dans :
Clic droit sur la page>description>avancé>html>header :
Voilà, il reste pleins de choses à "découvrir", le code généré par webdev est assez dur à lire et à décortiquer, mais vu que j en ai eu besoin, que je me suis déjà pas mal cassé la tête et trouvé pas mal de sujet sur le net en rapport mais ou personne n avait vraiment de réponse, autant partager.
naga
Point important avant de continuer: ce snippet ne concerne que les utilisateurs de WebDev! Ce snippet n a absolument aucuns interet sinon.
Second point important, on en est qu'à la phase beta: une implémentation minimum pour la gestion d'ûn nombre de champs restreint. Mais il faut aussi savoir que les champs pris en compte sont les champs "standard" que l on cherche à exploiter en JS avec webdev, donc champs de saisie, champs static, bouton et check box ... la table étant un cas particulier.
Je rajoute aussi que ce code fonctionne sur la version 18 de webdev (en soit il fontionnera très probablement sur les versions supérieur mais pourra devenir obselète, ce qui n est je crois pas le cas actuellement).
Je donnerai aussi quelques informations supplémentaires concernant les méthodes JS, génerées par WD, utiles à la fin.
Première partie :L'initialisation de la page - informations et code sur les variables.
Tous d'abord, il faut savoir que toute variable de type string, boolean ou numérique crée à l initialisation de la page sera disponible tel quel dans votre code javascript.
Point important: si vous avez une page avec paramètre, c'est a dire que la declaration globale commence par:
procedure ma_page( monParametre ) leParametre est une chaîne = monParametre
La variable
monParametrene sera pas disponible, tandis que
leParametrele sera .. faut pas chercher a comprendre les choix de pcSoft ><.
et donc dans le code javascript vous pourrez utiliser
leParametrecomme s'il était déclaré en javascript (c'est transparent).
Cependantune variable de type tableau ne sera pas utilisable en javascript! (pourquoi ils l ont pas implémenté, j en sais rien mais hé, c'est pcSoft). Bref pour récupérer un tableau WebDev en JS, il faudra donc le "mettre a plat" en webdev et le recréer en Javascript:
webdev
maChaineDuTableau est une chaine = TableauVersChaîne(monTableau, ";")
JS
var monTableau = maChaineDuTableau.split(";");
(pour les tableau associatifs, même principe mais un peu plus lourd ... si y a des interessé je peux passer le code).
Seconde partie:Générer les varable en javascript correspondant aux champs
Dans cette partie, on va voir comment générer les variables javascript correspond au champs.
Par exemple, on a le champs de saisie ayant le nom
EDT_maSaisie. Au survol du champ dans l editeur, vous pourrez voir l id du champ une fois généré entre corchet. Par exemple:
EDT_maSaisie [A32]
Par défaut, vous pourrez acceder en JS a l element en faisant :
_PAGE_.A32
et il y a des particuliaritées, par exemple un libelé:
static_unLib [A29]
sera lui accessible en JS en faisant:
_PAGE_.tzA29
(note supplémentaire: le libelé de notre box de saisie aura pour id lzA32).
ATTENTION tout n'est pas nécessairement déclaré! Par exemple
_PAGE_.lzA32n existe pas.
Comme vous le voyer c'est pas vraiment user friendly ... On va donc rajouter quelques traitement pour acceder au champ de saisie en javascript directement par son nom.
Dans la déclaration globale de la page, vous ajouterez une variable de type chaine (qui sera donc accessible en JS) :
gsListChamp est une chaine
Que l on implémente à l initialisation de la page (serveur), via une procédure récursive :
procedure
PROCEDURE getFieldInfoList(sElem)
sList is string = ""
i is int = 1
ResChamp is string
ResChamp = EnumControl (sElem, i)
WHILE ResChamp <> ""
i++
IF {ResChamp}..Type IN (3,4,5,9,10002,20001,20004) THEN
sList += ResChamp + "," + {ResChamp}..Alias + ","+{ResChamp}..Type + "|"
ELSE IF {ResChamp}..Type IN (50014) THEN
sList += getFieldInfoList(ResChamp)
END
ResChamp = EnumControl (sElem, i)
END
RESULT sList
appel ( à l initialisation de la page )
gsListChamp=getFieldInfoList(MySelf)
note: j'utilise 'mySelf' (ou moimeme, c'est pareil) pour pouvoir utiliser ce code dans un template de page et donc pour ne pas avoir a recopier le code partout. Vous pouvez aussi directement donner le nom de la fenetre.
Maintenant que la partie serveur est faite, on passe à la partie client.
Note: On pourrait penser que la partie "load" client est faite au onLoad du body .. queneni, c'est une truc appelé par webdev à peu près au load du body mais dans un contexte propre!
On va donc créer une procédure local (browser), nommez la comme vous voulez, en haut a gauche cliquez sur le libellé "WL" pour passer en mode Javascript.
supprimez tout le contenu auto généré! oui oui, même la déclaration de la fonction! Il faut savoir que les procédure local browser, une fois passé en JS, on en fait le contexte global de la page, comme si vous étiez dans les balises script du header:
<HTML>
<HEAD>
<script>
ON EST LA !
</script>
.
.
.
Vous pouvez copier dans cette partie ce code:
function JSgetSuffixType(iType)
{
switch(iType){
case 3 : return "tz";break;//static
case 4 : return "";break;//button
case 5 : return "";break;//check box
case 9 : return "";break;//table
case 10002: return "";break;//combobox
case 20001:
case 20002:
return "";break;//edit box
default : return "@";break;//not supported (yet?)
}
}
function JSgetPrefixType(iType)
{
switch(iType){
case 3 : return "";break;//static
case 4 : return "";break;//button
case 5 : return "_%n%";break;//check box
case 9 : return "_TB";break;//table
case 10002: return "";break;//combobox
case 20001:
case 20002: return "";break;//edit box
default : return "@";break;//not supported (yet?)
}
}
//**UPDATE**//
function createPagesVariables(){
var tFields = gsListChamp.split("|");
for( i = 0 ; i < tFields.length ; i++){
if(tFields[i] != ""){
var WDfieldName = tFields[i].split(",")[0];
var HTMid = tFields[i].split(",")[1];
var st = JSgetSuffixType(Number(tFields[i].split(",")[2]));
if( st != "@") {
HTMid = st + HTMid;
st = JSgetPrefixType(Number(tFields[i].split(",")[2]));
if( st != "@") {
HTMid += st ;
if(st.indexOf('%') > -1) {
var t = Array();
for( j = 0 ; document.getElementById(HTMid.replace('%',j+1)) != undefined && j < 5; j++){
t[j] = document.getElementById(HTMid.replace('%',j+1));
}
window[WDfieldName] = t;
} else {
window[WDfieldName]=document.getElementById(HTMid);
}
}
}
}
}
}
quelques explications:
- Les type, préfixes et suffixes, je les ai trouvé en analysant les contenus généré et en mettant des info de type de champs (je savais donc le champs, il me fallait son type).
-
window[WDfieldName]permet de déclarer une variable dans le contexte global de la page.
Et bien sûr, apperler
createPagesVariables();pour générer le tout ;)
Et c'est tout! Maintenant en javascript, on pourra récupérer le contenu de notre box de saisie en faisant simplement:
EDT_maSaisie.value
Plutot que
_PAGE_.A32.value
ou encore
document.getElementById('A32').value
L'Interet ? le code est plus lisible, et si pour une raison X ou Y le générateur webDev change l id d un champ, ca sera transparent.
Quelques astuces supplémentaires :
- Executer le traitement du click d un bouton depuis javascript :
(je n ai pas trouvé/cherché ce qu?étaient les 2 dernier paramètre, je n en ai pas eu besoin)
_JSL(_PAGE_,'[id champ bouton]','_self','','');
- Appeler une procédure webDev en ajax (normalement, on est obligé de passer par l event d'un élément de la page):
Ma page est : FEN_maPage
Ma procédure (server avec AJAX activé): maFonction , qui prendra 1 paramètre
clWDAJAXMain.AJAXExecuteSynchrone("FEN_maPage.maFonction",[id champ],[valeur paramètre]);
(je n ai pas vraiment compris l interet de "[id champ]", généralement je renseigne l id du champ qui contient le paramètre à envoyer mais c'est vous qui voyez.)
important, si vous n avez pas de champ qui appel la fonction ajax native webDev, ca ne marchera pas, il faut ajouter dans :
Clic droit sur la page>description>avancé>html>header :
<script type="text/javascript" src="/POPSTEW_WEB/res/WDAJAX.js" charset="windows-1252"></script>
Voilà, il reste pleins de choses à "découvrir", le code généré par webdev est assez dur à lire et à décortiquer, mais vu que j en ai eu besoin, que je me suis déjà pas mal cassé la tête et trouvé pas mal de sujet sur le net en rapport mais ou personne n avait vraiment de réponse, autant partager.
naga
Compatibilité : 1.2
A voir également
- WebDev et Javascript - accès champs
- Récupérer données json (javascript) - Conseils pratiques -Javascript
- Javascript poo - Conseils pratiques -Javascript
- Javascript et base de données - Conseils pratiques -Javascript
- Javascript division entière - Forum Javascript / DHTML
- Lien javascript - Forum Javascript / DHTML
Vous n'êtes pas encore membre ?
inscrivez-vous, c'est gratuit et ça prend moins d'une minute !
Les membres obtiennent plus de réponses que les utilisateurs anonymes.
Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.
Le fait d'être membre vous permet d'avoir des options supplémentaires.