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. Estos controles nos permiten crear aplicaciones con interfaces de usuario ricas y fáciles de usar por ejemplo incorporando menúes, mapas, gráficas, calendarios, diagramas y otra serie de recursos. Page1
En este curso veremos cómo usar un user control para crear una galería de imágenes. 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. Page2
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. Ahora vamos a la toolbox y arrastramos un control ImageGallery sobre el form de este Web Panel. Page3
Observamos que con esta acción, también se creó un tipo de datos estructurado llamado ImagesData y si volvemos al web panel, vemos que también se crearon dos variables Page4
donde se van a guardar la colección de imágenes y el ítem seleccionado. 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 Page5
Ahora arrastramos el tipo de datos estructurado ImageData sobre el Data Provider y ya tenemos la estructura pronta para cargar. 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(). Page6
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. Digitamos el punto, elegimos: ImageURI Page7
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. 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. Page8
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: 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. Page9
Salvamos y vamos a ejecutar nuestra aplicación. Presionamos F5. Seleccionamos Attraction Gallery y vemos nuestra galería de imágenes en funcionamiento. Page10
Acabamos de ver entonces, como poder crear en muy poco tiempo una galería de imágenes vistosa y funcional. Por último actualizamos los cambios en Gxserver. Page11
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. 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: Page12