Being a member of the WebCenter ATEAM, we are often asked to performance tune a WebCenter custom portal application or a WebCenter Spaces deployment. Most of the time, the process
is pretty much the same. For example, we often use tools like httpWatch and FireBug to monitor the application, and then perform load tests using JMeter or Selenium. In addition, there are the fine tuning of the different performance based tuning parameters that are outlined in the documentation and by blogs that have been written by my fellow ATEAMers (click on the "performance" tag in this ATEAM blog).
While performing the load test where the outcome produces a significant reduction in the systems resources (memory), one of the causes that plays a role in memory "leakage" is due to the implementation of the navigation menu UI. OOTB in both JDeveloper and WebCenter Spaces, there are sample (page) templates that include a "default" navigation menu. In WebCenter Spaces, this
is through the SpacesNavigationModel taskflow region, and in a custom portal (i.e. pageTemplate_globe.jspx) the menu UI
is contructed using standard ADF components. These sample menu UI's basically enable the underlying navigation model to visualize itself to some extent. However, due to certain limitations of these sample menu implementations (i.e. deeper sub-level of navigations items, look-n-feel, .etc), many customers have developed their own custom navigation menus using a combination of HTML, CSS and JQuery. While this
is supported somewhat by the framework, it
is important to know what are some of the best practices in ensuring that the navigation menu does not leak. In addition, in this blog I will point out a leak (BUG) that
is in the sample templates.
OK, E.T. the suspence
is killing me, what
is this leak? Note: for those who don't know, info on E.T. can be found here
In both of the included templates, the example given for handling the navigation
back to the "Home" page, will essentially provide a nice little memory leak every time the link
is clicked. Let's take a look a simple example, which uses the default template in Spaces. The outlined section below
is the "link", which
is used to enable a user to navigation
back quickly to the Group Space Home page.
When you (mouse) hover over the link, the browser displays the target URL. From looking initially at the proposed URL, this
is the intended destination. Note: "home" in this case
is the navigation model reference (id), that enables the display of the "pretty URL".
Next, notice the current URL, which
is displayed in the browser. Remember, that PortalSiteHome = home. The other highlighted item adf.ctrl-state, is very important to the framework. This item
is basically a persistent query parameter, which
is used by the (ADF) framework to managing the current session and page instance. Without this parameter present, among other things, the browser back-button navigation will fail. In this example, the value for this parameter
is currently 95K25i7dd_4. Next, through the navigation menu item, I will click on the Page2 link.
Inspecting the URL again, I can see that it reports that indeed the navigation
is successful and the adf.ctrl-state
is also in the URL.
For those that are wondering why the URL displays Page3.jspx, instead of Page2.jspx. Basically the (file) naming convention for pages created ar runtime in Spaces start at Page1, and then increment as you create additional pages. The name of the actual link (i.e. Page2)
is the page "title" attribute. So the moral of the story
is, unlike design time created pages, run time created pages the name of the file will 99% never match the name that appears in the link.
Next,
is to click on the quick link for navigating
back to the Home page.
Quick investigation yields that the navigation was indeed successful. In the browser's URL there
is a home (pretty URL) reference, and there
is also a reference to the adf.ctrl-state parameter. So what's the issue? Can you remember what the value was for the adf.ctrl-state? The current value
is 3D95k25i7dd_149. However, the previous value was 95k25i7dd_4. Here
is what happened. Remember when (mouse) hovering over the link produced the following target URL:
http://localhost:8888/webcenter/spaces/NavigationTest/home
This is great for the browser as this URL will navigate to the intended targer. However, what
is missing
is the adf.ctrl-state parameter. Since this parameter was not present upon navigation "within" the framework, the ADF framework produced another adf.ctrl-state (object). The previous adf.ctrl-state basically
is orphaned while continuing to be alive in memory. Note: the auto-creation of the adf.ctrl state does happen initially when you invoke the Spaces application for the first time. The following
is the line of code which produced the issue:
<af:goLink destination="#{boilerBean.globalLogoURIInSpace} ...
Here the boilerBean
is responsible for returning the "string" url, which in this case
is /spaces/NavigationTest/home. Unfortunately, again what
is missing
is adf.ctrl-state. Note: there are more than one instance of the goLinks in the sample templates.
So E.T. how can I correct this?
There are 2 simple fixes. For the goLink's destination, use the navigation model to return the actually "node" value, then use the goLinkPrettyUrl method to add the current adf.ctrl-state:
<af:goLink destination="#{navigationContext.defaultNavigationModel.node['home'].goLinkPrettyUrl}"} ... />
Note: the node value
is the [navigation model id]
Using a goLink does solve the main issue. However, since the link basically does a redirect, some browsers like IE will produce a somewhat significant "flash". In a Spaces application, this may be an annoyance to the users. Another way to solve the leakage problem, and also remove the flash between navigations
is to use a af:commandLink. For example, here
is the code example for this scenario:
<af:commandLink id="pt_cl2asf" actionListener="#{navigationContext.processAction}" action="pprnav">
<f:attribute name="node" value="#{navigationContext.defaultNavigationModel.node['home']}"/>
</af:commandLink>
Here, the navigation node to where home
is located
is delivered by way of the attribute to the commandLink. The actual navigation
is performed by the processAction, which
is needing the "node" value.
E.T. OK, you solved the OOTB sample BUG, what about my custom navigation code?
I have seen many implementations of creating a navigation menu through custom code. In addition, there are some blog sites that also give detailed examples. The majority of these implementations are very similar. The code usually involves using standard HTML tags (i.e. DIVS, UL, LI, .,etc) and either CSS or JavaScript (JQuery) to produce the flyout/drop-down effect. The navigation links in these cases are standard <a href... > tags. Although, this type of approach
is not fully accepted by the ADF community, it does work. The important thing to note here
is that the <a> tag value must use the goLinkPrettyURL method of contructing the target URL. For example:
<a href="${contextRoot}${menu.goLinkPrettyUrl}">
The main reason why this type of approach
is popular
is that links that are created this way (also with using af:goLinks), the pages become crawlable by search engines. CommandLinks are currently not search friendly. However, in the case of a Spaces instance this may be acceptable. So in this use-case, af:commandLinks, which would replace the <a> (or goLink) tags. The example code given of the af:commandLink above
is still valid. One last important item. If you choose to use af:commandLinks, special attention must be given to the scenario in which java script has been used to produce the flyout effect in the custom menu UI. In many cases that I have seen, the commandLink can only be invoked once, since there is a conflict between the custom java script with the ADF frameworks own scripting to control the view. The recommendation here, would be to use a pure CSS approach to acheive the dropdown effects.
One very important thing to note. Due to another BUG, the WebCenter environement must be patched to BP3 (patch p14076906). Otherwise the leak
is still present using the goLinkPrettyUrl method.
Thanks E.T.! Now I can phone home and not worry about my application running out of resources due to my custom navigation!
