ADF tips: Menú contextual personalizado de un af:tree utilizando valores del nodo seleccionado
05/10/2015 -
Cuando hacemos click derecho sobre un nodo de un árbol, podemos ver que aparece un menú con algunas opciones como expandir o contraer los nodos. También es posible añadir opciones personalizadas utilizando la facet contextMenu. En este ADF tips os voy a mostrar como añadir opciones personalizadas al menú contextual y utilizar valores del nodo seleccionado. Podéis ver el post de los foros que me ha inspirado este post.
Para crear la estructura del árbol que vamos a utilizar en este ejemplo vamos a utilizar la tabla Employees del schema HR.
Necesitamos crear la siguiente estructura.
Una vez que hemos añadido las vistas al application module, ya podemos arrastrar EmployeesView1 de la paleta de DataControls y crear un tree.
El siguiente paso es añadir un hijo en el tree binding así que pulsaremos en la cruz verde y seleccionaremos ‘EmployeeView’.
En el ejemplo vamos a utilizar solo un atributo, ‘First Name’ pero se pueden añadir tantos como se quieran.
Después de hacer click en el botón ‘OK’ podemos añadir un menú personalizado utilizando la siguiente estructura de componentes:
El creador del post identificó un problema que consistía en que en ocasiones cuando ya teníamos un menú abierto asociado a un nodo, si intentábamos abrir otro menú asociado a otro nodo, no se abría. Para solucionar este problema necesitamos utilizar la propiedad contextMenuSelect=”false” en nuestro árbol.
Si ejecutamos la aplicación podemos ver que al hacer click derecho sobre un nodo a parte de las opciones por defecto, tenemos nuestra opción personalizada ‘MenuOption 1’.
Ahora que ya tenemos nuestra opción personalizada en el menú vamos a intentar utilizar un valor del nodo como texto del menú. para ello añadimos #{node.FirstName} en la propiedad text del commandMenuItem.
Al ejecutar podemos ver que la opción sigue estando en el menú, pero no se muestra el texto.
Para conseguir mostrar el texto debemos usar un setPropertyListener del tipo popupFetch donde guardaremos el valor que queremos mostrar.
Esta variable tiene que ser mínimo de viewScope.
También tenemos que poner la propiedad contentDelivery del popup con el valor ‘lazyUncached’.
Si volvemos a ejecutar la aplicación podemos ver que ahora si se muestra el valor del texto en la opción del menú.
