<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>indieas &#187; textformat</title>
	<atom:link href="http://www.indieas.org/tag/textformat/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.indieas.org</link>
	<description>independent actionscript developer team</description>
	<lastBuildDate>Tue, 19 Oct 2010 13:43:20 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>TextField, StyleSheet and TextFormat</title>
		<link>http://www.indieas.org/2009/09/textfield-stylesheet-and-textformat/</link>
		<comments>http://www.indieas.org/2009/09/textfield-stylesheet-and-textformat/#comments</comments>
		<pubDate>Mon, 21 Sep 2009 09:08:35 +0000</pubDate>
		<dc:creator>mich</dc:creator>
				<category><![CDATA[Articles]]></category>
		<category><![CDATA[defaultTextFormat]]></category>
		<category><![CDATA[stylesheet]]></category>
		<category><![CDATA[textfield]]></category>
		<category><![CDATA[textformat]]></category>

		<guid isPermaLink="false">http://www.indieas.org/?p=88</guid>
		<description><![CDATA[I&#8217;m sure that everybody that ever try to apply a stylesheet to a textfield in Flash encountered some problems. Thats why I though I will write a summary about the workaround that I found so far. First thing to know is how flash can apply css on text. If you set for example: You can [...]]]></description>
			<content:encoded><![CDATA[<p>I&#8217;m sure that everybody that ever try to apply a stylesheet to a textfield in Flash encountered some problems. Thats why I though I will write a summary about the workaround that I found so far.</p>
<p>First thing to know is how flash can apply css on text. If you set for example:</p>
<pre class="brush: as3; title: ; notranslate">
textField.text = &quot;Hello is it &lt;b&gt;me&lt;/b&gt; you &lt;h1&gt;looking&lt;/h1&gt; for.&quot;;
</pre>
<p>You can style the text between tags here: <em>&lt;b&gt;..&lt;/b&gt;</em> and <em>&lt;h1&gt;&#8230;&lt;/h1&gt;</em> if you define css definition for these tags. An example css file would look like:</p>
<pre class="brush: css; title: ; notranslate">
b {  font-weight: bold; }
h1 {  size:16; }
</pre>
<p>and the corresponding as source to set the styleSheet would be:</p>
<pre class="brush: as3; title: ; notranslate">
private function onLoaded( e:Event ):void {
// The TextLoader is a class from the indieas library
var loader:TextLoader = e.target as TextLoader;
var css:StyleSheet = loader.getDataAsCSS();
textField.styleSheet = css;
textField.text = &quot;Hello is it &lt;b&gt;me&lt;/b&gt; you &lt;h1&gt;looking&lt;/h1&gt; for.&quot;;
}
</pre>
<p>Here its important that you set the text property after setting the styleSheet otherwise it will not apply the styles.</p>
<p>So far everything works as expected but what if you also want to style the normal text without any tags. You could wrap the text content in another tag like:</p>
<pre class="brush: xml; title: ; notranslate">&lt;text&gt;Hello is it &lt;b&gt;me&lt;/b&gt; you &lt;h1&gt;looking&lt;/h1&gt; for.&lt;/text&gt;</pre>
<p>But thats not very handy instead we use the TextField own property defaultTextFormat. We can transform a css into a TextFormat and apply that as defaultTextFormat like this:</p>
<pre class="brush: as3; title: ; notranslate">
var styleObject:Object = css.getStyle( &quot;*&quot; );
var defaultStyle:TextFormat = css.transform( styleObject );
textField.defaultTextFormat = defaultStyle;
textField.styleSheet = css;
textField.text = &quot;Hello is it &lt;b&gt;me&lt;/b&gt; you &lt;h1&gt;looking&lt;/h1&gt; for.&quot;;
</pre>
<p>Again here the order of applying defaultTextFormat, styleSheet and text is important. If you have a styleSheet applied and you want to set the defaultTextFormat it will throw an error. So if you want to reapply the defaultTextFormat do it like this:</p>
<pre class="brush: as3; title: ; notranslate">
var style:StyleSheet = textField.styleSheet; // save the styles to reapply them later
textField.styleSheet = null; // set this null to allow seting the defaultTextFormat
textField.defaultTextFormat = // new format;
textField.styleSheet = style; // reapply styles
textField.text = textField.text; // reapply text
</pre>
<p>The last thing to mention is the textField.condenseWhite property. Very often you load your content from an xml file and like to show a node content in a textField. But as the xml itself has linespaces and breaks the shown text is weird formatted. To avoid this use textField.condenseWhite = true. To make a new line just add a &lt;br/&gt; tag to your xml content and make sure your textfield has multiline set to true.</p>
<p><strong>Summary:</strong></p>
<ul>
<li>use defaultTextFormat for default text style.</li>
<li>transform the defaultTextFormat from a StyleSheet style.</li>
<li>properties set order: defaultTextFormat, styleSheet, text.</li>
<li>set condenseWhite = true when setting xml content to the texfield.</li>
</ul>
<p>To play around download a demo FlexBuilder project <a href="http://www.indieas.org/wp-content/uploads/2009/09/textfield_css_demo.zip" target="_blank">here</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.indieas.org/2009/09/textfield-stylesheet-and-textformat/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>

