Flex4 TextLayout Part4

Nov 30th, 2010 | Posted by Michael

Following example show three different way to import text to your container

* TextConverter.TEXT_LAYOUT_FORMAT?convert to/from the text layout markup format
* TextConverter.PLAIN_TEXT_FORMAT?convert to/from a plain text string
* TextConverter.TEXT_FIELD_HTML_FORMAT?convert to/from HTML

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx" viewSourceURL="srcview/index.html">
	<fx:Script>
		<![CDATA[
			import flashx.textLayout.conversion.TextConverter;
			private static const textInput:XML=<TextFlow xmlns="http://ns.adobe.com/textLayout/2008">
					<div>
						<p color="0x336699"><span>The Text Layout Framework is an extensible library,
								built on the new text engine in Adobe Flash Player 10,
								which delivers advanced, easy-to-integrate typographic and
								text layout features for rich,
								sophisticated and innovative typography on the web.
							</span></p>
					</div>
				</TextFlow>;
		]]>
	</fx:Script>

	<fx:Declarations>
		<fx:String id="myHtml">
			<![CDATA[
			<div>
			<p><span><font color='0x336699'>The Text Layout Framework is an extensible library,</font> <br/>
			built on the new text engine in Adobe Flash Player 10, <br/>
			which delivers advanced, easy-to-integrate typographic and <br/>
			text layout features for rich,<br/>
			sophisticated and innovative typography on the web.
			</span></p></div><br/><br/>]]>
		</fx:String>
	</fx:Declarations>
	<s:layout>
		<s:VerticalLayout horizontalAlign="center"
						  verticalAlign="middle"/>
	</s:layout>
	<s:VGroup>
		<s:RichText rotation="-4">
			<s:content>
				<s:p>
					<s:span fontWeight="bold"
							fontSize="60">Search</s:span>
					<s:br/>
				</s:p>
			</s:content>
		</s:RichText>
		<s:RichText text="Search queries appear as you type"
					fontWeight="bold"
					fontSize="16">
		</s:RichText>
		<s:RichText textFlow="{TextConverter.importToFlow(myHtml,TextConverter.TEXT_FIELD_HTML_FORMAT)}"/>
		<s:RichText textFlow="{TextConverter.importToFlow(textInput,TextConverter.TEXT_LAYOUT_FORMAT)}"
					lineBreak="toFit"
					width="400"/>
		<s:RichText textFlow="{TextConverter.importToFlow(myHtml,TextConverter.PLAIN_TEXT_FORMAT)}"
					lineBreak="toFit"
					width="400"/>
	</s:VGroup>
</s:Application>

Demo and Source

Originally posted 2010-07-21 07:16:29.

*

Popular Arichives