radialmenu — u_pbt_radialmenu #

← Referencia de componentes · Índice de la guía

Menú contextual radial: los comandos en corona alrededor del cursor, elegidos por su dirección en lugar de leídos en una lista.

▶ Verlo en vivo — Aplicación de demostración, mosaico Radial menu: la vista previa, el código que lo produce y esta página, lado a lado.

En resumen #

Inicio rápido #

// A wheel built for whatever is under the cursor
uo_wheel.of_add_item(/*keys*/ "cut",    /*text*/ "Cut")
uo_wheel.of_add_item(/*keys*/ "copy",   /*text*/ "Copy")
uo_wheel.of_add_item(/*keys*/ "paste",  /*text*/ "Paste")
uo_wheel.of_add_item(/*keys*/ "delete", /*text*/ "Delete")
// It opens when the right button is released: see ue_rclicked

Abrir y luego elegir #

La rueda se abre al soltar el botón derecho, y hace falta un segundo clic para elegir. No es un detalle de implementación: si se abriera al pulsar, el soltado de ese mismo clic seleccionaría de inmediato el sector caído bajo el cursor, y el usuario lanzaría un comando sin haberlo visto.

Por eso of_show() se llama desde el evento de clic derecho del control sobre el que el usuario hace el gesto (un statictext, un button, una rejilla…): en ese instante el botón ya está arriba, y el clic siguiente es realmente el que elige. El menú radial en sí no tiene superficie — por tanto ningún evento de ratón propio.

El componente en sí es invisible: no ocupa sitio en la ventana. Colóquelo donde sea, con anchura y altura cero — solo existe mientras la rueda está abierta.

El cubo central deletrea por entero la rama señalada, y eso es lo que permite a un sector llevar una etiqueta corta sin mentir sobre lo que hace. Hacer clic en el cubo cierra la rueda; dentro de una sub-rueda, sube un nivel.

// It opens when the right button is released: see ue_rclicked
uo_wheel.of_show()

Las sub-ruedas #

Una dirección cuelga ramas bajo otra: export/pdf. Elegir la rama padre no elige nada: la rueda es sustituida por la de sus hijos, y el cubo pasa a ser la vuelta atrás.

¿Por qué sustituir en lugar de añadir una segunda corona? Porque un anillo exterior dividiría los sectores por dos en cada nivel. Ocho ramas ya es el máximo legible; no hay sitio para mostrar dos niveles a la vez.

El evento ue_item_selected informa de la ruta completa (export/pdf), no del identificador de la hoja sola. Dos sub-ruedas pueden por tanto nombrar sus ramas igual.

uo_wheel.of_add_item(/*keys*/ "export", /*text*/ "Export")
uo_wheel.of_add_item(/*keys*/ "export/pdf", /*text*/ "PDF")
uo_wheel.of_add_item(/*keys*/ "export/csv", /*text*/ "CSV")

Cuando hay demasiadas ramas #

Una rueda se lee por dirección, y más allá de ocho sectores las porciones dejan de distinguirse. ii_max_sectors fija ese tope (de 3 a 12, 8 por defecto).

Las ramas sobrantes no se pierden: el último lugar de la corona pasa a ser una rama que las contiene todas y que se abre como sub-rueda. Un menú que dejara caer su cola sería un menú que miente sobre lo que ofrece.

Estrechar la corona suele salir a cuenta: cuatro ramas anchas se apuntan más deprisa que ocho estrechas.

Propiedades #

Métodos #

Eventos #

La ventana de la rueda es redonda: las esquinas dejan pasar los clics hacia la aplicación de detrás, en lugar de tragárselos en un cuadrado invisible.

Propiedades de elemento #

Ejemplos #

Una rueda por contexto #

// A wheel built for whatever is under the cursor
uo_wheel.of_clear()
uo_wheel.of_add_item(/*keys*/ "bold", /*text*/ "Bold", /*image*/ "mono:img\packimages.dll:svg/samples/bold", /*checked*/ true)
uo_wheel.of_add_item(/*keys*/ "find", /*text*/ "Find", /*image*/ "mono:img\packimages.dll:svg/samples/find", /*checked*/ false)

Reaccionar a la ruta elegida #

// ue_item_selected event of the radial menu
// as_keys carries the full path, e.g. "export/pdf"
choose case as_keys
	case "export/pdf"
		of_exporter_pdf()
	case "delete"
		of_supprimer()
end choose

Marcar, atenuar, estrechar #

// Mark a branch as being on
uo_wheel.of_item(/*key*/ "bold").ib_checked = true
// Grey out the one that makes no sense here
uo_wheel.of_item(/*key*/ "paste").ib_enabled = false
uo_wheel.ii_max_sectors = 4

Buenas prácticas #

• Abra al SOLTAR el clic derecho del control, nunca al pulsar. Es lo que separa abrir de elegir, y el usuario necesita ambas cosas.
• Etiquetas cortas. Una o dos palabras. El cubo está para el texto entero, el sector para la dirección.
• De cuatro a seis ramas superan a ocho. Una rueda se recuerda por la posición; cuantas menos posiciones, antes se aprenden.
• Ponga los comandos más frecuentes arriba y abajo. Son las dos direcciones que la mano alcanza sin pensar.
• Mantenga el orden estable de una apertura a otra: todo el interés de una rueda es que el gesto acabe precediendo a la lectura.
• Un menú radial no sustituye a un menú de lista. Veinte comandos raros se leen mejor en una lista; reserve la rueda para el puñado que se usa sin parar.

Heredado de la base común #

Estos miembros existen en todos los componentes visuales — no son propios de este. Se detallan una sola vez, en los capítulos transversales; esta tabla solo dice dónde leerlos.

Dos ayudas no se heredan: of_icon y of_escape_markup viven en n_pbt_utils. Declare uno — n_pbt_utils lnv_utils, nada que crear — y llámelas sobre él.

← Referencia de componentes · Índice de la guía