13.6.3.10 Doc::editattr()

Cette méthode permet d'ajouter les clefs correspondantes aux attributs du document pour la composition d'une vue de formulaire HTML spécifique de document.

13.6.3.10.1 Description

void editattr ( bool $withtd = true )

Cette méthode ajoute pour chaque attribut pouvant contenir une valeur :

  • une clef contenant le champ de saisie de l'attribut pour le formulaire,

Pour tous les attributs pouvant contenir une valeur ainsi que les attributs encadrants :

  • une clef pour le libellé de l'attribut.

La clef du champ de saisie est composée du préfixe V_ suivi de l'identifiant de l'attribut en majuscule. Le champ de saisie est fourni par la méthode DocFormFormat::getHtmlInput().

Si les attributs sont en visibilité H ou R, le champ de saisie est un champ caché : <input type="hidden"/>.

Si l'attribut est en visibilité I, la clef pour le champ de saisie est vide.

La clef de libellé est composée du préfixe L_ suivi de l'identifiant de l'attribut en majuscule. Le libellé est dépendant de la locale de l'utilisateur. La valeur du libellé est fournie par la méthode Doc::getLabel(). Si l'attribut est obligatoire, le libellé est entouré des balises <b> et </b>.

13.6.3.10.1.1 Avertissements

Les attributs de type tab, frame, menu n'ont pas de clef générée pour les champs de saisie.

Les rendus obtenus peuvent varier selon les différentes versions de Dynacase. Les noms des champs de saisie ("input name") restent stables.

13.6.3.10.2 Liste des paramètres

(bool) withtd
Indique si les champs de saisie sont incorporés dans un tableau HTML.
Si true, alors les balises </td><td> sont insérés entre le champs de saisie et les boutons d'aide à la saisie. Si false, les boutons d'aide à la saisie sont mis directement à la suite du champs de saisie.

13.6.3.10.3 Valeur de retour

void.

13.6.3.10.4 Erreurs / Exceptions

Aucune.

13.6.3.10.5 Historique

Aucun.

13.6.3.10.6 Exemples

13.6.3.10.6.1 Rendu en dehors d'un tableau.

Soit la famille MY_ANIMAL qui possède les attributs suivants :

nom type
AN_NOM text
AN_PHOTO image
AN_NAISSANCE date

Formulaire spécifique pour modifier le nom, la date de naissance et la photographie. Dans cet exemple, on affiche la photo en 200px.

Fichier de la classe associées à la famille :

namespace MyTest;
class My_animal extends \Dcp\Family\Document
{
      /**
       * @templateController edit original photo
       */
      public function editPhoto() {
        $this->editAttr(false);
        $photoUrl=$this->getHtmlAttrValue("an_photo");
        $this->lay->set("bigPhoto", $photoUrl);
      } 
}

Template editPhoto.html :

<div class="myname">
   <label for="an_nom">[L_AN_NOM]</label> : [V_AN_NOM]
</div>
<div class="birthday">
   <img title="[L_AN_NAISSANCE]" src="[IMG:birthday.png|64]"/> : [V_AN_NAISSANCE]
</div>
 
<div class="photo">
   <img class="big" src="[bigPhoto]&width=200" /><br/>
   [V_AN_PHOTO]
</div>

Résultat :

<div class="myname">
   <label for="an_nom"><B>nom</B></label> : <input  onchange="document.isChanged=true"     type="text" name="_an_nom" value="Th&eacute;odor" id="an_nom"  > 
</div>
<div class="birthday">
   <img title="date de naissance" src="resizeimg.php?img=Images%2Fbirthday.png&size=64"/> : <input  readonly="readonly" size="10" autocomplete="off"
         onfocus="if (this.readOnly) $('#ic_an_naissance').trigger('mousedown').trigger('click')" 
        onblur="control_date(event,this)" type="text" name="_an_naissance" value="10/08/2011" id="an_naissance" /><input type="button" onmousedown="Calendar_Init('an_naissance','ic_an_naissance',false,'%d/%m/%Y')" class="inlineButton" id="ic_an_naissance" value="&#133;" /><input type="button" value="&diams;" id="id_an_naissance"    title="Date manuelle" onmousedown="document.getElementById('an_naissance').disabled=false;document.getElementById('an_naissance').readOnly=false" onclick="focus_date(event,'an_naissance')" class="inlineButton" /><input id="ix_an_naissance" type="button" class="inlineButton" value="&times;" title="effacer entrée(s)" onclick="clearInputs(['an_naissance'],'')">
</div>
 
