Skip to Content

Changes for page Development-CSS

Last modified by Pascal Robert on 2010/09/13 00:25
From version 2.1
edited by smmccraw
on 2007/07/08 09:45
Change comment: There is no comment for this version
To version 5.1
edited by Pascal Robert
on 2010/09/13 00:25
Change comment: There is no comment for this version

Summary

Details

Page properties
Title
... ... @@ -1,1 +1,1 @@
1 -Programming__WebObjects-Web Applications-Development-CSS
1 +Development-CSS
Author
... ... @@ -1,1 +1,1 @@
1 -XWiki.smmccraw
1 +XWiki.probert
Content
... ... @@ -1,122 +1,117 @@
1 -== Overview ==
1 +== Overview ==
2 2  
3 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 4  
5 -== Referencing a Style Sheet ==
5 +== Referencing a Style Sheet ==
6 6  
7 -=== Style Block ===
7 +=== Style Block ===
8 8  
9 9  The easiest way to include CSS in your WebObject application is put a style block in your <head> tag:
10 10  
11 -{{code}}
11 +{{code value="xml"}}
12 12  
13 13  <style type="text/css">
14 -{panel}
15 15   table {
16 16   border-style: solid;
17 17   border-color: black;
18 18   border-width: 1px;
19 19   }
20 -{panel}
21 21  </style>
22 22  
23 23  {{/code}}
24 24  
25 -=== Static Reference ===
23 +=== Static Reference ===
26 26  
27 27  Another easy way to use CSS in your WebObjects application is to include a static reference to it with:
28 28  
29 -{{panel}}
27 +{{code value="xml"}}
30 30  
31 - <link rel = "stylesheet" type = "text/css" href = "/webserver/relative/path/to/mystyles.css">
29 +<link rel = "stylesheet" type = "text/css" href = "/webserver/relative/path/to/mystyles.css">
32 32  
33 -{{/panel}}
31 +{{/code}}
34 34  
35 35  However, if you're a WO developer, you know static resource references feel dirty. Don't worry, there are alternatives.
36 36  
37 -=== Project WOnder ===
35 +=== Project WOnder ===
38 38  
39 39  Project WOnder provides ERXStyleSheet, which is a stateless component with a template that can generate link tags for you.
40 40  
41 -=== Mike Schrag's MDTStyleSheet ===
39 +=== Mike Schrag's MDTStyleSheet ===
42 42  
43 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 44  
45 45  {{code}}
46 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 - }
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");
62 62   }
63 -
64 - protected String urlAttributeName() {
65 - return "href";
56 + if (_associations.objectForKey("type") == null) {
57 + _associations.setObjectForKey(new WOConstantValueAssociation("text/css"), "type");
66 66   }
67 67   }
68 -{panel}
69 69  
61 + protected String urlAttributeName() {
62 + return "href";
63 + }
64 +}
65 +
70 70  {{/code}}
71 71  
72 -== Stylesheet Component ==
68 +== Stylesheet Component ==
73 73  
74 -Here is a trivial example on how to define style sheets properties at
70 +Here is a trivial example on how to define style sheets properties at
75 75  runtime:
76 76  
77 77  Simply create a component with your style sheets properties:
78 78  
79 -{{code}}
75 +{{code value="xml"}}
80 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}
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; }
119 119  
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 +
120 120  {{/code}}
121 121  
122 122  And use some wod for the parameters:
... ... @@ -123,46 +123,42 @@
123 123  
124 124  {{code}}
125 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}
121 +LinkColor: WOString{
122 + value = linkColor;
123 +};
159 159  
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 +
160 160  {{/code}}
161 161  
162 -== Related Links ==
155 +== Related Links ==
163 163  
164 -* [[CSS Programming]]
157 +* [[WO:CSS Programming]]
165 165  * [[CSS on Wikipedia>>http://en.wikipedia.org/wiki/Cascading_Style_Sheets]]
166 166  * [[W3 Schools on CSS>>http://www.w3schools.com/css/default.asp]]
167 -
168 -Category:WebObjects