lunes, 6 de octubre de 2014

Artículo: Cómo usar nuestras imágenes en los Botones de la Ribbon de Excel usando el Custom UI Editor.

Botones en la Ribbon con nuestras propias imágenes.
Resultado final del artículo.
En los artículos anteriores, os he hablado de algunas de las propiedades que tiene "button" para crear botones en las fichas de la "Cinta de Opciones". Por ejemplo he hablado de las propiedades "size", "label", "imageMso"... De esas propiedades que ya hemos visto os puedo decir que son básicas para poder definir botones, pero también os puedo decir que hay muchas más que nos permitirán ajustar los botones a lo que realmente necesitamos. En este artículo voy a empezar a trabajar con la propiedad o atributo "image", con ella podremos utilizar en los botones de la Ribbon, nuestras imágenes. En los artículos anteriores os enseñé como utilizar imágenes de otros comandos de los programas de Office, en este os voy a enseñar una de las maneras que tenemos para utilizar las nuestras. Para este artículo voy a utilizar el último documento que he utilizado en la serie de artículos dedicados a este tema. Si no lo tenéis lo podéis descargar en el siguiente enlace.


También vais a necesitar las imágenes que voy a usar para los botones, las podéis descargar a continuación.


Antes de empezar con el trabajo, me gustaría aclarar un detalle. En este artículo vamos a usar para los botones, imágenes que forman parte del documento de Excel con el que estamos trabajando. Es decir, las imágenes estarán dentro del archivo que contiene el documento para el que estamos creando la ficha personalizada. Con el "Custom UI Editor" podemos añadir imágenes dentro de los documentos de Excel y así podemos usarlas en el código XML para definir las imágenes de los botones que creemos. Esta es la posibilidad más sencilla que tenemos para usar imágenes nuestras en los botones de la Ribbon. Si queremos usar imágenes que están fuera del documento, imágenes que por ejemplo están guardadas en una carpeta de nuestro disco duro... Tendremos que hacer más pasos de los que vamos a ver aquí, será un poco más difícil. En este artículo nos vamos a centrar en la primera posibilidad, las imágenes que están almacenadas fuera del documento las dejaremos para artículos posteriores.

Imágenes insertadas dentro de un proyecto o documento de Excel.
Imágenes insertadas dentro de un proyecto o documento de Excel.

Vamos con el tema de este artículo. Para empezar a utilizar nuestras imágenes en los botones, lo primero es tenerlas preparadas. No os voy a dar una "lección maestra" sobre qué características deben tener las imágenes que uséis, pero sí que os voy a dar algunos consejos que deberíais tener en cuenta. Para empezar el formato de la imagen, hay muchos formatos gráficos, por ejemplo "JPG", "GIF", "BMP", "PNG"... Cada uno de ellos tiene algunas características que lo diferencian del resto, pero en mi opinión la mejor opción para ser usada en los botones de la "Ribbon", son las imágenes en formato "PNG". La razón principal para recomendaros este formato es que es el que mejor trabaja con las transparencias y este es un detalle muy importante para que no pasen cosas como las que os voy a contar enseguida. El único problema que tienen las imágenes en formato "PNG" es que si las imágenes se encuentran fuera del documento, guardadas en carpetas de nuestro equipo, su uso será mucho más complicado que los otros formatos que os he comentado líneas atrás. Se puede hacer, pero habrá que escribir algo de código VBA. Esa es la única limitación que tienen, pero para lo que vamos a ver en este artículo, ese detalle no nos afecta.

Otro detalle importante, las dimensiones de las imágenes que usaremos. Los "expertos" en temas gráficos recomiendan un tamaño de 32x32 píxeles para las imágenes que usemos en botones grandes y de 16x16 píxeles en botones pequeños. Si usáis imágenes con dimensiones superiores, Excel las reescalará y se pueden producir deformaciones y efectos que afeen el resultado final. Lo mejor es trabajar con esas dimensiones al crear las imágenes que irán en los botones. Para crear las imágenes podéis usar vuestro programa de diseño o de retoque favorito, desde el simple "Paint" al más completo "Photoshop".

Detalles de una imagen preparada para los botones de la Ribbon.
Detalles de una imagen preparada para los botones de la Ribbon.

Empezamos, abrimos el documento de este artículo en el "Custom UI Editor" y comenzaremos añadiendo las imágenes que usaremos en los botones. Si os habéis descargado mis imágenes, tendréis cuatro, dos en formato "JPG" y otras dos en formato "PNG". Vamos a empezar con las imágenes en formato "JPG", así comprobaremos que pueden pasar "cosas raras" si no usáis el formato "PNG". Para añadir las imágenes debemos pulsar el siguiente botón o utilizar la opción "Icons..." del menú "Insert".

Opciones para Insertar imágenes en un documento de Excel.

Opciones para Insertar imágenes en un documento de Excel.
Opciones para Insertar imágenes en un documento de Excel.

