Written by Clarisa Maman Orfali

 

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

 

Color

RGB

Hex #

Color

1

rgb(255, 45, 85)

FF2D55

 

2

rgb(0, 122, 255)

007AFF

 

3

rgb(255, 149, 0)

FF9500

 

4

rgb(76, 217, 100)

4CD964

 

5

rgb(142, 142, 147)

8E8E93

 

6

rgb(52, 170, 220)

34AADC

 

7

rgb(255, 204, 0)

FFCC00

 

8

rgb(90, 200, 250)

5AC8FA

 

9

rgb(255, 59, 48)

FF3B30

 

10

rgb(88, 86, 214)

5856D6

 

11

rgb(255, 87, 119)

FF5777

 

12

rgb(51, 149, 255)

3395FF

 

13

rgb(255, 170, 51)

FFAA33

 

14

rgb(112, 225, 131)

70E183

 

15

rgb(165, 165, 169)

A5A5A9

 

16

rgb(93, 187, 227)

5DBBE3

 

17

rgb(255, 214, 51)

FFD633

 

18

rgb(123, 211, 251)

7BD3FB

 

19

rgb(255, 98, 89)

FF6259

 

20

rgb(121, 120, 222)

7978DE

 

21

rgb(230, 41, 77)

E6294D

 

22

rgb(0, 110, 230)

006EE6

 

23

rgb(230, 134, 0)

E68600

 

24

rgb(68, 195, 90)

44C35A

 

25

rgb(128, 128, 132)

808084

 

26

rgb(47, 153, 198)

2F99C6

 

27

rgb(230, 184, 0)

E6B800

 

28

rgb(81, 180, 225)

51B4E1

 

29

rgb(230, 53, 43)

E6352B

 

30

rgb(79, 77, 193)

4F4DC1

 

 

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!