Hace unos días me hicieron la siguiente consulta, si se podía colocar imágenes personalizadas en lugar de iconos para nuestras listas en Apex.
Para contestar esta pregunta he querido hacer este demo y que de ese modo puedan aprender como poder colocar sus propias imágenes en las Listas de su aplicación.
Ante todo quiero mencionar que el Tema Universal trabaja con Font Awesome esa es la librería de iconos que está disponible cuando se carga Oracle Application Express.
Primero de todo vamos a crear una lista estática que la llamaremos por ejemplo: “Lista con Imágenes”, en Componentes Compartidos que tenga las siguientes entradas: APEX, MySQL, PL/SQL, SQL, BI.
Image may be NSFW.
Clik here to view.
Posteriormente vamos a cargar las imágenes personalizadas que queremos colocar en nuestra lista, yo he creado cada imagen con un tamaño de 50px de ancho y 50px de alto.
Ingresamos a Componentes Compartidos y en la sección Archivos, seleccionamos “Archivos de Aplicación Estáticos” (podemos usar la otra opción si queremos que las imágenes estén disponibles para todas las aplicaciones del workspace, en caso contrario, usamos la opción mencionada).
Image may be NSFW.
Clik here to view.
Ahora viene la parte interesante :)
Necesitamos editar el template de Lista que vamos a usar, para ello primero hacemos una copia del template original y le colocamos un nombre, en este ejemplo voy a trabajar con el template Media List.
En Componentes Compartidos, vamos a la sección Interfaz de Usuario --> Plantillas:
Se abre la lista de plantillas disponibles del Tema Universal, buscamos la plantilla Media List y realizamos una copia del mismo colocando el nombre Media List with Image.
En el recuadro verde vemos la plantilla original y en el recuadro rojo la copia de la plantilla.
Image may be NSFW.
Clik here to view.
Hacemos clic en el enlace Media List with Image para editar la plantilla:
En la sección Plantilla de Lista Actual, necesitamos reemplazar la etiqueta <span></span> por la etiqueta <img/>
Buscamos el siguiente código:
<span class="t-Icon #ICON_CSS_CLASSES#" #IMAGE_ATTR#></span>
Y lo reemplazamos por:
<img src="#IMAGE#" #IMAGE_ATTR#/>
Image may be NSFW.
Clik here to view.
De igual manera lo hacemos para la sección de “Plantilla de Lista No Actual” y guardamos los cambios.
Regresamos a Componentes Compartidos y seleccionamos la Lista Estática que hemos creado para editarla, para ello hacemos clic en el primer elemento APEX.
En la casilla Imagen/Clase ingresamos: #APP_IMAGES#mi-imagen.jpg
Donde mi-imagen.jpg es la imagen que nosotros queremos asignarle a este elemento, en mi caso es: apex-50.jpg, hacemos lo mismo para cada una de las entradas de la lista:
Image may be NSFW.
Clik here to view.
Ahora ingresamos a una página de nuestra aplicación y creamos una región de tipo Lista y que el origen sea la lista que hemos creado “Lista con Imágenes”.
Image may be NSFW.
Clik here to view.
Hacemos clic en Atributos de la región de Lista y seleccionamos en Plantilla de Lista la plantilla que hemos creado llamada Media List with Image:
Image may be NSFW.
Clik here to view.
Guardamos los cambios y ejecutamos la página para ver los resultados:
Image may be NSFW.
Clik here to view.
De igual modo podemos trabajar con los demás tipos de plantillas de lista, siempre haciendo una copia para mantener el original y de ahí podemos personalizar a nuestro gusto.
Espero les sea de utilidad este artículo y nos vemos pronto!
Image may be NSFW.Clik here to view.