WebCenter PS3 - Navigation Models and Pure CSS3 Menus

In our second installment of the WebCenter workbench we take a look at WebCenter PS3's new Navigation 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 to create a navigation like the following.

PS3_CSS_Navigation.jpg

Code is available for download below the video. Looking forward to seeing what people create from this basic example!

Code Samples from Video

Navigation Model Driven

JSTL Snippet

CSS Code

Complete Sample Template

Comments:

Very nice demo, John! It shows some of the true power of PS3.

Posted by Peter Moskovits on January 25, 2011 at 06:04 PM CST #

Great viewlet John.. Can you promise me to do all Oracle viewlets from now on with webcenter. :) Also query with regards to html now in ps3 templates. I may of been told this wrongly in the past, but.. In previous training courses I was told you should never include custom html within templates.. And should always use adf tags and apply custom styleClasses. As a work around I would use the f:verbatim to encorporate html 5 tags which were not generated by renderkit such as canvas. Also I was a bit confused how you were able to mix match html in jspx file. I believe although I might be wrong on this. - There is a new af:group tag that allows you to add custom html but I didnt see you wrap the html in any tag you just dumped it below the decorativeBox.. Is this something new.. I haven't got my ps3 vm up to test but I thought pasting html into jspx would just error and cause the template to not display or revert back?

Posted by John Sim on January 25, 2011 at 06:57 PM CST #

Post a Comment:
Comments are closed for this entry.
About

Enterprise 2.0 and Content Management

Search

Archives
« April 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today