... but unfortunately, navigationPane is specifically not documented there. I cleaned up a lot of the skin selectors doc, but it would be great for someone to take on that remaining task (hint, hint, committers) :)
-- Adam On 8/9/07, Simon Lessard <[EMAIL PROTECTED]> wrote: > 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) > > > ________________________________________________________________________ > > > >
