<?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; horizontalSpacing</title>
	<atom:link href="http://blog.flexexamples.com/tag/horizontalspacing/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>Setting the horizontal gap between an icon and label on a LinkButton control in Flex</title>
		<link>http://blog.flexexamples.com/2008/09/06/setting-the-horizontal-gap-between-an-icon-and-label-on-a-linkbutton-control-in-flex/</link>
		<comments>http://blog.flexexamples.com/2008/09/06/setting-the-horizontal-gap-between-an-icon-and-label-on-a-linkbutton-control-in-flex/#comments</comments>
		<pubDate>Sun, 07 Sep 2008 02:41:47 +0000</pubDate>
		<dc:creator>Peter deHaan</dc:creator>
				<category><![CDATA[LinkButton]]></category>
		<category><![CDATA[horizontalSpacing]]></category>

		<guid isPermaLink="false">http://blog.flexexamples.com/2008/09/06/setting-the-horizontal-gap-between-an-icon-and-label-on-a-linkbutton-control-in-flex/</guid>
		<description><![CDATA[<p>The following example shows how you can set the gap between the icon and label on a Flex LinkButton control by setting the horizontalGap style.</p> <p>Full code after the jump.</p> <p></p> <p class="download"><a href="http://blog.flexexamples.com/wp-content/uploads/LinkButton_horizontalGap_test/bin/srcview/source/main.mxml.html">View MXML</a></p> &#60;?xml version="1.0" encoding="utf-8"?&#62; &#60;!-- http://blog.flexexamples.com/2008/09/06/setting-the-horizontal-gap-between-an-icon-and-label-on-a-linkbutton-control-in-flex/ --&#62; &#60;mx:Application name="LinkButton_horizontalSpacing_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"&#62; &#60;mx:ApplicationControlBar dock="true"&#62; &#60;mx:Form styleName="plain"&#62; &#60;mx:FormItem label="horizontalGap:"&#62; &#60;mx:HSlider id="slider" [...]]]></description>
			<content:encoded><![CDATA[<p>The following example shows how you can set the gap between the icon and label on a Flex LinkButton control by setting the <code>horizontalGap</code> style.</p>
<p>Full code after the jump.</p>
<p><span id="more-784"></span></p>
<p class="download"><a href="http://blog.flexexamples.com/wp-content/uploads/LinkButton_horizontalGap_test/bin/srcview/source/main.mxml.html">View MXML</a></p>
<pre class="code">
&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;!-- http://blog.flexexamples.com/2008/09/06/setting-the-horizontal-gap-between-an-icon-and-label-on-a-linkbutton-control-in-flex/ --&gt;
&lt;mx:Application name="LinkButton_horizontalSpacing_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"&gt;

    &lt;mx:ApplicationControlBar dock="true"&gt;
        &lt;mx:Form styleName="plain"&gt;
            &lt;mx:FormItem label="horizontalGap:"&gt;
                &lt;mx:HSlider id="slider"
                        minimum="0"
                        maximum="10"
                        value="2"
                        snapInterval="1"
                        tickInterval="1"
                        liveDragging="true" /&gt;
            &lt;/mx:FormItem&gt;
            &lt;mx:FormItem label="labelPlacement:"&gt;
                &lt;mx:ComboBox id="comboBox"
                        dataProvider="[left,right]"
                        selectedIndex="1" /&gt;
            &lt;/mx:FormItem&gt;
        &lt;/mx:Form&gt;
    &lt;/mx:ApplicationControlBar&gt;

    &lt;mx:LinkButton id="linkButton"
            label="LinkButton"
            icon="@Embed('assets/LinkButton.png')"
            horizontalGap="{slider.value}"
            labelPlacement="{comboBox.selectedItem}" /&gt;

&lt;/mx:Application&gt;
</pre>
<p class="information"><a href="http://blog.flexexamples.com/wp-content/uploads/LinkButton_horizontalGap_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/LinkButton_horizontalGap_test/bin/main.html" width="100%" height="150"></iframe></p>
<p>You can also set the <code>horizontalGap</code> style in an external .CSS file or &lt;mx:Style /&gt; block, as seen in the following example:</p>
<p class="download"><a href="http://blog.flexexamples.com/wp-content/uploads/LinkButton_horizontalGap_test/bin/srcview/source/main2.mxml.html">View MXML</a></p>
<pre class="code">
&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;!-- http://blog.flexexamples.com/2008/09/06/setting-the-horizontal-gap-between-an-icon-and-label-on-a-linkbutton-control-in-flex/ --&gt;
&lt;mx:Application name="LinkButton_horizontalSpacing_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"&gt;

    &lt;mx:Style&gt;
        LinkButton {
            icon: Embed("assets/LinkButton.png");
            horizontalGap: 10;
        }
    &lt;/mx:Style&gt;

    &lt;mx:LinkButton id="linkButton"
            label="LinkButton"
            labelPlacement="left" /&gt;

&lt;/mx:Application&gt;
</pre>
<p>Or, you can set the <code>horizontalGap</code> style using ActionScript, as seen in the following example:</p>
<p class="download"><a href="http://blog.flexexamples.com/wp-content/uploads/LinkButton_horizontalGap_test/bin/srcview/source/main3.mxml.html">View MXML</a></p>
<pre class="code">
&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;!-- http://blog.flexexamples.com/2008/09/06/setting-the-horizontal-gap-between-an-icon-and-label-on-a-linkbutton-control-in-flex/ --&gt;
&lt;mx:Application name="LinkButton_horizontalSpacing_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"&gt;

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

            private function slider_change(evt:SliderEvent):void {
                linkButton.setStyle("horizontalGap", evt.value);
            }

            private function comboBox_change(evt:ListEvent):void {
                linkButton.labelPlacement = comboBox.selectedItem.toString();
            }
        ]]&gt;
    &lt;/mx:Script&gt;

    &lt;mx:ApplicationControlBar dock="true"&gt;
        &lt;mx:Form styleName="plain"&gt;
            &lt;mx:FormItem label="horizontalGap:"&gt;
                &lt;mx:HSlider id="slider"
                        minimum="0"
                        maximum="10"
                        value="2"
                        snapInterval="1"
                        tickInterval="1"
                        liveDragging="true"
                        change="slider_change(event);" /&gt;
            &lt;/mx:FormItem&gt;
            &lt;mx:FormItem label="labelPlacement:"&gt;
                &lt;mx:ComboBox id="comboBox"
                        dataProvider="[left,right]"
                        selectedIndex="1"
                        change="comboBox_change(event);" /&gt;
            &lt;/mx:FormItem&gt;
        &lt;/mx:Form&gt;
    &lt;/mx:ApplicationControlBar&gt;

    &lt;mx:LinkButton id="linkButton"
            label="LinkButton"
            icon="@Embed('assets/LinkButton.png')" /&gt;

&lt;/mx:Application&gt;
</pre>
<p>Due to popular demand, here is the &#8220;same&#8221; example in a more ActionScript friendly format:</p>
<p class="download"><a href="http://blog.flexexamples.com/wp-content/uploads/LinkButton_horizontalGap_test/bin/srcview/source/main.mxml.html">View MXML</a></p>
<pre class="code">
&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;!-- http://blog.flexexamples.com/2008/09/06/setting-the-horizontal-gap-between-an-icon-and-label-on-a-linkbutton-control-in-flex/ --&gt;
&lt;mx:Application name="LinkButton_horizontalSpacing_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        initialize="init();"&gt;

    &lt;mx:Script&gt;
        &lt;![CDATA[
            import mx.containers.ApplicationControlBar;
            import mx.containers.Form;
            import mx.containers.FormItem;
            import mx.controls.ComboBox;
            import mx.controls.HSlider;
            import mx.controls.LinkButton;
            import mx.events.ListEvent;
            import mx.events.SliderEvent;

            [Embed("assets/LinkButton.png")]
            private const linkButtonIcon:Class;

            private var slider:HSlider;
            private var comboBox:ComboBox;
            private var linkButton:LinkButton;

            private function init():void {
                slider = new HSlider();
                slider.minimum = 0;
                slider.maximum = 10;
                slider.value = 2;
                slider.snapInterval = 1;
                slider.tickInterval = 1;
                slider.liveDragging = true;
                slider.addEventListener(SliderEvent.CHANGE,
                            slider_change);

                comboBox = new ComboBox();
                comboBox.dataProvider = ["left", "right"];
                comboBox.selectedIndex = 1;
                comboBox.addEventListener(ListEvent.CHANGE,
                            comboBox_change);

                var formItem1:FormItem = new FormItem();
                formItem1.label = "horizontalGap:";
                formItem1.addChild(slider);

                var formItem2:FormItem = new FormItem();
                formItem2.label = "labelPlacement:";
                formItem2.addChild(comboBox);

                var form:Form = new Form();
                form.styleName = "plain";
                form.addChild(formItem1);
                form.addChild(formItem2);

                var appControlBar:ApplicationControlBar;
                appControlBar = new ApplicationControlBar();
                appControlBar.dock = true;
                appControlBar.addChild(form);
                addChildAt(appControlBar, 0);

                linkButton = new LinkButton();
                linkButton.label = "LinkButton";
                linkButton.setStyle("icon", linkButtonIcon);
                addChild(linkButton);
            }

            private function slider_change(evt:SliderEvent):void {
                linkButton.setStyle("horizontalGap", evt.value);
            }

            private function comboBox_change(evt:ListEvent):void {
                var value:String = comboBox.selectedItem.toString();
                linkButton.labelPlacement = value;
            }
        ]]&gt;
    &lt;/mx:Script&gt;

&lt;/mx:Application&gt;
</pre>
<div class="evernoteSiteMemory"><a href="javascript:" onclick="Evernote.doClip({title: 'Setting the horizontal gap between an icon and label on a LinkButton control in Flex on FlexExamples.com',url: 'http://blog.flexexamples.com/2008/09/06/setting-the-horizontal-gap-between-an-icon-and-label-on-a-linkbutton-control-in-flex/',contentID: 'post-784',code: 'Pete9667',suggestNotebook: 'FlexExamples',suggestTags: 'horizontalSpacing',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/09/06/setting-the-horizontal-gap-between-an-icon-and-label-on-a-linkbutton-control-in-flex/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

