Développer avec RBS Change : Form editor : champs dépendant d'un autre

  • 48566.1

    15/12/2011 12:09


    David Guillot
    Rang : Expert
    Bonjour,

    Dans un document Magazine j'ai un champ "periodicite" qui peut contenir les valeurs "mensuel" et "trimestriel". J'ai également un champ "mois" (pour les éléments mensuels) et un champ "trimestre" (pour les éléments trimestriels). Je souhaite donc, en BO, rendre les champs "mois" et "trimestre" affichés ou masqués selon la valeur sélectionnée pour le champ "periodicite".

    Voilà ce que j'ai déjà :
    Dans le properties.xml de mon document form editor :
    <section label="Période de publication" class="periode-field-configurator">
        <field name="periodicite" />
        <field name="annee" />
        <field name="mois" />
        <field name="trimestre" />
    </section>

    Dans le fichier lib/bindings/cMagazineEditor.xml de mon module :
    <?xml version="1.0"?>
    <bindings xmlns="http://www.mozilla.org/xbl" xmlns:xbl="http://www.mozilla.org/xbl" xmlns:html="http://www.w3.org/1999/xhtml"
    	xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
    
    	<!-- Text and email fields -->
    	<binding id="cPeriodeFieldConfiguratorSection" extends="layout.cDocumentEditor#cFieldsGroup">
    		<implementation>
    			<field name="mInitialized">false</field>
    			
    			<constructor><![CDATA[
    				var me = this;
    				this.getPanel().addEventListener('panelInitializeComplete', function () { me.updatePeriode(); }, true);
    			]]></constructor>
    		
    			<method name="updatePeriode">
    				<body><![CDATA[
    					try
    					{
    						this.mInitialized = true;
    						var panel = this.getPanel();
    						var mois = panel.fields.mois;
    						var trimestre = panel.fields.trimestre;
    						var colsLabel = document.getAnonymousElementByAttribute(panel, 'control', panel.fields.cols.getAttribute('id'));
    						
    						if (panel.fields.periodicite.value == '1')
    						{
                                trimestre.disabled = true;
    						}
    						else
    						{
    							mois.disabled = true;
    						}
    					}
    					catch (e)
    					{
    						wCore.error('cPeriodeFieldConfiguratorSection.updatePeriode', [], e);
    					}
    				]]></body>
    			</method>
    		</implementation>
    		<handlers>			
    			<handler event="fieldChanged"><![CDATA[
    				if (this.mInitialized && event.originalTarget.name == 'periode')
    				{
    					this.updatePeriode();
    				}
    			]]></handler>
    		</handlers>
    	</binding>
    </bindings>

    (je précise que j'ai déduit la structure et copié/collé le code depuis des choses déjà faites dans le module form).

    Résultat : rien ne se passe. J'ai même essayé de lancer une alert() JS au début de la fonction updatePeriode mais rien ne se passe non plus.

    Qu'est-ce que j'ai loupé ? Le binding entre la classe de ma section et l'id dans le fichier de définition du binding ?

    Merci d'avance
  • 48566.2 en réponse à 48566.1 écrit par David Guillot

    15/12/2011 12:45


    Gaël Port
    Titre : Développeur RBS Change
    Rang : Expert
    Alors la raison pour laquelle rien ne se passe c'est qu'il vous manque un petit élément qui fait toute la différence (et qu'on ne risque pas de deviner) : en xul les bindings sont affectés à des balises via des règles CSS. Dans un module Change, ces règles sont placées dans le fichier styles/bindings.css. Si vous reprenez votre exemple du module form, vous y trouverez des choses de ce genre là :

    cdocumenteditor[module="form"] cfieldsgroup.activation-conditions {
    	-moz-binding: url(binding:modules.form.cFormEditor#cActivationConditionsSection);
    }
    C'est donc une règle CSS normale avec un sélecteur pour retrouver l'élément auquel affecter le binding et la référence au binding via la propriété CSS spécifique -moz-binding (l'URL indique quel fichier prendre avec derrière le #, l'id du binding dans le fichier).

    Avec ça vous devriez commencer à voir des choses qui se passent. Après quand on travaille sur du backoffice, l'extension Firefox DOM Inspector aide beaucoup pour voir ce qui est effectivement rendu comme imbrication de balises, vérifier si les bindings sont effectivement appliqués, etc.



    Ceci étant, a priori vous n'auriez pas forcément besoin de passer par ça. Le code JavaScript pourrait directement être implémenté dans le fichier properties.xml. Par exemple, dans le module catalog, l'onglet properties du document declinedproduct désactive un champ en fonction de la valeur d'un autre.
  • 48566.3 en réponse à 48566.2 écrit par Gaël Port

    15/12/2011 15:52


    David Guillot
    Rang : Expert
    OK merci, la seconde méthode est plus simple et fonctionne parfaitement. J'ai même réussi à masquer complètement les champs et leurs libellés.
 
Merci de prendre connaissance et de respecter les règles des forums.
 
1362 membres
Aucun membre connecté