UDA-Componentes RUP. Menú contextual

UDA - Utilidades de Desarrollo de Aplicaciones

Componentes RUP – Menú contextual

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

UDA – Utilidades de desarrollo de aplicaciones by EJIE is licensed under a Creative Commons Reconocimiento-NoComercial-CompartirIgual 3.0 Unported License..

Componentes RUP – Menú contextual iii/11

Control de documentación

Título de documento: Componentes RUP – Menú Contextual

Histórico de versiones

Código: Versión: Fecha: Resumen de cambios:

2.2.0 09/05/2013 Primera versión.

2.4.0 22/11/2013 Se distribuye la versión minimizada de los ficheros javascript y de estilos de RUP.

2.4.1 13/03/2014 Nueva propiedad showCursor.

2.4.2 27/06/2014 Nueva propiedad msieCursorCss

Cambios producidos desde la última versión

Nueva propiedad msieCursorCss

Control de difusión

Responsable: Ander Martínez

Aprobado por:

Firma: Fecha:

Distribución:

Referencias de archivo

Autor:

Nombre archivo:

Localización:

Componentes RUP – Menú contextual iv/11

Contenido

Capítulo/sección Página

1. Introducción 5

2. Ejemplo 5

3. Casos de uso 5

4. Infraestructura 5

4.1. Ficheros 5

4.2. Dependencias 6

4.3. Versión minimizada 6

5. Invocación 7

6. Parámetros 7

7. Declaración de opciones 9

8. Funciones 11

9. Sobreescritura del theme 11

10. Integración con UDA 12

Componentes RUP – Menú contextual 5/11

1. Introducción

La descripción del componente menú contextual , visto desde el punto de vista de RUP, es la siguiente:

Un menú contextual consta de un menú dentro de una interfaz gráfica que se muestra a partir de una interacción del usuario. El menú contextual muestra una serie de opciones disponibles en el contexto o estado actual de la aplicación.

2. Ejemplo

Se presenta a continuación un ejemplo de este componente:

3. Casos de uso

Se recomienda el uso del componente:

• Cuando se desee facilitar al usuario el acceso a opciones asociadas a un determinado contexto.

4. Infraestructura

A continuación se comenta la infraestructura necesaria para el correcto funcionamiento del componente.

• Únicamente 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/

Fichero de plugin: rup.contextMenu-x.y.z.js

Ruta theme: rup/basic-theme/

Fichero CSS del theme: theme.rup.contextMenu-x.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 medieante 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/

Las distintas funcionalidades que aporta el componente y las prestaciones generales del mismo, se apoyan en el plugin jQuery contextMenu . Para el correcto funcionamiento del componente Menú contextual, se precisa de la inclusión de dicho plugin.

• jQuery contextMenu: http://medialize.github.io/jQuery-contextMenu/

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

� jquery.contextMenu.js

� rup.base-x.y.z.js

� rup.contextMenu-x.y.z.js

� theme.rup.contextMenu-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 invocará mediante un selector que indicará todos los elementos sobre los que se va a aplicar el componente menú contextual. Un ejemplo de invocación sería el siguiente:

$(selector).rup_contextMenu(properties);

Donde el parámetro “properties” es un objeto (var properties = {};) o bien directamente la declaración de los valores, detallados en el siguiente apartado.

6. Parámetros

A continuación se muestran los posibles parámetros de configuración que recibe el componente.

• items: Objeto que define los elementos que van a mostrarse en el menú contextual. En el siguiente apartado se explicará más en detalle como realizar esta definición.

$( '#contextMenu' ).rup_contextMenu({ items: { "edit" : {name: "Clickable" , icon: "edit" , disabled: false}, "cut" : {name: "Disabled" , icon: "cut" , disabled: true} } });

• appendTo: Especifica el elemento del DOM a partir del cual se va a añadir el menú contextual generado.

appendTo: "#context-menus-container"

• trigger: Determina el evento que va a lanzar la visualización del menú contextual. ("right", "left", "hover", "none").

trigger: 'hover' ,

• reposition: Determina si un menú debe ser reposicionado (true) o reconstruido (false) en el caso de que el evento que lanza la visualización del menú contextual se ejecute por segunda vez.

• delay: Determina el tiempo de retardo antes de mostrar el menú contextual. Solo se aplica sobre el evento “hover”. (por defecto 200)

• autoHide: Indica si el menú contextual debe de ocultarse automáticamente cuando el cursor del ratón abandona la posición del menú contextual y el elemento que lo lanza. (por defecto false)

• zIndex: Especifica el desplazamiento de zIndex que se aplica al calculado. (por defecto 1)

• className: Nombres de clases adicionales que se van a aplicar al menú contextual.


• animation: Determina la animación que se va a aplicar a la hora de mostrar/ocultar el menú contextual. La configuración es la misma que la que utiliza para realizar la de los métodos show y hide jQuery.

animation: {duration: 500, show: "slideDown" , hide: "slideUp" }

• events: Los eventos show y hide se ejecutan antes de el menú se muestre o se oculte. Mediante esta propiedad es posible indicar funciones de callback para ser ejecutadas en estos casos. Permiten devolver false para evitar continuar con el evento.

events: { show: function(opt){

this.addClass( 'currently-showing-menu' ); alert( "Selector: " + opt.selector);

} }

• position: Función de callback que se ejecuta a partir de los eventos indicados en la propiedad trigger. Los parámetros de la función son los siguientes:

o $menu: Objeto jQuery menú.

o x: Coordenada x proporcionada por el evento de mostrar el menú.

o y: Coordenada y proporcionada por el evento de mostrar el menú.ENZAMORA 78908954Ej

