You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@tapestry.apache.org by Martin Reurings <ma...@windgazer.nl> on 2007/05/18 04:52:53 UTC
T5 Templating and alternate css files based on current page
We've created a simple template component to render the generic html layout
of the page and handle things like the navigation in the near future. Since
we've just started to use tapestry I am still trying to get my head around
some of the things that would probably seem obvious to anybody else.
I will have several CSS files linked in the head of my html file, since the
url to a specific page is unknown and may be nested in a directory structure
these files need to be absolute and should have the context root included.
Now I've figured out how to do that using this:
@Inject
@Path("context:static/css/layout.css")
private Asset layoutCSS;
The layout doesn't change, this is fine with me, but the color-scheme will
change depending on which section of the site a user is browsing in and this
introduces a variable in the directory structure. Now I've figured out how
to use a property to pass that value on to my template component:
<t:SiteDesign title="literal:xyz" skin="literal:advertiser" xmlns:t="
http://tapestry.apache.org/schema/tapestry_5_0_0.xsd">
However, I have spent some time trying to figure out how to get this value
injected into my accual url, as this doesn't work:
@Inject
@Path("context:static/css/${skin}/color-scheme.css")
private Asset skinCSS;
Can anybody tell me what the preferred way of solving this issue would be?
Thanx,
Martin
--
( /' _/_ __ _ _
|/|///)(/(/(//_(-/
_/
Website: http://www.windgazer.nl
Re: T5 Templating and alternate css files based on current page
Posted by Martin Reurings <ma...@windgazer.nl>.
You're right, but I cannot assume that the webapp will be running as the
root-context, it is accually unlikely that this app will be running as
the root-context. Also I cannot yet know under what context-name it will
be running, so I want to setup the links to all static content in a
context-aware manner.
However, since we're talking about the skin of the pages, I cannot know
from which level of directory nesting the page will be rendered, as such
I cannot create the links relative to the page ('../static/css/.....').
Then there's the matter that I may want to add some localized statics to
the page and that would be served well by using T5 approved methods of
creating the url's to static files.
Maybe I should ask my question in a different way, let's forget about
the code that I already have, please ignore it and try to answer the
following:
What would be the best way in Tapestry 5 to create the following html-code:
<link rel="stylesheet" type="text/css"
href="[context-uri]/static/css/[name-of-skin]/base.css" title="freshletter">
in which [context-uri] is expended into the name of the context and
[name-of-skin] is expended into the value of a configurable option. As a
bonus the accual asset (css-file) would be localized and thus expended
into base_en.css
Martin
Bill Holloway wrote:
> I thought that if a directory in the context didn't conflict with a
> tapestry page name (like 'start'), then the url to that directory
> would reference it ok. For example, I have a context dir (named
> 'webapp' under src/main) that looks like this:
>
> /src/main/webapp:
> - css
> - main_style.css
> - images
> - js
> - WEB-INF
>
> If I direct my browser to http://localhost:8080/css/main_style.css, I
> get a raw dump of the css file to the browser screen as I would
> expect. This .css file also gets properly injected if I use
>
> @Inject
> @Path ("context:css/main_style.css")
> private Asset _mainStyle;
>
> This is all properly working code (under Jetty at least :)
>
> Bill
>
> On 5/18/07, Martin Reurings <ma...@windgazer.nl> wrote:
>> Hmmm, but that would generate a path to the webserver ('/static/....')
>> root and not to the root of the context ('[appContext]/static/...'),
>> plus it would bypass internationalization. Now I admit for css files the
>> internationalization wouldn't matter but for skin-related images it
>> might matter a lot and I would like to work it out within the @Inject
>> method if possible.
>>
>> However, this idea has created a work-around for me, I'm now using the
>> @inject @path combo to create to url's to the separate skins and I'm
>> switching between them based on the value of the property 'skin'. I
>> think it could be improved upon:
>> public class SiteDesign {
>>
>> public final static String SKIN_PUBLISHER = "publisher";
>> public final static String SKIN_ADVERTISER = "advertiser";
>>
>> @Parameter
>> private String skin = "publisher";
>>
>> @Inject
>> @Path("context:static/css/advertiser/skin.css")
>> private Asset skin1CSS;
>>
>> @Inject
>> @Path("context:static/css/publisher/skin.css")
>> private Asset skin2CSS;
>>
>> public Asset getSkinCSS() {
>> if (skin.equalsIgnoreCase(SKIN_PUBLISHER)) return skin2CSS;
>> return skin1CSS;
>> }
>>
>> public String getSkin() {
>> return skin;
>> }
>>
>> }
>>
>>
>> Bill Holloway wrote:
>> > If "skin" is a component property that's properly evaluated for you,
>> > you can return the evaluated path as a page property to an Any
>> > component in the template for the <link>:
>> >
>> > In TheComponent.java
>> >
>> > private String _skin // perhaps a parameter or resolved in onActivate?
>> >
>> > public String getStylesheetPath ()
>> > {
>> > return "/static/css/" + _skin + "/color-scheme.css";
>> > }
>> >
>> > In TheComponent.html:
>> >
>> > ...
>> > <link t:type="any" element="link" rel="stylesheet" type="text/css"
>> > href="prop:stylesheetPath" />
>> > ...
>> >
>> > Bill
>> >
>> > On 5/17/07, Martin Reurings <ma...@windgazer.nl> wrote:
>> >> We've created a simple template component to render the generic html
>> >> layout
>> >> of the page and handle things like the navigation in the near future.
>> >> Since
>> >> we've just started to use tapestry I am still trying to get my head
>> >> around
>> >> some of the things that would probably seem obvious to anybody else.
>> >>
>> >> I will have several CSS files linked in the head of my html file,
>> >> since the
>> >> url to a specific page is unknown and may be nested in a directory
>> >> structure
>> >> these files need to be absolute and should have the context root
>> >> included.
>> >>
>> >> Now I've figured out how to do that using this:
>> >> @Inject
>> >> @Path("context:static/css/layout.css")
>> >> private Asset layoutCSS;
>> >>
>> >> The layout doesn't change, this is fine with me, but the color-scheme
>> >> will
>> >> change depending on which section of the site a user is browsing in
>> >> and this
>> >> introduces a variable in the directory structure. Now I've figured
>> >> out how
>> >> to use a property to pass that value on to my template component:
>> >> <t:SiteDesign title="literal:xyz" skin="literal:advertiser" xmlns:t="
>> >> http://tapestry.apache.org/schema/tapestry_5_0_0.xsd">
>> >>
>> >> However, I have spent some time trying to figure out how to get this
>> >> value
>> >> injected into my accual url, as this doesn't work:
>> >> @Inject
>> >> @Path("context:static/css/${skin}/color-scheme.css")
>> >> private Asset skinCSS;
>> >>
>> >> Can anybody tell me what the preferred way of solving this issue
>> >> would be?
>> >>
>> >> Thanx,
>> >>
>> >> Martin
>> >>
>> >> --
>> >> ( /' _/_ __ _ _
>> >> |/|///)(/(/(//_(-/
>> >> _/
>> >> Website: http://www.windgazer.nl
>> >>
>> >
>> >
>>
>>
>>
>
>
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org
Re: T5 Templating and alternate css files based on current page
Posted by Howard Lewis Ship <hl...@gmail.com>.
Another option is to inject the AssetSource service into your component, so
you can calculate the path passed to it.
On 5/17/07, Bill Holloway <bi...@gmail.com> wrote:
>
> I thought that if a directory in the context didn't conflict with a
> tapestry page name (like 'start'), then the url to that directory
> would reference it ok. For example, I have a context dir (named
> 'webapp' under src/main) that looks like this:
>
> /src/main/webapp:
> - css
> - main_style.css
> - images
> - js
> - WEB-INF
>
> If I direct my browser to http://localhost:8080/css/main_style.css, I
> get a raw dump of the css file to the browser screen as I would
> expect. This .css file also gets properly injected if I use
>
> @Inject
> @Path ("context:css/main_style.css")
> private Asset _mainStyle;
>
> This is all properly working code (under Jetty at least :)
>
> Bill
>
> On 5/18/07, Martin Reurings <ma...@windgazer.nl> wrote:
> > Hmmm, but that would generate a path to the webserver ('/static/....')
> > root and not to the root of the context ('[appContext]/static/...'),
> > plus it would bypass internationalization. Now I admit for css files the
> > internationalization wouldn't matter but for skin-related images it
> > might matter a lot and I would like to work it out within the @Inject
> > method if possible.
> >
> > However, this idea has created a work-around for me, I'm now using the
> > @inject @path combo to create to url's to the separate skins and I'm
> > switching between them based on the value of the property 'skin'. I
> > think it could be improved upon:
> > public class SiteDesign {
> >
> > public final static String SKIN_PUBLISHER = "publisher";
> > public final static String SKIN_ADVERTISER = "advertiser";
> >
> > @Parameter
> > private String skin = "publisher";
> >
> > @Inject
> > @Path("context:static/css/advertiser/skin.css")
> > private Asset skin1CSS;
> >
> > @Inject
> > @Path("context:static/css/publisher/skin.css")
> > private Asset skin2CSS;
> >
> > public Asset getSkinCSS() {
> > if (skin.equalsIgnoreCase(SKIN_PUBLISHER)) return skin2CSS;
> > return skin1CSS;
> > }
> >
> > public String getSkin() {
> > return skin;
> > }
> >
> > }
> >
> >
> > Bill Holloway wrote:
> > > If "skin" is a component property that's properly evaluated for you,
> > > you can return the evaluated path as a page property to an Any
> > > component in the template for the <link>:
> > >
> > > In TheComponent.java
> > >
> > > private String _skin // perhaps a parameter or resolved in onActivate?
> > >
> > > public String getStylesheetPath ()
> > > {
> > > return "/static/css/" + _skin + "/color-scheme.css";
> > > }
> > >
> > > In TheComponent.html:
> > >
> > > ...
> > > <link t:type="any" element="link" rel="stylesheet" type="text/css"
> > > href="prop:stylesheetPath" />
> > > ...
> > >
> > > Bill
> > >
> > > On 5/17/07, Martin Reurings <ma...@windgazer.nl> wrote:
> > >> We've created a simple template component to render the generic html
> > >> layout
> > >> of the page and handle things like the navigation in the near future.
> > >> Since
> > >> we've just started to use tapestry I am still trying to get my head
> > >> around
> > >> some of the things that would probably seem obvious to anybody else.
> > >>
> > >> I will have several CSS files linked in the head of my html file,
> > >> since the
> > >> url to a specific page is unknown and may be nested in a directory
> > >> structure
> > >> these files need to be absolute and should have the context root
> > >> included.
> > >>
> > >> Now I've figured out how to do that using this:
> > >> @Inject
> > >> @Path("context:static/css/layout.css")
> > >> private Asset layoutCSS;
> > >>
> > >> The layout doesn't change, this is fine with me, but the color-scheme
> > >> will
> > >> change depending on which section of the site a user is browsing in
> > >> and this
> > >> introduces a variable in the directory structure. Now I've figured
> > >> out how
> > >> to use a property to pass that value on to my template component:
> > >> <t:SiteDesign title="literal:xyz" skin="literal:advertiser" xmlns:t="
> > >> http://tapestry.apache.org/schema/tapestry_5_0_0.xsd">
> > >>
> > >> However, I have spent some time trying to figure out how to get this
> > >> value
> > >> injected into my accual url, as this doesn't work:
> > >> @Inject
> > >> @Path("context:static/css/${skin}/color-scheme.css")
> > >> private Asset skinCSS;
> > >>
> > >> Can anybody tell me what the preferred way of solving this issue
> > >> would be?
> > >>
> > >> Thanx,
> > >>
> > >> Martin
> > >>
> > >> --
> > >> ( /' _/_ __ _ _
> > >> |/|///)(/(/(//_(-/
> > >> _/
> > >> Website: http://www.windgazer.nl
> > >>
> > >
> > >
> >
> > --
> > ( /' _/_ __ _ _
> > |/|///)(/(/(//_(-/
> > _/
> > E-mail: martin@windgazer.nl
> > Website: http://www.windgazer.nl
> >
> > "The trouble with doing something right the first time, is nobody
> > appreciates how difficult it was."
> > -- Unknown Artist
> >
> >
> > ---------------------------------------------------------------------
> > To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
> > For additional commands, e-mail: users-help@tapestry.apache.org
> >
> >
>
>
> --
> "The future is here. It's just not evenly distributed yet."
>
> -- Traditional
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
> For additional commands, e-mail: users-help@tapestry.apache.org
>
>
--
Howard M. Lewis Ship
TWD Consulting, Inc.
Independent J2EE / Open-Source Java Consultant
Creator and PMC Chair, Apache Tapestry
Creator, Apache HiveMind
Professional Tapestry training, mentoring, support
and project work. http://howardlewisship.com
Re: T5 Templating and alternate css files based on current page
Posted by Bill Holloway <bi...@gmail.com>.
I thought that if a directory in the context didn't conflict with a
tapestry page name (like 'start'), then the url to that directory
would reference it ok. For example, I have a context dir (named
'webapp' under src/main) that looks like this:
/src/main/webapp:
- css
- main_style.css
- images
- js
- WEB-INF
If I direct my browser to http://localhost:8080/css/main_style.css, I
get a raw dump of the css file to the browser screen as I would
expect. This .css file also gets properly injected if I use
@Inject
@Path ("context:css/main_style.css")
private Asset _mainStyle;
This is all properly working code (under Jetty at least :)
Bill
On 5/18/07, Martin Reurings <ma...@windgazer.nl> wrote:
> Hmmm, but that would generate a path to the webserver ('/static/....')
> root and not to the root of the context ('[appContext]/static/...'),
> plus it would bypass internationalization. Now I admit for css files the
> internationalization wouldn't matter but for skin-related images it
> might matter a lot and I would like to work it out within the @Inject
> method if possible.
>
> However, this idea has created a work-around for me, I'm now using the
> @inject @path combo to create to url's to the separate skins and I'm
> switching between them based on the value of the property 'skin'. I
> think it could be improved upon:
> public class SiteDesign {
>
> public final static String SKIN_PUBLISHER = "publisher";
> public final static String SKIN_ADVERTISER = "advertiser";
>
> @Parameter
> private String skin = "publisher";
>
> @Inject
> @Path("context:static/css/advertiser/skin.css")
> private Asset skin1CSS;
>
> @Inject
> @Path("context:static/css/publisher/skin.css")
> private Asset skin2CSS;
>
> public Asset getSkinCSS() {
> if (skin.equalsIgnoreCase(SKIN_PUBLISHER)) return skin2CSS;
> return skin1CSS;
> }
>
> public String getSkin() {
> return skin;
> }
>
> }
>
>
> Bill Holloway wrote:
> > If "skin" is a component property that's properly evaluated for you,
> > you can return the evaluated path as a page property to an Any
> > component in the template for the <link>:
> >
> > In TheComponent.java
> >
> > private String _skin // perhaps a parameter or resolved in onActivate?
> >
> > public String getStylesheetPath ()
> > {
> > return "/static/css/" + _skin + "/color-scheme.css";
> > }
> >
> > In TheComponent.html:
> >
> > ...
> > <link t:type="any" element="link" rel="stylesheet" type="text/css"
> > href="prop:stylesheetPath" />
> > ...
> >
> > Bill
> >
> > On 5/17/07, Martin Reurings <ma...@windgazer.nl> wrote:
> >> We've created a simple template component to render the generic html
> >> layout
> >> of the page and handle things like the navigation in the near future.
> >> Since
> >> we've just started to use tapestry I am still trying to get my head
> >> around
> >> some of the things that would probably seem obvious to anybody else.
> >>
> >> I will have several CSS files linked in the head of my html file,
> >> since the
> >> url to a specific page is unknown and may be nested in a directory
> >> structure
> >> these files need to be absolute and should have the context root
> >> included.
> >>
> >> Now I've figured out how to do that using this:
> >> @Inject
> >> @Path("context:static/css/layout.css")
> >> private Asset layoutCSS;
> >>
> >> The layout doesn't change, this is fine with me, but the color-scheme
> >> will
> >> change depending on which section of the site a user is browsing in
> >> and this
> >> introduces a variable in the directory structure. Now I've figured
> >> out how
> >> to use a property to pass that value on to my template component:
> >> <t:SiteDesign title="literal:xyz" skin="literal:advertiser" xmlns:t="
> >> http://tapestry.apache.org/schema/tapestry_5_0_0.xsd">
> >>
> >> However, I have spent some time trying to figure out how to get this
> >> value
> >> injected into my accual url, as this doesn't work:
> >> @Inject
> >> @Path("context:static/css/${skin}/color-scheme.css")
> >> private Asset skinCSS;
> >>
> >> Can anybody tell me what the preferred way of solving this issue
> >> would be?
> >>
> >> Thanx,
> >>
> >> Martin
> >>
> >> --
> >> ( /' _/_ __ _ _
> >> |/|///)(/(/(//_(-/
> >> _/
> >> Website: http://www.windgazer.nl
> >>
> >
> >
>
> --
> ( /' _/_ __ _ _
> |/|///)(/(/(//_(-/
> _/
> E-mail: martin@windgazer.nl
> Website: http://www.windgazer.nl
>
> "The trouble with doing something right the first time, is nobody
> appreciates how difficult it was."
> -- Unknown Artist
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
> For additional commands, e-mail: users-help@tapestry.apache.org
>
>
--
"The future is here. It's just not evenly distributed yet."
-- Traditional
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org
Re: T5 Templating and alternate css files based on current page
Posted by Martin Reurings <ma...@windgazer.nl>.
Hmmm, but that would generate a path to the webserver ('/static/....')
root and not to the root of the context ('[appContext]/static/...'),
plus it would bypass internationalization. Now I admit for css files the
internationalization wouldn't matter but for skin-related images it
might matter a lot and I would like to work it out within the @Inject
method if possible.
However, this idea has created a work-around for me, I'm now using the
@inject @path combo to create to url's to the separate skins and I'm
switching between them based on the value of the property 'skin'. I
think it could be improved upon:
public class SiteDesign {
public final static String SKIN_PUBLISHER = "publisher";
public final static String SKIN_ADVERTISER = "advertiser";
@Parameter
private String skin = "publisher";
@Inject
@Path("context:static/css/advertiser/skin.css")
private Asset skin1CSS;
@Inject
@Path("context:static/css/publisher/skin.css")
private Asset skin2CSS;
public Asset getSkinCSS() {
if (skin.equalsIgnoreCase(SKIN_PUBLISHER)) return skin2CSS;
return skin1CSS;
}
public String getSkin() {
return skin;
}
}
Bill Holloway wrote:
> If "skin" is a component property that's properly evaluated for you,
> you can return the evaluated path as a page property to an Any
> component in the template for the <link>:
>
> In TheComponent.java
>
> private String _skin // perhaps a parameter or resolved in onActivate?
>
> public String getStylesheetPath ()
> {
> return "/static/css/" + _skin + "/color-scheme.css";
> }
>
> In TheComponent.html:
>
> ...
> <link t:type="any" element="link" rel="stylesheet" type="text/css"
> href="prop:stylesheetPath" />
> ...
>
> Bill
>
> On 5/17/07, Martin Reurings <ma...@windgazer.nl> wrote:
>> We've created a simple template component to render the generic html
>> layout
>> of the page and handle things like the navigation in the near future.
>> Since
>> we've just started to use tapestry I am still trying to get my head
>> around
>> some of the things that would probably seem obvious to anybody else.
>>
>> I will have several CSS files linked in the head of my html file,
>> since the
>> url to a specific page is unknown and may be nested in a directory
>> structure
>> these files need to be absolute and should have the context root
>> included.
>>
>> Now I've figured out how to do that using this:
>> @Inject
>> @Path("context:static/css/layout.css")
>> private Asset layoutCSS;
>>
>> The layout doesn't change, this is fine with me, but the color-scheme
>> will
>> change depending on which section of the site a user is browsing in
>> and this
>> introduces a variable in the directory structure. Now I've figured
>> out how
>> to use a property to pass that value on to my template component:
>> <t:SiteDesign title="literal:xyz" skin="literal:advertiser" xmlns:t="
>> http://tapestry.apache.org/schema/tapestry_5_0_0.xsd">
>>
>> However, I have spent some time trying to figure out how to get this
>> value
>> injected into my accual url, as this doesn't work:
>> @Inject
>> @Path("context:static/css/${skin}/color-scheme.css")
>> private Asset skinCSS;
>>
>> Can anybody tell me what the preferred way of solving this issue
>> would be?
>>
>> Thanx,
>>
>> Martin
>>
>> --
>> ( /' _/_ __ _ _
>> |/|///)(/(/(//_(-/
>> _/
>> Website: http://www.windgazer.nl
>>
>
>
--
( /' _/_ __ _ _
|/|///)(/(/(//_(-/
_/
E-mail: martin@windgazer.nl
Website: http://www.windgazer.nl
"The trouble with doing something right the first time, is nobody
appreciates how difficult it was."
-- Unknown Artist
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org
Re: T5 Templating and alternate css files based on current page
Posted by Bill Holloway <bi...@gmail.com>.
If "skin" is a component property that's properly evaluated for you,
you can return the evaluated path as a page property to an Any
component in the template for the <link>:
In TheComponent.java
private String _skin // perhaps a parameter or resolved in onActivate?
public String getStylesheetPath ()
{
return "/static/css/" + _skin + "/color-scheme.css";
}
In TheComponent.html:
...
<link t:type="any" element="link" rel="stylesheet" type="text/css"
href="prop:stylesheetPath" />
...
Bill
On 5/17/07, Martin Reurings <ma...@windgazer.nl> wrote:
> We've created a simple template component to render the generic html layout
> of the page and handle things like the navigation in the near future. Since
> we've just started to use tapestry I am still trying to get my head around
> some of the things that would probably seem obvious to anybody else.
>
> I will have several CSS files linked in the head of my html file, since the
> url to a specific page is unknown and may be nested in a directory structure
> these files need to be absolute and should have the context root included.
>
> Now I've figured out how to do that using this:
> @Inject
> @Path("context:static/css/layout.css")
> private Asset layoutCSS;
>
> The layout doesn't change, this is fine with me, but the color-scheme will
> change depending on which section of the site a user is browsing in and this
> introduces a variable in the directory structure. Now I've figured out how
> to use a property to pass that value on to my template component:
> <t:SiteDesign title="literal:xyz" skin="literal:advertiser" xmlns:t="
> http://tapestry.apache.org/schema/tapestry_5_0_0.xsd">
>
> However, I have spent some time trying to figure out how to get this value
> injected into my accual url, as this doesn't work:
> @Inject
> @Path("context:static/css/${skin}/color-scheme.css")
> private Asset skinCSS;
>
> Can anybody tell me what the preferred way of solving this issue would be?
>
> Thanx,
>
> Martin
>
> --
> ( /' _/_ __ _ _
> |/|///)(/(/(//_(-/
> _/
> Website: http://www.windgazer.nl
>
--
"The future is here. It's just not evenly distributed yet."
-- Traditional
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org