Este artículo que te presento hoy es en respuesta a una consulta que me hicieron y me pareció muy conveniente poder compartir la respuesta con toda la Comunidad.
Básicamente, la consulta se refería a cómo podemos colocar diferentes imágenes en las distintas regiones de una página en Oracle Application Express.
Para llevar a cabo este ejemplo, he creado una aplicación de escritorio en Apex y he creado dos regiones, una de las regiones es una región con un Informe clásico que muestra los registros de la tabla EMP, cuya consulta SQL de origen es: select * from EMP.
La otra región, es una región de Contenido Estático con texto dummy en ella.
En la siguiente imagen podemos ver las dos regiones creadas:
Subir Imágenes al Espacio de Trabajo (WORKSPACE)
Para poder referenciar las imágenes en nuestro CSS necesitamos cargarlas en nuestro espacio de trabajo.
Para ello vamos a Componentes Compartidos y seleccionamos Archivos de Espacio de Trabajo Estáticos y allí cargamos las imágenes, en mi caso las referencias son: #WORKSPACE_IMAGES#sky.jpg y #WORKSPACE_IMAGES#gotas.png
Crear Identificador Estático de la Región
Para poder asignar las reglas CSS a una región determinada, necesitamos crear un identificador para cada una de las regiones, en nuestro ejemplo vamos a crear un nombre de identificador en la región del Informe Clásico y otro nombre de identificador estático en la región de Contenido Estático.
Desde el Diseñador de Páginas de la Página de Inicio, seleccionamos la región del Informe Clásico y en el panel de propiedades de la izquierda vamos a la sección Avanzada y en Identificador Estático ingresamos el nombre fondo-region-ic (fondo de la región de informe clásico)
De igual modo ingresamos el identificador estático para la región de contenido estático el cual lo llamaremos fondo-region-ce (fondo de la región de contenido estático)
Crear reglas CSS para los identificadores
Necesitamos crear ahora las reglas CSS para cada uno de nuestros identificadores:
Identificador fondo-region-ic
#fondo-region-ic {
background: #2B9AF3 url(#WORKSPACE_IMAGES#gotas.png) top center;
background-repeat: repeat;
background-size: cover;
background-attachment: fixed;
}
Identificador fondo-region-ce
#fondo-region-ce {
background: #6694C6 url(#WORKSPACE_IMAGES#sky.jpg) top center;
background-repeat: repeat;
background-size: cover;
background-attachment: fixed;
}
Copiamos los estilos CSS de cada identificador y lo pegamos en la página donde se encuentran las regiones, seleccionamos el título de la página y en el panel de propiedades nos dirigimos a la zona de los CSS en Línea colocamos allí las reglas CSS.
Si ejecutamos la Página podremos ver un pequeño borde en cada región pero muy poco perceptible. Eso se debe a que la región del Informe Clásico tiene un fondo y la región del contenido estático también.
Para que las regiones tengan el body transparente necesitamos agregar lo siguiente a nuestro CSS, para las dos regiones:
#fondo-region-ic .t-Region-body {
background: transparent;
}
#fondo-region-ce .t-Region-body {
background: transparent;
}
Como podemos ver ya tenemos las imágenes que se muestran de fondo de cada una de nuestras regiones, solo necesitamos arreglar unos estilos CSS para que la tabla del Informe Clásico no sea transparente y que el texto del contenido estático sea blanco y además podemos cambiar el color de fondo de los títulos de cada región.
Identificar los nombres de clases usados en cada Región
Mientras estamos ejecutando la aplicación necesitamos identificar el nombre de la clase que pertenece a cada región (región del informe clásico y el body de la región del contenido estático), empecemos identificando la que corresponde a la región del informe clásico.
Hay en cada navegador una utilidad para poder inspeccionar las páginas, en mi caso yo uso Firefox con el plugin Firebug que instala herramientas de Web Developer que nos permite inspeccionar la página entre muchas otras funcionalidades.
Nos ubicamos encima de la tabla del Informe Clásico y con el botón derecho del mouse seleccionamos “Inspect Element (Q)”
En el Inspector de Elementos podemos ver que la clase que corresponde a la tabla del Informe Interactivo es: t-Report-report
Vamos a agregar una regla CSS para esta clase para que la tabla del Informe Clásico tenga fondo blanco.
#fondo-region-ic .t-Report-report {
background: #fff;
}
Hacemos lo mismo para encontrar el nombre de la clase CSS del body de la región de contenido estático, el nombre de la clase es: t-Region-body
Agregamos la siguiente regla CSS para colocar el texto de la región en color blanco:
#fondo-region-ce .t-Region-body {
color: #fff;
}
Finalmente vamos a cambiar el color de fondo del encabezado de cada región, el nombre de la clase es: t-Region-header
Agregamos el CSS para cada región:
#fondo-region-ic .t-Region-header{
background-color: #246396;
}
#fondo-region-ce .t-Region-header{
background-color: #4DA74D;
}
Los títulos están de color negro y como los colores de fondo son oscuros, es mejor pasarlos a un color blanco, identificamos la clase correspondiente al título, cuyo nombre es: t-Region-title e ingresamos las siguientes CSS:
#fondo-region-ic .t-Region-title {
color: #fff;
}
#fondo-region-ce .t-Region-title {
color: #fff;
}
Nuestro resultado es como se visualiza a continuación:
Colocar Imagen de Fondo al Título de la Página “Inicio”
También podemos cambiar el fondo del título de nuestra página referenciando una imagen. Para el ejemplo vamos a usar nuevamente la imagen de gotas.png.
Desde el Diseñador de Páginas ingresamos a la página de Inicio y seleccionamos el título de la página, luego ingresamos el nombre de la clase “fondo-titulo-body” en el recuadro de Clases CSS en el panel de la derecha referente a las propiedades de la página:
Identificamos la clase que corresponde al título de la página, cuyo nombre es: t-Body-title y luego ingresamos las siguientes reglas CSS:
.fondo-titulo-body .t-Body-title {
background: #2B9AF3 url(#WORKSPACE_IMAGES#gotas.png) top center;
background-repeat: repeat;
background-size: cover;
background-attachment: fixed;
}
Ejecutamos la página y podemos ver los resultados usando las imágenes como fondo en las distintas regiones de nuestra página en Apex:
Nota: es importante diferenciar que lo que ingresamos arriba es una clase de la página y NO un identificador estático (id). Las clases comienzan con un punto y los identificadores comienzan con el numeral #. La diferencia entre ellos es que el identificador está pensado para que el elemento que se selecciona sea único, es decir los identificadores son únicos, sin embargo, las clases están pensadas para poder definir el mismo estilo a varios elementos de una página.
Si no usáramos los identificadores estáticos de cada región, al estar modificando las clases que se aplican a todos los elementos de la aplicación, no podríamos ver los cambios ya que Apex no podría saber a qué elemento corresponde el cambio de los estilos CSS, es por ello que necesitamos colocar los identificadores estáticos para que la clase al cual estamos cambiando los estilos CSS sea identificada dentro de la región la cual pertenece el nombre del identificador estático.
Aquí están todas las reglas CSS juntas:
#fondo-region-ic {
background: #2B9AF3 url(#WORKSPACE_IMAGES#gotas.png) top center;
background-repeat: repeat;
background-size: cover;
background-attachment: fixed;
}
#fondo-region-ce {
background: #6694C6 url(#WORKSPACE_IMAGES#sky.jpg) top center;
background-repeat: repeat;
background-size: cover;
background-attachment: fixed;
}
#fondo-region-ic .t-Region-body {
background: transparent;
}
#fondo-region-ce .t-Region-body {
background: transparent;
}
#fondo-region-ic .t-Report-report {
background: #fff;
}
#fondo-region-ce .t-Region-body {
color: #fff;
}
#fondo-region-ic .t-Region-header{
background-color: #246396;
}
#fondo-region-ce .t-Region-header{
background-color: #4DA74D;
}
#fondo-region-ic .t-Region-title {
color: #fff;
}
#fondo-region-ce .t-Region-title {
color: #fff;
}
.fondo-titulo-body .t-Body-title {
background: #2B9AF3 url(#WORKSPACE_IMAGES#gotas.png) top center;
background-repeat: repeat;
background-size: cover;
background-attachment: fixed;
}
Cabe destacar que usé colores vívidos para que se note los cambios y podamos identificar claramente la clase que corresponde a cada región.
Como podemos ver, la personalización de nuestras regiones se hace de forma muy sencilla si trabajamos con los Estilos CSS en Línea. Si ya queremos realizar personalizaciones más complejas nos conviene utilizar una hoja de estilos separada y que sea llamada por nuestra aplicación.
Hasta pronto!