You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@myfaces.apache.org by "Azim, Dunia" <Du...@PROSTEP.com> on 2007/08/09 17:28:30 UTC
[Trinidad] using a custom skin
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 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;
}
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>
...
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>
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"
-->
</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>
...
=> 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?
Do we have to include the stylesheet file at all? If YES, what's the correct uri?
=> 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?
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
CC-SwAD
Dolivostraße 11
D-64293 Darmstadt
Tel: +49 6151 9287 468
Fax: +49 6151 9287 326
dunia.azim@prostep.com
www.prostep.com
________________________________________________________________________
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)
________________________________________________________________________
Re: [Trinidad] using a custom skin
Posted by "Azim, Dunia" <Du...@PROSTEP.com>.
...well that was exactly the point where I got stuck with it. But I found the base-desktop.xss in the web. That makes the whole thing appear in a much brighter light. Think for now, we can get along with it quite well.
Thanx to everybody!
Dunja
On 8/9/07, Adam Winer <aw...@gmail.com> wrote:
... 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 < simon.lessard.3@gmail.com> 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 <Du...@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 <ma...@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 <http://java.sun.com/jsf/core> "
> > > xmlns:h=" http://java.sun.com/jsf/html"
> > >
> xmlns:trh=" http://myfaces.apache.org/trinidad/html <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)
> >
> ________________________________________________________________________
> >
>
>
________________________________________________________________________
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)
________________________________________________________________________
Re: [Trinidad] using a custom skin
Posted by Simon Lessard <si...@gmail.com>.
Oups, my bad, I should have checked. I guess it's time for me to make myself
a bit more useful since I play with skin on daily basis...
On 8/9/07, Adam Winer <aw...@gmail.com> wrote:
>
> ... 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 <si...@gmail.com> 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 <Du...@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)
> > >
> > ________________________________________________________________________
> > >
> >
> >
>
Re: [Trinidad] using a custom skin
Posted by Stephen Friedrich <tr...@eekboom.com>.
Thanks a million, Jeanne. It's finally working.
I got confused by firebug's display of style. It showed the tabs selector
before "color:#00000;" and when I changed that color there, it took effect.
I did not notice/understand that the tabs selector was just accidentally last
in a long list of comma separated selectors.
Jeanne Waldman wrote:
> Are you skinning a navigationPane hint="bar" or hint="tabs"? I'm
> confused because you
> said you changed the background color using af|navigationPane::bar, but
> then you ask
> about navigationPane::tabs styles.
>
> If it is navigationPane bar, then you can do this:
>
> af|navigationPane::bar-active-enabled af|navigationPane::bar-content A {
>
> color: white;
> }
> /* Note that it is not our standard to use html elements in the skin
> selectors, but this went in without being reviewed.
> It does work fine. */
>
> - Jeanne
Re: [Trinidad] using a custom skin
Posted by Jeanne Waldman <je...@oracle.com>.
Are you skinning a navigationPane hint="bar" or hint="tabs"? I'm
confused because you
said you changed the background color using af|navigationPane::bar, but
then you ask
about navigationPane::tabs styles.
If it is navigationPane bar, then you can do this:
af|navigationPane::bar-active-enabled af|navigationPane::bar-content A {
color: white;
}
/* Note that it is not our standard to use html elements in the skin
selectors, but this went in without being reviewed.
It does work fine. */
- Jeanne
Stephen Friedrich wrote:
> Arg!
> I have managed to specify dark-blue as background for my navigation
> pane by using:
> af|navigationPane::bar
> Now black text on dark blue background isn't the most readable, so I
> tried to set the text color...and failed.
> How the heck should I translate the style displayed by firebug to skin
> syntax:
> .af_navigationPane_tabs-inactive .af_navigationPane_tabs-mid a
> The following does not work (nor does any of the trillions of
> variations I have tried):
> af|navigationPane::tabs-inactive af|navigationPane::tabs-mid a {
> color:#ffffff;
> }
>
> Thanks for any comments!
>
> Adam Winer wrote:
>> ... 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 <si...@gmail.com> 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 <Du...@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)
>>>>
>>> ________________________________________________________________________
>>>
>>>
>
>
Re: [Trinidad] using a custom skin
Posted by Stephen Friedrich <tr...@eekboom.com>.
Arg!
I have managed to specify dark-blue as background for my navigation pane by using:
af|navigationPane::bar
Now black text on dark blue background isn't the most readable, so I tried to set the text color...and failed.
How the heck should I translate the style displayed by firebug to skin syntax:
.af_navigationPane_tabs-inactive .af_navigationPane_tabs-mid a
The following does not work (nor does any of the trillions of variations I have tried):
af|navigationPane::tabs-inactive af|navigationPane::tabs-mid a {
color:#ffffff;
}
Thanks for any comments!
Adam Winer wrote:
> ... 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 <si...@gmail.com> 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 <Du...@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)
>>>
>> ________________________________________________________________________
>>
Re: [Trinidad] using a custom skin
Posted by Adam Winer <aw...@gmail.com>.
... 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 <si...@gmail.com> 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 <Du...@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)
> >
> ________________________________________________________________________
> >
>
>
Re: [Trinidad] using a custom skin
Posted by Simon Lessard <si...@gmail.com>.
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 <Du...@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)
> ________________________________________________________________________
>
AW: [Trinidad] using a custom skin
Posted by "Azim, Dunia" <Du...@PROSTEP.com>.
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 <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)
________________________________________________________________________
Re: [Trinidad] using a custom skin
Posted by Simon Lessard <si...@gmail.com>.
Hello Dunia,
See my comments below.
Regards,
~ Simon
On 8/9/07, Azim, Dunia <Du...@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
> CC-SwAD
> Dolivostraße 11
> D-64293 Darmstadt
>
> Tel: +49 6151 9287 468
> Fax: +49 6151 9287 326
>
> dunia.azim@prostep.com
> www.prostep.com
> ________________________________________________________________________
> 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)
> ________________________________________________________________________
>