In our second installment of the WebCenter workbench we take a look at WebCenter PS3′s new Nagivation Model and how it is possible to create fly-out, multi-level drop down menus using it and CSS3 stylesheets. This allows WebCenter navigations to be developed using very common web design and development skills, but take advantage of many other WebCenter platform features.
Source Code
Complete Sample Page Template
ADF CSS Fragment
UL-based Navigation Model Code Snippet
JSTL Inclusion Text
I tried the tutorial and it worked on my practice spaces page. Is it possible to use this technique to customize the header and footer and completely override the default template?
joeswislocki You can definitely create your own template - you will just need to include the snippets of code to provide admin links, etc in the UI. The ones that ship are meant as examples, so you can definitely elaborate based on them.
Was that what you were asking?
Cheers,
John
John Brunswick Basically, how far can I take my design? What are my limitations? If I create a design from scratch, is it possible to duplicate it within Spaces and WebCenter Portal?
joeswislocki There are no design limitations - it is possible to have the UIs for Spaces / Portal be the same. The key is understanding the geometry with ADF. Take a look at http://www.johnbrunswick.com/2012/05/webcenter-portal-template-design-best-practices/ for some details that might be helpful.
Hi John,
We have a WebCenter Spaces 11g PS4 env that is using a custom template and navigation resources to display our spaces using a page hierarchy. We are using the out of the box spaces navigation menu component to display the navigation hierarchy within our template. The issue that we are having is when accessing a page through a direct link to the page (i.e. /webcenter/space/spaceName/pages/pageName the navigation context is not loaded properly for that page. This will cause a lot of confusion for our users who will be saving Favorites or accessing the pages through their Notifications as the navigation context will not load properly. Have you experienced this problem with any of your custom navigations that display parent and child menus?
Thanks,
Nick Olmsted
nickolmsted Hey Nick,
Apologies for the delay. You are correct about the URLs and context. I am not certain if there is an update from product management - have you opened an SR around it?
Depending on how your nav is setup you could use parse the URL to sections of your nav UI to illustrate the context of the given URL at a visual level if a person was accessing via a Friendly URL, instead of the full ADF generated URL.
Hope that helps!
Cheers,
John
Great article!
I was wondering if you had an idea how you would add the IconURI next to each menu node in your code sample?
<c:set var="navNodes" value="${navigationContext.defaultNavigationModel.listModel['startNode=/, includeStartNode=false, includeShowIcons=true']}" scope="session"/>
<ul id="nav">
<c:forEach var="menu" varStatus="vs" items="${navNodes}">
<li>
<img src="#{menu.iconURI}"/>
<!--img src="#{menu.attributes['IconURI']}"/-->
<a href="/webcenter${menu.goLinkPrettyUrl}">${menu.title}</a>
None of the above appears to work.
tcwbot Thanks - I have not worked with the IconURI attribute, but may suggest setting a second CSS class with each node in the navigation
<li class="page${menu.title}"><a href... etc etc ...>link name</a></li>
Then in the CSS associated with the page you can reference the li and use a CSS entry to setup the spacing, background, color, etc for specific links.
This is a really common web pattern and could hopefully offer you a good degree of flexibility.
Hope that helps!
Cheers,
John
This was a great help, thanks mate!
[...] great post (and video) by John Brunswick here shows an example on how one can quickly create a new Page Template with “flyout-menus” [...]
[...] contentStyle applied to each list in a shuttle CSS in ADF Faces Styling with ContentStyle helps us to directly address content within a component. Often times components have a DIV wrapper and we ultimately want to stlye a part of the inside of a component, opposed to a wrapper. Skinning Approach Coarse Grained & Fine Grained When skinning a WebCenter Portal instance we can look at it from coarse-grained and fine-grained standpoint – meaning that many large elements on the page like the background and the center of the page can use very basic styling techniques to impart a look and feel to particular corporate brand with very little effort. At the fine-grained level we can apply the styling to specific ADF components and controls within the page. A lot of value to be gained simply from the coarse-grained approach and then a small amount of tuning with the fine grained goes a long way to complete your overall look and feel that will be inline with your corporate brand. Hybrid Model Often times a hybrid model of styling works very well for portals. Taking the coarse-grained elements (page background, main portion of the body, etc) and using traditional CSS approaches with those, but then getting specific using the ADF skinning that we discussed previously, will work together to generate your overall portal appearance. Navigation via CSS An example of a hybrid approach would be using technology in WebCenter to generate a menu that uses unordered lists and list items, then applyies traditional CSS to them. Even though you’re benefiting from WebCenter’s navigation models, you’re not doing traditional ADF skinning – but instead using plain old CSS. As an example, take a look at E2.0 Workbench Podcast 2 – WebCenter PS3 Navigation Models and CSS Menus. [...]