Componentes de pantalla (Extended controls)
Transcripción
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
Documentos relacionados
Componentes de pantalla (Extended controls)
Ahora vamos a la toolbox y arrastramos un control del tipo “galería de imágenes” al formulario
Más detallesIntroducción a Smart Devices
galería de países, se ofrezca también un botón que al presionarlo nos muestre algo así:
Más detallesVideo filmado con GeneXus X Evolution 3 P age
Todo atributo que definamos como fórmula global, será un dato de lectura y no será posible digitar valor para él. Esto se debe a que el atributo obtiene su valor del cálculo asociado, el cual se ej...
Más detalles