这是来自blog.flexexamples.com的一篇文章,介绍如何使用Flex4的新特性实现高级文本渲染,原文地址:
http://blog.flexexamples.com/2009/06/25/importing-a-text-flow-from-an-xml-object-in-flex-4/
下面的这个示例显示了你应该如何在Flex4中通过一个XML对象导入一个TextFlow对象,实现这个功能需要使用静态的TextFlowUtil.importFromXML()方法。
前置知识:
要使用这个示例,你必须先安装Flash Player10(Flash Player的最新版本),并且为你的Flex Builder3安装了Flex Gumbo SDK。要获取更多关于在Flex Builder3中下载和安装Gumbo SDK的信息,请参考这篇文章:在Flex Builder3中使用Gumbo SDK。要下载Flex Gumbo SDK的最新版本,请访问:http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4。当然,如果你使用最新的Flash Builder4的测试版来运行这个示例的话,就不需要配置SDK了,因为Flash Builder4已经内置了Gumbo的SDK。
<?xml version="1.0" encoding="utf-8"?>
<s:Application name="TextFlowUtil_importFromXML_test"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo">
<fx:Script>
<![CDATA[
import spark.utils.TextFlowUtil;
XML.ignoreWhitespace = false;
[Bindable]
private var theXML:XML = <div textAlign="justify" paragraphSpaceBefore="20">
<p><span text="" color="#F20F0F" width="84" fontSize="27" fontFamily="Georgia" fontStyle="italic" textDecoration="underline">标签</span></p>
<p><span fontWeight="bold">Lorem ipsum dolor sit amet</span>, tincidunt.</p>
<p>Cras nec mi tortor, id pretium sem. <span lineThrough="true">In hendrerit viverra orci quis condimentum.</span> Maecenas et arcu quis arcu volutpat consectetur quis vel tellus. </p>
</div>;
]]>
</fx:Script>
<s:RichText id="richTxt"
textFlow="{TextFlowUtil.importFromXML(theXML)}"
left="20" right="20"
verticalCenter="0" />
</s:Application>
运行效果
你可以修改XML部分,以便更加明显的看到效果,当然你也可以设置导入外部的XML数据源。注意这个示例是基于Beta版本的Flex4 SDK,在正式的Flex4 SDK中或许会有一些使用上的改变,读者需要注意一下。