ADF 11g: af:progressIndicator y af:statusIndicator

En muchas ocasiones se ejecutan servicios o procesos duros en los que la aplicación parece quedar "congelada". Para evitar que el usuario de la aplicación crea que nuestra aplicación "pasó a mejor vida" ADF nos proporciona dos componentes:

Enlace a la descarga del ejemplo

Interfaz del ejemplo
  • af:statusIndicator. Es el "simpático" iconito de la O de Oracle que cambia de icono a otro girando en el caso de que haya algún proceso en ejecución de la aplicación. Es posible modificar estos iconos (referencia a como hacerlo más adelante).
    Icono sin actividad 
  • af:progressIndicator. Es una barra de progreso típica que indica el estado de una operación. Siempre se puede usar cuando realmente se sabe el estado de la operación que se está realizando como, por ejemplo, insertar numerosas filas a base de datos (sabemos por que row del total vamos).
    Barra de progreso
¿Cómo usar cada una de ellas?

af:statusIndicator

Es el más sencillo puesto que solo se debe realizar Drag & Drop desde la paleta de componentes. Automáticamente, en caso de que alguna ejecución esté en curso, el componente cambiará entre dos gif's animados, uno estático y uno dinámico.

    Icono con actividad
    Icono sin actividad 
Componente de estado
Para cambiar estos iconos requiere aplicar Skinning de ADF. Referencias: 
af:progerssIndicator


Barra de progreso
Componente de progress con poll
Para usar la barra de progreso no basta únicamente con realizar Drag & Drop. Es necesario al menos:
  • Un Bean Java que extienda una clase abstracta del tipo BoundedRangeModel. Esta clase mantiene en todo momento cual es el máximo y cual es el valor actual de la barra de progreso.
  • Una operación af:poll para que se consulte el estado actual de la barra de progreso y se refresque.
  • Un método que se ejecute en el actionListener de la af:progressIndicator puesto que este evento es disparado cuando la barra de progreso llega a su fin y, por lo menos, hay que parar el af:poll.
El ejemplo
En el ejemplo adjunto a esta entrada se proporciona un ejemplo básico de barra de progreso junto al indicador de estado. En este ejemplo se lanza un hilo de ejecución y se refresca la barra de progreso mediante un poller (af:poll).

Para construir una barra de progreso como la del ejemplo (descarga disponible al final de la entrada) se deben tener en cuenta los siguientes pasos:
  • Crear una clase Java que extienda de BoundeRangeModel. En el ejemplo, además de poder acceder al máximo, y valor actual de la barra, se añade la posibilidad de consultar el porcentaje de la misma. Importante recordar que el bean que maneja la barra de progerso debe tener un scope mínimo de viewScope puesto que un scope menor haría que se perdiera el valor de progreso de la misma.
    Clase que implementa el modelo de la barra: BoundedRangeModel

  • Realizar Drag & Drop de manera conjunta de la af:progressIndicator y un af:poll configurando un PartialTrigger de la barra hacia el disparador de eventos programado (poll). Además, asociar en el value de la barra de progreso el bean que exitende de BoundedRangeModel.
  • Crear una clase Java encargada del manejo de la interfaz, de los valores iniciales de la barra de progreso, de iniciar / parar el poll y de lanzar / parar el proceso costoso.
    Clase controlador de los hilos / valores de la barra
  • Crear una clase que implemente Runnable para poder lanzar la ejecución en paralelo del proceso costoso y que tenga lectura sobre los valores actuales de la barra de progreso (por ejemplo una clase interna a la de manejo de la interfaz).
    Clase del proceso costoso que es lanzado como hilo
Más datos a tener en cuenta:
  • Para parar / iniciar un af:poll se debe cambiar su propiedad rendered y además el PartialTrigger debe ser al componente padre del mismo.
  • Tener cuidado con la clase Thread y verificar que realmente los hilos terminan su ejecución. Esto puede llevar a problemas en cuanto a consumo de JVM. Normalmente se generan los de incidencias de WebLogic inc_[numero] donde podremos consultar errores que han ocurrido en el hilo de ejecución.
Ejemplo desarrollado en JDeveloper 11.1.1.6

Enlace al ejemplo: BarraProgresoApp

Referencias:

Comments

Post a Comment

Popular posts from this blog

OJET: Inter-Module communication in TypeScript Template

Image
In this post I bring another example on how to Communicate Modules using the Oracle JET - TypeScript Template based on the Oracle JET Cookbook: InterModule Communication From now and so on will create multiple examples using TypeScript for those who are not familiar with it and wants to turn the Cookbook examples into TypeScript :). The example ( ojet-typescript-list-detail ) can be found as usual in my GitHub repository: https://github.com/DanielMerchan/ojet-examples This example is a bit different compared to the Cookbook example where the modules are not running at the same time within a Module. This example is built as described in the following images: Customers module acts as the Wrapper Module. It coordinates when to load the list and detail modules. Customers module makes use also of signals npm module for communication between Customers-List, Customers-Detail. Explanation of the Example customers.js is the coordinator responsible module for: initiali
Read more

OJET: Build and Deploy in an Application Server

Image
There are some other sources where an Oracle JET Application is packaged and deployed as a WAR in Oracle WebLogic Application Server (Arda Eralp) https://blogs.oracle.com/ardaeralp/deploy-oracle-jet-application-to-weblogic-server (Andrejus Baranovski's) http://andrejusb.blogspot.com/2016/07/serving-oracle-jet-application-from.html They may look bit old or maybe because they call directly grunt tasks by using the grunt-cli . In this post I will update a bit these posts in Oracle JET 6.1.0 and the usage of ojet build (instead of calling the grunt tasks) for also building the corresponding WAR file. The example can be found in my GIT repository: https://github.com/DanielMerchan/ojet-examples Let's start... Install grunt-war module in your Oracle JET Application. npm install grunt-war --save-dev Create a war.js (or call it whatever you want) in /scripts/grunt/config folder under your souce files. This is a sample code inside of it, check https://www.npmjs.com/packag
Read more

OJET: Select All options using only Checkboxset

Image
This is an example on how to select all other options by using another oj-checkboxset. GitHub: ojet-checkbockset-select-all The idea is to keep track of the selection and make use of the on-value-changed as described in the following code. self.colorOptions = ko.observableArray([ { id: "blueopt", value: "blue", color: "Blue" }, { id: "greenopt", value: "green", color: "Green" }, { id: "redopt", value: "red", color: "Red" }, { id: "limeopt", value: "lime", color: "Lime" }, { id: "aquaopt", value: "aqua", color: "Aqua" }, ]); self.selectAll = ko.observableArray([]); self.currentColor = ko.observableArray(["red"]); self.selectAllOptionChanged = (event) => { const newSelection = event.detail.value; if (newSelection.indexOf('all')
Read more