Skip to Content

Development-CSS

Last modified by Pascal Robert on 2010/09/13 00:25

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:


<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:


<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

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.


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:

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;
};