ADF 11g : Adding close this / close others / close all to the UIShell

During one of my presentations at ODTUG KScope12 in San Antonio I showed how to add a menu with close this / close others / close all to the UIShell. This pattern is very common throughout modern browsers and other programs that use any kind of tabbed navigation.

Even JDeveloper itself uses this functionality. In this post I'll describe how to add this functionality to the UIShell.

The UI Shell.
The UIShell used in this post is not the UIShell that can be downloaded from Oracle OTN. There are several reasons why I do not use this particular UIShell, but the main reason is that it is not state safe. The UI Shell that I use, is the one that is available on blogs.oracle.com/jheadstart/entry/core_adf11_uishell_with_dynamic
With that UI Shell it is actually very simple to implement this pattern.

The Menu Itself
The menu is implemented in a popup, containing a menu component woth nested commandmenuitems. These items are responsible for either close this, close all and close others. When the menu item is invoked, a set propertyListener is fired in order to store the actual tab, that the menu was invoked on, in memory. Notice that I user a managed bean called DynTabManager. I will show what code to add to this class later.
The menu is placed in the DynamicTabsPageTemplate.


 <af:popup id="contextMenu" contentDelivery="lazyUncached" 
   eventContext="launcher" launcherVar="source"> 
   <af:menu id="men1" text="#{source.attributes.menuInvokedOnTab}"> 
    <af:commandMenuItem id="cmi1" text="close" 
     actionListener="#{viewScope.dynTabManager.closeThis}"> 
     <af:setPropertyListener from="#{source.attributes.menuInvokedOnTab}" 
      to="#{viewScope.dynTabManager.menuInvokedOnTab}" 
      type="action"/> 
    </af:commandMenuItem> 
     <af:commandMenuItem id="cmi2" text="close others" 
      actionListener="#{viewScope.dynTabManager.closeOthers}"> 
      <af:setPropertyListener from="#{source.attributes.menuInvokedOnTab}" 
      to="#{viewScope.dynTabManager.menuInvokedOnTab}" 
      type="action"/> 
     </af:commandMenuItem> 
     <af:commandMenuItem id="cmi3" text="close all" 
      actionListener="#{viewScope.dynTabManager.closeAll}"> 
      <af:setPropertyListener from="#{source.attributes.menuInvokedOnTab}" 
      to="#{viewScope.dynTabManager.menuInvokedOnTab}" 
      type="action"/> 
     </af:commandMenuItem> 
    </af:menu> 
   </af:popup> 


Invoking the menu
The menu will be invoked on a tab. The DynmicTabs.jsff is responsible for this. The tabs are implemented by a navigationpane, containing commandNavigationItems. By adding a clientListener to the commandNavigationItem, I am able to invoke a javascript function that will show the context menu.

   <af:navigationPane ...........>  
   <af:commandNavigationItem ...............>  
    <f:attribute name="tabId" value="#{tab.id}"/>  
    <af:clientListener method="showMenu" type="contextMenu"/>  
    <af:clientAttribute name="menuInvokedOnTab" value="#{tab.id}"/>  
   </af:commandNavigationItem>  
   </af:navigationPane >  
 



 This javascript finally shows the context menu. 
 

 function showMenu(evt) { 
   var popup = AdfPage.PAGE.findComponent("pt:contextMenu"); 
   …………….. 
   popup.show(hints); 
   evt.cancel(); 
 } 

Implementing the closeAll, CloseThis and CloseOthers
For implementing the actual functionality backing the menu, I use an existing method in th DynTabManager class. This class contains the removeTab() method that is responsible for closing a tab when the close icon is clicked.

I simply call this method for all tabs that I need to be closed, regardless of what menu item was invoked. Take a look at closeThis(). Becasue of the setPropertyListener that is invoked in the menu (see previous code sample) I know on which tab I invoked the menu. I use this to search the list with ActiveTabs. As soon as the Tab matches, I add it to a List with tabs to remove. I then simply call removeTab() for all tabs that need to be removed. In this case (closeThis) only one tab is added to the list with tabs to close. I also need to add one extra property to the DynTabManager class.

 private String _menuInvokedOnTab = null;  

For this I generate getters and setters, and I can use it in order to set and get the id of the Tab that the menu is invoked on.


 public void closeThis(ActionEvent action) { 
   String id = getMenuInvokedOnTab(); 
   List<String> tabsToRemove = new ArrayList(); 
   for (DynTab t : getActiveTabList()) { 
    String x = t.getId(); 
    if (id == x) { 
      tabsToRemove.add(x); 
    } 
   } 
   for (String t : tabsToRemove) { 
    removeTab(t); 
   } 
 } 
If I invoke close others, the method for this is almost similar, except that I don't remove the tab that matches the one that the menu was invoked upon. Instead of that, I remove all the other tabs (which makes sense when I pick closeOthers)

public void closeOthers(ActionEvent action) { 
   String id = getMenuInvokedOnTab(); 
   List<String> tabsToRemove = new ArrayList(); 
   for (DynTab t : getActiveTabList()) { 
    String x = t.getId(); 
      if (id != x) { 
       tabsToRemove.add(x); 
      } 
   } 
   for (String t : tabsToRemove) { 
     removeTab(t); 
   } 
 } 
Final option is the closeAll where I add all tabs in the ActiveTabList to the tabsToRemove. And for all the TabsToRemove I simply call removeTab(), that will handle the functionality to close a tab.


 public void closeAll(ActionEvent action) { 
   List<String> tabsToRemove = new ArrayList(); 
   for (DynTab t : getActiveTabList()) { 
    tabsToRemove.add(t.getId()); 
   } 
   for (String t : tabsToRemove) { 
    removeTab(t); 
   } 
 } 



The result
The result is a contextMenu that can be invoked on an open tab in de UIShell. It doesn't matter if you use an active or inactive tab. The menu will know where it was invoked.

 So when I pick closeOthers on the Jobs tab, the result looks like this.

Resources

JHeadstart weblog about UI Shell
Workspace can be downloaded here.