Oliver Gottwald wrote:
hi,
I'm currently working on a application that has a custom nav from the
graphic designer. Is it possible to specify a custom theme location for
the jscookMenu?
ie:
<x:jscookMenu layout="hbr" theme="customTheme" >
It's great to see Martin's work on allowing custom themes to be
specified via the jscookMenu tag.
In the meantime, however, it is possible to set this up with the
existing code. I just create a directory in the webapp to hold the theme
stuff (eg "/themes/menu") then reference the necessary files in the jsp
pages (or in my case from a Tiles template):
<body>
<script type="text/javascript"
src="<%= request.getContextPath(); %>
/themes/menu/theme.js">
</script>
<link rel="stylesheet" type="text/css"
href="<%= request.getContextPath() %>
/themes/menu/theme.css">
<f:subview id="menu">
<tiles:insert attribute="menu" flush="false" />
</f:subview>
<br/>
...
and the menu tile has:
<t:jscookMenu layout="hbr" theme="ThemeOmni" d="navMenu">
<t:navigationMenuItems value="#{menu.items}"/>
</t:jscookMenu>
Note that the reference to the custom theme js and css files *must* be
done from the beginning of the body of the page not the header. This is
because the custom theme must be loaded *after* the core jscookmenu.js
file but before the actual menu definitions generated by the jscookMenu tag.
Note also that the theme.js file will need to generate URLs pointing to
the relevant icons etc. This means knowing the "context path" of the
app. I work around this by doing:
var cmThemeOmniBase = omni_page_base + "/themes/menu";
in the theme.js (ie assuming javascript var omni_page_base is set) and
defining the var in the tiles template:
<%--
- Used by theme javascript files...
--%>
<script type="text/javascript">
var omni_page_base="<%= request.getContextPath() %>";
</script>
If you know of a more elegant solution, please let me know.
Regards,
Simon
