Hello again Dunia,
You can find the selector list at
http://myfaces.apache.org/trinidad/skin-selectors.html.
Also, you can always check what selectors are being rendered on the
client
with the help of Firebug (for Firefox browser). Also, if you don't
want the
selector names to be compressed (making them very hard to identify),
add the
following context param to your web.xml file:
<context-param>
<param-name>
org.apache.myfaces.trinidadinternal.DISABLE_CONTENT_COMPRESSION</param-name>
<param-value>true</param-value>
</context-param>
Regards,
~ Simon
On 8/9/07, Azim, Dunia <[EMAIL PROTECTED]> wrote:
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";>
<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"; version="2.0"
xmlns:f="http://java.sun.com/jsf/core";
xmlns:h=" http://java.sun.com/jsf/html";
xmlns:trh="http://myfaces.apache.org/trinidad/html
"
xmlns:tr="
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)
________________________________________________________________________
