Child pages
  • Development-CSS

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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