af:panelTabbed, Task Flows y WebCenter Portal

Los Task Flow en ADF 11gR1 (framework en el cual se basa WebCenter Portal 11g) se cargan de manera secuencial. Esto significa que hasta que el último Task Flow no finaliza su primera actividad la página no es renderizada.

Existe un truco del ATEAM para simular un Lazy Loading de los Task Flows.
http://www.ateam-oracle.com/improving-adf-page-rendering-time/

Existe un número mágico que dice de no tener más de 8 Task Flows por página.

En numerosas ocasiones, estos Task Flows se encuentran en componentes af:panelTabbed separados por pestañas. El problema reside en que todos los Task Flows (incluyendo las pestañas no visibles) ejecutarán todos los Task Flows que contengan.

Ejecución de los 3 Task Flows aunque los otros dos no se vean
 Cómo ejecutar solo los componentes de la pestaña actual?
  1. Configuración de la activación de los Task Flows
    Andrejus     explica como configurar la propiedad de Activation de los Task Flow. Con esta propiedad se puede controlar la activación y desactivación de Task Flows cuando se seleccionan las distintas pestañas del panel.
    http://andrejusb.blogspot.com.es/2013/09/conditional-task-flow-activation-in-adf.html

  2. Configurar la propiedad childCretion de af:panelTabbed
    Configurando la propiedad childCreation se puede conseguir que las pestañas no activas no ejecuten los Task Flows o componentes que tienen hasta que son seleccionadas. Los valores que puede tomar childCreation son:

    • immediate: Al cargar la página todas las pestañas se ejecutan.
    • lazy: Solamente se ejecuta la pestaña actual y guarda el estado en el que se quedó el Task Flow. Al volver a la pestaña NO se ejecutara de nuevo el Task Flow desde el principio.
    • lazyUncached:  Solamente se ejecuta la pestaña actual. A diferencia de lazy, cada vezs que se vuelva a una pestaña que ya fue ejecutada el Task Flow se re-ejecutara desde el principio.
     
Con una configuración de af:panelTabbed a lazy o lazyUncached se puede conseguir un aumento de rendimiento considerable en el caso de que algún Task Flow de alguna pestaña sea pesado.

Recordar que por defecto es immediate.

Referencias:
http://docs.oracle.com/cd/E28280_01/apirefs.1111/e12419/tagdoc/af_panelTabbed.html

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