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:
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:
8 comments:
Very nice sample app, In sample application,
after closing the Dynamic tab from close icon, when i am refreshing the browser the same Dynamic tab is appearing automatically .. please check the issue.
Which JDEV version you are using?
Regards,
Andrejus
"When refreshing the browser the same Dynamic tab is appearing" happends in JDeveloper 11g R2. Is because on refreshing re executes ActionListener method "regionLaunch". Sorry about my english but this is happening to me too.
I will test this.
Regards,
Andrejus
You should change option to always load new tab, to reopen existing tab instead. Simply change true fall to be false in launchDepartments and other methods.
Regards,
Andrejus
Nice Article!. I am facing one issue though. while doing "Close others", if multiple tabs are dirty, the close others does not work. Any solution for this?
The behavior should be similar to how notpad++ "close others" work. For each dirty tab the focus should go to that tab and a popup should come. If user want to go ahead with closing, then, the tab should get close and we should go further processing other tabs in the same way
I think this should be possible, but it goes beyond the example in this post. I will put this into my todo list.
Regards,
Andrejus
Andrejus,
There is a problem with the popup aligId in the javascript - in 12.1.3 and 12.2.1, "alignId : comp.getAbsoluteLocator()" dos not work. This can be resolved by setting clientAttribute to true for the af:commandNavigationItem, and then use "alignId : comp.getClientId()".
Best regards,
Vladi
Post a Comment