position: function($menu, x, y){ $menu.css({top: 123, left: 123});

}

• determinePosition: Determina la posición del menú contextual de acuerdo al elemento disparador.

• callback: Esta propiedad permite especificar una función de callback por defecto para aquellos ítems que no hayan especificado una función propita.

callback: function(key, options) { alert( "clicked: " + key);

}

• build: Función de callback que devuelve el objeto de configuración del componente. En caso de especificar una función para la propiedad build la creación del menú no se realiza inicialmente sino que se demora hasta que se ejecuta el evento que lo muestra.

$( ".contextMenu-other" ).rup_contextMenu({ trigger: 'none' , build: function($trigger, e) { return { callback: function(key, options) { alert( "clicked: " + key); },


items: { "edit" : {name: "Edit" , icon: "edit" }, "cut" : {name: "Cut" , icon: "cut" }, "copy" : {name: "Copy" , icon: "copy" }, "paste" : {name: "Paste" , icon: "paste" }, "delete" : {name: "Delete" , icon: "delete" }, "sep1" : "---------" , "quit" : {name: "Quit" , icon: "quit" } } }; } });

• showCursor: Determina si se va a modificar el estilo del puntero del ratón al posicionarse sobre el elemento que dispone de menú contextual. El tipo de puntero se determina mediante la clase CSS context-menu-cursor.

• msieCursorCss: Esta propiedad se emplea para poder modificar la apariencia del cursor en Internet Explorer al posicionarse sobre un elemento que dispone de un menú contextual. Esto es debido a que el modo en el que hay que realizar la asignación del nuevo cursor no se puede realizar mediante un class. El valor por defecto de la propiedad es el siguiente:

"url(" +$.rup.RUP+ "/basic-theme/cursors/context-menu.cur),default"

7. Declaración de opciones

En este apartado se van a indicar las diferentes opciones de configuración que permite el componente a la hora de definir los elementos del menú contextual.

Esta configuración se realiza a través de la propiedad ítems del objeto de configuración.

Un ejemplo del objeto de configuración que recibe la propiedad ítems es el siguiente:

items: { "edit" : { "name" : "Edit" , "icon" : "edit" }, "cut" : { "name" : "Cut" , "icon" : "cut" }, "sep1" : "---------" , "quit" : { "name" : "Quit" , "icon" : "quit" }, "sep2" : "---------" , "fold1" : { "name" : "Sub group" , "items" : { "foo bar" : { "name" : "Foo bar" }, "fold2" : { "name" : "Sub group 2" , "items" : { "alpha" : { "name" : "alpha" }, "bravo" : { "name" : "bravo" }, "charlie" : { "name" : "charlie" } } }, "delta" : { "name" : "delta" } }


}, "fold1a" : { "name" : "Other group" , "items" : { "echo" : { "name" : "echo" }, "foxtrot" : { "name" : "foxtrot" }, "golf" : { "name" : "golf" } } }

}

Las principales propiedades de configuración que acepta el objeto ítems son las siguientes:

• name: Descripción que va a mostrarse en el elemento del menú.

items: { "edit" : {name: "Edit" }}

• callback: Método que va a ejecutarse cuando se haga clic sobre el elemento.

items: { "edit" : { name: "Edit" , callback: function(key, options) { alert( "clicked: " + key); } } }

• className: Clases adicionales que van a aplicarse sobre el elemento.

• icon: Especifica la clase que se va a aplicar para visualizar el icono del elemento.

• disabled: Determina si el elemento del menú debe mostrarse habilitado o deshabilitado.

items: { "edit" : { name: "Edit" , disabled: function(key, options) { return true; } } }

• type: Indica el tipo del elemento.

o null, undefined o un string vacío: Crea un elemento simple.

o text, checkbox, radio: Crea un <input> del tipo indicado.

o textarea: Crea un <textarea>.

o select: Crea un campo select.

o html: Crea un elemento no seleccionable.

• events: Eventos que van a ser registrados en el elemento.

items: { "select" : {name: "select box" , selected: "two" ,

options: {one: "red" , two: "blue" , three: "green" } }


}

• value: El valor del elemento <input>.

• selected: La opción seleccionada de un <select> o la opción marcada de un <input> de tipo “chechbox” o “radio”.

• radio: Indica el grupo de los radios.

• options: Especifica los <options> para el elemento <select>.

• height: La altura en pixels del elemento <textarea>. Si no se especifica la altura se toma del css.

• items: Elementos a mostrar en un sub-menú.

• accesskey: Carácter a ser utilizado como tecla de acceso rápido de un elemento,

8. Funciones

A continuación se detallan las diferentes funciones que integran el componente menú contextual.

• enable: Habilita el menú contextual. El menú se mostrará al lanzarse el evento asociado.

$( selector ) .rup_contextMenu ( "enable" );

• destroy: Elimina el menú contextual.

$( selector ) .rup_contextMenu ( "destroy" );

• disable: Deshabilita el menú contextual. El menú no se mostrará aunque se lance el evento asociado.

$( selector ) .rup_contextMenu ( "enable" );

• hide: Oculta el menú contextual.

$( selector ) .rup_contextMenu ( "hide" );

• show: Muestra el menú contextual.

$( selector ) .rup_contextMenu ( "show" );

9. Sobreescritura del theme

El componente tooltip se presenta con una apariencia visual definida en el fichero de estilos theme.rup.contextMenu-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).

10. Integración con UDA

No aplica.

UDA-Componentes RUP. Menú contextual

Technology

Transcript of UDA-Componentes RUP. Menú contextual