Utilización del elemento layout para modificar el aspecto de los clústeres

El aspecto predeterminado de un clúster consiste en mostrar en una columna todas las preguntas que contiene, apareciendo dichas preguntas en el orden en que se han definido en el script y con la etiqueta y el valor o campo de entrada ocupando cada uno el 50% del ancho disponible. Para cambiar este aspecto predeterminado, puede añadirse un elemento layout al clúster. Por ejemplo, el clúster siguiente no tiene ningún elemento layout y, por lo tanto, se ajusta al comportamiento predeterminado:

Figura 1. Clúster sin layout

<cluster>
  <title id="DetailsCluster.Title">
    <![CDATA[Datos personales]]>
  </title>
  <description id="DetailsCluster.Description">
    <![CDATA[Especifique aquí sus datos]]>
  </description>
  <question id="firstName" mandatory="true">
    <label id="FirstName.Label">
      <![CDATA[Nombre:]]>
    </label>
  </question>
  <question id="middleName">
    <label id="MiddleName.Label">
      <![CDATA[Primer apellido:]]>
    </label>
  </question>
  <question id="lastName">
    <label id="lastName.Label">
      <![CDATA[Segundo apellido:]]>
    </label>
  </question>
  <question id="gender" mandatory="true">
    <label id="Gender.Label">
      <![CDATA[Sexo:]]>
    </label>
  </question>
  <question id="dateOfBirth" mandatory="true">
    <label id="DateOfBirth.Label">
      <![CDATA[Fecha de nacimiento:]]>
    </label>
  </question>
</cluster>

Puede añadirse un elemento layout que cambie el ancho de la etiqueta al 75% de la siguiente manera:

Figura 2. Layout con ancho de etiqueta

<cluster>
  <layout>
    <label-width>75</label-width>
  </layout>

Un elemento layout también puede utilizarse para cambiar el tipo de diseño y el número de columnas como se indica a continuación:

Figura 3. Diseño con compact-flow (flujo compacto) y 3 columnas

<cluster>
  <layout>
    <type>compact-flow</type>
    <num-cols>3</num-cols>
  </layout>

El ancho predeterminado de un clúster es del 100% del espacio disponible. Es posible modificar el ancho de un clúster utilizando el elemento layout tal y como se muestra a continuación:

Figura 4. Diseño con ancho de clúster

<cluster>
  <layout>
    <width>80</width>
  </layout>