<div class="photo">
   <img class="big" src="file/1420/42/an_photo/-1/250px-Alligator.jpg?cache=no&inline=no&width=200" /><br/>
   <span id="IFERRan_photo" class="Error"></span><span class="FREEDOMText"><a target="_self" href="file/1420/42/an_photo/-1/250px-Alligator.jpg?cache=no&inline=no"  title="250px-Alligator.jpg"><img id="img_an_photo" style="vertical-align:bottom;border:none;width:30px" src="file/1420/42/an_photo/-1/250px-Alligator.jpg?cache=no&inline=yes&width=30"></a></span><br/><input name="_an_photo" type="hidden" value="image/jpeg; charset=binary|42|250px-Alligator.jpg" id="an_photo"><input type="hidden" value="image/jpeg; charset=binary|42|250px-Alligator.jpg" id="INIVan_photo"><span><input onchange="document.isChanged=true;changeFile(this,'an_photo','')"  accept="image/*" size=15 type="file" id="IF_an_photo" name="_UPL_an_photo" ></span> <input id="ix_an_photo" type="button" style="vertical-align:baseline" class="inlineButton" value="&times;" title="Effacer le fichier" title1="Effacer le fichier" value1="&times;" title2="Annuler l'effacement du fichier" value2="&minus;" onclick="clearFile(this,'an_photo')">
</div>

Rendu HTML en ajoutant le style suivant :

div.photo {
   border : 2px solid grey;
   width:300px;
   padding:10px;
}
div.myname {
   border : 2px solid grey;
   width:300px;
   padding:10px;    
   border-style: solid solid none solid;
}
div.birthday {
    border-style: none solid none solid;
    padding: 10px;
    width: 300px;
    border-width: 2px;
    border-color: grey;
}
div.photo img.big {
   width:300px;
}
div.photo input[type="file"] {
    width: 270px;
}
div.photo input, div.myname input {
    height: 30px;
}
.birthday > img {
    vertical-align: middle;
}
.birthday input, div.myname input {
    vertical-align: middle;
    font-size:20px;
}
.birthday input[type=button] {
    width:30px;
}
#img_an_photo {
   display:none;
}
Usage de Doc::editAttr()

Figure 82. Usage de Doc::editAttr()

13.6.3.10.6.2 Rendu dans un tableau

Cet exemple affiche les champs de saisie dans un tableau. Les boutons d'aides à la saisies sont alignés car ils sont dans des cellules séparées.

Soit la famille MY_ANIMAL qui possède les attributs suivants :

nom type
AN_NOM text
AN_ENTREE date
AN_NAISSANCE date
AN_GARDIEN account
AN_SEXE enum
AN_ESPECE docid 
namespace MyTest;
class My_animal extends \Dcp\Family\Document
{
     /**
       * @templateController edit some data
       */
      public function editData() {
        $this->editAttr(true); // affichage avec "</td><td>"
      } 
}

Template editData.html :

<table class="myTable">
  <tr>
    <td class="myLabel">[L_AN_NOM]</td><td  class="myInput">[V_AN_NOM]</td>
    <td class="myLabel">[L_AN_NAISSANCE]</td><td class="myInput">[V_AN_NAISSANCE]</td>
  </tr>
  <tr>
    <td class="myLabel">[L_AN_ESPECE]</td><td class="myInput">[V_AN_ESPECE]</td>
    <td class="myLabel">[L_AN_SEXE]</td><td class="myInput">[V_AN_SEXE]</td>
  </tr>
  <tr>
    <td class="myLabel">[L_AN_GARDIEN]</td><td class="myInput">[V_AN_GARDIEN]</td>
    <td class="myLabel">[L_AN_ENTREE]</td><td class="myInput">[V_AN_ENTREE]</td>
  </tr>
</table>

Résultat :

