<?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>Flex Examples &#187; trackingLeft</title>
	<atom:link href="http://blog.flexexamples.com/tag/trackingleft/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.flexexamples.com</link>
	<description>Just a bunch of Adobe Flex Examples</description>
	<lastBuildDate>Wed, 26 Jan 2011 18:09:51 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Changing the letter spacing on a Spark Button control in Flex 4</title>
		<link>http://blog.flexexamples.com/2010/04/05/changing-the-letter-spacing-on-a-spark-button-control-in-flex-4/</link>
		<comments>http://blog.flexexamples.com/2010/04/05/changing-the-letter-spacing-on-a-spark-button-control-in-flex-4/#comments</comments>
		<pubDate>Tue, 06 Apr 2010 00:35:10 +0000</pubDate>
		<dc:creator>Peter deHaan</dc:creator>
				<category><![CDATA[Button (Spark)]]></category>
		<category><![CDATA[Flex4]]></category>
		<category><![CDATA[Gumbo]]></category>
		<category><![CDATA[trackingLeft]]></category>
		<category><![CDATA[trackingRight]]></category>

		<guid isPermaLink="false">http://blog.flexexamples.com/?p=2694</guid>
		<description><![CDATA[<p>The following example shows how you can change the letter spacing on the Spark Button control in Flex 4 by setting the trackingLeft or trackingRight styles.</p> <p></p> &#60;?xml version=&#34;1.0&#34; encoding=&#34;utf-8&#34;?&#62; &#60;!-- http://blog.flexexamples.com/2010/04/05/changing-the-letter-spacing-on-a-spark-button-control-in-flex-4/ --&#62; &#60;s:Application name=&#34;Spark_Button_trackingRight_test&#34; xmlns:fx=&#34;http://ns.adobe.com/mxml/2009&#34; xmlns:s=&#34;library://ns.adobe.com/flex/spark&#34; xmlns:mx=&#34;library://ns.adobe.com/flex/mx&#34;&#62; &#60;s:controlBarContent&#62; &#60;mx:Form&#62; &#60;mx:FormItem label=&#34;trackingLeft:&#34;&#62; &#60;s:HSlider id=&#34;sldrL&#34; minimum=&#34;0&#34; maximum=&#34;10&#34; /&#62; &#60;/mx:FormItem&#62; &#60;mx:FormItem label=&#34;trackingRight:&#34;&#62; &#60;s:HSlider id=&#34;sldrR&#34; minimum=&#34;0&#34; maximum=&#34;10&#34; /&#62; [...]]]></description>
			<content:encoded><![CDATA[<p>The following example shows how you can change the letter spacing on the Spark Button control in Flex 4 by setting the <code>trackingLeft</code> or <code>trackingRight</code> styles.</p>
<p><span id="more-2694"></span></p>
<p class="alert">The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see <a href="http://bit.ly/crThlI">http://www.adobe.com/products/flex/</a>. To download the latest nightly build of the Flex 4 SDK, see <a href="http://bit.ly/Flex4SDK">http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4</a>.<br/><strong>For more information on getting started with Flex 4 and Flash Builder 4, see the official <a href="http://bit.ly/dCkecm">Adobe Flex Team blog</a>.</strong></p>

<div class="wp_syntax"><div class="code"><pre class="mxml" style="font-family:monospace;"><span style="color: #000000;">&lt;?xml version=<span style="color: #ff0000;">&quot;1.0&quot;</span> encoding=<span style="color: #ff0000;">&quot;utf-8&quot;</span>?<span style="color: #7400FF;">&gt;</span></span>
<span style="color: #000000;"><span style="color: #808080; font-style: italic;">&lt;!-- http://blog.flexexamples.com/2010/04/05/changing-the-letter-spacing-on-a-spark-button-control-in-flex-4/ --&gt;</span></span>
<span style="color: #000000;"><span style="color: #7400FF;">&lt;s:Application</span> name=<span style="color: #ff0000;">&quot;Spark_Button_trackingRight_test&quot;</span></span>
<span style="color: #000000;">        xmlns:fx=<span style="color: #ff0000;">&quot;http://ns.adobe.com/mxml/2009&quot;</span></span>
<span style="color: #000000;">        xmlns:s=<span style="color: #ff0000;">&quot;library://ns.adobe.com/flex/spark&quot;</span></span>
<span style="color: #000000;">        xmlns:mx=<span style="color: #ff0000;">&quot;library://ns.adobe.com/flex/mx&quot;</span><span style="color: #7400FF;">&gt;</span></span>
    <span style="color: #000000;"><span style="color: #7400FF;">&lt;s:controlBarContent</span><span style="color: #7400FF;">&gt;</span></span>
        <span style="color: #000000;"><span style="color: #7400FF;">&lt;mx:Form</span><span style="color: #7400FF;">&gt;</span></span>
            <span style="color: #000000;"><span style="color: #7400FF;">&lt;mx:FormItem</span> label=<span style="color: #ff0000;">&quot;trackingLeft:&quot;</span><span style="color: #7400FF;">&gt;</span></span>
                <span style="color: #000000;"><span style="color: #7400FF;">&lt;s:HSlider</span> id=<span style="color: #ff0000;">&quot;sldrL&quot;</span> minimum=<span style="color: #ff0000;">&quot;0&quot;</span> maximum=<span style="color: #ff0000;">&quot;10&quot;</span> <span style="color: #7400FF;">/&gt;</span></span>
            <span style="color: #000000;"><span style="color: #7400FF;">&lt;/mx:FormItem</span><span style="color: #7400FF;">&gt;</span></span>
            <span style="color: #000000;"><span style="color: #7400FF;">&lt;mx:FormItem</span> label=<span style="color: #ff0000;">&quot;trackingRight:&quot;</span><span style="color: #7400FF;">&gt;</span></span>
                <span style="color: #000000;"><span style="color: #7400FF;">&lt;s:HSlider</span> id=<span style="color: #ff0000;">&quot;sldrR&quot;</span> minimum=<span style="color: #ff0000;">&quot;0&quot;</span> maximum=<span style="color: #ff0000;">&quot;10&quot;</span> <span style="color: #7400FF;">/&gt;</span></span>
            <span style="color: #000000;"><span style="color: #7400FF;">&lt;/mx:FormItem</span><span style="color: #7400FF;">&gt;</span></span>
        <span style="color: #000000;"><span style="color: #7400FF;">&lt;/mx:Form</span><span style="color: #7400FF;">&gt;</span></span>
    <span style="color: #000000;"><span style="color: #7400FF;">&lt;/s:controlBarContent</span><span style="color: #7400FF;">&gt;</span></span>
&nbsp;
    <span style="color: #000000;"><span style="color: #7400FF;">&lt;s:Button</span> id=<span style="color: #ff0000;">&quot;btn&quot;</span></span>
<span style="color: #000000;">            label=<span style="color: #ff0000;">&quot;Spark Button label&quot;</span></span>
<span style="color: #000000;">            trackingLeft=<span style="color: #ff0000;">&quot;{sldrL.value}&quot;</span></span>
<span style="color: #000000;">            trackingRight=<span style="color: #ff0000;">&quot;{sldrR.value}&quot;</span></span>
<span style="color: #000000;">            maxWidth=<span style="color: #ff0000;">&quot;600&quot;</span></span>
<span style="color: #000000;">            horizontalCenter=<span style="color: #ff0000;">&quot;0&quot;</span> verticalCenter=<span style="color: #ff0000;">&quot;0&quot;</span> <span style="color: #7400FF;">/&gt;</span></span>
&nbsp;
<span style="color: #000000;"><span style="color: #7400FF;">&lt;/s:Application</span><span style="color: #7400FF;">&gt;</span></span></pre></div></div>

<p>You can also set the <code>trackingLeft</code> and <code>trackingRight</code> styles in an external .CSS file or &lt;Style&gt; block, as seen in the following example:</p>

<div class="wp_syntax"><div class="code"><pre class="mxml" style="font-family:monospace;"><span style="color: #000000;">&lt;?xml version=<span style="color: #ff0000;">&quot;1.0&quot;</span> encoding=<span style="color: #ff0000;">&quot;utf-8&quot;</span>?<span style="color: #7400FF;">&gt;</span></span>
<span style="color: #000000;"><span style="color: #808080; font-style: italic;">&lt;!-- http://blog.flexexamples.com/2010/04/05/changing-the-letter-spacing-on-a-spark-button-control-in-flex-4/ --&gt;</span></span>
<span style="color: #000000;"><span style="color: #7400FF;">&lt;s:Application</span> name=<span style="color: #ff0000;">&quot;Spark_Button_trackingRight_test&quot;</span></span>
<span style="color: #000000;">        xmlns:fx=<span style="color: #ff0000;">&quot;http://ns.adobe.com/mxml/2009&quot;</span></span>
<span style="color: #000000;">        xmlns:s=<span style="color: #ff0000;">&quot;library://ns.adobe.com/flex/spark&quot;</span></span>
<span style="color: #000000;">        xmlns:mx=<span style="color: #ff0000;">&quot;library://ns.adobe.com/flex/mx&quot;</span><span style="color: #7400FF;">&gt;</span></span>
&nbsp;
    <span style="color: #000000;"><span style="color: #7400FF;">&lt;fx:Style</span><span style="color: #7400FF;">&gt;</span></span>
        @namespace s &quot;library://ns.adobe.com/flex/spark&quot;;
        @namespace mx &quot;library://ns.adobe.com/flex/mx&quot;;
&nbsp;
        s|Button {
            trackingLeft: 10;
            trackingRight: 10;
        }
    <span style="color: #000000;"><span style="color: #7400FF;">&lt;/fx:Style</span><span style="color: #7400FF;">&gt;</span></span>
&nbsp;
    <span style="color: #000000;"><span style="color: #7400FF;">&lt;s:Button</span> id=<span style="color: #ff0000;">&quot;btn&quot;</span></span>
<span style="color: #000000;">            label=<span style="color: #ff0000;">&quot;Spark Button label&quot;</span></span>
<span style="color: #000000;">            maxWidth=<span style="color: #ff0000;">&quot;600&quot;</span></span>
<span style="color: #000000;">            horizontalCenter=<span style="color: #ff0000;">&quot;0&quot;</span> verticalCenter=<span style="color: #ff0000;">&quot;0&quot;</span> <span style="color: #7400FF;">/&gt;</span></span>
&nbsp;
<span style="color: #000000;"><span style="color: #7400FF;">&lt;/s:Application</span><span style="color: #7400FF;">&gt;</span></span></pre></div></div>

<p>Or you can set the <code>trackingLeft</code> and <code>trackingRight</code> using ActionScript, as seen in the following example:</p>

<div class="wp_syntax"><div class="code"><pre class="mxml" style="font-family:monospace;"><span style="color: #000000;">&lt;?xml version=<span style="color: #ff0000;">&quot;1.0&quot;</span> encoding=<span style="color: #ff0000;">&quot;utf-8&quot;</span>?<span style="color: #7400FF;">&gt;</span></span>
<span style="color: #000000;"><span style="color: #808080; font-style: italic;">&lt;!-- http://blog.flexexamples.com/2010/04/05/changing-the-letter-spacing-on-a-spark-button-control-in-flex-4/ --&gt;</span></span>
<span style="color: #000000;"><span style="color: #7400FF;">&lt;s:Application</span> name=<span style="color: #ff0000;">&quot;Spark_Button_trackingRight_test&quot;</span></span>
<span style="color: #000000;">        xmlns:fx=<span style="color: #ff0000;">&quot;http://ns.adobe.com/mxml/2009&quot;</span></span>
<span style="color: #000000;">        xmlns:s=<span style="color: #ff0000;">&quot;library://ns.adobe.com/flex/spark&quot;</span></span>
<span style="color: #000000;">        xmlns:mx=<span style="color: #ff0000;">&quot;library://ns.adobe.com/flex/mx&quot;</span><span style="color: #7400FF;">&gt;</span></span>
    <span style="color: #000000;"><span style="color: #7400FF;">&lt;s:controlBarContent</span><span style="color: #7400FF;">&gt;</span></span>
        <span style="color: #000000;"><span style="color: #7400FF;">&lt;mx:Form</span><span style="color: #7400FF;">&gt;</span></span>
            <span style="color: #000000;"><span style="color: #7400FF;">&lt;mx:FormItem</span> label=<span style="color: #ff0000;">&quot;trackingLeft:&quot;</span><span style="color: #7400FF;">&gt;</span></span>
                <span style="color: #000000;"><span style="color: #7400FF;">&lt;s:HSlider</span> id=<span style="color: #ff0000;">&quot;sldrL&quot;</span></span>
<span style="color: #000000;">                        minimum=<span style="color: #ff0000;">&quot;0&quot;</span> maximum=<span style="color: #ff0000;">&quot;10&quot;</span></span>
<span style="color: #000000;">                        change=<span style="color: #ff0000;">&quot;sldrL_changeHandler(event);&quot;</span><span style="color: #7400FF;">/&gt;</span></span>
            <span style="color: #000000;"><span style="color: #7400FF;">&lt;/mx:FormItem</span><span style="color: #7400FF;">&gt;</span></span>
            <span style="color: #000000;"><span style="color: #7400FF;">&lt;mx:FormItem</span> label=<span style="color: #ff0000;">&quot;trackingRight:&quot;</span><span style="color: #7400FF;">&gt;</span></span>
                <span style="color: #000000;"><span style="color: #7400FF;">&lt;s:HSlider</span> id=<span style="color: #ff0000;">&quot;sldrR&quot;</span></span>
<span style="color: #000000;">                        minimum=<span style="color: #ff0000;">&quot;0&quot;</span> maximum=<span style="color: #ff0000;">&quot;10&quot;</span></span>
<span style="color: #000000;">                        change=<span style="color: #ff0000;">&quot;sldrR_changeHandler(event);&quot;</span><span style="color: #7400FF;">/&gt;</span></span>
            <span style="color: #000000;"><span style="color: #7400FF;">&lt;/mx:FormItem</span><span style="color: #7400FF;">&gt;</span></span>
        <span style="color: #000000;"><span style="color: #7400FF;">&lt;/mx:Form</span><span style="color: #7400FF;">&gt;</span></span>
    <span style="color: #000000;"><span style="color: #7400FF;">&lt;/s:controlBarContent</span><span style="color: #7400FF;">&gt;</span></span>
&nbsp;
    <span style="color: #000000;"><span style="color: #7400FF;">&lt;fx:Script</span><span style="color: #7400FF;">&gt;</span></span>
        <span style="color: #000000;">&lt;!<span style="color: #66cc66;">&#91;</span>CDATA<span style="color: #66cc66;">&#91;</span></span>
<span style="color: #000000;">            protected function sldrL_changeHandler<span style="color: #66cc66;">&#40;</span>event:Event<span style="color: #66cc66;">&#41;</span>:void <span style="color: #66cc66;">&#123;</span></span>
<span style="color: #000000;">                btn.setStyle<span style="color: #66cc66;">&#40;</span><span style="color: #ff0000;">&quot;trackingLeft&quot;</span>, sldrL.value<span style="color: #66cc66;">&#41;</span>;</span>
<span style="color: #000000;">            <span style="color: #66cc66;">&#125;</span></span>
&nbsp;
<span style="color: #000000;">            protected function sldrR_changeHandler<span style="color: #66cc66;">&#40;</span>event:Event<span style="color: #66cc66;">&#41;</span>:void <span style="color: #66cc66;">&#123;</span></span>
<span style="color: #000000;">                btn.setStyle<span style="color: #66cc66;">&#40;</span><span style="color: #ff0000;">&quot;trackingRight&quot;</span>, sldrR.value<span style="color: #66cc66;">&#41;</span>;</span>
<span style="color: #000000;">            <span style="color: #66cc66;">&#125;</span></span>
<span style="color: #000000;">        <span style="color: #66cc66;">&#93;</span><span style="color: #66cc66;">&#93;</span><span style="color: #7400FF;">&gt;</span></span>
    <span style="color: #000000;"><span style="color: #7400FF;">&lt;/fx:Script</span><span style="color: #7400FF;">&gt;</span></span>
&nbsp;
    <span style="color: #000000;"><span style="color: #7400FF;">&lt;s:Button</span> id=<span style="color: #ff0000;">&quot;btn&quot;</span></span>
<span style="color: #000000;">            label=<span style="color: #ff0000;">&quot;Spark Button label&quot;</span></span>
<span style="color: #000000;">            maxWidth=<span style="color: #ff0000;">&quot;600&quot;</span></span>
<span style="color: #000000;">            horizontalCenter=<span style="color: #ff0000;">&quot;0&quot;</span> verticalCenter=<span style="color: #ff0000;">&quot;0&quot;</span> <span style="color: #7400FF;">/&gt;</span></span>
&nbsp;
<span style="color: #000000;"><span style="color: #7400FF;">&lt;/s:Application</span><span style="color: #7400FF;">&gt;</span></span></pre></div></div>

<p class="alert">This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.</p>
<div class="evernoteSiteMemory"><a href="javascript:" onclick="Evernote.doClip({title: 'Changing the letter spacing on a Spark Button control in Flex 4 on FlexExamples.com',url: 'http://blog.flexexamples.com/2010/04/05/changing-the-letter-spacing-on-a-spark-button-control-in-flex-4/',contentID: 'post-2694',code: 'Pete9667',suggestNotebook: 'FlexExamples',suggestTags: 'Gumbo,trackingLeft,trackingRight',providerName: 'FlexExamples.com',styling: 'text' });return false" class="evernoteSiteMemoryLink"><img src="http://static.evernote.com/article-clipper-remember.png" class="evernoteSiteMemoryButton" />
				</a>				<div class="evernoteSiteMemoryClear">&nbsp;</div>
</div>]]></content:encoded>
			<wfw:commentRss>http://blog.flexexamples.com/2010/04/05/changing-the-letter-spacing-on-a-spark-button-control-in-flex-4/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Setting the letter spacing on the Spark TextInput control in Flex 4</title>
		<link>http://blog.flexexamples.com/2010/02/10/setting-the-letter-spacing-on-the-spark-textinput-control-in-flex-4/</link>
		<comments>http://blog.flexexamples.com/2010/02/10/setting-the-letter-spacing-on-the-spark-textinput-control-in-flex-4/#comments</comments>
		<pubDate>Thu, 11 Feb 2010 05:04:39 +0000</pubDate>
		<dc:creator>Peter deHaan</dc:creator>
				<category><![CDATA[beta2]]></category>
		<category><![CDATA[TextInput (Spark)]]></category>
		<category><![CDATA[Gumbo]]></category>
		<category><![CDATA[trackingLeft]]></category>
		<category><![CDATA[trackingRight]]></category>

		<guid isPermaLink="false">http://blog.flexexamples.com/?p=2475</guid>
		<description><![CDATA[<p>The following example shows how you can set the letter spacing on the Spark TextInput control in Flex 4 by setting the trackingLeft and trackingRight styles.</p> <p></p> &#60;?xml version=&#34;1.0&#34; encoding=&#34;utf-8&#34;?&#62; &#60;!-- http://blog.flexexamples.com/2010/02/10/setting-the-letter-spacing-on-the-spark-textinput-control-in-flex-4/ --&#62; &#60;s:Application name=&#34;Spark_TextInput_trackingLeft_test&#34; xmlns:fx=&#34;http://ns.adobe.com/mxml/2009&#34; xmlns:mx=&#34;library://ns.adobe.com/flex/mx&#34; xmlns:s=&#34;library://ns.adobe.com/flex/spark&#34;&#62; &#60;s:controlBarContent&#62; &#60;mx:Form&#62; &#60;mx:FormItem label=&#34;trackingRight:&#34;&#62; &#60;s:HSlider id=&#34;sl&#34; minimum=&#34;0&#34; maximum=&#34;10&#34; /&#62; &#60;/mx:FormItem&#62; &#60;/mx:Form&#62; &#60;/s:controlBarContent&#62; &#160; &#60;s:TextInput id=&#34;txtInput&#34; text=&#34;The quick [...]]]></description>
			<content:encoded><![CDATA[<p>The following example shows how you can set the letter spacing on the Spark TextInput control in Flex 4 by setting the <code>trackingLeft</code> and <code>trackingRight</code> styles.</p>
<p><span id="more-2475"></span></p>
<p class="alert">The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see <a href="http://bit.ly/crThlI">http://www.adobe.com/products/flex/</a>. To download the latest nightly build of the Flex 4 SDK, see <a href="http://bit.ly/Flex4SDK">http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4</a>.<br/><strong>For more information on getting started with Flex 4 and Flash Builder 4, see the official <a href="http://bit.ly/dCkecm">Adobe Flex Team blog</a>.</strong></p>

<div class="wp_syntax"><div class="code"><pre class="mxml" style="font-family:monospace;"><span style="color: #000000;">&lt;?xml version=<span style="color: #ff0000;">&quot;1.0&quot;</span> encoding=<span style="color: #ff0000;">&quot;utf-8&quot;</span>?<span style="color: #7400FF;">&gt;</span></span>
<span style="color: #000000;"><span style="color: #808080; font-style: italic;">&lt;!-- http://blog.flexexamples.com/2010/02/10/setting-the-letter-spacing-on-the-spark-textinput-control-in-flex-4/ --&gt;</span></span>
<span style="color: #000000;"><span style="color: #7400FF;">&lt;s:Application</span> name=<span style="color: #ff0000;">&quot;Spark_TextInput_trackingLeft_test&quot;</span></span>
<span style="color: #000000;">        xmlns:fx=<span style="color: #ff0000;">&quot;http://ns.adobe.com/mxml/2009&quot;</span></span>
<span style="color: #000000;">        xmlns:mx=<span style="color: #ff0000;">&quot;library://ns.adobe.com/flex/mx&quot;</span></span>
<span style="color: #000000;">        xmlns:s=<span style="color: #ff0000;">&quot;library://ns.adobe.com/flex/spark&quot;</span><span style="color: #7400FF;">&gt;</span></span>
    <span style="color: #000000;"><span style="color: #7400FF;">&lt;s:controlBarContent</span><span style="color: #7400FF;">&gt;</span></span>
        <span style="color: #000000;"><span style="color: #7400FF;">&lt;mx:Form</span><span style="color: #7400FF;">&gt;</span></span>
            <span style="color: #000000;"><span style="color: #7400FF;">&lt;mx:FormItem</span> label=<span style="color: #ff0000;">&quot;trackingRight:&quot;</span><span style="color: #7400FF;">&gt;</span></span>
                <span style="color: #000000;"><span style="color: #7400FF;">&lt;s:HSlider</span> id=<span style="color: #ff0000;">&quot;sl&quot;</span> minimum=<span style="color: #ff0000;">&quot;0&quot;</span> maximum=<span style="color: #ff0000;">&quot;10&quot;</span> <span style="color: #7400FF;">/&gt;</span></span>
            <span style="color: #000000;"><span style="color: #7400FF;">&lt;/mx:FormItem</span><span style="color: #7400FF;">&gt;</span></span>
        <span style="color: #000000;"><span style="color: #7400FF;">&lt;/mx:Form</span><span style="color: #7400FF;">&gt;</span></span>
    <span style="color: #000000;"><span style="color: #7400FF;">&lt;/s:controlBarContent</span><span style="color: #7400FF;">&gt;</span></span>
&nbsp;
    <span style="color: #000000;"><span style="color: #7400FF;">&lt;s:TextInput</span> id=<span style="color: #ff0000;">&quot;txtInput&quot;</span></span>
<span style="color: #000000;">            text=<span style="color: #ff0000;">&quot;The quick brown fox jumps over the lazy dog.&quot;</span></span>
<span style="color: #000000;">            selectionHighlighting=<span style="color: #ff0000;">&quot;always&quot;</span></span>
<span style="color: #000000;">            trackingRight=<span style="color: #ff0000;">&quot;{sl.value}&quot;</span></span>
<span style="color: #000000;">            horizontalCenter=<span style="color: #ff0000;">&quot;0&quot;</span> verticalCenter=<span style="color: #ff0000;">&quot;0&quot;</span></span>
<span style="color: #000000;">            creationComplete=<span style="color: #ff0000;">&quot;txtInput.selectRange(0, 3);&quot;</span> <span style="color: #7400FF;">/&gt;</span></span>
&nbsp;
<span style="color: #000000;"><span style="color: #7400FF;">&lt;/s:Application</span><span style="color: #7400FF;">&gt;</span></span></pre></div></div>

<p>You can also set the <code>trackingLeft</code> and <code>trackingRight</code> styles in an external .CSS file or &lt;Style/&gt; block, as seen in the following example:</p>

<div class="wp_syntax"><div class="code"><pre class="mxml" style="font-family:monospace;"><span style="color: #000000;">&lt;?xml version=<span style="color: #ff0000;">&quot;1.0&quot;</span> encoding=<span style="color: #ff0000;">&quot;utf-8&quot;</span>?<span style="color: #7400FF;">&gt;</span></span>
<span style="color: #000000;"><span style="color: #808080; font-style: italic;">&lt;!-- http://blog.flexexamples.com/2010/02/10/setting-the-letter-spacing-on-the-spark-textinput-control-in-flex-4/ --&gt;</span></span>
<span style="color: #000000;"><span style="color: #7400FF;">&lt;s:Application</span> name=<span style="color: #ff0000;">&quot;Spark_TextInput_trackingLeft_test&quot;</span></span>
<span style="color: #000000;">        xmlns:fx=<span style="color: #ff0000;">&quot;http://ns.adobe.com/mxml/2009&quot;</span></span>
<span style="color: #000000;">        xmlns:mx=<span style="color: #ff0000;">&quot;library://ns.adobe.com/flex/mx&quot;</span></span>
<span style="color: #000000;">        xmlns:s=<span style="color: #ff0000;">&quot;library://ns.adobe.com/flex/spark&quot;</span><span style="color: #7400FF;">&gt;</span></span>
&nbsp;
    <span style="color: #000000;"><span style="color: #7400FF;">&lt;fx:Style</span><span style="color: #7400FF;">&gt;</span></span>
        @namespace mx &quot;library://ns.adobe.com/flex/mx&quot;;
        @namespace s &quot;library://ns.adobe.com/flex/spark&quot;;
&nbsp;
        s|TextInput {
            trackingLeft: 4;
            trackingRight: 2;
        }
    <span style="color: #000000;"><span style="color: #7400FF;">&lt;/fx:Style</span><span style="color: #7400FF;">&gt;</span></span>
&nbsp;
    <span style="color: #000000;"><span style="color: #7400FF;">&lt;s:TextInput</span> id=<span style="color: #ff0000;">&quot;txtInput&quot;</span></span>
<span style="color: #000000;">            text=<span style="color: #ff0000;">&quot;The quick brown fox jumps over the lazy dog.&quot;</span></span>
<span style="color: #000000;">            selectionHighlighting=<span style="color: #ff0000;">&quot;always&quot;</span></span>
<span style="color: #000000;">            horizontalCenter=<span style="color: #ff0000;">&quot;0&quot;</span> verticalCenter=<span style="color: #ff0000;">&quot;0&quot;</span></span>
<span style="color: #000000;">            creationComplete=<span style="color: #ff0000;">&quot;txtInput.selectRange(0, 3);&quot;</span> <span style="color: #7400FF;">/&gt;</span></span>
&nbsp;
<span style="color: #000000;"><span style="color: #7400FF;">&lt;/s:Application</span><span style="color: #7400FF;">&gt;</span></span></pre></div></div>

<p class="alert">This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.</p>
<div class="evernoteSiteMemory"><a href="javascript:" onclick="Evernote.doClip({title: 'Setting the letter spacing on the Spark TextInput control in Flex 4 on FlexExamples.com',url: 'http://blog.flexexamples.com/2010/02/10/setting-the-letter-spacing-on-the-spark-textinput-control-in-flex-4/',contentID: 'post-2475',code: 'Pete9667',suggestNotebook: 'FlexExamples',suggestTags: 'Gumbo,trackingLeft,trackingRight',providerName: 'FlexExamples.com',styling: 'text' });return false" class="evernoteSiteMemoryLink"><img src="http://static.evernote.com/article-clipper-remember.png" class="evernoteSiteMemoryButton" />
				</a>				<div class="evernoteSiteMemoryClear">&nbsp;</div>
</div>]]></content:encoded>
			<wfw:commentRss>http://blog.flexexamples.com/2010/02/10/setting-the-letter-spacing-on-the-spark-textinput-control-in-flex-4/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Setting tracking on a TextBox object in Flex Gumbo</title>
		<link>http://blog.flexexamples.com/2008/12/17/setting-tracking-on-a-textbox-object-in-flex-gumbo/</link>
		<comments>http://blog.flexexamples.com/2008/12/17/setting-tracking-on-a-textbox-object-in-flex-gumbo/#comments</comments>
		<pubDate>Thu, 18 Dec 2008 04:35:05 +0000</pubDate>
		<dc:creator>Peter deHaan</dc:creator>
				<category><![CDATA[beta]]></category>
		<category><![CDATA[FXG]]></category>
		<category><![CDATA[TextBox]]></category>
		<category><![CDATA[Gumbo]]></category>
		<category><![CDATA[trackingLeft]]></category>
		<category><![CDATA[trackingRight]]></category>

		<guid isPermaLink="false">http://blog.flexexamples.com/2008/12/17/setting-tracking-on-a-textbox-object-in-flex-gumbo/</guid>
		<description><![CDATA[<p>The following example shows how you can set the left and/or right tracking on a Flex Gumbo TextBox object by setting the trackingLeft and trackingRight styles.</p> <p>Full code after the jump.</p> <p></p> <p class="alert">To use the following code, you must have Flash Player 10 and a Flex Gumbo SDK installed in your Flex Builder 3. [...]]]></description>
			<content:encoded><![CDATA[<p>The following example shows how you can set the left and/or right tracking on a Flex Gumbo TextBox object by setting the <code>trackingLeft</code> and <code>trackingRight</code> styles.</p>
<p>Full code after the jump.</p>
<p><span id="more-904"></span></p>
<p class="alert">To use the following code, you must have Flash Player 10 and a Flex Gumbo SDK installed in your Flex Builder 3. For more information on downloading and installing the Gumbo SDK into Flex Builder 3, see <a href="http://blog.flexexamples.com/2008/08/02/using-the-beta-gumbo-sdk-in-flex-builder-3/">&#8220;Using the beta Gumbo SDK in Flex Builder 3&#8243;</a>.</p>
<p class="download"><a href="http://blog.flexexamples.com/wp-content/uploads/TextBox_trackingLeft_test/bin/srcview/source/main_4338.mxml.html">View MXML</a></p>
<pre class="code">
&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;!-- http://blog.flexexamples.com/2008/12/17/setting-tracking-on-a-textbox-object-in-flex-gumbo/ --&gt;
&lt;Application name="TextBox_trackingLeft_test"
        xmlns="http://ns.adobe.com/mxml/2009"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"&gt;

    &lt;ApplicationControlBar dock="true"&gt;
        &lt;Form styleName="plain"&gt;
            &lt;FormItem label="trackingLeft:"&gt;
                &lt;HSlider id="slider1"
                        minimum="0"
                        maximum="20"
                        value="0"
                        snapInterval="1"
                        tickInterval="1"
                        liveDragging="true" /&gt;
            &lt;/FormItem&gt;
            &lt;FormItem label="trackingRight:"&gt;
                &lt;HSlider id="slider2"
                        minimum="0"
                        maximum="20"
                        value="0"
                        snapInterval="1"
                        tickInterval="1"
                        liveDragging="true" /&gt;
            &lt;/FormItem&gt;
        &lt;/Form&gt;
    &lt;/ApplicationControlBar&gt;

    &lt;Box backgroundColor="haloSilver" backgroundAlpha="0.4"&gt;
        &lt;Graphic&gt;
            &lt;TextBox id="textBox"
                    text="The quick brown fox jumps over the lazy dog."
                    trackingLeft="{slider1.value}"
                    trackingRight="{slider2.value}"
                    textAlign="justify"
                    textJustify="interWord"
                    fontSize="16"
                    width="400" /&gt;
        &lt;/Graphic&gt;
    &lt;/Box&gt;

&lt;/Application&gt;
</pre>
<p class="information"><a href="http://blog.flexexamples.com/wp-content/uploads/TextBox_trackingLeft_test/bin/srcview/index.html">View source</a> is enabled in the following example.</p>
<p><iframe src="http://blog.flexexamples.com/wp-content/uploads/TextBox_trackingLeft_test/bin/main_4338.html" width="100%" height="300"></iframe></p>
<p>You can also set the <code>trackingLeft</code> and <code>trackingRight</code> styles in an external .CSS file or &lt;Style/&gt; block, as seen in the following example:</p>
<p class="download"><a href="http://blog.flexexamples.com/wp-content/uploads/TextBox_trackingLeft_test/bin/srcview/source/main2_4338.mxml.html">View MXML</a></p>
<pre class="code">
&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;!-- http://blog.flexexamples.com/2008/12/17/setting-tracking-on-a-textbox-object-in-flex-gumbo/ --&gt;
&lt;Application name="TextBox_trackingLeft_test"
        xmlns="http://ns.adobe.com/mxml/2009"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"&gt;

    &lt;Style&gt;
        TextBox {
            trackingLeft: 10;
            trackingRight: 20;
            textAlign: "justify";
            textJustify: "interWord";
            fontSize: 16;
        }
    &lt;/Style&gt;

    &lt;Box backgroundColor="haloSilver" backgroundAlpha="0.4"&gt;
        &lt;Graphic&gt;
            &lt;TextBox id="textBox"
                    text="The quick brown fox jumps over the lazy dog."
                    width="400" /&gt;
        &lt;/Graphic&gt;
    &lt;/Box&gt;

&lt;/Application&gt;
</pre>
<p>Or, you can set the <code>trackingLeft</code> and <code>trackingRight</code> styles using ActionScript, as seen in the following example:</p>
<p class="download"><a href="http://blog.flexexamples.com/wp-content/uploads/TextBox_trackingLeft_test/bin/srcview/source/main3_4338.mxml.html">View MXML</a></p>
<pre class="code">
&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;!-- http://blog.flexexamples.com/2008/12/17/setting-tracking-on-a-textbox-object-in-flex-gumbo/ --&gt;
&lt;Application name="TextBox_trackingLeft_test"
        xmlns="http://ns.adobe.com/mxml/2009"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"&gt;

    &lt;Script&gt;
        &lt;![CDATA[
            import mx.events.SliderEvent;

            private function slider1_change(evt:SliderEvent):void {
                textBox.setStyle("trackingLeft", evt.value);
            }

            private function slider2_change(evt:SliderEvent):void {
                textBox.setStyle("trackingRight", evt.value);
            }
        ]]&gt;
    &lt;/Script&gt;

    &lt;ApplicationControlBar dock="true"&gt;
        &lt;Form styleName="plain"&gt;
            &lt;FormItem label="trackingLeft:"&gt;
                &lt;HSlider id="slider1"
                        minimum="0"
                        maximum="20"
                        value="0"
                        snapInterval="1"
                        tickInterval="1"
                        liveDragging="true"
                        change="slider1_change(event);" /&gt;
            &lt;/FormItem&gt;
            &lt;FormItem label="trackingRight:"&gt;
                &lt;HSlider id="slider2"
                        minimum="0"
                        maximum="20"
                        value="0"
                        snapInterval="1"
                        tickInterval="1"
                        liveDragging="true"
                        change="slider2_change(event);" /&gt;
            &lt;/FormItem&gt;
        &lt;/Form&gt;
    &lt;/ApplicationControlBar&gt;

    &lt;Box backgroundColor="haloSilver" backgroundAlpha="0.4"&gt;
        &lt;Graphic&gt;
            &lt;TextBox id="textBox"
                    text="The quick brown fox jumps over the lazy dog."
                    textAlign="justify"
                    textJustify="interWord"
                    fontSize="16"
                    width="400" /&gt;
        &lt;/Graphic&gt;
    &lt;/Box&gt;

&lt;/Application&gt;
</pre>
<p class="alert">This entry is based on a beta version of the Flex Gumbo SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex Gumbo SDK.</p>
<div class="evernoteSiteMemory"><a href="javascript:" onclick="Evernote.doClip({title: 'Setting tracking on a TextBox object in Flex Gumbo on FlexExamples.com',url: 'http://blog.flexexamples.com/2008/12/17/setting-tracking-on-a-textbox-object-in-flex-gumbo/',contentID: 'post-904',code: 'Pete9667',suggestNotebook: 'FlexExamples',suggestTags: 'Gumbo,trackingLeft,trackingRight',providerName: 'FlexExamples.com',styling: 'text' });return false" class="evernoteSiteMemoryLink"><img src="http://static.evernote.com/article-clipper-remember.png" class="evernoteSiteMemoryButton" />
				</a>				<div class="evernoteSiteMemoryClear">&nbsp;</div>
</div>]]></content:encoded>
			<wfw:commentRss>http://blog.flexexamples.com/2008/12/17/setting-tracking-on-a-textbox-object-in-flex-gumbo/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>

