Sunday, May 5, 2013

af:region/taskflow lazy loading with loading message

I have a page where I consumed a taskflow as region. Sometimes this taskflow takes few more seconds extra where the entire page rendering is waiting just for this taskflow.

I was looking for something like let the whole page render first, then the region should show loading and it should make another request to render its actual view activity. So that the user can see rest of the page and let the region loads on its own as soon as ready.

I was looking for something out of the box from ADF but I don't see any property for this. So here is my own way of implementation to achieve that.

This is my actual page(Home.jspx):

Here all the content is from Home.jspx and the right side is info region (InfoTF). This region I need to load it lazily.

Created a taskflow template(LazyLoadingTFTemplate) with a switcher & view activity. It has a boolean parameter EnableLazyLoading.

The switcher will check if the parameter EnableLazyLoading is true go to Loading page otherwise Next switcher.

Loading page has output text : Loading (put your own loading image if needed) and a poll component with a listener set to 3 seconds.

And the poll listener makes programmatic navigation to next..

Now the info taskflow InfoTF will extend  LazyLoadingTFTemplate and its default activity is set to EnableLazyLoading switcher.

Also it has a control flow from Next(via template) to Info view activity

Thats it. Drag & drop InfoTF on Home.jspx as region and set EnableLazyLoading parameter to true. Run the page.

and after 3 seconds

Note : After 3 seconds when the poll component request(r1) is in progress when user makes some changes on main area which initiates another request(r2) then r2 will get the response only after r1's response. Figuring out how to make r1 async so that r2 will not wait for r1.

Above implementation code is uploaded here.

Happy ADF Coding..