Ejs IV.2 -   Interactividad: Un deslizador

Una forma de interactuar con la aplicación es realizar conexiones entre las variables del modelo y las propiedades de la interfase gráfica. Vamos a relacionar la posición de un cursor deslizante con una variable.

1.- Realizamos los mismos pasos que en el tutorial de la Vista  para crear una ventana con un panel, en el que creamos una Deslizador para modificar un valor slider  situándolo al Centro con lo que obtendremos:

2.- Definimos una variable seleccionando MODELO -> Variables -> Pulse aquí para crear ...  pulsando nos propone por defecto un nombre para nuestra ventana de variables. Una vez aceptado escribimos, por ejemplo, posicion debajo de Nombre asignándole Tipo entero (int).

3.- Para relacionar el valor de esta variable con la posición del cursor, seleccionamos Vista y slider en el Árbol de Elementos.

4.- Al presionar el botón derecho del ratón mientras éste se encuentra sobre slider nos aparece una ventana en la que seleccionamos Editar el componente.

Propiedades del deslizador

y en la ventana que se abre, en Propiedades nos aparece Variable,  presionando sobre seleccionar el icono de la parte derecha se abre la ventana donde se muestran las variables de nuestro modelo a las que podemos asociar la propiedad Variable del Deslizador.

Conexión Variables con Posición

Seleccionamos posición, Hecho  y así queda conectada con la propiedad Variable que indica la posición del deslizador.

5.- Si generamos el Applet, al mover el cursor la variable ira tomando los valores de cero a uno que son el mínimo y máximo que posee por defecto este elemento.

6.- Podemos hacer que aparezca Posición = editando las propiedades del integerfield y escribiendo Posición = #.# en  el Formato

Deslizador
Fichero con ejemplo en:  slider.xml


Ejs: [I Introducción ] [II Vista ] [III Modelo] [IV Control] [V Ejecución ]