外部 CSS ファイルの読み取り

News Layout アプリケーションは、最初にローカル XML ファイルから記事のテキストを読み取ります。次に、ヘッドライン、サブタイトル、および本文テキストのフォーマット情報が含まれている外部 CSS ファイルを読み取ります。

CSS ファイルには 3 つのスタイルが定義されています。記事本文用の標準段落スタイル、およびヘッドラインとサブタイトルにそれぞれ対応する h1 スタイルと h2 スタイルです。

p {
    font-family: Georgia, Times New Roman, Times, _serif;
    font-size: 12;
    leading: 2;
    text-align: justify;
}

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;
    }
    displayStory();
}

onCSSFileLoaded() メソッドによって新しい StyleSheet オブジェクトが作成され、そのオブジェクトを使用して入力 CSS データが解析されます。記事の本文テキストは MultiColumnTextField オブジェクトに表示されます。このオブジェクトでは StyleSheet オブジェクトを直接使用できます。一方、ヘッドラインフィールドには HeadlineTextField クラスが使用されます。このクラスではフォーマットに TextFormat オブジェクトを使用します。

onCSSFileLoaded() メソッドは、getTextStyle() メソッドを 2 回呼び出して CSS スタイル宣言を TextFormat オブジェクトに変換し、2 つの HeadlineTextField オブジェクトのそれぞれで TextFormat オブジェクトを使用できるようにします。getTextStyle() メソッドを次に示します。

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.textIndent, 
                              style.leading);
        
        if (style.hasOwnProperty("letterSpacing"))        
        {                  
            format.letterSpacing = style.letterSpacing;
        }
    }
    return format;
}

プロパティ名とプロパティ値の意味は、CSS スタイル宣言と TextFormat オブジェクトでは異なります。getTextStyle() メソッドは、CSS のプロパティ値を、TextFormat オブジェクトで想定されている値に変換します。