Al hacerlo aparecerá la típica ventana de Windows en la que podemos seleccionar archivos para abrirlos. Seleccionamos los dos en formato "JPG" y pulsamos en el botón "Abrir".

Seleccionamos las imágenes que vamos a insertar en el documento de Excel.
Seleccionamos las imágenes que vamos a insertar en el documento de Excel.

Al hacerlo veremos algo nuevo en el "Custom UI Editor", en la parte izquierda tendremos las dos imágenes que ya forman parte del proyecto, del documento. Forman parte del "customUI14.xml" que contiene este documento, a partir de ahora ya las podemos usar desde el código XML. Si no las veis deberéis desplegar el contenido del "customUI14.xml" pulsando en el más que tiene a su izquierda.

Se pulsa en el + para mostrar el contenido del "customUI".
Se pulsa en el + para mostrar el contenido del "customUI".

Las imágenes ya forman parte del proyecto.
Las imágenes ya forman parte del proyecto.



Todos mis vídeos son Gratis, pero si te gusta mi trabajo, puedes realizar una donación para que pueda continuar con este proyecto. Cualquier cantidad desde 1€/1$ es bienvenida. Gracias!!!!!!!!!!!!!!

 

Fijaros que a las dos imágenes se les ha dado el mismo nombre que tenían los archivos que las contenían, se llamaban "Guardar.jpg" y "Nueva.jpg". Se les mantiene el mismo nombre pero sin la extensión, sin el ".jpg". Esos nombres que vemos ahí, son los que tendremos que usar en el código XML. De todas las maneras los podéis cambiar a vuestro gusto, si hacéis clic con el botón secundario del ratón sobre las imágenes... Os aparecerá la opción para cambiar su nombre o mejor dicho su identificador, la opción "Change ID". Se selecciona y se escribe el nuevo identificador que queremos para la imagen.

Opción para cambiar el identificador de la imagen.
Opción para cambiar el identificador de la imagen.

Cambio del ID de la imagen en el Custom UI Editor.
Cambio del ID de la imagen en el Custom UI Editor.

Una vez insertadas, vamos a modificar el código XML de dos de los botones que creamos en los artículos anteriores, los botones para crear y guardar facturas. Debemos dejar el código XML de esos botones así:

<button id="botonNuevaFactura" label="Nueva" size="large" image="Nueva" onAction="Facturas.CrearFactura" />
<button id="botonGuardarFactura" label="Guardar" size="large" image="Guardar" />
El cambio que hemos hecho consiste en eliminar la propiedad "imageMso" que usamos en los artículos anteriores... Y hemos añadido la propiedad "image" en ambos botones. Fijaros que como valor de esas propiedades hemos utilizado los nombres o identificadores que tienen las imágenes que queremos usar, los nombres que vemos en la parte izquierda del "Custom UI Editor". Esto es lo único que hay que hacer, asignar en "image" el "ID" de la imagen que queremos usar como imagen del botón. Ahora cerramos el documento guardando los cambios y lo abrimos en Excel para ver el resultado final.

Los botones ya tienen nuestras imágenes.
Los botones ya tienen nuestras imágenes.

Como podemos ver en la imagen anterior, hasta aquí todo parece que ha ido bien. Tenemos tres botones y los dos primeros tienen las imágenes que hemos insertado en el documento. El tercero mantiene la que le indicamos en los artículos anteriores usando la propiedad "imageMso". Ya veis que ha sido muy sencillo, pero ahora llega el pequeño problema de haber utilizado imágenes en formato "JPG" en lugar de "PNG", el problema se puede ver de dos maneras. Por ejemplo si pasáis el ratón por encima de alguno de los dos botones que tienen imágenes nuestras y comparáis lo que veis con el tercero, os daréis cuenta que pasa algo raro.

Los botones con nuestras imágenes no tienen transparencias.
Los botones con nuestras imágenes no tienen transparencias.

Si os fijáis en la imagen anterior, los botones que usan nuestras imágenes, tienen un pequeño cuadrado blanco alrededor. Cuando las cree tenía un fondo transparente pero al guardarlas en formato "JPG" se ha perdido ese fondo transparente y se creó un fondo de color blanco. Mientras no pasemos el puntero del ratón por encima, no se verán porque la ventana de "Excel 2013" tiene fondo de color blanco. Pero al hacerlo sale ese pequeño defecto porque Excel resalta el botón cuando pasamos por encima de él. Si cambiamos el fondo de la ventana de Excel en las opciones y seleccionamos un color más oscuro, el problema se hará más evidente.

Cambiamos el color de fondo de Excel para mostrar el problema.
Cambiamos el color de fondo de Excel para mostrar el problema.

Comparando estas dos imágenes se ve más claro cómo deberían quedar los botones y como han quedado. La primera no tiene transparencias y la segunda sí, la primera usa imágenes en formato "JPG" y la segunda usa "PNG".


Botones con fondo blanco en formato JPG.
Botones con fondo blanco en formato JPG.
Botones sin fondo, con transparencia en formato PNG.
Botones sin fondo, con transparencia en formato PNG.

