Andrej Baranovskij Blog

This is third post in the series about ADF UI Shell usability improvement, you can read previous one - ADF UI Shell Usability Improvement - Tab Contextual Menu. When you work with Web browser tabs, expected behaviour after closing the tab in the last position is the next tab available on the left side to be opened. However, this works differently in ADF UI Shell and could be improved. I will describe how.

Here you can see three tabs loaded in ADF UI Shell, this comes with sample application - MultiTaskFlowApp_v5.zip:


If I would close tab in the last position - Locations, by default the first tab Departments would be set as current. However, users would expect Employees tab (next to the closed Locations tab) to be set as a current. This is how it works by default, when closing the tab in the last position - first tab becomes current:


In order to fix this behaviour, you need to update ADF UI Shell method responsible for tab removal and next current tab selection. By default, if closed tab is in the last position (there are no tabs further right) and counter is reaching maximum tabs, counter is reset to 0. Obviously there will be tabs available from position 0 and further to the right, however this would set as current tab not the closest one to the closed tab - but just first from the start. Highlighted code is the one that was added by me - when counter is reaching the end, instead of switching to the first position 0, I'm iterating leftwards. Once first tab on the left will be located, this tab will be set as current:


Again, I load three tabs and try to close the one in the last position - Locations:


This time proper tab gets selected - the next one on the left to the Locations, Employees tab:

Posted by Andrej Baranovskij at 10:02 PM 0 comments

Labels: ADF, JDeveloper 11g, JDeveloper 11g R2, JDeveloper 12c, UI Shell

In my previous post - Improving ADF UI Shell - Tab Closing Icon Adjustment, I was describing how to implement ADF UI Shell tab closing icon to be located directly on the tab itself. Today I would like to share one more usability improvement - tab contextual menu. You could implement such functionality as - 'Close', 'Close All' and 'Close Others' with contextual menu invoked from the tab.

Sample application with ADF UI Shell tab contextual menu - MultiTaskFlowApp_v4.zip. Here you can see how ADF UI Shell tab contextual menu looks:


User can select a tab and choose to 'Close Others':


All tabs, except current will be closed - quite useful:


Contextual menu is implemented for ADF UI Shell tab with Client Listener calling custom Java Script function and Client Attribute to pass current tab ID:


Custom Java Script function is calling ADF popup, displayed as menu list. This popup is implemented with ADF command menu items - representing each option from contextual menu. Action Listener for menu item is configured with JSF attribute to pass current tab ID:


Here you can see methods responsible to close current tab, all tabs and other tabs. When closing all tabs or other tabs, it is important to check and close only those currently active:


You may face a conflict between tab contextual menu and regular browser menu for contextual action (typically right click). To block browser menu for contextual action, you could use code given above:

Posted by Andrej Baranovskij at 4:34 PM 8 comments

Labels: ADF, JDeveloper 11g, JDeveloper 11g R2, JDeveloper 12c, UI Shell

Default tab closing icon in ADF UI Shell is located in the top right corner. Users are not really happy about this and there is a demand to have the same positioning as you can see in the Web browsers - directly on the tab. Tab placeholders are implemented in ADF UI Shell with af:navigationPane and af:commandNavigationItem components. Component af:navigationPane supports item removal, this means we can implement tab closing functionality directly in the tab. Unfortunately, out of the box ADF UI Shell template in ADF 11g and 12c is not updated with this adjustment. I will explain how you can implement by yourself, you would need to change ADF UI Shell source code.

Sample application is packaged with ADF UI Shell source code, including adjustment for tab closing icon - MultiTaskFlowApp_v3.zip. This is how ADF UI Shell tab looks with adjusted closing icon, directly in the tab:


User can click X icon to close Employees tab, it works perfectly fine:


This adjustment is implemented directly in ADF UI Shell template source code:


Default icon for tab closing is removed, see commented code:


Component af:navigationPane is set with itemRemoval="all" property. This renders and supports tab closing directly in the tab itself:


Component af:commandNavigationItem must be set with itemListener, this allows to implement a custom listener method to close current tab:


By default, close icon becomes visible, only when user moves mouse focus on top of the tab. This could be misleading for the users. However, there is a fix with custom CSS - you can define icon for disclosed and undisclosed tab:

Posted by Andrej Baranovskij at 9:22 PM 14 comments

Labels: ADF, JDeveloper 11g, JDeveloper 11g R2, JDeveloper 12c, UI Shell

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.

Posted by Andrej Baranovskij at 9:36 PM 4 comments

