Artículo: Cómo crear fichas en la Cinta de Opciones con XML y el Custom UI Editor.

Ficha Personalizada que vamos a crear.

Después de la pequeña introducción del artículo anterior, vamos a crear unas fichas personalizadas en la Ribbon, usando el Custom UI Editor. En este ejemplo vamos a crear algo muy sencillo, como es el primer ejemplo nos vamos a centrar más en conocer detalles del Custom UI Editor y del lenguaje XML. En este artículo sólo vamos a escribir el código XML necesario para mostrar dos fichas nuevas en la Cinta de Opciones de Excel. En el siguiente artículo les añadiremos controles, pero en este sólo las vamos a crear. En concreto vamos a crear dos fichas llamadas "Facturación" y "Productos". Vamos a suponer que vamos a crear un documento que nos permita llevar la gestión de un pequeño negocio. Pero fijaros que estoy hablando de suponer, no vamos a desarrollar el documento por completo, sólo lo vamos a utilizar para las explicaciones relacionadas con la Ribbon. Recordad que yo utilizo la versión 2013 de Excel, pero todo lo que expliqué en este artículo funcionará igual en Excel 2010.

Para empezar, tenéis que crear un documento nuevo en Excel y lo debéis guardar, yo por ejemplo le voy a llamar "GestionNegocio". Cuidado, porque en el tipo de archivo tenéis que elegir Libro de Excel habilitado para macros (*.xlsm). Los controles que vamos a crear en los artículos van a interactuar con macros, con código VBA y por lo tanto el archivo tiene que tener este formato para poder contener ese código.

Guardar el documento como Libro habilitado para Macros.

Una vez guardado el documento, cerráis Excel o el documento, lo que más rápido os parezca... Y así, de momento, ya hemos acabado con el trabajo en Excel, ahora toca el trabajo en el "Custom UI Editor". En el artículo anterior os comenté donde conseguir este programa libre, podéis acceder a él para descargarlo si todavía no lo tenéis. Lo buscamos en Windows y lo ejecutamos... En cuando se cargue, abrimos el documento que acabamos de crear en Excel.

Custom UI Editor con el documento abierto.

Al hacerlo, la pantalla se dividirá en dos. En la parte izquierda del programa nos muestra el nombre del documento que tenemos abierto. Si el archivo tendría hecha una personalización, veríamos algo más, en esa parte izquierda, pero como no es así solo vemos el nombre del documento. Enseguida os contaré que es lo que veríamos. La parte derecha la veréis completamente vacía por la misma razón, todavía no hemos personalizado el documento. Ahí deberíamos ver el código XML que define la personalización que hemos realizado. Para empezar con el trabajo debemos añadir a nuestro documento el archivo XML que os comenté en el artículo anterior, el que tenía que contener la definición de la cinta personalizada o las modificaciones que hagamos en la Interface de Usuario de Excel. Para hacerlo debemos acceder al menú "Insert" y ahí tenemos dos opciones.

Añadir archivo XML al archivo de Excel.

Como podéis ver en la imagen, se puede elegir entre crear una personalización para Office 2010 o 2007. Ya os comenté en el artículo anterior que hay pequeñas diferencias entre ambas versiones y por eso se da la opción de crear una personalización específica para cada versión. En el caso de Excel 2013 también se usa la de la versión 2010, aunque no lo ofrezca como opción, funcionará sin problemas. Este programa es muy antiguo y no se ha actualizado para la versión 2013 porque no hace falta, con la personalización de la versión 2010 funciona perfectamente.

Archivo XML de personalización insertado en el documento de Excel.

En mi caso he seleccionado la opción 2010 y ya podéis ver el resultado. Como os comenté en el artículo anterior para personalizar la interface de Excel, en este caso la cinta de opciones, en la versión 2010/2013 de Excel hay que insertar un archivo XML llamado "customUI14.xml"... Y eso es lo que acaba de hacer el programa. Si usáis la versión 2007 deberíais seleccionar su opción para insertar el archivo XML correcto, que en ese caso se llamaría "customUI.xml".

Archivo XML insertado para la versión 2007.

En el artículo anterior os comenté que si queréis podéis añadir los dos archivos de configuración a un documento. Si pensáis que puede ser interesante que cada versión, 2007 por un lado y 2010/2013 por otro, tengan personalizaciones diferentes, lo podéis hacer. Lo único que tenéis que hacer es volver al menú "Insert" y seleccionar la versión que todavía no habéis metido. Así acabaréis con dos archivos de configuración en el documento de Excel que se adaptarán a la versión que usemos.

Dos archivos XML insertados para cada una de las versiones.

