Componentes de pantalla (Extended controls)

Componentes de pantalla (Extended controls)
Además de los controles comunes que tenemos disponibles en la toolbox, GeneXus nos
permite crear nuestros propios controles o usar controles creados por otras personas,
llamados “user controls” o “extended controls”.
Video filmado con GeneXus X Evolution 3
Page
por ejemplo incorporando menúes, mapas, gráficas, calendarios, diagramas y otra serie de
recursos.
1
Estos controles nos permiten crear aplicaciones con interfaces de usuario ricas y fáciles de usar
En este curso veremos cómo usar un user control para crear una galería de imágenes.
Page
2
Supongamos que la agencia de viajes nos ha solicitado ver las atracciones turísticas que puede
ofrecer, a través de una pantalla donde se pueda navegar fácilmente entre las imágenes
disponibles.
Video filmado con GeneXus X Evolution 3
Lo primero que vamos a hacer para crear una galería de imágenes es crear un Web Panel
donde vamos a situar a esta galería.
Así que definimos que vamos a crear un objeto nuevo, de tipo web panel y le ponemos como
nombre : AttractionGallery.
Page
3
Ahora vamos a la toolbox y arrastramos un control ImageGallery sobre el form de este Web
Panel.
Video filmado con GeneXus X Evolution 3
Observamos que con esta acción, también se creó un tipo de datos estructurado llamado
ImagesData
Page
4
y si volvemos al web panel, vemos que también se crearon dos variables
Video filmado con GeneXus X Evolution 3
donde se van a guardar la colección de imágenes y el ítem seleccionado.
Page
5
Para cargar la colección a partir de los datos de las atracciones, vamos a crear un objeto de
tipo Data Provider y le pondremos como nombre: DataProviderAttractionGallery
Video filmado con GeneXus X Evolution 3
Ahora arrastramos el tipo de datos estructurado ImageData sobre el Data Provider y ya
tenemos la estructura pronta para cargar.
Page
6
Vamos a poner como Id al identificador de la atracción, o sea: AttractionId. Pero si
observamos, todos los miembros del SDT ImagesData son de tipo carácter, entonces vamos a
tener que convertir el valor de AttractionId a string y para esto utilizamos el método:
ToString().
Video filmado con GeneXus X Evolution 3
Ahora vamos a asignar a la foto de la atracción, como imagen. Como debemos cargar en el
miembro Image a la URL de la imagen, vamos a utilizar la propiedad ImageURI del atributo
AttractionPhoto.
Page
7
Digitamos el punto, elegimos: ImageURI
Video filmado con GeneXus X Evolution 3
y vamos a utilizar ese mismo valor al miembro Thumbnail, que va a almacenaruna imagen
pequeña de la foto.
Así que asignamos nuevamente al atributo AttractionPhoto, el método ImageURI
Y por último en el miembro Caption vamos a asignar el nombre de la atracción turística, así
que signamos el valor del atributo: AttractionName.
Salvamos esto que acabamos de definir y vamos a personalizar algunas propiedades del user
control Image Gallery.
Volvemos entonces al web panel y desde el form, seleccionamos el control y presionando F4
vemos las propoiedades del user control.
Page
8
En el ancho ponemos el valor 1000, y en el alto 500 y la forma en que queremos ver a esta
galería en la pantalla será Slider.
Video filmado con GeneXus X Evolution 3
Por último, vamos a los eventos para invocar al Data Provider, para que cargue a esta
colección.
Vamos a borrar este código de ejemplo:
Page
9
Y en el evento Start, asignamos a la variable &ImageData el resultado que devuelve nuestro
DataProvider, es decir la colección de atracciones almacenada en la base de datos.
Video filmado con GeneXus X Evolution 3
Salvamos y vamos a ejecutar nuestra aplicación. Presionamos F5.
Page
10
Seleccionamos Attraction Gallery y vemos nuestra galería de imágenes en funcionamiento.
Video filmado con GeneXus X Evolution 3
Acabamos de ver entonces, como poder crear en muy poco tiempo una galería de imágenes
vistosa y funcional.
Page
11
Por último actualizamos los cambios en Gxserver.
Video filmado con GeneXus X Evolution 3
Para más información sobre User Controls o Extended Controls, vea la página del Community
Wiki sobre este tema, en el link que se muestra en pantalla.
Page
12
Y para acceder a los User Controls publicados por la comunidad y poder descargarlos, vaya a la
siguiente página, correspondiente a GeneXus Market Place:
Video filmado con GeneXus X Evolution 3