Crear un gráfico en SAPUI5 (IV) - Usar eventos de interacción

Ya hemos aprendido unas cuantas cosas relacionadas con los gráficos en SAPUI5, como han sido:

• Crear un gráfico.
• Añadir un tooltip que se muestra al pulsar un elemento.
• Crear un tooltip personalizado para mostrarnos los totales seleccionados.

Ahora vamos a ver una opción adicional con los elementos del gráfico, y es que podemos realizar acciones cuando se seleccione uno de ellos, sin necesidad de mostrar un tooltip.

Para ello usaremos una propiedad de los Vizframe, la propiedad interaction.decorations, que nos permite ejecutar una función callback cuando se muestra el tooltip (al seleccionar) y cuando se oculta (al deseleccionar).

Podemos encontrar la ayuda en la documentación específica de Vizframes, buscando en el apartado de Propiedades.

Aunque esta propiedad nos la proponen para crear nuestros propios tooltips, ya que con las funciones callback podemos recuperar el elemento seleccionado y la posición (x e y), vamos a utilizarla para otro propósito: Para mostrar un panel informativo con los puntos seleccionados y la probabilidad. No lo haremos en un tooltip, sino en un panel desplegable, y obtendremos algo como lo siguiente:

Y los pasos que seguiremos serán:

• Crear un modelo de datos para guardar los elementos seleccionados (un string concatenado) y el total de probabilidad.
• Añadir una propiedad al gráfico (interaction.decorations), a la que podemos asignar dos valores: showDetail, para indicar una función callback que se ejecutará al seleccionar un elemento; y hideDetail, que se ejecutará cuando se deseleccione un elemento.
• Definir las dos funciones que se llaman desde showDetail y hideDetail, para modificar el contenido del modelo de datos.
• Añadir a la vista XML un panel expansible para mostrar los datos que hemos seleccionado, enlazándolo con el modelo de datos.

Al final del artículo, tenemos el enlace para descargar el ejemplo en GitHub.

Crear un gráfico en SAPUI5 (III) - Tooltip a medida

En artículos anteriores, habíamos creado un gráfico en SAPUI5 para mostrar la probabilidad de éxito al tirar dos dados (2d6) y habíamos añadido un tooltip que aparecía al seleccionar uno o varios elementos del gráfico (uno de los "puntitos") y que nos mostraba la información de la última selección hecha.

Y oye, el resultado era aparente... bueno, más o menos, tampoco era para tirar cohetes en una fiesta hobbit. ¿Pero qué pasa si queremos que el tooltip muestre una información más personalizada? Por ejemplo, que nos liste todos los elementos que están seleccionados y muestre la probabilidad total de que, al lanzar los dados, el resultado sea alguno de dicho conjunto.

De eso nos vamos a encargar en este artículo, y los pasos que seguiremos serán:

• Crear en la vista el control que vamos a utilizar: sap.viz.ui5.controls.Popover.
• En el controlador, conectar el Popover con el gráfico (el control VizFrame): Método connect.
• Crear en contenido personalizado del Popover. Aquí añadiremos un layout vertical con dos textos, uno para mostrar los elementos seleccionados y otro para mostrar la probabilidad total.
• Calcular y modificar los datos a visualizar en el método que se llamará al seleccionar un elemento del gráfico: Método setCustomDataControl.
• Crear un array de botones, que se mostrarán en el Popover para realizar acciones personalizadas adicionales: Método setActionItems.

Y el resultado que obtendremos será algo como lo siguiente:

Sí, se me ha olvidado añadir la tilde a selección, pero luego lo he hecho :P.

Cuando uno se pone a probar alternativas

Tengo que admitir que el próximo artículo que voy a publicar, relacionado con gráficos y tooltips (Vizframe y Popover), me ha costado hacerlo. Y no por la complicación ni por el tiempo dedicado a investigar (no soy para nada un experto, simplemente voy trasteando con las cosas para aprender), sino más bien por la dudas y alternativas que me iban surgiendo a la hora de desarrollarlo. ¿Y si en lugar de hacer un setText utilizo un modelo de datos, qué será más eficiente pero qué será más claro para el lector? ¿Y si uso ya de una vez bind(this) y no var that = this? ¿Cómo puedo conseguir saber qué gráfico estoy seleccionando? Tonterías así.

Al final, entre hacer, rehacer, revisar, requetehacer, volver a revisar, me ha llevado un tiempo mucho más largo de lo esperado... para lo poco que realmente aporta el artículo :(.

Eso sí, he conseguido dos cosas: Aprender mucho más, y tener una posible lista de miniartículos adicionales para añadir. No está mal la tontería, ¿no?

En cualquier caso, esto me ha dado como objetivo una posible aplicación (friki, por supuesto), para hacer más compleja aún la aplicación de gráficos: Un simulador de tiradas de dados de rol (dados de 4 caras, 6 caras, 8, 10, 12, 20, 100... y cualquier alternativa que queramos) con gráfica incorporada. Vale, aplicaciones para tirar dados hay muchas, pero yo lo que quiero es aprender.

Así que, ¿seré capaz de hacerlo y no morir en el intento? Bueno, el tiempo lo dirá.

Cursos del 2º trimestre de 2019: SAPUI5, SAP CP, HTML5, Node.js...

Porque no podemos dejar de aprender, volvemos a la carga con un buen puñado de cursos que nos pueden resultar interesantes para el desarrollo web, ya sea con SAPUI5 o con otras herramientas "más mundanas". Como siempre, centro mis selecciones en dos portales de cursos masivos online (ambos gratuitos), el específico para SAP, openSAP, con cursos en inglés, y Miriadax, con cursos más genéricos (no de SAP y no sólo de programación, sino prácticamente de cualquier cosa) y en español.

Sólo menciono los que más me interesan, que son aquellos centrados en desarrollo (generalmente web o ABAP), pero ambas webs merecen una buena visita por si hay algún otro curso que nos pueda resultar interesante. En resumen, en este post veremos:

• Cursos de OpenSAP relacionados con SAP UX (SAP CP y SAP UI5) que se inician en breve.
• Repaso de cursos de OpenSAP de SAP UX (Fiori, Portal, SAP UI5, SAP Screen Personas, incluso Java), que ya han acabado pero que siempre podemos volver a hacer.
• Cursos de MiriadaX de desarrollo web (HTML5, Javacript, Node.JS), programación (introducción, aplicaciones móviles, videojuegos) y metodologías ágiles.
• Cursos de MiriadaX que ya no tienen nada que ver con programación, (o quizá sí :P) pero que a mí me apetece hacer :D: Teoría, gamificación y escritura.

Y, como siempre, hay que ver cada curso como un principio. Posiblemente no acabaremos siendo expertos en nada por haberlos hecho, pero tendremos el punto de partida para luego ya buscarnos la vida por nuestra cuenta y mejorar. No nos quedemos ahí parados.

Imagen de Pexels en Pixabay