Monday, February 24, 2014

Bypass the IE Compatibility Mode (IE8/9) in ADF/WebCenter App

Some times the IE compatibility mode is enforced to be used by your system admin at an enterprise level, especially for the intranet sites. Since Jdeveloper 11.1.1.6, a popup warning is shown to the user when ADF/WebCenter application is running on compat mode. The issues seen in compat mode is not supported by Oracle.

The solution to bypass the compat mode has been documented via Oracle Doc 1555476.1. I'd like to extract the key information of the such solution here:

A new feature has been introduced in JDeveloper/ADF 11.1.1.7.0 and 11.1.2.4.0 and backported to 11.1.1.6.0, 11.1.2.0.0, 11.1.2.2.0 and 11.1.2.3.0 through patch 14400317.
It consists of bypassing Compatibility Mode in IE browsers. The ADF framework will force the target document to the maximum document mode supported by the browser using the X-UA-Compatible META tag. This applies to desktop browsers in compatibility view mode and also applications that use the IE WebBrowser component to host content within desktop applications. For more information see 11.1.2.4.0 ADF Faces Release Notes at http://jdevadf.oracle.com/adf-richclient-demo/docs/release-notes.html

To set this feature, apply the following:

1. For 11.1.1.6.0, 11.1.2.0.0, 1. 11.1.2.2.0 and 11.1.2.3.0, download and apply patch 14400317 in your JDeveloper/ADF environment.

2. For all the above mentioned versions, add, in the web.xml file of your ViewController project, the following context-param to enabled agent version detection using the Trident version over the browser version:

<context-param>
<param-name>org.apache.myfaces.trinidad.Agent#OVERRIDE_IE_COMPATIBILITY_MODE</param-name>
<param-value>true</param-value>

</context-param>

3. Finally, apply the patch to all environments where the application will also be deployed.

Sunday, February 23, 2014

Inline Style Isn't Just for CSS Styles

Inline styles are CSS styles applied to an user interface element. Multiple properties can be applied to an element and they are separated by semi-colon. Inline styles take highest precedence. Styling rules defined by inlineStyle in ADF are added directly to the JSF page source as part of the component markup. Any styles defined in CSS style class will be overridden by the inline styles on the element. This is an advantage as well as disadvantage. Element styles can be overridden unintentionally. For re-usability and maintenance, extensive use of inline styles should be avoided.

In this post I will discuss another use of inline style which is an uncommon use case in WebCenter Portal. It isn't just for CSS styles as I found in my recent practice. The inline style can set the selected state of a navigation node in WebCenter portal application. This is a very unique use case. It has to satisfy the following scenario:

1. Go link is used to implement the navigation model links. There are a few reasons golink is favored vs. command link in WebCenter Portal application. A team has a blogpost discussing this.

2. Redirect option is set to true for the navigation links.WebCenter by default uses PPR for navigation. The URL in the browser isn't to reflect the current page. Your heaven can be someone else's hell. I have seen this is specifically required by business users. To enable the browser to display the URL of the current page, you will need to set the redirect option to true. There are two ways to do this.
a): set the context parameter oracle.webcenter.navigationframework.REDIRECT_OPTIONS in the web.xml to toPrettyURL.

The following snippet should be added to web.xml
<context-param>
 <param-name>oracle.webcenter.navigationframework.REDIRECT_OPTIONS</param-name>
 <param-value>toPrettyURL</param-value>
</context-param>

b). You can also set the individual navigation link redirect option. This is configured in the navigation model xml file. Each navigation link defined in the navigation model has two options "Redirect to URL" and "Render URL in page template". Selecting "Redirect to URL" will also enforce the URL to be displayed in the actual URL of current page. Selecting "Redirect to URL" will add the following in the navigation model xml file:

<attribute value="true" isKey="false" attributeId="Redirect"/>

Setting the oracle.webcenter.navigationframework.REDIRECT_OPTIONS context parameter affects performance by adding an extra request/response for every navigation.

In my example, I used an ADF breadcrumb task flow (either the OOTB one or custom one) to map a navigation model in a WebCenter portal framework application.

We have a home page and it's the default home page for the portal application. After application starts, the breadcrumb works fine and will reflect the landed page correctly if we navigate from one link to another in the navigation. But it breaks when you copy one of the page URL and directly access it from your browser. This time, the breadcrumb will only display the last accessed landed page (not the current one). If the page isn't accessed yet, it will default to the home page node in the breadcrumb. Therefore the deep linked page failed in this case.

To illustrate the issue, I am attaching some images.

Step 1: run the application and the home page renders with "home" breadcrumb.


Step 2:Navigate to a child link



Step 3: The breadcrumb is reflected correctly. Note down the URL of this child link.



Step 4:  Navigate back to home page.



Step 5: Paste the child link (from step3) to a second tab and hit enter.


You will find the breadcrumb is still showing the home tab, which is incorrect. In this case, the breadcrumb is not "notified" of the current selected navigation node (page 3, in this case) and still think "home" node (last visited) is the current state of the breadcrumb.

The solution to the above issue is to define the following in the inline style of the each go link navigation implementation to enforce the selected state to be updated.

inlineStyle="#{node.selected ? '' : ''}"

In the above, both the expression for the inline style is empty no matter the node is selected or not, this is because I do not need to define any css styling for this element.

You can download the example application here.