Este es el detalle que hace más adecuado el uso de las imágenes en formato "PNG" para los botones de la Ribbon. Con ese formato, que sí que mantienen las transparencias, no habría pasado esto. Vamos a probar con las imágenes "PNG", cerramos el documento en Excel y lo abrimos de nuevo en el "Custom UI Editor".

Para empezar vamos a quitar las imágenes en formato "JPG". Para hacerlo podemos hacer clic con el botón secundario del ratón sobre ellas y seleccionamos la opción "Eliminar", la opción "Remove".

Opción para eliminar imágenes del proyecto de Excel.
Opción para eliminar imágenes del proyecto de Excel.

A continuación insertamos de nuevo las imágenes pero en este caso las de formato "PNG", se llaman igual pero la extensión del nombre del archivo acaba en ".PNG".

Insertamos las imágenes en formato "PNG" al documento de Excel.
Insertamos las imágenes en formato "PNG" al documento de Excel.

Si os fijáis no hay ningún cambio visible en el "Custom UI Editor", las imágenes se llamaban igual, tienen el mismo identificador. Como les había puesto el mismo nombre no hay diferencias entre lo que teníamos antes y ahora. Debido a esto tampoco hace falta cambiar el código XML, todo sigue igual. Ahora sólo nos queda volver a cerrar el Custom UI Editor guardando los cambios y abrir el documento para ver cómo han quedado ahora los botones. Al abrirlo comprobaréis como ahora ya no se ve el fondo blanco que tenían antes los botones. Ahora el fondo es transparente y las imágenes quedan perfectamente integradas con los botones, las imágenes parece que tienen la forma de los dibujos que contienen y no de rectángulo como tenía antes.

Los botones con imágenes PNG quedan perfectamente integrados.
Los botones con imágenes PNG quedan perfectamente integrados.

Bueno pues ya está, esto es lo que os quería explicar en este artículo. A partir de ahora iremos profundizando más en el uso de imágenes personalizadas y entre otras cosas veremos cómo podemos usar imágenes que están almacenadas fuera del documento de Excel, cómo cambiar la imagen de un botón dependiendo de si se cumple una condición o no y muchas cosas mas. Hasta el siguiente artículo ;)

*Siguiente Artículo:*:

7 comentarios:

  1. Estimado blogger,

    Soy Natalia, Responsable de Comunicación de Paperblog. Tras haberlo descubierto, me pongo en contacto contigo para invitarte a conocer el proyecto Paperblog, http://es.paperblog.com, un nuevo servicio de periodismo ciudadano. Paperblog es una plataforma digital que, a modo de revista de blogs, da a conocer los mejores artículos de los blogs inscritos.

    Si el concepto te interesa sólo tienes que proponer tu blog para participar. Los artículos estarían acompañados de tu nombre/seudónimo y ficha de perfil, además de varios vínculos hacia el blog original, al principio y al final de cada uno. Los más interesantes podrán ser seleccionados por el equipo para aparecer en Portada y tú podrás ser seleccionado como Autor del día.

    Espero que te motive el proyecto que iniciamos con tanta ilusión en enero de 2010. Échale un ojo y no dudes en escribirme para conocer más detalles.

    Recibe un cordial y afectuoso saludo,
    Natalia

    ResponderEliminar
  2. Que tal david excelente como siempre, una duda hice el ejercicio pero a la hora de abrir el archivo los iconos no me aparecen. Ya lo chque bien y todo esta igual a lo que explicas no se a que se deba.
    Uso excel 2013

    ResponderEliminar
    Respuestas
    1. Se me había pasado este mensaje. Revisa bien el tema de mayúsculas y minúsculas. Si activas la opción para depurar el código XML que comento en el artículo anterior debería decirte donde está el problema.

      Si sigues sin solucionarlo mándame el archivo y lo miro.

      Saludos.

      Eliminar
  3. Está muy bueno el tuto, me podrias dedir de donde bajar esos iconos, ademas de los tuyos?. Necesito varios que no pusiste en la descarga, entre ello el de eliminar.Gracias

    ResponderEliminar
    Respuestas
    1. El de eliminar está añadido de los que contiene Excel. En el enlace que te pongo puedes ver el código XML necesario para usarlo:

      http://davidasurmendi.blogspot.com.es/2014/08/ejecutar-macro-codigo-vba-desde-boton-cinta-opciones.html

      Eliminar
  4. Hola Soy Mario Quintero

    Tengo un problema inserto las imagenes que he creado pero cuando abro el archivo en Excel no se muestran las imagenes.
    Puedes ayudarme a solucionarlo?
    Gracias.

    ResponderEliminar
  5. Hola David,

    ¿Conoces cómo cambiar los iconos en la Ribbon de Outlook? Me gustaría cambiar los que tengo para las macros que he creado. Porque el Custom UI Editor no lo hace, ¿verdad?

    Gracias, ¡¡y sigue así, tu trabajo es único!!

    ResponderEliminar