CodeS-SourceS
Rechercher un code, un tuto, une réponse

WebDev et Javascript - accès champs

Soyez le premier à donner votre avis sur cette source.

Snippet vu 2 581 fois - Téléchargée 2 fois

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:

 
procedure ma_page( monParametre )

leParametre est une chaîne = monParametre


La variable
monParametre
ne sera pas disponible, tandis que
leParametre
le sera .. faut pas chercher a comprendre les choix de pcSoft ><.
et donc dans le code javascript vous pourrez utiliser
leParametre
comme 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_.lzA32
n 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

Ajouter un commentaire

Commentaires

Donnez votre avis

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.