Skip to main content

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&lt;String&gt; 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&lt;String&gt; 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&lt;String&gt; 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.

Comments

Popular posts from this blog

How to: Adding Speech to Oracle Digital Assistant; Talk to me Goose

At Oracle Code One in October, and also on DOAG in Nurnberg Germany in November I presented on how to go beyond your regular chatbot. This presentation contained a part on exposing your Oracle Digital Assistant over Alexa and also a part on face recognition. I finally found the time to blog about it. In this blogpost I will share details of the Alexa implementation in this solution.
Typically there are 3 area's of interest which I will explain. Webhook Code to enable communication between Alexa and Oracle Digital AssistantAlexaDigital Assistant (DA) Explaining the Webhook Code The overall setup contains of Alexa, a NodeJS webhook and an Oracle Digital Assistant.
The webhook code will be responsible for receiving and transforming the JSON payload from the Alexa request. The transformed will be sent to a webhook configured on Oracle DA. The DA will send its response back to the webhook, which will transform into a format that can be used by an Alexa device. To code exposes two REST …

ADF 11g Quicky 3 : Adding Error, Info and Warning messages

How can we add a message programatically ? Last week I got this question for the second time in a months time. I decided to write a short blogpost on how this works.

Adding messages is very easy, you just need to know how it works.
You can add a message to your faces context by creating a new FacesMessage. Set the severity (ERROR, WARNING, INFO or FATAL ), set the message text, and if nessecary a message detail. The fragment below shows the code for an ERROR message.

1: public void setMessagesErr(ActionEvent actionEvent) {
2: String msg = "This is a message";
3: AdfFacesContext adfFacesContext = null;
4: adfFacesContext = AdfFacesContext.getCurrentInstance();
5: FacesContext ctx = FacesContext.getCurrentInstance();
6: FacesMessage fm =
7: new FacesMessage(FacesMessage.SEVERITY_ERROR, msg, "");
8: ctx.addMessage(null, fm);
9: }


I created a simple page with a couple of buttons to show the result of setting the message. When the butto…

How to use node-red to interact with twitter

Recently I had to setup an application that was able to read twitter and, based on some predefined keywords,  had to reply to specific tweets. I decided to have a look at node-red to set this stuff up. It proofed to be rather straightforward and easy to implement. The hardest part was to get approval for a twitter developer account. In this post I describe how I used node-red and how I implemented the interaction with twitter.
What is node-red, and how to use it? Node-RED  (https://nodered.org/) is a programming tool for wiring together hardware devices, APIs and online services in new and interesting ways. It provides a browser-based editor that makes it easy to wire together flows using the wide range of nodes in the palette that can be deployed to its runtime in a single-click.  You can use node-RED in many ways, but for the purpose of this demo I decided to run it in a docker image. I used the way described here (https://hub.docker.com/r/nodered/node-red-docker/), as this is a no…