Simon, thanks a lot for your extensive comments!
So best practice seems to be customizing the respective af|navigationpane
selectors and using my own selectors only where there are no defaults. The
difficulty with that approach is, that I can't find any specification for the
navigationpane selector and its subkeys, and respectively for the
commandNavigationItem, neither at the Trinidad nor at the Oracle website.
Does anyone have an idea where to find such a documentation? Or at least, where
I can find those base-desktop.xss and simple-desktop.xss (minimal-desktop.xss)
files, which where occasionally mentioned in the mailing list? I'm working with
Trinidad 1.2 .
best regards,
Dunia
________________________________
Von: Simon Lessard [mailto:[EMAIL PROTECTED]
Gesendet: Donnerstag, 9. August 2007 18:19
An: MyFaces Discussion
Betreff: Re: [Trinidad] using a custom skin
Hello Dunia,
See my comments below.
Regards,
~ Simon
On 8/9/07, Azim, Dunia <[EMAIL PROTECTED] > wrote:
Hi there,
is there any reliable documentation or complete example on how
to implement Trinidad Skins?
After going through all documentation on
http://myfaces.apache.org/trinidad/release.html (Skin Selector Keys and
Converting from ADF to Trinidad) and studying the Demo-Examples, we neither
find a way how to have a custom skin rendered, nor which default selector could
be customized for e.g. a commandNavigationItem component. Creating a custom
class, there is always some default overriding the custom selector.
It's true that we need more skinning documentation.
It would be great, if somebody could review the following code
snippets, to give us a hint, what's going wrong or lacking.
Thanks a lot!
=> We tried with just one selector class, putting "-tr-inhibit:
all" at the beginning, but font-size and -weight are not recognized.
So our desktopSkin.css looks like:
.mainNavigationBar {
-tr-inhibit: all;
font-family : verdana, Geneva, Arial, Helvetica,
sans-serif;
font-size: 18px;
font-weight: bold;
padding: 6px;
color: #000000;
background-color:lightgrey;
}
-tr-inhibit removes inherited properties. Since mainNavigationBar is
not a known selector it won't inherit any properties and thus -tr-inhibit won't
do anything. For navigationPane component, the valid selectors start with
af|navigationPane.
The trinidad-config.xml :
<trinidad-config xmlns="
http://myfaces.apache.org/trinidad/config
<http://myfaces.apache.org/trinidad/config> ">
<debug-output>true</debug-output>
<skin-family>prostep</skin-family>
or:
<skin-family>#{sessionScope.skinFamily}</skin-family>
...
This is good.
The trinidad-skins.xml :
<skins xmlns=" http://myfaces.apache.org/trinidad/skin";>
<skin>
<id>prostep.desktop</id>
<family>prostep</family>
<!-- <extends> minimal.desktop</extends> -->
<render-kit-id>org.apache.myfaces.trinidad.desktop</render-kit-id>
<style-sheet-name>skins/desktopSkin.css</style-sheet-name>
</skin>
</skins>
Good here as well.
Source code of our MainNavigation.jspx which is to implement
the style:
<?xml version="1.0" encoding="iso-8859-1" standalone="yes" ?>
<jsp:root xmlns:jsp=" http://java.sun.com/JSP/Page
<http://java.sun.com/JSP/Page> " version="2.0"
xmlns:f="http://java.sun.com/jsf/core";
xmlns:h=" http://java.sun.com/jsf/html
<http://java.sun.com/jsf/html> "
xmlns:trh="http://myfaces.apache.org/trinidad/html";
xmlns:tr=" http://myfaces.apache.org/trinidad
<http://myfaces.apache.org/trinidad> ">
<jsp:directive.page
contentType="text/html;charset=utf-8" />
<f:view>
<trh:html>
<trh:head title="Skin Demo">
<!--
<link rel="stylesheet" charset="UTF-8" type="text/css"
href="/WebTest1/adf/styles/cache/desktopSkin.css"/>
href="/WebTest1/faces/skins/desktopSkin.css"
href="/faces/skins/desktopSkin.css"
href="/WebTest1/skins/desktopSkin.css"
href="WebTest1/skins/desktopSkin.css"
href="skins/desktopSkin.css"
href="/skins/desktopSkin.css"
-->
You don't have to link to the CSS if you use either trh:head or
tr:document which is your case here.
</trh:head>
<trh:body>
<tr:navigationPane hint="bar" id="mainNavigation"
styleClass="mainNavigationBar">
<tr:commandNavigationItem
text="Upload"></tr:commandNavigationItem>
<tr:commandNavigationItem text="New
Items"></tr:commandNavigationItem>
<tr:commandNavigationItem text="Webspaces"
styleClass="mainNavigationBar"></tr:commandNavigationItem>
...
You don't have to set the style class if you use the good selectors
(af|navigationPane in that case)
=> instead of the <trh:head> and <trh:body> we tried with a
<tr:document> tag, but neither it worked.
=> What about the <link> tag in the code above?
Not needed.
Do we have to include the stylesheet file at all? If YES,
what's the correct uri?
No.
=> It doesn't seem to be necessary, as the source code in
Mozilla either way shows something like: <link rel="stylesheet" charset="UTF-8"
type="text/css" href="/WebTest1/adf/styles/cache/prostep-
desktop-1120493713-gecko-cmp.css;jsessionid=...">
=> further within the commandNavigationItem's element tag the
browser reads: class="mainNavigationBar
af_navigationPane_bar-inactive-enabled" ... => What does that mean?
This mean that the skin selector that was used was
af|navigationPane::bar-inactive-enabled for the item and also included the
style class that you defined in the page, i.e. mainNavigationBar.
MainNavigation.jspx is addressed from a frameBorderLayout:
<f:facet name="center">
<trh:frameBorderLayout width="80%" height="80pt">
<f:facet name="top">
<trh:frame
source="/MainNavigation.jspx" width="100%" height="40pt" scrolling="no"
marginHeight="0" marginWidth="0"></trh:frame>
</f:facet>
...
Sorry, lots of questions. But at least getting some precise
hints on the basics would be really great.
Dunia Azim
________________________________________________________________________
PROSTEP AG, Dolivostraße 11, D-64293 Darmstadt
HR: Amtsgericht Darmstadt, HRB 8383
Vorstand: Dr. Bernd Pätzold (Vorsitz), Reinhard Betz
Aufsichtsrat: Dr. Heinz-Gerd Lehnhoff (Vorsitz)
________________________________________________________________________
