Hi,
I'd like to ask how can I include a css file into a component or even
a page. I use own Border component with Shell. Stylesheets could be
imported there, but what if I want to include css specific to page or
component?
thanks
tomas
---------------------------------------------------------------------
To unsubscribe, e-mail: tapestry-user-unsubscribe@jakarta.apache.org
For additional commands, e-mail: tapestry-user-help@jakarta.apache.org
On Saturday 27 Aug 2005 14:46, Alan Chandler wrote: > On Thursday 25 Aug 2005 21:40, Alan Chandler wrote: > ... > > > I have done it 3 different ways now, trying various things out using TAP > > 4.. My final way is still not working, but I think its finding the style > > sheet, its just that other parts of my application is not working > > ... > > > 3) (NOTE NOT YET FULLY WORKING) I have put the stylesheet in the Root > > Context of tomcat. In the server.xml file for tomcat (hosted via > > eclipse) I have ... > > Just to say, I got this running this morning and it DOES work. Egg on Face!!! No it doesn't. The reason it appeared to be working is that Eclipse left some files around in its .deployable directory that was a hang over from one of the previous tests. Even specifying an absolute path for the asset - the Asset management stuff adds the application name to the path automatically. -- Alan Chandler http://www.chandlerfamily.org.uk --------------------------------------------------------------------- To unsubscribe, e-mail: tapestry-user-unsubscribe@jakarta.apache.org For additional commands, e-mail: tapestry-user-help@jakarta.apache.org
On Thursday 25 Aug 2005 21:40, Alan Chandler wrote: ... > > I have done it 3 different ways now, trying various things out using TAP > 4.. My final way is still not working, but I think its finding the style > sheet, its just that other parts of my application is not working ... > 3) (NOTE NOT YET FULLY WORKING) I have put the stylesheet in the Root > Context of tomcat. In the server.xml file for tomcat (hosted via eclipse) > I have > > <!-- Tomcat Root Context --> > > <Context path="" docBase="/home/alan/dev/famtree/rootContext" debug="0"/> > > <!-- Tomcat Examples Context --> > > > <Context docBase="/home/alan/dev/famtree/.deployables/famtree" > path="/famtree" reloadable="true" > source="com.ibm.wtp.web.server:famtree"/></Host> > > > The stylesheet and related images are all stored > in /home/alan/dev/famtree/rootContext/styles > > and my component Border.html now simply refers to it via > > <html jwcid="@Shell" stylesheet="asset:stylesheet" title="Family Tree > Application"> > > But because I have simplified my border and so longer have an associated > java class, I have add to add a component specification Border.jwc with > > <?xml version="1.0"?> > <!DOCTYPE component-specification PUBLIC > "-//Apache Software Foundation//Tapestry Specification 4.0//EN" > "http://jakarta.apache.org/tapestry/dtd/Tapestry_4_0.dtd"> > <component-specification> > <asset name="stylesheet" path="/styles/chandler.css" /> > </component-specification> > > > in it. Just to say, I got this running this morning and it DOES work. -- Alan Chandler http://www.chandlerfamily.org.uk --------------------------------------------------------------------- To unsubscribe, e-mail: tapestry-user-unsubscribe@jakarta.apache.org For additional commands, e-mail: tapestry-user-help@jakarta.apache.org
Yeah, I saw it a while ago, but it relies on JavaScript. Furthermore,
it's not able to do all the things I want such a component to do.
My own @Style component actually works now, including page/component
style sheets on the go with only minor configuration - you need the
style sheet declared as an IAsset somewhere.
Next up, I want it to be able to include small bits of CSS for the
<head/> section's <style/> tag. And perhaps enabling it to attach
instance-specific styles via the "#id { /* style here */ }" notation.
That is, you'll be able to customize specific components' styles easily.
I don't think there's much else such a component should be able to do.
But if you have any additional ideas, please share!
-Filip
Tomáš Drenčák wrote:
> I've found TapFx library on http://tapfx.sf.net/ . There's a component
> named Style and it seems that it solves problem in elegant way...
>
> tomas
>
> 2005/8/25, Alan Chandler <al...@chandlerfamily.org.uk>:
>
>>On Thursday 25 Aug 2005 08:20, Tomáš Drenčák wrote:
>>
>>>Hi,
>>>I'd like to ask how can I include a css file into a component or even
>>>a page. I use own Border component with Shell. Stylesheets could be
>>>imported there, but what if I want to include css specific to page or
>>>component?
[...]
I've found TapFx library on http://tapfx.sf.net/ . There's a component
named Style and it seems that it solves problem in elegant way...
tomas
2005/8/25, Alan Chandler <al...@chandlerfamily.org.uk>:
> On Thursday 25 Aug 2005 08:20, Tomáš Drenčák wrote:
> > Hi,
> > I'd like to ask how can I include a css file into a component or even
> > a page. I use own Border component with Shell. Stylesheets could be
> > imported there, but what if I want to include css specific to page or
> > component?
>
> I have done it 3 different ways now, trying various things out using TAP 4..
> My final way is still not working, but I think its finding the style sheet,
> its just that other parts of my application is not working
>
> 1) Built my Border Component into a library and had the stylesheet and image
> assets served from within that component. Have the style sheet (and related
> image assets) stored within a library component. (NOTE I never tried
> refering to all image assets from within the style sheet in this form - so
> the is limited)
>
> Package the style sheet and images within directories underneath component
> library specification (in the path refered to by <library id="xxx"
> specification-path="/path/to/libarry /> element of the application
> specification.
>
> In my Border.java file
>
> @ComponentClass
> public abstract class Border extends BaseComponent{
>
> // Style Sheet
> @Asset("styles/border.css")
> public abstract IAsset getSiteStyle();
> ...
>
> In Border.html I have
>
> <html jwcid="@Shell" stylesheet="asset:siteStyle" title="ognl:windowTitle">
>
> 2) I moved the stylesheet out to the webcontext path of the surrounding
> application. At this point, I added all the images that the stylesheet
> refered to into the same directory as the stylesheet itself. Tapestry knows
> nothing about them.
>
> The only difference was to add the context: in from on the stylesheet
> annotation in the Border.java file.
>
> // Style Sheet
> @Asset("context:styles/border.css")
> public abstract IAsset getSiteStyle();
>
>
> 3) (NOTE NOT YET FULLY WORKING) I have put the stylesheet in the Root Context
> of tomcat. In the server.xml file for tomcat (hosted via eclipse) I have
>
> <!-- Tomcat Root Context -->
>
> <Context path="" docBase="/home/alan/dev/famtree/rootContext" debug="0"/>
>
> <!-- Tomcat Examples Context -->
>
>
> <Context docBase="/home/alan/dev/famtree/.deployables/famtree"
> path="/famtree" reloadable="true"
> source="com.ibm.wtp.web.server:famtree"/></Host>
>
>
> The stylesheet and related images are all stored
> in /home/alan/dev/famtree/rootContext/styles
>
> and my component Border.html now simply refers to it via
>
> <html jwcid="@Shell" stylesheet="asset:stylesheet" title="Family Tree
> Application">
>
> But because I have simplified my border and so longer have an associated java
> class, I have add to add a component specification Border.jwc with
>
> <?xml version="1.0"?>
> <!DOCTYPE component-specification PUBLIC
> "-//Apache Software Foundation//Tapestry Specification 4.0//EN"
> "http://jakarta.apache.org/tapestry/dtd/Tapestry_4_0.dtd">
> <component-specification>
> <asset name="stylesheet" path="/styles/chandler.css" />
> </component-specification>
>
>
> in it.
>
>
>
>
> --
> Alan Chandler
> http://www.chandlerfamily.org.uk
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: tapestry-user-unsubscribe@jakarta.apache.org
> For additional commands, e-mail: tapestry-user-help@jakarta.apache.org
>
>
On Thursday 25 Aug 2005 08:20, Tomáš Drenčák wrote:
> Hi,
> I'd like to ask how can I include a css file into a component or even
> a page. I use own Border component with Shell. Stylesheets could be
> imported there, but what if I want to include css specific to page or
> component?
I have done it 3 different ways now, trying various things out using TAP 4..
My final way is still not working, but I think its finding the style sheet,
its just that other parts of my application is not working
1) Built my Border Component into a library and had the stylesheet and image
assets served from within that component. Have the style sheet (and related
image assets) stored within a library component. (NOTE I never tried
refering to all image assets from within the style sheet in this form - so
the is limited)
Package the style sheet and images within directories underneath component
library specification (in the path refered to by <library id="xxx"
specification-path="/path/to/libarry /> element of the application
specification.
In my Border.java file
@ComponentClass
public abstract class Border extends BaseComponent{
// Style Sheet
@Asset("styles/border.css")
public abstract IAsset getSiteStyle();
...
In Border.html I have
<html jwcid="@Shell" stylesheet="asset:siteStyle" title="ognl:windowTitle">
2) I moved the stylesheet out to the webcontext path of the surrounding
application. At this point, I added all the images that the stylesheet
refered to into the same directory as the stylesheet itself. Tapestry knows
nothing about them.
The only difference was to add the context: in from on the stylesheet
annotation in the Border.java file.
// Style Sheet
@Asset("context:styles/border.css")
public abstract IAsset getSiteStyle();
3) (NOTE NOT YET FULLY WORKING) I have put the stylesheet in the Root Context
of tomcat. In the server.xml file for tomcat (hosted via eclipse) I have
<!-- Tomcat Root Context -->
<Context path="" docBase="/home/alan/dev/famtree/rootContext" debug="0"/>
<!-- Tomcat Examples Context -->
<Context docBase="/home/alan/dev/famtree/.deployables/famtree"
path="/famtree" reloadable="true"
source="com.ibm.wtp.web.server:famtree"/></Host>
The stylesheet and related images are all stored
in /home/alan/dev/famtree/rootContext/styles
and my component Border.html now simply refers to it via
<html jwcid="@Shell" stylesheet="asset:stylesheet" title="Family Tree
Application">
But because I have simplified my border and so longer have an associated java
class, I have add to add a component specification Border.jwc with
<?xml version="1.0"?>
<!DOCTYPE component-specification PUBLIC
"-//Apache Software Foundation//Tapestry Specification 4.0//EN"
"http://jakarta.apache.org/tapestry/dtd/Tapestry_4_0.dtd">
<component-specification>
<asset name="stylesheet" path="/styles/chandler.css" />
</component-specification>
in it.
--
Alan Chandler
http://www.chandlerfamily.org.uk
---------------------------------------------------------------------
To unsubscribe, e-mail: tapestry-user-unsubscribe@jakarta.apache.org
For additional commands, e-mail: tapestry-user-help@jakarta.apache.org
We use 2 mechanisms. The first is the aforementioned Sell component to do the main CSS for the look and feel to the site.
Then each page has a Block component that contains the page specific CSS. This is then rendered once in the page. That way we can override the default CSS or make specific reference to assets or components on that page.
Rob Cole
Ted Steen <te...@gmail.com>
25/08/2005 09:07 To
Tapestry users <ta...@jakarta.apache.org>
cc
Please respond to
"Tapestry users" <ta...@jakarta.apache.org> Subject
Re: CSS in page or component
What if one have Assets that need to be referenced in the css?
How is that solved?
On 8/25/05, Ron Piterman <rp...@gmx.net> wrote:
> What I do to resolve this is the following:
>
> Each component which wants to "contribute" a css, implements an
> Interface named IStyleable.
>
> The border goes through all components of the page and checks them.
> For each one which implements the IStyleable interface (which is only a
> marker, and has no methods to implement) it reaches for the "css" asset,
> and adds it to a set of assets. (see code at the end)
>
> This whole thing happens only once per page instance, so performance is
> not an issue.
>
> in the border I define
> <html jwcid="@Shell" stylesheets="ognl:stylesheets" ...>
>
> Thats it. Works very nice for me.
>
> Cheers,
> Ron
>
> ===================================
>
> public class Border extends BaseComponent implements IStyleable {
>
> private IAsset[] _stylesheets;
>
> public IAsset[] getStylesheets() {
> if (_stylesheets == null) {
> Set s = new HashSet();
> getStylesheets(getPage(),s);
> _stylesheets = new IAsset[s.size()];
> System.arraycopy(s.toArray(),0,_stylesheets,0,s.size());
> }
> return _stylesheets;
> }
>
> private void getStylesheets(IComponent c, Set s) {
> if (c instanceof IStyleable)
> addStylesheet(c,s);
> for (Object cc : c.getComponents().values())
> getStylesheets((IComponent)cc, s);
> }
>
> private void addStylesheet(IComponent s, Set set) {
> IAsset asset = s.getAsset("css");
> if (!set.contains(asset))
> set.add(asset);
> }
> }
>
>
> ציטוט Tomáš Drenčák:
> > Hi,
> > I'd like to ask how can I include a css file into a component or even
> > a page. I use own Border component with Shell. Stylesheets could be
> > imported there, but what if I want to include css specific to page or
> > component?
> >
> > thanks
> > tomas
> >
> > ---------------------------------------------------------------------
> > To unsubscribe, e-mail: tapestry-user-unsubscribe@jakarta.apache.org
> > For additional commands, e-mail: tapestry-user-help@jakarta.apache.org
> >
> >
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: tapestry-user-unsubscribe@jakarta.apache.org
> For additional commands, e-mail: tapestry-user-help@jakarta.apache.org
>
>
--
/ted
--
This e-mail may contain confidential and/or privileged information. If you are not the intended recipient (or have received this e-mail in error) please notify the sender immediately and destroy this e-mail. Any unauthorized copying, disclosure or distribution of the material in this e-mail is strictly forbidden.
What if one have Assets that need to be referenced in the css?
How is that solved?
On 8/25/05, Ron Piterman <rp...@gmx.net> wrote:
> What I do to resolve this is the following:
>
> Each component which wants to "contribute" a css, implements an
> Interface named IStyleable.
>
> The border goes through all components of the page and checks them.
> For each one which implements the IStyleable interface (which is only a
> marker, and has no methods to implement) it reaches for the "css" asset,
> and adds it to a set of assets. (see code at the end)
>
> This whole thing happens only once per page instance, so performance is
> not an issue.
>
> in the border I define
> <html jwcid="@Shell" stylesheets="ognl:stylesheets" ...>
>
> Thats it. Works very nice for me.
>
> Cheers,
> Ron
>
> ===================================
>
> public class Border extends BaseComponent implements IStyleable {
>
> private IAsset[] _stylesheets;
>
> public IAsset[] getStylesheets() {
> if (_stylesheets == null) {
> Set s = new HashSet();
> getStylesheets(getPage(),s);
> _stylesheets = new IAsset[s.size()];
> System.arraycopy(s.toArray(),0,_stylesheets,0,s.size());
> }
> return _stylesheets;
> }
>
> private void getStylesheets(IComponent c, Set s) {
> if (c instanceof IStyleable)
> addStylesheet(c,s);
> for (Object cc : c.getComponents().values())
> getStylesheets((IComponent)cc, s);
> }
>
> private void addStylesheet(IComponent s, Set set) {
> IAsset asset = s.getAsset("css");
> if (!set.contains(asset))
> set.add(asset);
> }
> }
>
>
> ציטוט Tomáš Drenčák:
> > Hi,
> > I'd like to ask how can I include a css file into a component or even
> > a page. I use own Border component with Shell. Stylesheets could be
> > imported there, but what if I want to include css specific to page or
> > component?
> >
> > thanks
> > tomas
> >
> > ---------------------------------------------------------------------
> > To unsubscribe, e-mail: tapestry-user-unsubscribe@jakarta.apache.org
> > For additional commands, e-mail: tapestry-user-help@jakarta.apache.org
> >
> >
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: tapestry-user-unsubscribe@jakarta.apache.org
> For additional commands, e-mail: tapestry-user-help@jakarta.apache.org
>
>
--
/ted
What I do to resolve this is the following:
Each component which wants to "contribute" a css, implements an
Interface named IStyleable.
The border goes through all components of the page and checks them.
For each one which implements the IStyleable interface (which is only a
marker, and has no methods to implement) it reaches for the "css" asset,
and adds it to a set of assets. (see code at the end)
This whole thing happens only once per page instance, so performance is
not an issue.
in the border I define
<html jwcid="@Shell" stylesheets="ognl:stylesheets" ...>
Thats it. Works very nice for me.
Cheers,
Ron
===================================
public class Border extends BaseComponent implements IStyleable {
private IAsset[] _stylesheets;
public IAsset[] getStylesheets() {
if (_stylesheets == null) {
Set s = new HashSet();
getStylesheets(getPage(),s);
_stylesheets = new IAsset[s.size()];
System.arraycopy(s.toArray(),0,_stylesheets,0,s.size());
}
return _stylesheets;
}
private void getStylesheets(IComponent c, Set s) {
if (c instanceof IStyleable)
addStylesheet(c,s);
for (Object cc : c.getComponents().values())
getStylesheets((IComponent)cc, s);
}
private void addStylesheet(IComponent s, Set set) {
IAsset asset = s.getAsset("css");
if (!set.contains(asset))
set.add(asset);
}
}
ציטוט Tomáš Drenčák:
> Hi,
> I'd like to ask how can I include a css file into a component or even
> a page. I use own Border component with Shell. Stylesheets could be
> imported there, but what if I want to include css specific to page or
> component?
>
> thanks
> tomas
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: tapestry-user-unsubscribe@jakarta.apache.org
> For additional commands, e-mail: tapestry-user-help@jakarta.apache.org
>
>
---------------------------------------------------------------------
To unsubscribe, e-mail: tapestry-user-unsubscribe@jakarta.apache.org
For additional commands, e-mail: tapestry-user-help@jakarta.apache.org
This has come up multiple times now, and many possible solutions have surfaced. It would be extremely convenient if Tapestry provided a way to include style information and hook it up with components (and hence, pages) similar to what the @Script component currently allows. http://issues.apache.org/jira/browse/TAPESTRY-201 contains my solution to the problem. Although not including all of the aforementioned functionality, I feel that it's very useful. I can't say if it'll work with Tapestry 4.0, and the patch should definitely not be applied to anything at all since it alters the framework build file. (Minor mistake on my part.) But it might be worth taking a look at it. I'll look into this during the next few days and see what I can come up with. Allowing Tapestry to handle CSS in a simple, efficient, and built-in way would be a huge for the project IMHO. -Filip Tomáš Drenčák wrote: > Hi, > I'd like to ask how can I include a css file into a component or even > a page. I use own Border component with Shell. Stylesheets could be > imported there, but what if I want to include css specific to page or > component? > > thanks > tomas
We did this (in Tapestry 3) for pages by allowing a page to contain a "magic" block called 'css'. For example:
---- MyPage.html ----
<span jwcid="css@Block">
div.mystyle {
width: 390px;
margin: 20px 10px !important;
}
</span>
<body jwcid="@MyPageBorder">
.. blah blah ..
</body>
--------------------------
The page itself won't render the block. Instead we attach a delegate to the Shell component that looks for the css block and renders it:
---- MyPageBorder.html ----
<html jwcid="@Shell" delegate="ognl:delegate">
<body jwcid="@Body">
.. blah blah ..
</body>
</html>
--------------------------
---- MyPageBorder.java -----
private IRender delegate = new IRender() {
public void render(IMarkupWriter writer, IRequestCycle cycle) {
renderCssBlock(writer, cycle);
}
};
public IRender getDelegate() {
return delegate;
}
protected void renderCssBlock(IMarkupWriter writer, IRequestCycle cycle) {
IComponent cssComponent = (IComponent) getPage().getComponents().get("css");
if (cssComponent != null) {
writer.begin("style");
writer.attribute("type", "text/css");
cssComponent.renderBody(writer, cycle);
writer.end();
}
}
--------------------------
I'm sure you could generalise this to search all the components on the page for 'css' blocks.
The only problem with this approach is that the css block will appear in the HTML 'head' BEFORE any external stylesheets, which means the external css rules will have priority over the page style rules (probably not what you'd expect). The options you have to avoid that problem are to write your own version of Shell that renders the delegate after the stylesheets or to use '!important' on any page style rules that need to override the external ones (see the 'margin' property in my example above).
Paul
Tomáš Drenčák <to...@gmail.com>
25/08/2005 08:20 To
Tapestry users <ta...@jakarta.apache.org>
cc
Please respond to
"Tapestry users" <ta...@jakarta.apache.org> Subject
CSS in page or component
Hi,
I'd like to ask how can I include a css file into a component or even
a page. I use own Border component with Shell. Stylesheets could be
imported there, but what if I want to include css specific to page or
component?
thanks
tomas
---------------------------------------------------------------------
To unsubscribe, e-mail: tapestry-user-unsubscribe@jakarta.apache.org
For additional commands, e-mail: tapestry-user-help@jakarta.apache.org
--
This e-mail may contain confidential and/or privileged information. If you are not the intended recipient (or have received this e-mail in error) please notify the sender immediately and destroy this e-mail. Any unauthorized copying, disclosure or distribution of the material in this e-mail is strictly forbidden.
---------------------------------------------------------------------
To unsubscribe, e-mail: tapestry-user-unsubscribe@jakarta.apache.org
For additional commands, e-mail: tapestry-user-help@jakarta.apache.org