UDA-Componentes RUP. Menú contextual

100 %
0 %
Information about UDA-Componentes RUP. Menú contextual
Technology

Published on March 28, 2014

Author: andermartinez

Source: slideshare.net

Description

UDA-Utilidades de desarrollo de aplicaciones
• UDA-Componentes RUP. Menú contextual

http://code.google.com/p/uda/

UDA - Utilidades de Desarrollo de Aplicaciones Componentes RUP – Menú contextual Fecha: 13/03/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. Cambios producidos desde la última versión Nueva propiedad showCursor. 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

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.

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.

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); },

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. 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"}

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

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

Componentes RUP – Menú contextual 12/11 10. Integración con UDA No aplica.

Add a comment

Related presentations

Presentación que realice en el Evento Nacional de Gobierno Abierto, realizado los ...

In this presentation we will describe our experience developing with a highly dyna...

Presentation to the LITA Forum 7th November 2014 Albuquerque, NM

Un recorrido por los cambios que nos generará el wearabletech en el futuro

Um paralelo entre as novidades & mercado em Wearable Computing e Tecnologias Assis...

Microsoft finally joins the smartwatch and fitness tracker game by introducing the...

Related pages

UDA-Componentes RUP. Pestañas - Technology

UDA-Componentes RUP. Validación ... UDA-Utilidades de desarrollo de aplicaciones • UDA-Componentes RUP. Menú http://code.google.com/p/uda/
Read more

UDA-Componentes RUP. Combo - Technology

UDA-Utilidades de desarrollo de aplicaciones • UDA-Componentes RUP. ... UDA-Utilidades de desarrollo de aplicaciones • UDA-Componentes RUP. Menú http ...
Read more

Menús desplegables – C# - Rubén Weblog | Just another ...

La persona que lo crea, decido en donde el menu contextual va a aparecer. Porque ésta características corresponde al programamador, ...
Read more

AIDA 1D Evaluation for Windows - RUBION | Start Startseite

AIDA 1D Evaluation for Windows User™s Manual Part Number 2003 01 1.1 raytest. raytest ... Contextual Menu of the Profiles Window (Res ult Table) ...
Read more

AIDA 1D Thin Layer Chromatography - RUBION

Contextual Menu of the Quantity Calibration Window . . . . . . . . . . . . . . . . . 43 Audit Trail Window ...
Read more

JRC 3D Reconstructor Full / Full Edu version 3

Contextual Menu. JRC 3D Reconstructor Full. Commands Map . 1. ... include only point clouds (grid or rup) and the related cameras (i.e. clouds, meshes).
Read more