UDA-Utilidades de desarrollo de aplicaciones • UDA-Componentes RUP. Botonera http://uda-ejie.github.io/

1. UDA – Utilidades de desarrollo de aplicaciones by EJIE is licensed under a Creative Commons Reconocimiento-
NoComercial-CompartirIgual 3.0 Unported License.
UDA - Utilidades de Desarrollo de Aplicaciones
Componentes RUP – Botonera
Fecha: 22/11/2013 Referencia:
EJIE S.A.
Mediterráneo, 14
Tel. 945 01 73 00*
Fax. 945 01 73 01
01010 Vitoria-Gasteiz
Posta-kutxatila / Apartado: 809
01080 Vitoria-Gasteiz
www.ejie.es

2. Componentes RUP – Botonera i/11
Control de documentación
Título de documento: Componentes RUP – Botonera
Histórico de versiones
Código: Versión: Fecha: Resumen de cambios:
1.0.0 06/06/2011 Primera versión.
1.0.1 18/07/2011 Correcciones en los números de versión de ficheros.
1.1.0 14/09/2011
Actualización de las versiones de las librerías
JavaScript subyacentes.
Añadido el apartado Integración con UDA
2.0.0 11/07/2011
Cambios para que pueda manejarse la botonera con el
botón “tabulador”. Añadido de nuevo parámetro para
permitir definir botones alineados a la derecha.
2.1.0 18/09/2012
Actualización de las versiones de las librerías
JavaScript subyacentes.
2.4.0 22/11/2013
Se distribuye la versión minimizada de los ficheros
javascript y de estilos de RUP.
Cambios producidos desde la última versión
Se distribuye la versión minimizada de los ficheros javascript y de estilos de RUP.
Control de difusión
Responsable: Ander Martínez
Aprobado por:
Firma: Fecha:
Distribución:
Referencias de archivo
Autor:

3. Componentes RUP – Botonera ii/11
Nombre archivo:
Localización:

4. Componentes RUP – Botonera iii/11
Contenido
Capítulo/sección Página
1. Introducción 4
2. Ejemplo 4
3. Casos de uso 4
4. Infraestructura 4
4.1. Ficheros 4
4.2. Dependencias 5
4.3. Versión minimizada 5
5. Invocación 5
6. Parámetros 6
7. Sobreescritura del theme 7
8. Integración con UDA 10

5. Componentes RUP – Botonera 4/11
1. Introducción
La descripción del Componente Botonera, visto desde el punto de vista de RUP, es la siguiente:
Se les presenta a los usuarios una barra de botones con diversas funcionalidades relacionadas a
elementos de la página. Gracias a este componente se presentan, ordenan y agrupan las distintas
funcionalidades gestionadas por las aplicaciones.
2. Ejemplo
Se presentan a continuación un ejemplo del componente:
3. Casos de uso
Se aconseja la utilización de este componente:
• En los casos en los que sea preciso presentar, ordenar y agrupar múltiples funciones sobre una
misma página o componente.
• Cuando se requiera agrupar las funciones (botones) por categorías mediante un desplegable.
4. Infraestructura
A continuación se comenta la infraestructura necesaria para el correcto funcionamiento del componente.
• Se requiere la inclusión de los ficheros que implementan el componente (js y css) comentados en
los apartados Ficheros y Dependencias.
4.1. Ficheros
Ruta Javascript: rup/scripts/