<table class="myTable">
  <tr>
    <td class="myLabel"><B>nom</B></td><td  class="myInput"><input  onchange="document.isChanged=true"  class="fullresize"   type="text" name="_an_nom" value="Th&eacute;odor" id="an_nom"  > </td><td class="nowrap"></td>
    <td class="myLabel">date de naissance</td><td class="myInput"><input  readonly="readonly" size="10" autocomplete="off"
         onfocus="if (this.readOnly) $('#ic_an_naissance').trigger('mousedown').trigger('click')" 
        onblur="control_date(event,this)" type="text" name="_an_naissance" value="10/08/2011" id="an_naissance" /><input type="button" onmousedown="Calendar_Init('an_naissance','ic_an_naissance',false,'%d/%m/%Y')" class="inlineButton" id="ic_an_naissance" value="&#133;" /><input type="button" value="&diams;" id="id_an_naissance"    title="Date manuelle" onmousedown="document.getElementById('an_naissance').disabled=false;document.getElementById('an_naissance').readOnly=false" onclick="focus_date(event,'an_naissance')" class="inlineButton" /><input id="ix_an_naissance" type="button" class="inlineButton" value="&times;" title="effacer entrée(s)" onclick="clearInputs(['an_naissance'],'')"></td><td class="nowrap"></td>
  </tr>
  <tr>
    <td class="myLabel"><B>espèce</B></td><td class="myInput"><input type="hidden"  name="_an_espece" id="an_espece" value="1295"><input class="fullresize"  autocomplete="off" autoinput="1" onfocus="activeAuto(event,1420,this,'','an_espece','')"   onchange="addmdocs('_an_espece');document.isChanged=true" type="text" name="_ilink_an_espece" id="ilink_an_espece" value="Alligator"></td><td class="editbutton"><input id="ic_ilink_an_espece" type="button" class="inlineButton" value="&#133;" title="choisir une valeur pour espèce" onclick="sendAutoChoice(event,1420,this,'ilink_an_espece','','an_espece','')"><input id="ix_an_espece" type="button" class="inlineButton" value="&times;" title="effacer entrée(s)" onclick="clearInputs(['an_espece','ilink_an_espece'],'','an_espece' )"><input id="icr_an_espece" class="add-doc" type="button" value="&nbsp;" titleedit="créer un document espèce" titleview="Modifier le document" onclick="editRelation('ZOO_ESPECE',elinkvalue('an_espece'),'an_espece','&es_nom='+elinkvalue('ilink_an_espece')+'')"></td>
    <td class="myLabel">sexe</td><td class="myInput"><span id="sp_an_sexe"><select  name="_an_sexe" id="an_sexe"  onchange="disableReadAttribute();" >
<option selected value="M">Masculin</option>
<option  value="F">Féminin</option>
<option  value="H">Hermaphrodite</option>
</select>
 
</span>
</td><td class="nowrap"></td>
  </tr>
  <tr>
    <td class="myLabel">gardien responsable</td><td class="myInput"><input type="hidden"  name="_an_gardien" id="an_gardien" value=""><input class="fullresize"  autocomplete="off" autoinput="1" onfocus="activeAuto(event,1420,this,'','an_gardien','')"   onchange="addmdocs('_an_gardien');document.isChanged=true" type="text" name="_ilink_an_gardien" id="ilink_an_gardien" value=""></td><td class="editbutton"><input id="ic_ilink_an_gardien" type="button" class="inlineButton" value="&#133;" title="choisir une valeur pour gardien responsable" onclick="sendAutoChoice(event,1420,this,'ilink_an_gardien','','an_gardien','')"><input id="ix_an_gardien" type="button" class="inlineButton" value="&times;" title="effacer entrée(s)" onclick="clearInputs(['an_gardien','ilink_an_gardien'],'','an_gardien' )"></td>
    <td class="myLabel">date d'entrée</td><td class="myInput"><input  readonly="readonly" size="10" autocomplete="off"
         onfocus="if (this.readOnly) $('#ic_an_entree').trigger('mousedown').trigger('click')" 
        onblur="control_date(event,this)" type="text" name="_an_entree" value="" id="an_entree" /><input type="button" onmousedown="Calendar_Init('an_entree','ic_an_entree',false,'%d/%m/%Y')" class="inlineButton" id="ic_an_entree" value="&#133;" /><input type="button" value="&diams;" id="id_an_entree"    title="Date manuelle" onmousedown="document.getElementById('an_entree').disabled=false;document.getElementById('an_entree').readOnly=false" onclick="focus_date(event,'an_entree')" class="inlineButton" /><input id="ix_an_entree" type="button" class="inlineButton" value="&times;" title="effacer entrée(s)" onclick="clearInputs(['an_entree'],'')"></td><td class="nowrap"></td>
  </tr>
</table>

Rendu HTML en ajoutant le style suivant :

.myLabel {
  background-color:#F2FF5F;
}
.myLabel:first-letter {
  text-transform:capitalize;
}
.myinput {
  background-color:white;
}
  .myinput + td {
  background-color:white;
}
.myTable {
  border-collapse: separate;
  border-spacing: 10px;
  border: solid 1px grey;
}
.document table.myTable input[type=button] {
  width:20px;
  height:20px;
  font-size: 15px;
}
Affichage dans un tableau avec Doc::editAttr()

Figure 83. Affichage dans un tableau avec Doc::editAttr()

13.6.3.10.6.3 Variante Rendu dans un tableau

