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;
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()
メソッドを 2 回呼び出して CSS スタイル宣言を TextFormat オブジェクトに変換し、2 つの HeadlineTextField オブジェクトのそれぞれで TextFormat オブジェクトを使用できるようにします。
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 オブジェクトで想定されている値に変換します。