6. Componentes RUP – Botonera 5/11
Fichero de plugin: rup.toolbar-x.y.z.js
Ruta theme: rup/basic-theme/
Fichero CSS del theme: theme.rup.toolbar-z.y.z.css
4.2. Dependencias
Por la naturaleza de desarrollo de los componentes (patrones) como plugins basados en la librería
JavaScript jQuery, es necesaria la inclusión del esta. La versión elegida para el desarrollo ha sido la
versión 1.8.0.
• jQuery 1.8.0: http://jquery.com/
La gestión de la ciertas partes visuales de los componentes, se han realizado mediante el plugin jQuery
UI que se basa en jQuery y se utiliza para construir aplicaciones web altamente interactivas. Este plugin,
proporciona abstracciones de bajo nivel de interacción y animación, efectos avanzados de alto nivel,
componentes personalizables (estilos) ente otros. La versión utilizada en el desarrollo ha sido la 1.8.23.
• jQuery UI 1.8.23: http://jqueryui.com/
Los ficheros necesarios para el correcto funcionamiento del componente son:
• jquery-1.8.0.js
• jquery-ui-1.8.23.custom.js
• jquery-ui-1.8.23.custom.css
• rup.base-x.y.z.js
• rup.toolbar-x.y.z.js
• theme.rup.toolbar-x.y.z.css
4.3. Versión minimizada
A partir de la versión v2.4.0 se distribuye la versión minimizada de los componentes RUP. Estos ficheros
contienen la versión compactada y minimizada de los ficheros javascript y de estilos necesarios para el
uso de todos los compontente RUP.
Los ficheros minimizados de RUP son los siguientes:
• rup/scripts/min/rup.min-x.y.z.js
• rup/basic-theme/rup.min-x.y.z.css
Estos ficheros son los que deben utilizarse por las aplicaciones. Las versiones individuales de cada uno
de los componentes solo deberán de emplearse en tareas de desarrollo o depuración.
5. Invocación
Este componente se aplica sobre una capa definida que tendrá como objeto el mostrar una serie de botones
al usuario con diferentes funcionalidades. Será labor del desarrollador definir dicha capa en su página y
definir un identificador que se utilizará en la invocación del componente.

7. Componentes RUP – Botonera 6/11
$("#id_capa").rup_toolbar(properties);
Donde el parámetro “properties” es un objeto (var properties = {};) o bien directamente la declaración de lo
valores directamente. Sus posibles valores se detallan en el siguiente apartado.
6. Parámetros
A continuación se muestran los posibles parámetros de configuración que recibe el componente.
• width: tamaño que tendrá la botonera. Por defecto ocupará toda la página, valor null.
• buttons: array de botones a mostrar. La estructura que debe tener cada botón es la
siguiente:
o i18nCaption: texto que se mostrará en el botón. Obtenido del fichero de literales de
la aplicación.
o css: define el estilo a aplicar. Se utilizará para mostrar imágenes a la izquierda del
botón.
o click: función javascript que se ejecutará cuando se pulse el botón al que se ha
asociado. La función podrá recibir un parámetro “event” que contendrá el
identificador y el texto del botón y se accederá a ellos mediante la sentencia
“event.data.id” y “event.data.caption” respectivamente.
o right: parámetro, booleano, que determina si el botón aparece alineado a la derecha
o a la izquierda. Por defecto, tiene el valor false (alineado a la izquierda).
• mbuttons: array de botones con menú a mostrar. La estructura que debe tener cada botón
con menú es la siguiente (similar a la del botón):
o id: identificador único del botón con menú. [Obligatorio]
o i18nCaption: texto que se mostrará en el botón. Obtenido del fichero de literales de
la aplicación.
o css: define el estilo a aplicar. Se utilizará para mostrar imágenes a la derecha del
botón.
o buttons: array de botones que va a incluir el botón con menú. La estructura es la
misma que tienen los botones normales (ver atributo anterior ‘buttons’).
o right: parámetro, booleano, que determina si el array de botones aparece alineado a
la derecha o a la izquierda. Por defecto, tiene el valor false (alineado a la izquierda).
La internacionalización se realiza mediante el fichero de recursos definido para la aplicación que se
encontrará en la parte estática bajo codAplic/resources/codAplic.i18n.json (con sus variantes según
idioma ej: codAplic/resources/codAplic.i18n_es.json). En dicho fichero se deberá declarar un objeto
JSON cuyo nombre será el mismo que el identificador del elemento sobre el que se aplica el
componente.
Un ejemplo de una definición de un componente botonera podría ser la siguiente:

