Skip to Content

Wiki source code of Development-CSS

Last modified by Pascal Robert on 2010/09/13 00:25
Hide last authors
Pascal Robert 4.1 1 == Overview ==
smmccraw 1.1 2
Pascal Robert 6.1 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.
smmccraw 1.1 4
Pascal Robert 4.1 5 == Referencing a Style Sheet ==
smmccraw 1.1 6
Pascal Robert 4.1 7 === Style Block ===
smmccraw 1.1 8
9 The easiest way to include CSS in your WebObject application is put a style block in your <head> tag:
10
Pascal Robert 6.1 11 {{code 0="xml"}}
smmccraw 1.1 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
Pascal Robert 4.1 23 === Static Reference ===
smmccraw 1.1 24
25 Another easy way to use CSS in your WebObjects application is to include a static reference to it with:
26
Pascal Robert 6.1 27 {{code 0="xml"}}
smmccraw 1.1 28
Quinton Dolan 3.1 29 <link rel = "stylesheet" type = "text/css" href = "/webserver/relative/path/to/mystyles.css">
smmccraw 1.1 30
Quinton Dolan 3.1 31 {{/code}}
smmccraw 1.1 32
Pascal Robert 6.1 33 However, if you're a WO developer, you know static resource references feel dirty. Don't worry, there are alternatives.
smmccraw 1.1 34
Pascal Robert 4.1 35 === Project WOnder ===
smmccraw 1.1 36
37 Project WOnder provides ERXStyleSheet, which is a stateless component with a template that can generate link tags for you.
38
Pascal Robert 4.1 39 === Mike Schrag's MDTStyleSheet ===
smmccraw 1.1 40
Pascal Robert 6.1 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.
smmccraw 1.1 42
43 {{code}}
44
Quinton Dolan 3.1 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");
smmccraw 1.1 55 }
Quinton Dolan 3.1 56 if (_associations.objectForKey("type") == null) {
57 _associations.setObjectForKey(new WOConstantValueAssociation("text/css"), "type");
smmccraw 1.1 58 }
59 }
60
Quinton Dolan 3.1 61 protected String urlAttributeName() {
62 return "href";
63 }
64 }
65
smmccraw 1.1 66 {{/code}}
67
Pascal Robert 4.1 68 == Stylesheet Component ==
smmccraw 1.1 69
Pascal Robert 4.1 70 Here is a trivial example on how to define style sheets properties at
Pascal Robert 6.1 71 runtime:
smmccraw 1.1 72
73 Simply create a component with your style sheets properties:
74
Pascal Robert 6.1 75 {{code 0="xml"}}
smmccraw 1.1 76
Quinton Dolan 3.1 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; }
smmccraw 1.1 82
Quinton Dolan 3.1 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
Pascal Robert 4.1 111 .AltMargin { width: 40px; text-align:left; vertical-align:top; background-image:url(<webobject name = "AltUrl"></webobject>);
Quinton Dolan 3.1 112 background-position: center center; background-repeat: no-repeat; }
113 </style>
114
smmccraw 1.1 115 {{/code}}
116
117 And use some wod for the parameters:
118
119 {{code}}
120
Quinton Dolan 3.1 121 LinkColor: WOString{
122 value = linkColor;
123 };
smmccraw 1.1 124
Quinton Dolan 3.1 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
smmccraw 1.1 153 {{/code}}
154
Pascal Robert 4.1 155 == Related Links ==
smmccraw 1.1 156
Pascal Robert 6.1 157 * [[doc:WO.CSS Programming]]
158 * [[CSS on Wikipedia>>url:http://en.wikipedia.org/wiki/Cascading_Style_Sheets||shape="rect"]]
159 * [[W3 Schools on CSS>>url:http://www.w3schools.com/css/default.asp||shape="rect"]]