Le contrôleur est identique au précédent exemple. Cette variante permet d'illustrer comment prendre en compte les champs de saisie dans un tableau personnalisé.

Dans cet exemple, les libellés des attributs sont placés dans des rangées au dessus des champs de saisies.

Template editData.html :

<table class="myLabelUp">
  <tr>
    <td colspan="2" class="myLabel"><div class="myLabel">[L_AN_NOM]</div></td>
    <td colspan="2" class="myLabel"><div class="myLabel">[L_AN_NAISSANCE]</div></td>
  </tr>
  <tr>
    <td class="myInput">[V_AN_NOM]</td>
    <td class="myInput">[V_AN_NAISSANCE]</td>
  </tr>
  <tr>
    <td colspan="2" class="myLabel"><div class="myLabel">[L_AN_ESPECE]</div></td>
    <td colspan="2" class="myLabel"><div class="myLabel">[L_AN_SEXE]</div></td>
  </tr>
  <tr>
    <td class="myInput">[V_AN_ESPECE]</td>
    <td class="myInput">[V_AN_SEXE]</td>
  </tr>
  <tr>
    <td colspan="2" class="myLabel"><div class="myLabel">[L_AN_GARDIEN]</div></td>
    <td colspan="2" class="myLabel"><div class="myLabel">[L_AN_ENTREE]</div></td>
  </tr>
  <tr>
    <td class="myInput">[V_AN_GARDIEN]</td>
    <td class="myInput">[V_AN_ENTREE]</td>
  </tr>
</table>

On notera dans ce template, l'utilisation du colspan dans les libellés pour prendre en compte les balises </td><td> ajoutées par les clefs de champs de saisies.

Résultat :

<table class="myLabelUp">
  <tr>
    <td colspan="2" class="myLabel"><div class="myLabel"><B>nom</B></div></td>
    <td colspan="2" class="myLabel"><div class="myLabel">date de naissance</div></td>
  </tr>
  <tr>
    <td class="myInput"><input  onchange="document.isChanged=true"  class="fullresize"   type="text" name="_an_nom" value="Th&eacute;odor" id="an_nom"  > </td><td class="nowrap"></td>
    <td class="myInput"><input  readonly="readonly" size="10" autocomplete="off"
         onfocus="if (this.readOnly) $('#ic_an_naissance').trigger('mousedown').trigger('click')" 
        onblur="control_date(event,this)" type="text" name="_an_naissance" value="10/08/2011" id="an_naissance" /><input type="button" onmousedown="Calendar_Init('an_naissance','ic_an_naissance',false,'%d/%m/%Y')" class="inlineButton" id="ic_an_naissance" value="&#133;" /><input type="button" value="&diams;" id="id_an_naissance"    title="Date manuelle" onmousedown="document.getElementById('an_naissance').disabled=false;document.getElementById('an_naissance').readOnly=false" onclick="focus_date(event,'an_naissance')" class="inlineButton" /><input id="ix_an_naissance" type="button" class="inlineButton" value="&times;" title="effacer entrée(s)" onclick="clearInputs(['an_naissance'],'')"></td><td class="nowrap"></td>
  </tr>
  <tr>
    <td colspan="2" class="myLabel"><div class="myLabel"><B>espèce</B></div></td>
    <td colspan="2" class="myLabel"><div class="myLabel">sexe</div></td>
  </tr>
  <tr>
    <td class="myInput"><input type="hidden"  name="_an_espece" id="an_espece" value="1295"><input class="fullresize"  autocomplete="off" autoinput="1" onfocus="activeAuto(event,1420,this,'','an_espece','')"   onchange="addmdocs('_an_espece');document.isChanged=true" type="text" name="_ilink_an_espece" id="ilink_an_espece" value="Alligator"></td><td class="editbutton"><input id="ic_ilink_an_espece" type="button" class="inlineButton" value="&#133;" title="choisir une valeur pour espèce" onclick="sendAutoChoice(event,1420,this,'ilink_an_espece','','an_espece','')"><input id="ix_an_espece" type="button" class="inlineButton" value="&times;" title="effacer entrée(s)" onclick="clearInputs(['an_espece','ilink_an_espece'],'','an_espece' )"><input id="icr_an_espece" class="add-doc" type="button" value="&nbsp;" titleedit="créer un document espèce" titleview="Modifier le document" onclick="editRelation('ZOO_ESPECE',elinkvalue('an_espece'),'an_espece','&es_nom='+elinkvalue('ilink_an_espece')+'')"></td>
    <td class="myInput"><span id="sp_an_sexe"><select  name="_an_sexe" id="an_sexe"  onchange="disableReadAttribute();" >
