XForms/Listas de Selección

Motivacion

editar

Desea permitir al usuario seleccionar un único valor de una lista.

Método

editar

Aquí está un ejemplo de la utilización de selec1 para crear una lista desplegable. El usuario debe elegir uno y sólo uno de la lista seleccionada.

Tenga en cuenta que cada elemento tiene una etiqueta (para poder leer) y un valor (normalmente se coloca dentro de un documento XML). Los valores se almacenan típicamente en una base de datos y se usan para compararse entre ellos. Dado que los valores se pasan con frecuencia como argumentos en una dirección URL en una interfaz REST la convención es usar sólo letras minúsculas y dashs. No ponga espacios, barras y otros caracteres en los valores si está utilizando interfaces REST. Esto hace que las URL sean difíciles de leer.

Imagen de muestra

editar
 

Link a la Aplicacion

editar

Lista de Seleccion
Tenga en cuenta que cuando el formulario se carga inicialmente, no hay un día de la semana seleccionado en la lista ni tampoco en la salida. Después de presionar la lista desplegable (el triángulo hacia la derecha del control) y seleccione un día de la semana, el valor se llenará en una etiqueta (el nombre que comienza con la mayúscula) se mostrará en el control selec1. El valor actual seleccionado sera el mismo valor que se ve pero en minusculas. Este es también el mismo valor de la salida.

Codigo Fuente

editar

<html
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:xf="http://www.w3.org/2002/xforms">
    <head>
        <title>Demonstration of XForms Select1</title>
        <style type="text/css"><![CDATA[body {font-family: Helvetica, sans-serif;}]]></style>
        <xf:model>
            <xf:instance xmlns="">
                <data>
                    <DayOfWeekCode/>
                </data>
            </xf:instance>
        </xf:model>
    </head>
    <body>       
        <xf:select1 ref="DayOfWeekCode">  
            <xf:label>Day of Week:</xf:label>
                <xf:item>
                    <xf:label>Lunes</xf:label>
                    <xf:value>lunes</xf:value> 
                </xf:item>
                <xf:item>
                    <xf:label>Martes</xf:label>
                    <xf:value>martes</xf:value>
                </xf:item>
                <xf:item>
                    <xf:label>Miercoles</xf:label>
                    <xf:value>miercoles</xf:value>
                </xf:item>
                <xf:item>
                    <xf:label>Jueves</xf:label>
                    <xf:value>jueves</xf:value>
                </xf:item>
                <xf:item>
                    <xf:label>Viernes</xf:label>
                    <xf:value>viernes</xf:value>
                </xf:item>
                <xf:item>
                    <xf:label>Sabado</xf:label>
                    <xf:value>sabado</xf:value>
                </xf:item>
                <xf:item>
                    <xf:label>Domingo</xf:label>
                    <xf:value>domingo</xf:value>
                </xf:item>             
        </xf:select1>
        <br/>
        Output: <xf:output ref="DayOfWeekCode"/>
    </body>
</html>

Discusión

editar

La lista de valores no tiene que estar en el cuerpo del form. Puede ser en el modelo almacenado en una instancia, se puede recuperar en demanda de un servicio web. Vamos a cubrir estos en otros ejemplos.