BannerAnuncios

lunes, 11 de agosto de 2014

Artículo: Cómo crear Botones en la Cinta de Opciones o Ribbon de Excel con XML.

Crear Botones en ficha personalizada
Resultado Final de este Artículo.
En el artículo anterior, llegamos a crear dos fichas personalizadas en la Cinta de Opciones de Excel, en la Ribbon. Pero estaban vacías, no había controles en su interior. En este artículo vamos a empezar a añadirlos, en concreto vamos a ver como insertar botones en las fichas personalizadas de la Ribbon. A partir de aquí, nos vamos a encontrar con multitud de controles y propiedades que poco a poco iremos explicando en los diferentes artículos. En la imagen de al lado podéis ver el resultado final que obtendremos  al finalizar el artículo. El documento que voy a usar, lo podéis descargar pulsando en el siguiente enlace.


Si habéis seguido los pasos del artículo anterior podéis usar el vuestro. Por lo tanto abrimos el documento  en el Custom UI Editor y así veremos el código XML de ese artículo

Código XML para definir dos fichas personalizadas
Código XML para definir dos fichas personalizadas.

Lo primero que debemos tener en cuenta para añadir controles en las fichas de la Ribbon, es que deben estar dentro de otro contenedor que todavía no hemos usado. En el anterior artículo llegamos hasta la etiqueta "tab", que era la que realmente creaba la ficha. Pero todavía necesitamos otro para poder crear botones u otros controles. Escribimos las siguientes líneas entre las etiquetas que definían la ficha "FACTURACIÓN". 

<group id="grupoFacturas" label="Facturas">
</group>
Creamos un grupo de controles con la etiqueta group
Creamos un grupo de controles con la etiqueta group.

Con la etiqueta "group" que hemos añadido dentro de "tab", creamos un grupo de controles. Si os fijáis en cualquiera de las fichas que tiene Excel de serie, veréis que los controles están distribuidos en grupos de controles. Por ejemplo en la ficha "Inicio" tenemos los grupos "Fuente", "Alineación", "Número", etc...

Grupos de controles en la ficha "Inicio" de Excel 2013
Grupos de controles en la ficha "Inicio" de Excel 2013.

Bueno, pues con la etiqueta "group" creamos un grupo de controles en el que posteriormente iremos añadiendo botones. Se pueden insertar más tipos de controles, pero en este artículo sólo usaremos botones. Esta etiqueta es muy sencilla e igual que todas las etiquetas que pueden contener otros elementos, tiene etiqueta de inicio y de fin. En cuanto a las propiedades, solo hemos usado la propiedad "id" para identificar el grupo y la propiedad "label" para indicar el texto que se verá como nombre del grupo. En este caso como texto hemos puesto "Facturas".

Ficha con el grupo de controles creado pero vacío
Ficha con el grupo de controles creado pero vacío.

En la imagen anterior podéis ver el grupo de controles y en la parte inferior tiene el nombre que hemos indicado en la propiedad "label". Como no hemos metido todavía controles en su interior, está vacío. Como podéis comprobar en las fichas de Excel, puede haber más de un grupo en una ficha. Lo único que habría que hacer es añadir tantas etiquetas "group" como grupos tenga. Por ejemplo puedo añadir otro grupo dentro de la primera ficha, en este caso un grupo dedicado a los albaranes, a las notas de entrega.

<group id="grupoAlbaranes" label="Albaranes">
</group>
Código XML para definir un grupo de controles
Código XML para definir un grupo de controles.

Igual que con las fichas, el orden en el que aparecerán los grupos depende del orden en el que los escribáis en el código XML. Este sería el resultado que obtenemos:

Dos grupos vacíos en la ficha personalizada
Dos grupos vacíos en la ficha personalizada.


Antes de continuar leyendo el artículo recuerda que todo lo que os ofrezco aquí es 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!!!!!!!!!!!!!!


Vamos con los controles, de momento añadiremos unos botones. Para hacerlo debemos utilizar la etiqueta "button". Escribimos las siguientes líneas dentro del grupo "Facturas".

<button id="botonNuevaFactura" label="Nueva" size="large" imageMso="FileNew" />
<button id="botonGuardarFactura" label="Guardar" size="large" imageMso="FileSave" />

Usamos la etiqueta button para crear botones
Usamos la etiqueta button para crear botones.
En este caso hemos añadido dos botones. Las líneas son casi idénticas, exceptuando los cambios obvios porque se trata de dos botones diferentes. Este es el resultado que conseguimos, ahora os explico que hay en esas dos líneas.

Los dos Botones creados dentro del grupo Facturas con la etiqueta button
Los dos Botones creados dentro del grupo Facturas con la etiqueta button.

Antes de empezar con las propiedades fijaros que en este caso no hay etiqueta de apertura y de cierre. El botón se define con una sola etiqueta que finaliza con "/>". Así se definen los elementos que no contienen otros elementos, otros controles. Como el botón ya no va tener otros controles en su interior, no debe haber etiqueta de apertura y cierre, sólo una que se abre con "<" y se cierra con "/>". Ahora vamos con las propiedades, la primera ya la hemos comentado, "id". Con ella identificamos el control, en este caso el botón. En ocasiones puede ser interesante saber que botón se ha pulsado y desde código, desde VBA, podríamos usar esta propiedad para saber el id del botón pulsado. Estoy ya lo usaremos más adelante.

Siguiente propiedad, "label". Lo mismo que en los usos anteriores, en ella indicamos el texto que aparecerán en el botón. En este tipo de controles, para identificar visualmente los botones, además del texto, también podemos indicar una imagen que aparecerá junto con el texto.  Ahora lo comentaremos.

