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

1. 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..

2. 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:

3. 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

4. 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

5. Componentes RUP – Menú contextual 6/11
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.

6. Componentes RUP – Menú contextual 7/11
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.

7. Componentes RUP – Menú contextual 8/11
• 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);
},

8. Componentes RUP – Menú contextual 9/11
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"}
}

9. Componentes RUP – Menú contextual 10/11
},
"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"}
}

10. Componentes RUP – Menú contextual 11/11
}
• 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.

11. Componentes RUP – Menú contextual 12/11
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.