Yo sigo adelante con el archivo de la versión 2010/2013 y vamos a empezar a escribir código XML. Usando algunas de las plantillas que hay en el menú "Insert" podríamos ahorrarnos algo de escritura de código, pero no las voy a usar. Como añaden más líneas de las que necesitamos y habría que borrar algunas, prefiero empezar escribiendo todo manual y explicando cada una de las líneas que añadimos. Las dos primeras líneas que tenemos que añadir son las siguientes.

<customUI xmlns="http://schemas.microsoft.com/office/2009/07/customui">
</customUI>

Líneas que definen una personalización de la Interface de Usuario de Excel.

Con estas dos primeras líneas estamos definiendo una personalización de la Interface de Usuario de Excel. Cuando se abra el documento, Excel mirará este archivo y al encontrar estas dos líneas, ya sabe que hemos personalizado algo y que tiene que prestar atención a lo que estará entre estas dos líneas. La primera línea es la de apertura y la última es la de cierre. Todo lo que forme parte de la personalización deberá estar entre estas dos líneas. Esta es la estructura del lenguaje XML, se basa en elementos que se definen con etiquetas. En este caso hay una etiqueta de apertura, la que empieza por "<customUI" y la de cierre "</customUI>". Cuando hay etiqueta de apertura y de cierre, la de cierre siempre es el elemento que se crea con una barra por delante, en este caso el elemento era un customUI, una personalización de la interface de usuario.


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!!!!!!!!!!!!!!

Con estas dos líneas de momento, visualmente no veríamos nada en el documento, añadimos las siguientes líneas entre las líneas anteriores.

<ribbon>
</ribbon>

Definimos una personalización en la Cinta de Opciones con la etiqueta Ribbon.

Con estas dos líneas le estamos diciendo que vamos a modificar algo de la Ribbon, algo de la Cinta de Opciones. Vamos a crear una personalización en la Ribbon, todas las fichas o modificaciones que le hagamos aparecerán entre estas dos líneas. Un detalle que no he comentado y que es muy importante que tengáis en cuenta es el siguiente: XML diferencia entre mayúsculas y minúsculas, esto significa que si por ejemplo escribís Ribbon en lugar de ribbon, no funcionará. Hay que tener mucho cuidado con esto. De momento ya veis que todos los elementos que utilizamos empiezan por minúsculas, pueden tener mayúsculas por el medio, como el caso de "customUI", pero siempre empiezan por minúscula. Seguimos, añadimos más líneas, ahora entre las etiquetas "ribbon".

<tabs>
</tabs>

Etiqueta "tabs" que contendrá las fichas que vamos a definir.

En este caso utilizamos la etiqueta "tabs", esta etiqueta es un contenedor para todas las fichas que creemos en el documento. Fijaros que hasta aquí, todos los elementos que hemos definido o usado tienen su etiqueta de apertura y de cierre. Esto es así porque todos son contenedores de otros elementos, se trata de ir accediendo a los diferentes niveles del Interface de Usuario de Excel hasta llegar al que queremos modificar. Es como cuando te hacen un regalo y dentro de una caja, hay otra, y dentro de esta hay otras y así hasta llegar al final. Hasta aquí hemos hecho el siguiente recorrido:

• Hemos abierto el "customUI" que es el nivel que engloba a todo el Interface de Usuario de Excel.
• A continuación hemos entrado a la "ribbon" que nos permite acceder a la Cinta de Opciones que se encuentra dentro de la interface de Excel.
• Después dentro de la ribbon, accedemos a "tabs" para poder trabajar con las fichas que forman la Cinta de Opciones, en concreto para poder crear las fichas personalizadas en el siguiente paso.

Ahora, como os acabo de decir, el siguiente paso es crear dentro de tabs unas fichas personalizada, esto lo hacemos usando la etiqueta "tab". Escribimos las siguientes líneas dentro de "tabs".

<tab id="fichaFacturacion" label="FACTURACIÓN">
</tab>

Con la etiqueta "tab" creamos una ficha personalizada en la Cinta de Opciones.

En estas dos líneas ya tenemos algo más que contar. Para definir una ficha nueva dentro de la cinta de opciones, debemos utilizar la etiqueta "tab" e indicar algunas opciones o propiedades que describirán la ficha. Para empezar indicamos un "id", un identificador de la ficha. En nuestro ejemplo no lo vamos a usar pero conviene que todos los controles que defináis tengan un id único que les identifique. Cuando avancemos más en los artículos veremos cómo este id que identifica a cada control nos puede ser de mucha utilidad desde Visual Basic, desde VBA. A la hora de utilizar las propiedades de una etiqueta, siempre se hace igual: Se pone el nombre de la propiedad y a continuación entre comillas dobles el valor que le damos a la propiedad, en este caso el id, el nombre que tendrá el control. En las anteriores etiquetas no hemos indicado id porque en realidad no definían nada, eran contenedores de otros elementos. Aunque "tab" también va ser contenedor de más etiquetas, de más elementos, ya va tener una representación visual en Excel y por eso ya conviene tenerla identificada.

