新聞版面應用程式會先讀取本機 XML 檔中的報導文字。然後再讀取外部 CSS 檔,該檔案會提供標題、副標題和主要文字內容的格式資訊。
CSS 檔案定義了三種樣式,即報導的標準段落樣式、標題的 h1 樣式及副標題的 h2 樣式。
p {
font-family: Georgia, "Times New Roman", Times, _serif;
font-size: 12;
leading: 2;
text-align: justify;
indent: 24;
}
h1 {
font-family: Verdana, Arial, Helvetica, _sans;
font-size: 20;
font-weight: bold;
color: #000099;
text-align: left;
}
h2 {
font-family: Verdana, Arial, Helvetica, _sans;
font-size: 16;
font-weight: normal;
text-align: left;
}
用來讀取外部 CSS 檔的技術,與
載入外部 CSS 檔
中所述的技術相同。載入 CSS 檔之後,應用程式會執行
onCSSFileLoaded()
方法 (如下所示)。
public function onCSSFileLoaded(event:Event):void
{
this.sheet = new StyleSheet();
this.sheet.parseCSS(loader.data);
h1Format = getTextStyle("h1", this.sheet);
if (h1Format == null)
{
h1Format = getDefaultHeadFormat();
}
h2Format = getTextStyle("h2", this.sheet);
if (h2Format == null)
{
h2Format = getDefaultHeadFormat();
h2Format.size = 16;
}
pFormat = getTextStyle("p", this.sheet);
if (pFormat == null)
{
pFormat = getDefaultTextFormat();
pFormat.size = 12;
}
displayText();
}
onCSSFileLoaded()
方法會建立 StyleSheet 物件,並讓該物件剖析輸入 CSS 資料。報導的主要文字內容會顯示在 MultiColumnTextField 物件中,而此物件可直接使用 StyleSheet 物件。不過,標題欄位會使用 HeadlineTextField 類別,而此類別會使用 TextFormat 物件做為其格式。
onCSSFileLoaded()
方法會呼叫
getTextStyle()
方法兩次,以便將 CSS 樣式宣告轉換為 TextFormat 物件,進而分別與這兩個 HeadlineTextField 物件搭配使用。
public function getTextStyle(styleName:String, ss:StyleSheet):TextFormat
{
var format:TextFormat = null;
var style:Object = ss.getStyle(styleName);
if (style != null)
{
var colorStr:String = style.color;
if (colorStr != null && colorStr.indexOf("#") == 0)
{
style.color = colorStr.substr(1);
}
format = new TextFormat(style.fontFamily,
style.fontSize,
style.color,
(style.fontWeight == "bold"),
(style.fontStyle == "italic"),
(style.textDecoration == "underline"),
style.url,
style.target,
style.textAlign,
style.marginLeft,
style.marginRight,
style.indent,
style.leading);
if (style.hasOwnProperty("letterSpacing"))
{
format.letterSpacing = style.letterSpacing;
}
}
return format;
}
屬性名稱與屬性值的意義在 CSS 樣式宣告與 TextFormat 物件之間會有所不同。
getTextStyle()
方法會將 CSS 屬性值轉換為 TextFormat 物件預期的值。