XForms/Elementos repetitivos

De Wikilibros, la colección de libros de texto de contenido libre.

Motivacion[editar]

Usted tiene una lista de elementos y desea una forma sencilla de mostrar condicionalmente campos dentro de un grupo repetido.

Método[editar]

Esto se hace de dos maneras. En primer lugar vamos a utilizar una expresión de enlace en el modelo. El segundo método será el uso de un elemento del grupo con un atributo ref.

Datos de Ejemplo[editar]

<data xmlns="">
    <group>
        <code>yes</code>
        <field>display 1</field>
    </group>
    <group>
       <code>no</code>
       <field>display 2</field>
    </group>
    <group>
       <code>yes</code>
       <field>display 3</field>
    </group>
</data>

Ejemplo de Repetición[editar]

<xf:repeat nodeset="instance('my-data')/group" id="my-repeat">
     <fieldset>
 
         <legend>
             Group # <xf:output value="count(preceding-sibling::*) +1"></xf:output>
         </legend>
 
         <xf:select1 ref="code">
             <xf:label>Display Input Field: </xf:label>
             <xf:item>
                 <xf:label>Yes</xf:label>
                 <xf:value>yes</xf:value>
             </xf:item>
             <xf:item>
                 <xf:label>No</xf:label>
                 <xf:value>no</xf:value>
             </xf:item>
         </xf:select1>
 
 
         <xf:input ref="field" >
             <xf:label>Conditional Display: </xf:label>
         </xf:input>
 
     </fieldset>
</xf:repeat>

Solución Usando Enlaces Relativos[editar]

En este ejemplo se utiliza una declaración relativa a indicar que el campo sólo se muestra si el valor del código es "sí". Tenga en cuenta que el contexto de la expresión pertinente es el resultado de cada elemento de conjunto de nodos.

<xf:bind id="field" 
   nodeset="instance('my-data')/group/field"
   relevant="../code = 'yes'"/>

Solución Utilizando Grupo de Elementos[editar]

Podemos usar el atributo ref para mostrar condicionalmente cualquier campo dentro de una repetición. Esto lo hacemos a partir del atributo ref grupo con "." para darle el contexto actual. A continuación, se añade un predicado para encender o apagar todo el grupo. En este caso, si el código es "sí", el campo de entrada en la pantalla. Si no es el campo estará oculta.

<xf:group ref=".[code='yes']">
   <xf:input ref="field">
      <xf:label>Conditional Display: </xf:label>
    </xf:input>
</xf:group>

Ejemplo Completo[editar]

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:xf="http://www.w3.org/2002/xforms">
    <head>
        <title>Binds in Repeats</title>
        <style type="text/css">
            @namespace xf url("http://www.w3.org/2002/xforms");
            body {{
                font-family:Helvetica, sans-serif;
            }}</style>
        <xf:model>
            <xf:instance id="my-data">
                <data xmlns="">
                    <group>
                        <code>yes</code>
                        <field>display 1</field>
                    </group>
                    <group>
                        <code>no</code>
                        <field>display 2</field>
                    </group>
                    <group>
                        <code>yes</code>
                        <field>display 3</field>
                    </group>
                    <group>
                        <code>no</code>
                        <field>display 4</field>
                    </group>
                </data>
            </xf:instance>
 
 
            <xf:bind id="field" 
                nodeset="instance('my-data')/group/field"
                relevant="../code = 'yes'"/>
 
 
        </xf:model>
    </head>
    <body>
= Test of binding rules within a repeat =
        <xf:repeat nodeset="instance('my-data')/group" id="my-repeat">
             <fieldset>
                 <legend>
                     Group # <xf:output value="count(preceding-sibling::*) +1"></xf:output>
                 </legend>
                 <xf:select1 ref="code">
                     <xf:label>Display Input Field: </xf:label>
                     <xf:item>
                         <xf:label>Yes</xf:label>
                         <xf:value>yes</xf:value>
                     </xf:item>
                     <xf:item>
                         <xf:label>No</xf:label>
                         <xf:value>no</xf:value>
                     </xf:item>
                 </xf:select1>
 
 
                 <xf:input ref="field" >
                     <xf:label>Conditional Display: </xf:label>
                 </xf:input>
 
             </fieldset>
        </xf:repeat>
 
        <xf:output value="index('my-repeat')">
            <xf:label>Current Selected Group: </xf:label>
        </xf:output>
    </body>
</html>