La otra propiedad que utilizamos dentro de "tab" es "label". Esta propiedad aparece en muchos controles que iremos usando a lo largo de los artículos y sirve para establecer el texto que muestra el control. En este caso es el título de la ficha, el nombre de la ficha que se ve en Excel. En la siguiente imagen podéis ver la ficha creada con el texto que hemos indicado en label. 

Aquí podemos ver el resultado del código XML, una ficha personalizada.

Llegados a este punto, con "tab", por fin obtenemos un resultado visual en la cinta de opciones, por fin percibimos un cambio. Que de momento sólo se trata de una ficha vacía pero ya es algo. En este caso hemos añadido una sola ficha, pero si necesitamos más... Lo único que habría que hacer es añadir más etiquetas "tab", una por cada ficha que nos interese crear. Por ejemplo en la siguiente imagen podemos ver cómo hemos añadido una segunda ficha llamada "Productos".

Dos fichas personalizadas en la Cinta de Opciones.

Seguimos, casi hemos acabado. Ahora antes de acabar el artículo, os voy a explicar un par de propiedades de "tab" que os pueden resultar interesantes. Para empezar la propiedad "insertBeforeMso". Si os fijáis en las imágenes anteriores, las fichas que creamos se crean al final de las que tiene Excel de serie. Bueno, pues esto se puede cambiar, las podemos situar donde queramos. Voy a modificar el código XML de las dos fichas para utilizar esta propiedad:

<tab id="fichaFacturacion" label="FACTURACIÓN" insertBeforeMso="TabHome">
</tab>
<tab id="fichaProductos" label="PRODUCTOS" insertBeforeMso="TabHome">
</tab>

He utilizado esa propiedad en las dos fichas, en ambos casos he asignado el valor "TabHome", ¿Qué significa esto? Bueno, pues la propiedad "insertBeforeMso" nos permite indicar delante de que ficha de las que tiene Excel de serie, queremos colocar la nuestra. En este caso le estoy indicando que quiero las dos fichas por delante de la ficha "Inicio". El nombre de la ficha hay que ponerlo en Inglés por eso he puesto lo de "TabHome". Si abrís de nuevo el documento en Excel, veréis que ahora tenemos colocadas las dos fichas justo delante de la ficha "Inicio".

Colocamos las fichas antes que la de "Inicio".

Las fichas siempre aparecen en el orden en el que las creamos en el código XML, pero con esta propiedad le podemos indicar antes de que ficha de las que tiene Excel de serie, queremos que se sitúe. Cuando una propiedad acaba en "Mso", como en este caso, significa que nos vamos a referir a uno de los objetos que forman Excel, en este caso a una ficha. No os preocupéis esto os suena raro ahora, vamos a encontrarnos con muchos ejemplos en los artículos. Si en lugar de antes, queréis indicar después de que ficha se creará la vuestra... Podéis utilizar la propiedad "insertAfterMso", en la que podemos indicar después de que ficha queremos que aparezca la ficha personalizada.

Lo único que necesitáis es descubrir los nombres en Inglés de las fichas de Excel y después utilizar una u otra propiedad dependiendo de lo que necesitéis. Para ayudaros a descubrir los nombres en Inglés os podéis descargar los siguientes archivos de la página de Microsoft, en los que podéis encontrar listados de los nombres de todos los objetos que forman parte de los programas de Office. En la siguiente imagen por ejemplo, podéis ver los nombres de las fichas que forman Excel 2013 y a continuación tenéis los enlaces para descargar el que os interese.

Documento con los nombres de los controles que forman Excel 2013.

• Office 2007 System Document: Lists of Control IDs.
• Office 2010 Help Files: Office Fluent User Interface Control Identifiers.
• Office 2013 Help Files: Office Fluent User Interface Control Identifiers.

Bueno, pues ya está. El siguiente paso, podría ser añadir controles a la ficha, pero esto lo vamos a dejar para el siguiente artículo dedicado a este tema en el que añadiremos algún botón a las fichas que hemos creado hoy y seguiremos conociendo más detalles de la Interface de Usuario de Excel.

*Siguiente Artículo:*:

• 11/08/2014: Cómo crear Botones en la Cinta de Opciones o Ribbon de Excel con XML. Avanzado.