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="[EMAIL PROTECTED]">
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 <[EMAIL PROTECTED]>
25/08/2005 08:20
To
Tapestry users <[email protected]>
cc
Please respond to
"Tapestry users" <[email protected]>
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: [EMAIL PROTECTED]
For additional commands, e-mail: [EMAIL PROTECTED]
--
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: [EMAIL PROTECTED]
For additional commands, e-mail: [EMAIL PROTECTED]
