En el artículo de hoy te quiero mostrar cómo puedes implementar en tu aplicación la nueva región de tipo Carrusel que nos permite visualizar contenido en diferentes subregiones denominadas slides.
Este tipo de región fue incorporada en el Tema Universal 42 y de una forma muy sencilla podemos crear una forma muy atractiva de mostrar contenido estático y dinámico en nuestras aplicaciones en Apex.
Crear Región de Tipo Carrusel con Contenido Estático
Para este ejemplo vamos a crear una nueva página en blanco en nuestra aplicación Demo y la llamaremos Carrusel – Estático
Creamos una nueva Región, que la llamaremos Carrusel y en la sección de Apariencia seleccionamos en Plantilla que sea “Carousel Container”.
Hacemos clic en Opciones de Plantilla:
-
- Animation: Fade
- Timer: 5 Seconds
- Header: Hidden
- Style: Remove Borders
Aceptamos los cambios
En este momento la región no tiene ningún contenido, ahora es momento de agregar el contenido y lo hacemos mediante la creación de subregiones. Cada subregión será una Slide de nuestro Carrusel.
Vamos a crear tres subregiones a las cuales la vamos a llamar:
-
- Región A
- Región B
- Región C
Cada subregión será de contenido estático y la plantilla seleccionamos que sea “Blank with Attributes”
Podemos ver en la ficha del Diseñador de Cuadrícula que se ha creado la región contenedora que es el Carrusel con 3 Slides que corresponden a las 3 subregiones A, B y C.
En cada subregión vamos a colocar un contenido HTML.
Seleccionamos la Subregión A y en el panel de propiedades en la Sección Origen colocamos el siguiente contenido HTML:
<h1>ORACLE APPLICATION EXPRESS 5.0</h1> <h3>Develop</h3> <p>Use our modern, intuitive, and powerful browser-based IDE to quickly build and run applications, enabling easy iterative development.</p>
Seleccionamos la Subregión B y en el panel de propiedades en la Sección Origen colocamos el siguiente contenido HTML:
<h1>ORACLE APPLICATION EXPRESS 5.0</h1> <h3>Customize</h3> <p>Powerful and intuitive design tools enable easy and extensive customization of your application's UI.</p>
Seleccionamos la Subregión C y en el panel de propiedades en la Sección Origen colocamos el siguiente contenido HTML:
<h1>ORACLE APPLICATION EXPRESS 5.0</h1> <h3>Deliver</h3> <p>Deployment couldn't be simpler. It is as easy as providing your users the URL to your application.</p>
El contenido de cada subregión se basa en un título usando las etiquetas HTML <h1></h1>, de un subtítulo, y usando las etiquetas HTML <h3></h3> y un texto usando las etiquetas de párrafo <p></p>.
Si ejecutamos la página podremos ver que al no darle estilos el contenedor se ve muy simple a la vista y los textos no se encuadran adecuadamente al contenedor.
En el caso que quisiéramos tener diferentes reglas CSS para cada subregión (slides), podemos crear diferentes identificadores estáticos, uno para cada subregión.
Seleccionamos la Subregión A y desde el panel de la derecha de propiedades, en la Sección “Avanzada”, ingresamos en Identificador Estático: miclasecssA. Hacemos lo mismo para la subregión B e ingresamos el nombre miclasecssB y en la subregión C ingresamos miclasecssC.
Para que nuestras slides se vean más atractivas vamos a colocar los textos alineados al centro y también vamos a indicar el color de fondo de cada slide usando una regla CSS que trae el Tema Universal 42 para usarse en este caso.
Crear Reglas CSS
Volvemos al Diseñador de Páginas y seleccionamos el título de la página.
Desde el panel de la derecha de propiedades ingresamos a la sección CSS en Línea y colocamos las siguientes reglas CSS:
#miclasecssA
h1 {font-size: 2.5em;text-align:center;}
h3 {font-size: 1.5em;text-align:center;}
p {font-size: 1.2em;text-align:center; padding:5px 50px 5px 50px;}
#miclasecssB
h1 {font-size: 2.5em;text-align:center;}
h3 {font-size: 1.5em;text-align:center;}
p {font-size: 1.2em;text-align:center; padding:5px 50px 5px 50px;}
#miclasecssC
h1 {font-size: 2.5em;text-align:center;}
h3 {font-size: 1.5em;text-align:center;}
p {font-size: 1.2em;text-align:center; padding:5px 50px 5px 50px;}
He colocado las mismas CSS para cada subregión pero está de más decir que podemos usar diferentes reglas CSS para nuestras subregiones.
En las CSS estamos indicando que el título sea de un tamaño de alrededor de 42px y el texto esté alineado al centro. De igual modo para el subtítulo estamos indicando que tenga un tamaño de alrededor de 24px y el texto esté alineado al centro. Y finalmente para el texto del párrafo estamos indicando que tenga un tamaño de alrededor de 19px, que el texto esté alineado al centro y agregamos un padding de 5px en la parte superior, 50px a la derecha, 5px abajo y 50px a la izquierda.
Para cambiar el color de fondo de nuestras Slides o Subregiones podemos hacer uso de las clases que ya están integradas en el Tema Universal 42.
Lamentablemente no hay mucha documentación sobre las CSS que usa el Tema 42 por eso cuando no sabemos qué clase es usada para algún elemento podemos usar el Inspector Web y buscar la clase según el elemento seleccionado.
Para agilizar el proceso he buscado las clases que vamos a necesitar para cambiar el color que se encuentran disponibles.
Reglas CSS del Tema Universal 42
FG Class BG Class Contrast Text Class RGB
u-ColorFG–1 u-ColorBG–1 u-Color-1-FG–txt rgb(255, 45, 85)
La clase u-Color permite definir el esquema del color, hay definidas en el Tema Universal 42 una cantidad de 30 colores diferentes, el cual se definen del 1 al 30.
La forma en que usamos estas clases es colocando dichas clases en cada una de las subregiones, en la sección “Apariencia” en “Clases CSS”:
Para Región A:
dm-ColorBlock u-Color-1-BG--bg u-Color-1-FG--txt h200
Para Región B:
dm-ColorBlock u-Color-2-BG--bg u-Color-2-FG--txt h200
Para Región C:
dm-ColorBlock u-Color-3-BG--bg u-Color-3-FG--txt h200
Podemos observar que estamos colocando el fondo de la Slide A con el esquema de color 1, la Slide B con el esquema de color 2 y la Slide C con el esquema de color 3, y un alto para cada una de las subregiones de 200px usando la clase h200.
A continuación he creado una tabla de referencia para que puedas identificar los colores que corresponden a cada uno de los esquemas, con su RGB y Hex # correspondiente.
Esquemas de Colores
Con esta herramienta online puedes encontrar el número RGB y el Hex # de los colores.
Ejecutamos la página y podremos ver nuestra región del Carrusel con tres slides que realizan la transición cada 5 segundos.
Video Demostración – Carrusel en funcionamiento
Como podemos observar crear este tipo de visualización de información estática es muy sencillo usando el Tema Universal 42.
También podemos ingresar imágenes a nuestra slide acompañando el texto simplemente necesitamos ingresar la imagen en nuestro Espacio de Trabajo y utilizar la variable de sustitución #WORKSPACE_IMAGES#mi_imagen.png o la variable #APP_IMAGES#mi_imagen.jpg (si la ingresamos solo para nuestra aplicación) y colocamos en el contenido estático dentro del párrafo, la etiqueta <img> para llamar a la imagen, como se muestra a continuación:
<img src=”#WORKSPACE_IMAGES#mi_imagen.png”/>
En el próximo artículo estaremos viendo cómo podemos mostrar información en forma dinámica de una tabla de nuestra base de datos usando el contenedor de tipo Carousel.
Hasta Pronto!