Loading external html and css in ActionScript

10七2009 Filed under: ActionScript3 Author: Alvin / Aedis.Ju 将文章转换为简体

速記！

加載外部的 Html & Css 在 Flex/Flash顯示出來，雖然直接的方法很少用到，但下面的內容畢竟也是一種方法呀！

Flash Player 10 支持的 HTML 元素和屬性

Anchor tag <a/>
Bold tag
Break tag
Font tag
Image tag <img/>
Italic tag
List item tag <li/>
Paragraph tag
Span tag
Text format tag <textformat/>
Underline tag

Flash Player 10 支持的CSS屬性

color
display
font-family
font-size
font-style
font-weight
kerning
leading
letter-spacing
margin-left
margin-right
text-align
text-decoration
text-indent

也就說，在外部 loading html & css 的時候，其中的代碼要符合 Flashplayer 10 的 support 列表才能正確得顯示出來。
直接看下面的代碼：
html.text:

<h1><a href="http://blog.richmediaplus.com" target="_blank">Aedis.Ju's Blog</a></h1>
<p>Powerd By <img src="r.gif"><img/></p>
<br/>
<p>About the Adobe's RIA related solution and technology, 
like <b>Adobe Air</b>, <i>Adobe Flex</i>,
<u>You also can find the SEO for Flex, RIA, User Ex in this blog.<u/></p>

style.css：

p {
    font-family: Arial;
    font-size: 16px;
    font-weight: normal;
    color: #000000;
}
h1 {
    color: #00FFFFF;
    font-size: 24px;
    font-weight: bold;
}
a {
    color: #9FFF9F;
    text-decoration: none;
}
a:hover {
    color: #FF00FF;
    text-decoration: underline;
}

FlexHtmlCss.mxml:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="htmlcss()"
				viewSourceURL="srcview/index.html">
	<mx:Script>
		<![CDATA[
			public function htmlcss():void
			{
				var htmlReq:URLRequest = new URLRequest("html.txt");
				var cssReq:URLRequest = new URLRequest("style.css");
				var loader:URLLoader = new URLLoader();
				var sheet:StyleSheet = new StyleSheet();
				var htmlData:String;
				function fileLoaded(event:Event):void
				{
					htmlData = loader.data;
					loader.removeEventListener(Event.COMPLETE, fileLoaded);
					loader.load(cssReq);
					loader.addEventListener(Event.COMPLETE, cssLoaded);
				}
				function cssLoaded(event:Event):void
				{
					sheet.parseCSS(loader.data);
					html_txt.styleSheet = sheet;
					html_txt.htmlText = htmlData;
				}
				loader.addEventListener(Event.COMPLETE, fileLoaded);
				loader.load(htmlReq);
			}
		]]>
	</mx:Script>
	<mx:TextArea id="html_txt" x="107" y="83"
				 width="507" height="314"/>
</mx:Application>

Flex 中很多關于文字顯示的 component 的控件中都含有 htmlText 和 styleSheet 的屬性。

按照 CSS 先讀取的原則，讀取符合 Flash Player 10 規范的 CSS ，通過 StyleSheet.parseCSS(CSSText:String):void 來分析 CSSText 中的 CSS 并用它加載樣式表，然后把符合 Flash Player 10 支持的 HTML 元素和屬性的 html 讀取進來，賦值在 htmlText 屬性中顯示出來。

Demo: HtmlCssFlex