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 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.
y en la ventana que se abre, en Propiedades nos aparece Variable, presionando sobre 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.
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
Fichero con ejemplo en:
slider.xml
Ejs: [I Introducción ] [II Vista ] [III Modelo] [IV Control] [V Ejecución ] |