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
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
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.
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.
Comments