I was investigating performance impact of navigating between tabs in UI Shell template. To compare, as alternative solution for UI Shell, I was using dynamic tabs with Multi Task Flow binding (Building Custom UI Shell with ADF 11g R2). When you switch between tabs in UI Shell, you could notice slight delay. This is normal delay (differently to browser tabs, where no delay), as there should be generated response from the server and JSF tree must be updated. However, it is not clear what is the impact of such delay to application performance. The goal of my post is to answer this question.
Sample application - MultiTaskFlowApp_v2.zip, contains two UI projects. One implements UI Shell and second Multi Task Flow binding based page for dynamic tabs:
Multi Task Flow binding is a new feature since ADF 11g R2, list of task flows can be referenced from the Page Definition:
This list can be rendered on UI with dynamic tabs, each tab would be physically created (in UI Shell case, only one region is rendered at a time):
Second project is using UI Shell template:
UI Shell doesn't render real tabs, instead it is using navigation pane component with links, displayed as a tabs:
Only one region is rendered at a time, the one you select. This means, when tab is changed - different region will need to be rendered again:
I was navigating through tab items for both solutions and recording tab opening time. Here are the results.
Multi Task Flow Binding:
- Departments: 0.29 sec.
- Employees: 0.47 sec.
- Locations: 0.59 sec.
Average: 0.45 sec.
UI Shell:
- Employees: 0.61 sec.
- Locations: 0.55 sec.
- Departments: 0.28 sec.
Average: 0.48 sec.
You can see, both are almost the same. There is 0.5 second delay to open tab for a relatively simple UI with a form and editable table components. In the real scenario, with more complex UI, delay could grow to couple of seconds.
One second or couple of seconds delay is generally acceptable in UI Shell, for navigation between tabs. If delay is longer than that, something must be wrong in your application - slow data fetch or slow table initialisation, could be one of the reasons.
Sample application - MultiTaskFlowApp_v2.zip, contains two UI projects. One implements UI Shell and second Multi Task Flow binding based page for dynamic tabs:
Multi Task Flow binding is a new feature since ADF 11g R2, list of task flows can be referenced from the Page Definition:
This list can be rendered on UI with dynamic tabs, each tab would be physically created (in UI Shell case, only one region is rendered at a time):
Second project is using UI Shell template:
UI Shell doesn't render real tabs, instead it is using navigation pane component with links, displayed as a tabs:
Only one region is rendered at a time, the one you select. This means, when tab is changed - different region will need to be rendered again:
I was navigating through tab items for both solutions and recording tab opening time. Here are the results.
Multi Task Flow Binding:
- Departments: 0.29 sec.
- Employees: 0.47 sec.
- Locations: 0.59 sec.
Average: 0.45 sec.
UI Shell:
- Employees: 0.61 sec.
- Locations: 0.55 sec.
- Departments: 0.28 sec.
Average: 0.48 sec.
You can see, both are almost the same. There is 0.5 second delay to open tab for a relatively simple UI with a form and editable table components. In the real scenario, with more complex UI, delay could grow to couple of seconds.
One second or couple of seconds delay is generally acceptable in UI Shell, for navigation between tabs. If delay is longer than that, something must be wrong in your application - slow data fetch or slow table initialisation, could be one of the reasons.
Hi andrejus. What do we need to make this approach to work in JDeveloper 12.1.3.0.0? Especially the custom UI shell that is in your project. I migrate this example but when I close one tab, close all other tabs too. Besides if more than one tab is open is not posible navigate through the other tabs. Do we need to do something else in 12c?. Thank for this blog is very helpful. Marlon.
ReplyDeleteHi,
ReplyDeleteYou should take a look into this post, talking about the same topic in 12c: http://andrejusb.blogspot.com/2014/10/new-alta-ui-for-adf-ui-shell-application.html
You will find the same application, updated to 12c. Check the comments for the post - you need to remove ID for showDetailItem in multiTaskFlow binding example. With ID present, it generates showDetailItem components with the same ID and it is closing all, when you are closing only one.
Hope this helps.
Andrejus
It worked perfect, thank you.
ReplyDeleteHi Andrejus,
ReplyDeleteWhen I nest a region within a multi task flow I get the following error when I press the F5 key to reload the page: The page references the task flow more than once and indicates the ids before the refreshment and after this. What I can do? Thank you very much, greetings.