Skip to Content

Changes for page Development-CSS

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

Summary

Details

Page properties
Author
... ... @@ -1,1 +1,1 @@
1 -XWiki.qdolan
1 +XWiki.smmccraw
Content
... ... @@ -8,14 +8,16 @@
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 value="xml"}}
11 +{{code}}
12 12  
13 13  <style type="text/css">
14 +{panel}
14 14   table {
15 15   border-style: solid;
16 16   border-color: black;
17 17   border-width: 1px;
18 18   }
20 +{panel}
19 19  </style>
20 20  
21 21  {{/code}}
... ... @@ -24,11 +24,11 @@
24 24  
25 25  Another easy way to use CSS in your WebObjects application is to include a static reference to it with:
26 26  
27 -{{code value="xml"}}
29 +{{panel}}
28 28  
29 -<link rel = "stylesheet" type = "text/css" href = "/webserver/relative/path/to/mystyles.css">
31 + <link rel = "stylesheet" type = "text/css" href = "/webserver/relative/path/to/mystyles.css">
30 30  
31 -{{/code}}
33 +{{/panel}}
32 32  
33 33  However, if you're a WO developer, you know static resource references feel dirty. Don't worry, there are alternatives.
34 34  
... ... @@ -42,27 +42,29 @@
42 42  
43 43  {{code}}
44 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");
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 + }
55 55   }
56 - if (_associations.objectForKey("type") == null) {
57 - _associations.setObjectForKey(new WOConstantValueAssociation("text/css"), "type");
63 +
64 + protected String urlAttributeName() {
65 + return "href";
58 58   }
59 59   }
68 +{panel}
60 60  
61 - protected String urlAttributeName() {
62 - return "href";
63 - }
64 -}
65 -
66 66  {{/code}}
67 67  
68 68  == Stylesheet Component ==
... ... @@ -72,46 +72,47 @@
72 72  
73 73  Simply create a component with your style sheets properties:
74 74  
75 -{{code value="xml"}}
79 +{{code}}
76 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; }
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}
82 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 115  {{/code}}
116 116  
117 117  And use some wod for the parameters:
... ... @@ -118,38 +118,40 @@
118 118  
119 119  {{code}}
120 120  
121 -LinkColor: WOString{
122 - value = linkColor;
123 -};
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}
124 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 153  {{/code}}
154 154  
155 155  == Related Links ==