Establecemos el texto del botón usando la propiedad label
Establecemos el texto del botón usando la propiedad label.

Siguiente propiedad, "size". Con esta propiedad controlamos el tamaño del botón, tenemos dos posibilidades. En el ejemplo hemos indicado "large" para indicar que lo queremos grande, si lo queremos pequeño debemos usar "normal". En la siguiente imagen podéis ver la diferencia de tamaño.

<button id="botonNuevaFactura" label="Nueva" size="large" imageMso="FileNew" />
<button id="botonGuardarFactura" label="Guardar" size="normal" imageMso="FileSave" />

Diferencia entre tamaño large y normal en los botones de la Ribbon
Diferencia entre tamaño large y normal en los botones de la Ribbon.

Cuando hay botones pequeños, tenemos algunas opciones para controlar cómo se distribuyen por el grupo de controles, pero os las explicaré en artículos posteriores. Seguimos con la última propiedad, "imageMso", con ella controlamos la imagen que se muestra en el botón. Esta propiedad la debemos usar cuando queremos que el botón muestre una imagen de alguno de los controles que tiene Excel de serie. Por ejemplo, en el primer botón he establecido esta propiedad a "FileNew", con esto le estoy indicando que ese botón tendrá la misma imagen que el botón que me permite crear nuevos documentos en Excel. En esa propiedad hay que utilizar el identificador que tiene el control del que queremos usar su imagen. En el primer botón hemos usado "FileNew" y en el segundo he usado "FileSave" que se correspondería al botón u opción de guardar un documento. En la siguiente imagen podéis ver esas imágenes cuando se muestran en la "Barra de Herramientas de Acceso Rápido" para ejecutar esas funciones.

Usamos imágenes de los controles nativos de Excel
Usamos imágenes de los controles nativos de Excel.

Ya os comenté en el artículo anterior que cuando una propiedad acaba en "Mso", significa que se utilizará algo de lo que lleva Excel creado de serie. Se usará algún nombre que identifica un control de la interface de Excel. En este caso los botones para crear nuevos documentos y guardarlos. Seguro que muchos estaréis pensando, ¿Cómo descubro esos identificadores? 

Por Internet hay algunas herramientas que te informan de los identificadores que tienen los controles en los programas de Office. Yo suelo utilizar un documento de Excel, que Microsoft tiene disponible para descargar... En él, se muestran las imágenes con los identificadores, está preparado para la versión 2007 pero también lo podemos usar para obtener los identificadores de las otras versiones. Lo podéis descargar aquí:


Cuando abráis el documento, en la ficha "Desarrollador", tendréis disponibles unos botones que os permitirán obtener el identificador de los controles que os interesen. Solo hay que pulsar encima del control que os interese y os mostrará el identificador.

Documento para obtener los identificadores de imágenes
Documento para obtener los identificadores de imágenes.
Identificador de la opción para crear un nuevo documento
Identificador de la opción para crear un nuevo documento.

Bueno, pues con esto ya hemos acabado por este artículo, sólo me queda comentaros dos cosas. La primera es que a los botones también se les puede poner imágenes vuestras, pero esto os lo explicaré en otro artículo, en ese caso habría que utilizar la propiedad "image". Y la segunda es que de todas las propiedades que tiene un botón, nos falta utilizar la más importante... La que nos permite indicar que pasará cuando se pulse, pero esto también se irá a otro artículo, puede que al siguiente dedicado a este tema ;)

*Siguiente Artículo:*:

8 comentarios:

  1. Excelente todo. Muy pedagógico, sobre todo pratico y util.

    Gracias.

    ResponderEliminar
  2. hola, necesito poner el numero de mis facturas en la ribbon y poner un boton consultar, me podrias indicar que etiqueta debo usar en xmls para ver un input type text en la ribbon

    ResponderEliminar
  3. Excelente tus articulos sobre el tema. Iba lo mas de bien. Tome mi archivo de excel con macros, empece a agregarle imagenes. Entraba al archivo de excel y de un momento a otro, volvi a entrar al editor de la Cinta y todo el codigo y las imagenes habia desaparecido. Lo agrego guardo y cuando vuelvo a abrirlo todo ha desaparecido. No se que pasara. Que puede ser?

    ResponderEliminar
    Respuestas
    1. No te se decir, pero si que me suena que no le gustaba mucho al Custom UI Editor que abriéramos el documento de Excel mientras el lo tenga abierto. Me suena que alguna vez me hizo alguna así por eso.
      Saludos.

      Eliminar
  4. David: Si no aparece la pestaña con los iconos disponibles, como puedo activarla ?
    Gracias, muy bueno el tutorial

    ResponderEliminar
  5. David, gracias por tu tan necesario trabajo. Eres todo un referente. Me ocurre un pequeño fallo sin importancia, pero que me gustaría destacar. Cuando estoy en el paso para la creación de los Grupos de Facturas y Albaranes, y guardo el código correspondiente, por algún motivo al abrir el archivo Excel no los muestra. Y, sin embargo, al pasar al siguiente paso con los Botones, sí que entonces muestra el Grupo siempre que se le hayan añadido Botones previamente. ¿Es normal en Excel 2016 o debería preocuparme? Saludos

    ResponderEliminar
  6. Buenos días, me sucede exactamente lo mismo que a Unknown; nos podrías despejar la duda por favor.
    Muchas gracias.

    ResponderEliminar

Nota: solo los miembros de este blog pueden publicar comentarios.