Labels: ADF, Performance, UI Shell

The main goal of this post is to describe how to enable multitasking functionality in out of the box UI Shell template for ADF applications. Different UI Shell tabs could run different transactions and allow user to commit/rollback data in the scope of individual tab. Every UI Shell tab runs different ADF task flow loaded from the menu.

Here is sample application, enabled with multitasking UI Shell - TFActivationApp.zip. This application is built with single AM module, serving three VO's - Departments, Employees and Jobs. There will be separate ADF task flows, for each of these data objects, loaded in UI Shell tabs. AM module:


There is single data control defined:


Perhaps you would wonder - how this could work in multitasking environment and run multiple transactions, as there is single AM. This would work with ADF isolated task flows, as for each ADF isolated task flow, there is new AM instance created on runtime automatically. As there will be three ADF isolated task flows, one per VO - there will be three (at least three) AM instances created on runtime. One AM instance per ADF isolated task flow:


This is a key part to enable multitasking in UI Shell - make sure to use ADF isolated task flow loaded from the menu.

Firstly, let's run ADF task flows in UI Shell with default - shared mode. Two tabs are opened, modify Department Name in the first task flow:


Go to the second tab and modify First Name:


Press Save in the same tab - Employees. Check the log and you will see that data from both tabs (ADF shared task flows) was commited:


This is not what we want, ideally only data from current tab should be commited. To achieve that, go and set Isolated mode for the ADF task flows (if using ADF task flow template, this can be done centrally):


With isolated mode enabled, when you open new UI Shell tab and load ADF task flow:


New AM instance is created automatically, meaning new transaction is assigned for the ADF task flow loaded in UI Shell tab. We can observe new AM instance creation from the log:


With isolated mode turned on, changes made in UI Shell tabs are commited only for currently active tab:


Even if there are changes made in multiple tabs, changes only from currently active tab are commited. We can observe this from the log - commit is executed for currently active tab AM instance only:


To prove this, we can open second UI Shell tab, where changes were made previously - press Cancel and changes will be reverted:


Multitasking is working, but we need to test another aspect - validation handling. Ideally user should be able to navigate between UI Shell tabs, without being blocked by validation errors. When commiting data in active tab, there should be no validation errors displayed from other UI Shell tab.

Go to the first UI Shell tab - Departments and press Create button to insert new record:


Without typing any data, try to go to the second UI Shell tab - there will be validation errors reported and user will be blocked in the current tab:


In order to resolve this and allow navigation to the different tab, we need to set Immediate = true property for the tab item. This is UI Shell, you could get source code and modify it. This would require change UI Shell library in your project. There is another way - use MDS Seeded Customization to modify out of the box UI Shell, this is what I'm using in this sample application.

Enable MDS Seeded Customization for the project in ADF View section:


Don't forget to define SiteCC class in adf-config.xml, this class handles site level customizations global for all users:


To perform actual MDS Seeded Customization, switch JDeveloper to the Customization mode:


Once JDeveloper restarts in Customization mode, select Show Libraries option for your application, this will list all the libraries attached:


You can go and browse through the library contents, in this example - Oracle Extended Page Templates (it contains UI Shell). Open template page - dynamicTabShell and set Immediate = true for the tab item, this would allow to switch between tabs ignoring validation errors in the current UI Shell tab:


JDeveloper generates new file - MDS Seeded Customization file, this is where customization is stored and applied later on runtime:


Let's repeat the same test - insert new record in Departments tab:


We can navigate to the different UI Shell tab, but there are validation errors rendered from the first tab, when trying to submit data in the current tab - not good:


This can be fixed with a hint from my previous blog post - Skip Validation for ADF Required Tabs. You should set SkipValidation = true in the main page definition, the one which implemented UI Shell page:


It works now - data from second tab can be saved successfully, independently from validation state in the first tab:


Go to the first tab, you can see there are validation messages available. These messages are displayed in the scope of currently opened tab only:


One more good thing, I want to share with you - closing ADF task flows in UI Shell. When tab is closed in UI Shell, ADF task flow is destroyed automatically and finalizer is invoked, where you could release custom resources used by the ADF task flow. Closing tab in UI Shell:


Finalizer is invoked - we can see this from the log:


Finalizer must be defined in the ADF task flow properties:


Finalizer bean is defined in the same ADF task flow, request scope:

Posted by Andrej Baranovskij at 4:05 AM 14 comments

Labels: ADF, MDS, Multitasking, UI Shell