UDA-Componentes RUP. Botonera
0 recomendaciones722 vistas
El documento describe el componente 'botonera' dentro de la herramienta de desarrollo de aplicaciones UDA, enfocándose en su funcionalidad, uso y estructura técnica. Se detallan versiones, dependencias de librerías, ejemplos de implementación, parámetros de configuración, y opciones de personalización de estilos. Este componente permite a los desarrolladores presentar y agrupar múltiples funciones en una interfaz web mediante una barra de botones.
![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:](https://image.slidesharecdn.com/componentesrup-botonera-141219025303-conversion-gate01/85/UDA-Componentes-RUP-Botonera-7-320.jpg)
![Componentes RUP – Botonera 7/11
$("#id_capa").rup_toolbar({
width : 360,
buttons : [ {
i18nCaption : "buscar", css : "buscar", click : handlerBoton
}, {
i18nCaption : "filtrar", css : "filtrar",
click : handlerBoton
}, {
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.](https://image.slidesharecdn.com/componentesrup-botonera-141219025303-conversion-gate01/85/UDA-Componentes-RUP-Botonera-8-320.jpg)
UDA-Componentes RUP. Botonera
- 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: 27/06/2014 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. 2.4.2 27/06/2014 Actualización del ejemplo de definición de la toolbar. Cambios producidos desde la última versión Actualización del ejemplo de definición de la toolbar. 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 }, { i18nCaption : "filtrar", css : "filtrar", click : handlerBoton }, { 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.
- 9. Componentes RUP – Botonera 8/11 La segunda captura muestra los estilos asociados al menú desplegable. • .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
- 10. Componentes RUP – Botonera 9/11 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), 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.