Muchas veces nos encontramos en la necesidad de personalizar nuestros botones en nuestras aplicaciones en Oracle APEX, es por ello que el día de hoy te voy a enseñar cómo puedes colocar una imagen en el botón que se encuentra almacenada en nuestro espacio de trabajo para que los botones se vean cómo te maestro en la siguiente imagen:
Lo primero que debemos hacer es cargar en nuestro espacio de trabajo las imágenes que necesitamos, en el ejemplo que les traigo he subido tres imágenes de 65px de alto cada una con fondo transparente.
Ingresamos a nuestra aplicación, nos dirigimos a Componentes Compartidos à Archivos à Archivos de Aplicación Estáticos:
Reservamos las referencias porque las vamos a usar más adelante:
#APP_IMAGES#chart-bar-65px.png
#APP_IMAGES#pie-chart-65.png
#APP_IMAGES#reporte-65.png
Regresamos a la aplicación y creamos una región que contendrá tres Botones el cual los denominé: BOTON1, BOTON2 y BOTON3.
Plantillas de Botones
La aplicación que he creado para este ejemplo usa el Tema Universal 42 el cual trae un conjunto de plantillas para botones, calendario, etiquetas, informes, Listas, Listas de Valores Emergentes, Páginas, Regiones y Ruta de Navegación como todos los Temas que tenemos disponibles en APEX.
En el caso de las plantillas de Botones, el tema Universal 42 dispone de tres tipos diferentes de plantillas, una es la de tipo Texto (Text), la otra es de tipo Icono (Icon) y una más de tipo combinado, que es la de Texto con Icono (Text with Icon).
En el caso nuestro necesitamos crear una propia plantilla que sea de tipo Texto con Imagen, para ello lo que vamos a hacer es crear una plantilla basada en una copia de la plantilla de botón: “Text with Icon”.
Ingresamos a Componentes Compartidos de nuestra aplicación y desde la sección de Interfaz de Usuario hacemos clic en el link Plantillas.
Las tres primeras plantillas son la de tipo botón, hacemos clic en el icono Copiar de la plantilla “Text with Icon” y se abre una ventana modal el cual nos solicita el nombre de la nueva plantilla, lo colocaremos como: “Text with Image” y hacemos clic en el botón Copiar.
Hacemos clic en el enlace del nombre de la plantilla para abrirla y editarla. Nos desplazamos hasta la ficha Definición y allí podemos ver dos recuadros, uno es para la plantilla normal cuando el botón está en gris y el otro recuadro es para la plantilla cuando el botón está pintado en azul, es decir, que está configurado como Directo.
Recuadro 1: Tenemos el siguiente Código HTML
Reemplazamos por el siguiente código HTML
El cual eliminamos las etiquetas que corresponden al Icono y en su lugar colocamos la etiqueta de tipo imagen y utilizaremos la variable de sustitución #ICON_CSS_CLASSES# para indicar la ruta donde se encuentra nuestra imagen. Además vamos a crear nuestra propia clase para el botón que la he llamado t-Button-img.
Recuadro 2: Tenemos el siguiente Código HTML
Reemplazamos por el siguiente código HTML
Lo único diferente aquí es que se tiene la clase t-Button--hot que indica que el botón es Directo y por lo tanto se pintará de azul.
Aplicamos los cambios.
Estilos CSS de Botones
Regresamos a la aplicación y hacemos clic en el título de la página en el Diseñador de Páginas y nos desplazamos a la sección de CSS En Línea y agregamos los siguientes estilos CSS:
.t-Button-img {
font-size: 20px;
line-height: 24px;
font-weight: 400;
text-align: center;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
}
.button-img
{
margin-left: 15px;
margin-right: 15px;
align: middle;
}
Editar Botones
Hacemos clic en BOTON1 desde el panel de la izquierda de Presentación y vemos las propiedades del botón desde el panel de la derecha de propiedades.
Sección Identificación
Nombre del Botón: BOTON1
Etiqueta: Generar Gráfico de Barras
Sección Diseño
Posición de Botón: Parte Superior de la Región
Alineación Horizontal: Izquierda
Sección Apariencia
Plantilla de Botón: Text with Image (nuestra plantilla recién creada)
Directa: Sí
Classes CSS de Icono: #APP_IMAGES#chart-bar-65px.png
Realizamos lo mismo para los Botones 2 y 3, cambiando el texto y las imágenes.
BOTON2
Sección Apariencia
Plantilla de Botón: Text with Image (nuestra plantilla recién creada)
Directa: Sí
Classes CSS de Icono: #APP_IMAGES#reporte-65.png
BOTON3
Sección Apariencia
Plantilla de Botón: Text with Image (nuestra plantilla recién creada)
Directa: Sí
Classes CSS de Icono: #APP_IMAGES#pie-chart-65.png
Guardamos los cambios y ejecutamos la página.
Como podemos ver, personalizar nuestros botones usando CSS y nuestras imágenes alojadas en nuestro espacio de trabajo es muy sencillo, la única consideración es que las imágenes deben tener el mismo ancho y alto para que se vea uniforme todos los botones y siempre realizar copias de plantillas si vamos a modificar la plantilla para no trabajar en las plantillas originales.
Les dejo un archivo de texto con los codigos HTML para que puedan copiar y pegar en su aplicación de ejemplo.
Espero les sea de utilidad y será hasta la próxima!