Child pages
  • Development-CSS
Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

Version 1 Next »

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">
{panel}
  table {
    border-style: solid;
    border-color: black;
    border-width: 1px;
  }
{panel}
</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.

{panel}
  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";
    }
  }
{panel}

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:

{panel}
  <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>
{panel}

And use some wod for the parameters:

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

Category:WebObjects

  • No labels