WebObjects/Web 應用程式/開發/CSS
CSS 代表層疊樣式表。它提供了一種機制，將 HTML 頁面的簡報與 HTML 頁面的邏輯結構和內容分離。
將 CSS 包含在 WebObject 應用程式中的最簡單方法是在 <head> 標籤中放置一個樣式塊
<style type="text/css">
table {
border-style: solid;
border-color: black;
border-width: 1px;
}
</style>
在 WebObjects 應用程式中使用 CSS 的另一種簡單方法是使用以下方法包含對它的靜態引用：
<link rel = "stylesheet" type = "text/css" href = "/webserver/relative/path/to/mystyles.css">
但是，如果您是 WO 開發人員，您就會知道靜態資源引用感覺很髒。別擔心，還有其他選擇。
Project WOnder 提供 ERXStyleSheet，這是一個無狀態元件，具有可以為您生成連結標籤的模板。
以下動態元素可用於在頁面中包含樣式表。它支援與 WOImage 相似的繫結“rel”、“type”、“href”、“src”等。
import com.webobjects.appserver.WOElement;
import com.webobjects.appserver._private.WOConstantValueAssociation;
import com.webobjects.appserver._private.WOHTMLURLValuedElement;
import com.webobjects.foundation.NSDictionary;
public class MDTStyleSheet extends WOHTMLURLValuedElement {
public MDTStyleSheet(String _name, NSDictionary _assocationsDictionary, WOElement _template) {
super("link", _assocationsDictionary, _template);
if (_associations.objectForKey("rel") == null) {
_associations.setObjectForKey(new WOConstantValueAssociation("stylesheet"), "rel");
}
if (_associations.objectForKey("type") == null) {
_associations.setObjectForKey(new WOConstantValueAssociation("text/css"), "type");
}
}
protected String urlAttributeName() {
return "href";
}
}
以下是一個關於如何在執行時定義樣式表屬性的簡單示例
只需建立一個包含樣式表屬性的元件
<style type = "text/css">
a { color: <webobject name = "LinkColor"></webobject>; text-decoration:none; }
a:hover { color: #ff9933; }
a:visited { color: <webobject name = "LinkColor"></webobject>; }
a:visited:hover { color: #ff9933; }
body { margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; background-color:#FFFFFF; text-align:left; }
input { font: 100% Verdana, Arial, san-serif; }
.Title { font: <webobject name = "TextFont"></webobject>; }
.Label { font: <webobject name = "LabelFont"></webobject>; }
.WhiteLabel { font: <webobject name = "LabelFont"></webobject>; color:#666666; }
.Text { font: <webobject name = "TextFont"></webobject>; }
.MonoText { font: <webobject name = "MessageFont"></webobject>; }
.Quote { font: <webobject name = "MessageFont"></webobject>; font-style: italic; margin-left: 20px; }
.Line { height:1px; background-image:url(<webobject name = "LineUrl"></webobject>); }
.Space { height:8px; }
.Highlight { background-color:#cccccc; }
.DarkHeader { background-image:url(<webobject name = "DarkHeaderUrl"></webobject>); }
.Header { background-image:url(<webobject name = "HeaderUrl"></webobject>); }
.Margin { width: 40px; vertical-align:top; }
.Full { width: 100%; height: 100%; text-align:left; vertical-align:top; }
.FullWidth { width: 100%; text-align:left; vertical-align:top; }
.FillerWidth { width: 99%; text-align:left; vertical-align:top; }
.FillerHeight { height: 99%; }
.HalfWidth { width: 49%; text-align:left; vertical-align:top; }
.OneThirdWidth { width: 33%; text-align:left; vertical-align:top; }
.TwoThirdWidth { width: 66%; text-align:left; vertical-align:top; }
.FixColumn { width: 250px; text-align:left; vertical-align:top; }
.AltMargin { width: 40px; text-align:left; vertical-align:top; background-image:url(<webobject name = "AltUrl"></webobject>); background-position: center center; background-repeat: no-repeat; }
</style>
並使用一些 wod 作為引數
LinkColor: WOString{
value = linkColor;
};
LineUrl: WOString{
value = lineUrl;
};
DarkHeaderUrl: WOString{
value = darkHeaderUrl;
};
HeaderUrl: WOString{
value = headerUrl;
};
AltUrl: WOString{
value = altUrl;
};
LabelFont: WOString{
value = labelFont;
};
TextFont: WOString{
value = textFont;
};
MessageFont: WOString{
value = messageFont;
};