<option selected value="M">Masculin</option>
<option  value="F">Féminin</option>
<option  value="H">Hermaphrodite</option>
</select>
 
</span>
</td><td class="nowrap"></td>
  </tr>
  <tr>
    <td colspan="2" class="myLabel"><div class="myLabel">gardien responsable</div></td>
    <td colspan="2" class="myLabel"><div class="myLabel">date d'entrée</div></td>
  </tr>
  <tr>
    <td class="myInput"><input type="hidden"  name="_an_gardien" id="an_gardien" value=""><input class="fullresize"  autocomplete="off" autoinput="1" onfocus="activeAuto(event,1420,this,'','an_gardien','')"   onchange="addmdocs('_an_gardien');document.isChanged=true" type="text" name="_ilink_an_gardien" id="ilink_an_gardien" value=""></td><td class="editbutton"><input id="ic_ilink_an_gardien" type="button" class="inlineButton" value="&#133;" title="choisir une valeur pour gardien responsable" onclick="sendAutoChoice(event,1420,this,'ilink_an_gardien','','an_gardien','')"><input id="ix_an_gardien" type="button" class="inlineButton" value="&times;" title="effacer entrée(s)" onclick="clearInputs(['an_gardien','ilink_an_gardien'],'','an_gardien' )"></td>
    <td class="myInput"><input  readonly="readonly" size="10" autocomplete="off"
         onfocus="if (this.readOnly) $('#ic_an_entree').trigger('mousedown').trigger('click')" 
        onblur="control_date(event,this)" type="text" name="_an_entree" value="" id="an_entree" /><input type="button" onmousedown="Calendar_Init('an_entree','ic_an_entree',false,'%d/%m/%Y')" class="inlineButton" id="ic_an_entree" value="&#133;" /><input type="button" value="&diams;" id="id_an_entree"    title="Date manuelle" onmousedown="document.getElementById('an_entree').disabled=false;document.getElementById('an_entree').readOnly=false" onclick="focus_date(event,'an_entree')" class="inlineButton" /><input id="ix_an_entree" type="button" class="inlineButton" value="&times;" title="effacer entrée(s)" onclick="clearInputs(['an_entree'],'')"></td><td class="nowrap"></td>
  </tr>
</table>

Rendu HTML en ajoutant le style suivant :

.myLabel {
  background-color:#F2FF5F;
}
.myLabel:first-letter {
  text-transform:capitalize;
}
.myinput {
  background-color:white;
}
  .myinput + td {
  background-color:white;
}
.myLabelUp {
  border-collapse: collapse;
  border-spacing: initial;
}
.myLabelUp td {
  vertical-align:bottom;
}
.myLabelUp td.myInput {
   width:300px;
   border-style: none none solid solid;
   border-width: 1px;
   border-color: grey;
   margin : 4px;
}
.myLabelUp td.myLabel {
   width:300px;
   border-style: solid solid none solid;
   border-width: 1px;
   border-color: grey;
   margin : 4px;
}
.myLabelUp td.myInput + td {
   border-style: none solid solid none;
   border-width: 1px;
   border-color: grey;
   margin : 4px;
}
.myLabelUp .myLabel {
  background-color:#F2FF5F;
  padding: 3px;
}
Variante d'affichage dans un tableau avec Doc::editAttr()

Figure 84. Variante d'affichage dans un tableau avec Doc::editAttr()

13.6.3.10.7 Notes

Aucune.

13.6.3.10.8 Voir aussi

Source : API/Class_Doc/Method_editattr.md Dynacase Platform 3.2 | Core Manuel de référence, version 3.2 édition 13, © Anakeen Labs <labs@anakeen.com>
×
Publié sous licence CC (http://creativecommons.org/licenses/by-nc-sa/2.0/fr/) par Anakeen [www.anakeen.com]
Attribution Vous devez créditer l'Oeuvre, intégrer un lien vers la licence et indiquer si des modifications ont été effectuées à l'Oeuvre. Vous devez indiquer ces informations par tous les moyens possibles mais vous ne pouvez pas suggérer que l'Offrant vous soutient ou soutient la façon dont vous avez utilisé son Oeuvre.
Pas d’Utilisation Commerciale Vous n'êtes pas autoriser à faire un usage commercial de cette Oeuvre, tout ou partie du matériel la composant.
Partage dans les Mêmes Conditions Dans le cas où vous effectuez un remix, que vous transformez, ou créez à partir du matériel composant l'Oeuvre originale, vous devez diffuser l'Oeuvre modifiée dans les même conditions, c'est à dire avec la même licence avec laquelle l'Oeuvre originale a été diffusée.