Overview
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.
Referencing a Style Sheet
Style Block
The easiest way to include CSS in your WebObject application is put a style block in your <head> tag:
| Code Block | ||||
|---|---|---|---|---|
| ||||
<style type="text/css">
table {
border-style: solid;
border-color: black;
border-width: 1px;
}
</style>
|
Static Reference
Another easy way to use CSS in your WebObjects application is to include a static reference to it with:
...
However, if you're a WO developer, you know static resource references feel dirty. Don't worry, there are alternatives.
Project WOnder
Project WOnder provides ERXStyleSheet, which is a stateless component with a template that can generate link tags for you.
Mike Schrag's MDTStyleSheet
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.
| Code Block |
|---|
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";
}
}
|
Stylesheet Component
Here is a trivial example on how to define style sheets properties at
runtime:
...
| Code Block |
|---|
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;
};
|