CSS stands for Cascading Style Sheets. It's provides a mechanism to separate the presentation of your HTML page from the logical structure and content of your HTML page.
The easiest way to include CSS in your WebObject application is put a style block in your <head> tag:
<style type="text/css"> table { border-style: solid; border-color: black; border-width: 1px; } </style> |
Another easy way to use CSS in your WebObjects application is to include a static reference to it with:
<link rel = "stylesheet" type = "text/css" href = "/webserver/relative/path/to/mystyles.css"> |
However, if you're a WO developer, you know static resource references feel dirty. Don't worry, there are alternatives.
Project WOnder provides ERXStyleSheet, which is a stateless component with a template that can generate link tags for you.
The following dynamic element can be used to include a stylesheet in your page. It supports the bindings "rel", "type", "href", "src", etc similar to a WOImage.
import com.webobjects.appserver.WOElement; import com.webobjects.appserver._private.WOConstantValueAssociation; import com.webobjects.appserver._private.WOHTMLURLValuedElement; import com.webobjects.foundation.NSDictionary; public class MDTStyleSheet extends WOHTMLURLValuedElement { public MDTStyleSheet(String _name, NSDictionary _assocationsDictionary, WOElement _template) { super("link", _assocationsDictionary, _template); if (_associations.objectForKey("rel") == null) { _associations.setObjectForKey(new WOConstantValueAssociation("stylesheet"), "rel"); } if (_associations.objectForKey("type") == null) { _associations.setObjectForKey(new WOConstantValueAssociation("text/css"), "type"); } } protected String urlAttributeName() { return "href"; } } |
Here is a trivial example on how to define style sheets properties at
runtime:
Simply create a component with your style sheets properties:
<style type = "text/css"> a { color: <webobject name = "LinkColor"></webobject>; text-decoration:none; } a:hover { color: #ff9933; } a:visited { color: <webobject name = "LinkColor"></webobject>; } a:visited:hover { color: #ff9933; } body { margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; background-color:#FFFFFF; text-align:left; } input { font: 100% Verdana, Arial, san-serif; } .Title { font: <webobject name = "TextFont"></webobject>; } .Label { font: <webobject name = "LabelFont"></webobject>; } .WhiteLabel { font: <webobject name = "LabelFont"></webobject>; color:#666666; } .Text { font: <webobject name = "TextFont"></webobject>; } .MonoText { font: <webobject name = "MessageFont"></webobject>; } .Quote { font: <webobject name = "MessageFont"></webobject>; font-style: italic; margin-left: 20px; } .Line { height:1px; background-image:url(<webobject name = "LineUrl"></webobject>); } .Space { height:8px; } .Highlight { background-color:#cccccc; } .DarkHeader { background-image:url(<webobject name = "DarkHeaderUrl"></webobject>); } .Header { background-image:url(<webobject name = "HeaderUrl"></webobject>); } .Margin { width: 40px; vertical-align:top; } .Full { width: 100%; height: 100%; text-align:left; vertical-align:top; } .FullWidth { width: 100%; text-align:left; vertical-align:top; } .FillerWidth { width: 99%; text-align:left; vertical-align:top; } .FillerHeight { height: 99%; } .HalfWidth { width: 49%; text-align:left; vertical-align:top; } .OneThirdWidth { width: 33%; text-align:left; vertical-align:top; } .TwoThirdWidth { width: 66%; text-align:left; vertical-align:top; } .FixColumn { width: 250px; text-align:left; vertical-align:top; } .AltMargin { width: 40px; text-align:left; vertical-align:top; background-image:url(<webobject name = "AltUrl"></webobject>); background-position: center center; background-repeat: no-repeat; } </style> |
And use some wod for the parameters:
LinkColor: WOString{ value = linkColor; }; LineUrl: WOString{ value = lineUrl; }; DarkHeaderUrl: WOString{ value = darkHeaderUrl; }; HeaderUrl: WOString{ value = headerUrl; }; AltUrl: WOString{ value = altUrl; }; LabelFont: WOString{ value = labelFont; }; TextFont: WOString{ value = textFont; }; MessageFont: WOString{ value = messageFont; }; |