myfaces-users mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From "Simon Lessard" <simon.lessar...@gmail.com>
Subject Re: [Trinidad] using a custom skin
Date Thu, 09 Aug 2007 18:20:46 GMT
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 <Dunia.Azim@prostep.com> 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:simon.lessard.3@gmail.com]
> *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 <Dunia.Azim@prostep.com > 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)
> ________________________________________________________________________
>

Mime
View raw message