Skip to Content

Wiki source code of Development-CSS

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