Una de las principales ventajas de las plantillas de control es que se pueden reutilizar. Una vez haya creado una plantilla de control puede usarla en distintas ubicaciones de un diseño. En nuestro ejemplo Cities1-Reuse.mtd el objetivo es que los usuarios puedan seleccionar su ciudad; para ello deben poder seleccionar un continente, un país y una ciudad, en ese orden, como se ve en la imagen siguiente. (Toda la información geográfica está referenciada desde la fuente de página XML CitiesWorldwide.xml.)
Como estamos usando dos conjuntos de botones de opción horizontales (uno para los países y otro para las ciudades), hemos creado una única plantilla de control llamada Botones de opción dinámicos (horizontal) y la hemos usado dos veces: una para generar los botones de opción de los países del continente seleccionado y otra para generar los botones de opción de de las ciudades del país seleccionado.
El diseño del proyecto
El proyecto consiste en la plantilla de control Botones de opción dinámicos (horizontal), que se usa dos veces en la página de nivel superior llamada Select Country and City. El diseño de la página de nivel superior se muestra más abajo en la imagen izquierda. Después de que el usuario seleccione un continente en el cuadro combinado aparecen los botones de opción de los países de ese continente. Cuando el usuario selecciona un país aparecen los botones de opción de las ciudades de ese país.
El continente, el país y la ciudad que seleccione el usuario se guardan cada uno en un nodo separado de la fuente de página $PERSISTENT (imagen anterior derecha). Estos tres nodos de fuente de página (los atributos @Continent, @Country y @City del elemento $PERSISTENT/Root), si se colocan en los componentes del diseño correspondientes, desempeñan un papel importante:
•@Continent en el cuadro combinado: actualiza @Continent, con la selección del cuadro combinado y hace que @Continent sea el nodo de contexto del cuadro combinado.
•@Country en el marcador de posición 1 convierte a @Country en el nodo de contexto del marcador de posición (y de la plantilla a la que llama. El valor en @Country se actualiza con la acción AlTerminarDeEditar del botón de opción de la plantilla de control (véase más abajo).)
•@City en el marcador de posición 2 convierte a @City en el nodo de contexto del marcador de posición (y de la plantilla a la que llama. El valor de @City se actualiza con la acción AlTerminarDeEditar del botón de opción de la plantilla de control (véase más abajo).)
La configuración de un nodo de contexto para el marcador de posición es importante porque todas las expresiones XPath de la plantilla de control a las que llama el marcador de posición se evalúan como relativas a este nodo de contexto.
La plantilla de control "Botones de opción dinámicos (horizontal)"
Se ha declarado que la plantilla de control tiene un parámetro obligatorio: $values. Puede ver esta declaración haciendo clic en el botón Más componentes del panel Páginas (dentro de un círculo rojo en la imagen siguiente).
Puede ver el diseño de la plantilla de control en la imagen siguiente. La plantilla de control consiste en una tabla que se expande horizontalmente, es decir, se crea una columna nueva por cada elemento de la secuencia con el que la tabla se expande. Esta secuencia (para expandir la tabla) genera el contenido del parámetro $values (imagen siguiente). Cada columna contiene un botón de opción. Por lo tanto, si $values contiene una secuencia de nombres de países, entonces se crea una columna con un botón de opción por cada nombre de país que haya en la secuencia. Y si $values contiene una secuencia de nombres de ciudades, entonces se crea un botón de opción por cada nombre de ciudad que haya en la secuencia. Más abajo se explica cómo se define el contenido de $values.
El control Botón de opción tiene estas características (que se definen en el panel Estilos y propiedades):
•Una propiedad Texto que determina qué texto acompaña a cada botón de opción. El texto de nuestro ejemplo se ha definido para que sea el contenido de la variable $MT_TableColumnContext. Esta es una variable de la aplicación MobileTogether creada especialmente para usarla con tablas que se expanden horizontalmente. Contiene, por cada columna de este tipo de tablas, el nodo de contexto actual. Por tanto, en nuestro ejemplo, si se crea una columna nueva debido a un nombre de país de la secuencia $values, entonces ese nombre de país es el nodo de contexto para esa columna y ese nombre de país se almacena en la variable $MT_TableColumnContext mientras se genera esa columna. Como la propiedad Texto del botón de opción se ha establecido en $MT_TableColumnContext, cada uno de los botones de opción tendrá el nombre del elemento de la secuencia que originó la creación de la columna en actual en ese momento.
•La propiedad Acción del control (para AlTerminarDeEditar) actualiza el nodo actual con el valor de $MT_TableColumnContext. En primer lugar, ¿cuál es el nodo actual? Es el nodo de contexto del marcador de posición que hace la llamada (véase más arriba). En nuestro ejemplo se trata, respectivamente para los marcadores 1 y 2, de los atributos @Country y @City del elemento $PERSISTENT/Root. En segundo lugar, ¿qué valor $MT_TableColumnContext (es decir, de qué columna)pasa al nodo actual? La respuesta es: la columna que contenga el botón de opción en el que se hace clic. Si tenemos en cuenta lo anterior, el nombre del país o de la ciudad que corresponde al botón de opción en el que se ha hecho clic se pasa, respectivamente, al atributo @Country o @City.
•La propiedad Valores marcados (u Obtener valor de la XPath) del botón de opción indica si el este se ha seleccionado (el valor es 1) o no (el valor es 0). La expresión XPath que determina este valor en la plantilla de control es: if ($MT_TableColumnContext = .) then 1 else 0. Esta expresión establece el valor de ese botón de opción en 1, que tiene un valor $MT_TableColumnContext que es igual al valor del nodo actual (que es el nodo de contexto del marcador de posición y, en nuestro ejemplo, al atributo @Country o @City del elemento $PERSISTENT/Root. Como la acción AlTerminarDeEditar actualizó el nodo actual con el valor de $MT_TableColumnContext, solamente el botón en el que se hizo clic (y desencadenó la acción AlTerminarDeEditar) tendrá el valor 1.
Ahora solo necesita indicar la secuencia que pasa al parámetro $values de la plantilla de control. Esta definición se indica en el marcador de posición (véase más abajo).
| Nota: | la plantilla de control Botones de opción dinámicos (horizontal) permite crear botones de opción horizontales para cualquier secuencia de valores que suministre el parámetro $values. |
Los dos controles Marcador de posición que reutilizan la plantilla de control
Para crear un control Marcador de posición para una plantilla coloque el marcador de posición hasta la ubicación deseada en el diseño y configure la propiedad Plantilla de control para que seleccione la plantilla de control que prefiera. También puede colocar directamente la plantilla de control en el diseño; en ese caso la configuración de la propiedad Plantilla de control es automática.
A continuación explicamos cómo configurar el control Marcador de posición para nuestro ejemplo. La imagen anterior muestra las propiedades del primer marcador de posición, que se usa para seleccionar el país.
•Nodo de fuente de página asociado: indica el nodo de fuente de página que será el nodo de contexto del control Marcador de posición y, por extensión, el nodo de contexto de la plantilla de control a la que se llama. Todas las expresiones XPath de la plantilla de control (incluidos sus parámetros y sus variables) se evaluarán como relativas a este nodo. Para configurar esta opción coloque el nodo de fuente de página en el control Marcador de posición. En nuestro proyecto los nodos de fuente de página asociados para los dos controles Marcador de posición son, respectivamente, los atributos @Country y @City del elemento $PERSISTENT/Root.
•Plantilla de control: selecciona la plantilla de control que se instanciará en la ubicación del control Marcador de posición. Puede seleccionar la plantilla de control en el cuadro combinado de la propiedad. También puede arrastrar una plantilla de control hasta el diseño; entoncesla plantilla selecciona esa plantilla de control de forma automática.
•Parámetros: define los valores que se envían al parámetro $values de la plantilla de control. En el caso del control Marcador de posición que instancia los botones de opción para los países del continente seleccionado por el usuario, la expresión XPath es:$COUNTRIES-AND-CITIES/Cities/Continent[@name=$PERSISTENT/Root/@Continent]/Country/@name. El filtro de los elementos del predicado (resaltado en amarillo) selecciona el continente elegido por el usuario (ahora almacenado en el árbol $PERSISTENT). La expresión XPath del segundo control Marcador de posición, que genera los botones de opción para las ciudades del país seleccionado, es: $COUNTRIES-AND-CITIES/Cities/Continent[@name=$PERSISTENT/Root/@Continent]/Country[@name=$PERSISTENT/Root/@Country]/City/@name.
Tenga en cuenta que los dos marcadores de posición tienen distintos nodos de contexto y envían distintas secuencias al parámetro $values. Esto permite que la plantilla de control genere los botones de opción correspondientes en las dos ubicaciones en que se instancia la plantilla mediante los marcadores de posición.