8. Componentes RUP – Botonera 7/11
$("#id_capa").rup_toolbar({
width: 360,
buttons:[{ i18nCaption:"buscar", css:"buscar", click:
handlerBoton}],
mbuttons:[
{id: "mbuton1", i18nCaption:"otros ", buttons:[
{i18nCaption:"nuevo", css:"nuevo", click:
handlerMButtons},
{i18nCaption:"editar", css:"editar", click:
handlerMButtons}
]},
{id : "mbuton2", i18nCaption:"ficheros", buttons:[
{i18nCaption:"DLL", css:"dll", click: handlerMButtons},
{i18nCaption:"DOC", css:"doc", click: handlerMButtons}
]}
]
});
7. Sobreescritura del theme
El componente toolbar se presenta con una apariencia visual definida en el fichero de estilos
theme.rup.toolbar-x.y.z.css.
Si se quiere modificar la apariencia del componente, se recomienda redefinir el/los estilos necesarios en un
fichero de estilos propio de la aplicación situado dentro del proyecto de estáticos
(codAppStatics/WebContent/codApp/styles).
Los estilos del componente se basan en los estilos básicos de los widgets de jQuery UI, con lo que los
cambios que se realicen sobre su fichero de estilos manualmente o mediante el uso de la herramienta
Theme Roller podrán tener repercusión sobre todos los componentes que compartan esos mismos estilos
(pudiendo ser el nivel de repercusión general o ajustado a un subconjunto de componentes).
A continuación se muestran unas capturas del componente con los estilos asociados dependiendo del uso
de imágenes. Los estilos que contengan la palabra “ui-“ son los propios de jQuery UI que en caso de ser
necesario serán sobrescritos y no se comentarán en este documento por no ser su ámbito.
La primera captura dispone los botones en vertical para mejorar la compresión de los estilos aplicados a
cada elemento.
La segunda captura muestra los estilos asociados al menú desplegable.

9. Componentes RUP – Botonera 8/11
• .rup-toolbar: estilo asociado a la capa que contiene la botonera.
• .rup-toolbar_button: estilo asociado a los botones.
• .rup-toolbar_button:hover: estilo asociado a los botones cuando el cursor está encima.
• .rup-toolbar_menuButton: estilo asociado al botón que despliega un menú.
• .rup-toolbar_menuButton:hover: estilo asociado al botón que despliega un menú cuando el cursor
está encima.
• .rup- toolbar_menuButtonSlided: estilo asociado al botón que despliega un menú de botones cuando
está desplegado el menú pero sin el cursor encima del botón.
• .rup- toolbar_menuButtonContainer: estilo asociado a la capa que contiene el menú desplegable del
“mbutton” (botón que despliega menú con botones).
• .rup- toolbar_menuButtonContainer: estilo asociado a cada botón del menú desplegable.
• .rup- toolbar_menuButtonIcon: estilo de la imagen asociada al botón que despliega un menú. Por
defecto tomará la imagen seleccionada en el theme de jQuery UI.
• .rup- toolbar_menuButtonSlided .rup- toolbar_menuButtonIcon: estilo de la imagen asociada al botón
que despliega un menú cuando este se encuentra desplegado. Por defecto tomará la imagen
seleccionada en el theme de jQuery UI.
• .rup-toolbar_menuButtonElement .ui-button-text: estilo asociado al texto de cada botón del menú
desplegable.
Se ha establecido que los tamaños de los iconos que se muestran en la botonera sean de 18x18 píxeles. En
caso de querer modificar dicho tamaño se deberá sobrescribir los estilos:
.rup-toolbar_button .ui-button-icon-primary
.rup-toolbar_menuButton .ui-button-icon-primary
Se incluye una serie de iconos básicos que se muestran a continuación. Los nombres son significativos para
indicar claramente la imagen a mostrar. Si se desea que la imagen salga deshabilitada (tonalidades grises),

10. Componentes RUP – Botonera 9/11
bastará con añadir el estilo “disabled” al elemento que contenga el estilo de la imagen. A continuación se
muestran los iconos incluidos:
Estilo Imagen Imagen deshabilitada
.borrar
.buscar
.cancelar
.editar
.filtrar
.imprimir
.nuevo

11. Componentes RUP – Botonera 10/11
Adicionalmente también se incluye una iconografía básica para representar los diferentes tipos de
extensiones que suelen tener los ficheros.
Estilo Imagen
.dll
.doc
.exe
.gif
.jpg
.js
.pdf
.ppt
.txt
.xls
.zip
8. Integración con UDA
No aplica.