Skip to Content
Version 2.1 by smmccraw on 2007/07/08 09:45
Show last authors
1 == Overview ==
2
3 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.
4
5 == Referencing a Style Sheet ==
6
7 === Style Block ===
8
9 The easiest way to include CSS in your WebObject application is put a style block in your <head> tag:
10
11 {{code}}
12
13 <style type="text/css">
14 {panel}
15 table {
16 border-style: solid;
17 border-color: black;
18 border-width: 1px;
19 }
20 {panel}
21 </style>
22
23 {{/code}}
24
25 === Static Reference ===
26
27 Another easy way to use CSS in your WebObjects application is to include a static reference to it with:
28
29 {{panel}}
30
31 <link rel = "stylesheet" type = "text/css" href = "/webserver/relative/path/to/mystyles.css">
32
33 {{/panel}}
34
35 However, if you're a WO developer, you know static resource references feel dirty. Don't worry, there are alternatives.
36
37 === Project WOnder ===
38
39 Project WOnder provides ERXStyleSheet, which is a stateless component with a template that can generate link tags for you.
40
41 === Mike Schrag's MDTStyleSheet ===
42
43 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.
44
45 {{code}}
46
47 {panel}
48 import com.webobjects.appserver.WOElement;
49 import com.webobjects.appserver._private.WOConstantValueAssociation;
50 import com.webobjects.appserver._private.WOHTMLURLValuedElement;
51 import com.webobjects.foundation.NSDictionary;
52
53 public class MDTStyleSheet extends WOHTMLURLValuedElement {
54 public MDTStyleSheet(String _name, NSDictionary _assocationsDictionary, WOElement _template) {
55 super("link", _assocationsDictionary, _template);
56 if (_associations.objectForKey("rel") == null) {
57 _associations.setObjectForKey(new WOConstantValueAssociation("stylesheet"), "rel");
58 }
59 if (_associations.objectForKey("type") == null) {
60 _associations.setObjectForKey(new WOConstantValueAssociation("text/css"), "type");
61 }
62 }
63
64 protected String urlAttributeName() {
65 return "href";
66 }
67 }
68 {panel}
69
70 {{/code}}
71
72 == Stylesheet Component ==
73
74 Here is a trivial example on how to define style sheets properties at
75 runtime:
76
77 Simply create a component with your style sheets properties:
78
79 {{code}}
80
81 {panel}
82 <style type = "text/css">
83 a { color: <webobject name = "LinkColor"></webobject>; text-decoration:none; }
84 a:hover { color: #ff9933; }
85 a:visited { color: <webobject name = "LinkColor"></webobject>; }
86 a:visited:hover { color: #ff9933; }
87
88 body { margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; background-color:#FFFFFF; text-align:left; }
89
90 input { font: 100% Verdana, Arial, san-serif; }
91
92 .Title { font: <webobject name = "TextFont"></webobject>; }
93 .Label { font: <webobject name = "LabelFont"></webobject>; }
94 .WhiteLabel { font: <webobject name = "LabelFont"></webobject>; color:#666666; }
95 .Text { font: <webobject name = "TextFont"></webobject>; }
96 .MonoText { font: <webobject name = "MessageFont"></webobject>; }
97 .Quote { font: <webobject name = "MessageFont"></webobject>; font-style: italic; margin-left: 20px; }
98
99 .Line { height:1px; background-image:url(<webobject name = "LineUrl"></webobject>); }
100 .Space { height:8px; }
101
102 .Highlight { background-color:#cccccc; }
103 .DarkHeader { background-image:url(<webobject name = "DarkHeaderUrl"></webobject>); }
104 .Header { background-image:url(<webobject name = "HeaderUrl"></webobject>); }
105
106 .Margin { width: 40px; vertical-align:top; }
107 .Full { width: 100%; height: 100%; text-align:left; vertical-align:top; }
108 .FullWidth { width: 100%; text-align:left; vertical-align:top; }
109 .FillerWidth { width: 99%; text-align:left; vertical-align:top; }
110 .FillerHeight { height: 99%; }
111 .HalfWidth { width: 49%; text-align:left; vertical-align:top; }
112 .OneThirdWidth { width: 33%; text-align:left; vertical-align:top; }
113 .TwoThirdWidth { width: 66%; text-align:left; vertical-align:top; }
114 .FixColumn { width: 250px; text-align:left; vertical-align:top; }
115
116 .AltMargin { width: 40px; text-align:left; vertical-align:top; background-image:url(<webobject name = "AltUrl"></webobject>); background-position: center center; background-repeat: no-repeat; }
117 </style>
118 {panel}
119
120 {{/code}}
121
122 And use some wod for the parameters:
123
124 {{code}}
125
126 {panel}
127 LinkColor: WOString{
128 value = linkColor;
129 };
130
131 LineUrl: WOString{
132 value = lineUrl;
133 };
134
135 DarkHeaderUrl: WOString{
136 value = darkHeaderUrl;
137 };
138
139 HeaderUrl: WOString{
140 value = headerUrl;
141 };
142
143 AltUrl: WOString{
144 value = altUrl;
145 };
146
147 LabelFont: WOString{
148 value = labelFont;
149 };
150
151 TextFont: WOString{
152 value = textFont;
153 };
154
155 MessageFont: WOString{
156 value = messageFont;
157 };
158 {panel}
159
160 {{/code}}
161
162 == Related Links ==
163
164 * [[CSS Programming]]
165 * [[CSS on Wikipedia>>http://en.wikipedia.org/wiki/Cascading_Style_Sheets]]
166 * [[W3 Schools on CSS>>http://www.w3schools.com/css/default.asp]]
167
168 Category:WebObjects