Comment créer une famille dynamique

But de ce document

Le but de ce document est de créer une famille dynamique en modifiant la vue d'édition par défaut avec un peu de java-script.

Une famille dynamique est une famille dont certains champs sont modifiés ou affichés en fonction du contenu d'autres champs

Résultat à obtenir

Le mieux pour comprendre le but de ce document est encore une copie d'écrans.

Si la case est cochée, deux nouveaux champs apparaissent. Si elle est décochée, les champs sont effacés et masqués.

Mise en place du fichier "Method"

Pour arriver à notre résultat, il est nécessaire de modifier la vue d'édition par défaut de notre famille. Pour modifier la vue par défaut, il faut définir la variable “$defaultedit” dans le fichier “Method” associé à la famille.

Il faut donc créer le fichier ”/usr/share/what/FDL/Method.Dynamique.php” avec le contenu suivant :

<?php
var $defaultedit = "FDL:DYNAMIQUE";
?>

Création et importation de la famille

Pour notre exemple, nous allons créer une nouvelle famille. Le paramétrage de cette famille est disponible dans ce fichier.

Une fois le fichier téléchargé, vous pouvez l'importer dans Freedom avec cette commande :

/usr/share/what/wsh.php --api=freedom_import --file=Famille_Dynamique.ods 

Dans ce fichier, le point important est l'affectation de notre fichier “Method” :

METHOD Method.Dynamique.php

Mise en place du layout

Pour notre “Layout”, il faut créer le fichier ”/usr/share/what/FDL/Layout/dynamique.xml” contenant ces données :

<script language="JavaScript">

function initEvent() {
  afficheoupas();
  addListener(document.getElementById("dy_choix"), "click", afficheoupas);
}

function addListener(element, baseName, handler) {
  if (element.addEventListener)
    element.addEventListener(baseName, handler, false);
  else if (element.attachEvent)
    element.attachEvent('on' + baseName, handler);
}
	
function afficheoupas() {
  var autreschamps=document.getElementById("autreschamps");
  if (document.getElementById("dy_choix").checked) {
    autreschamps.style.display=''; 
  } else {
    autreschamps.style.display='none';
    document.getElementById("dy_champ3").value='';
    document.getElementById("dy_champ4").value='';
  }
}

addListener(window, "load", initEvent);

</script>   

<table width="100%"> [ZONE FDL:EDITFRAME?frameid=dy_frame_base] </table>
<table width="100%"> [ZONE FDL:EDITFRAME?frameid=dy_frame_choix] </table>
<table style="display:none" id="autreschamps" width="100%">
  [ZONE FDL:EDITFRAME?frameid=dy_frame_autre]
</table>

Remarques :

  • La fonction java-script “afficheoupas” permet d'afficher ou masquer la frame “dy_frame_autre” et d'effacer le contenu des champs de cette frame.
  • La fonction addListener permet de rendre le code java-script compatible avec IE, car ce dernier persiste à ne pas respecter les standards…
  • Le code HTML permet d'afficher les 3 frames de la famille en masquant la troisième par défaut à la création.
contribution/cookbook/famille_dynamique.txt · Dernière modification: 10/08/2011 10:13 par eric