<?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; numDividers</title>
	<atom:link href="http://blog.flexexamples.com/tag/numdividers/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>Disabling dividers in an HDividedBox container in Flex</title>
		<link>http://blog.flexexamples.com/2008/10/11/disabling-dividers-in-an-hdividedbox-container-in-flex/</link>
		<comments>http://blog.flexexamples.com/2008/10/11/disabling-dividers-in-an-hdividedbox-container-in-flex/#comments</comments>
		<pubDate>Sat, 11 Oct 2008 15:19:46 +0000</pubDate>
		<dc:creator>Peter deHaan</dc:creator>
				<category><![CDATA[HDividedBox]]></category>
		<category><![CDATA[dividerSkin]]></category>
		<category><![CDATA[getDividerAt()]]></category>
		<category><![CDATA[horizontalGap]]></category>
		<category><![CDATA[numDividers]]></category>
		<category><![CDATA[visible]]></category>

		<guid isPermaLink="false">http://blog.flexexamples.com/2008/10/11/disabling-dividers-in-an-hdividedbox-container-in-flex/</guid>
		<description><![CDATA[<p>The following example shows how you can disable the dividers in a Flex HDividedBox container by using the numDividers property, getDividerAt() method, and setting the visible property.</p> <p>Full code after the jump.</p> <p></p> <p class="download"><a href="http://blog.flexexamples.com/wp-content/uploads/HDividedBox_getDividerAt_test/bin/srcview/source/main.mxml.html">View MXML</a></p> &#60;?xml version=&#34;1.0&#34; encoding=&#34;utf-8&#34;?&#62; &#60;!-- http://blog.flexexamples.com/2008/10/11/disabling-dividers-in-an-hdividedbox-container-in-flex/ --&#62; &#60;mx:Application name=&#34;HDividedBox_getDividerAt_test&#34; xmlns:mx=&#34;http://www.adobe.com/2006/mxml&#34; layout=&#34;vertical&#34; verticalAlign=&#34;middle&#34; backgroundColor=&#34;white&#34;&#62; &#60;mx:Script&#62; &#60;![CDATA[ private function checkBox_change(evt:Event):void { [...]]]></description>
			<content:encoded><![CDATA[<p>The following example shows how you can disable the dividers in a Flex HDividedBox container by using the <code>numDividers</code> property, <code>getDividerAt()</code> method, and setting the <code>visible</code> property.</p>
<p>Full code after the jump.</p>
<p><span id="more-825"></span></p>
<p class="download"><a href="http://blog.flexexamples.com/wp-content/uploads/HDividedBox_getDividerAt_test/bin/srcview/source/main.mxml.html">View MXML</a></p>
<pre class="code">
&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
&lt;!-- http://blog.flexexamples.com/2008/10/11/disabling-dividers-in-an-hdividedbox-container-in-flex/ --&gt;
&lt;mx:Application name=&quot;HDividedBox_getDividerAt_test&quot;
        xmlns:mx=&quot;http://www.adobe.com/2006/mxml&quot;
        layout=&quot;vertical&quot;
        verticalAlign=&quot;middle&quot;
        backgroundColor=&quot;white&quot;&gt;

    &lt;mx:Script&gt;
        &lt;![CDATA[
            private function checkBox_change(evt:Event):void {
                var value:Boolean = !checkBox.selected;
                var idx:uint;
                var len:uint = hDividedBox.numDividers;
                for (idx = 0; idx &lt; len; idx++) {
                    hDividedBox.getDividerAt(idx).visible = value;
                }
            }
        ]]&gt;
    &lt;/mx:Script&gt;

    &lt;mx:ApplicationControlBar dock=&quot;true&quot;&gt;
        &lt;mx:CheckBox id=&quot;checkBox&quot;
                label=&quot;Disable dividers:&quot;
                labelPlacement=&quot;left&quot;
                change=&quot;checkBox_change(event);&quot; /&gt;
    &lt;/mx:ApplicationControlBar&gt;

    &lt;mx:HDividedBox id=&quot;hDividedBox&quot;
            width=&quot;100%&quot;
            height=&quot;100%&quot;&gt;
        &lt;mx:HBox id=&quot;hBox1&quot;
                width=&quot;100%&quot;
                height=&quot;100%&quot;
                backgroundColor=&quot;haloGreen&quot;&gt;
        &lt;/mx:HBox&gt;
        &lt;mx:HBox id=&quot;hBox2&quot;
                width=&quot;100%&quot;
                height=&quot;100%&quot;
                backgroundColor=&quot;haloBlue&quot;&gt;
        &lt;/mx:HBox&gt;
        &lt;mx:HBox id=&quot;hBox3&quot;
                width=&quot;100%&quot;
                height=&quot;100%&quot;
                backgroundColor=&quot;haloOrange&quot;&gt;
        &lt;/mx:HBox&gt;
    &lt;/mx:HDividedBox&gt;

&lt;/mx:Application&gt;
</pre>
<p class="information"><a href="http://blog.flexexamples.com/wp-content/uploads/HDividedBox_getDividerAt_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/HDividedBox_getDividerAt_test/bin/main.html" width="100%" height="300"></iframe></p>
<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/HDividedBox_getDividerAt_test/bin/srcview/source/main2.mxml.html">View MXML</a></p>
<pre class="code">
&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
&lt;!-- http://blog.flexexamples.com/2008/10/11/disabling-dividers-in-an-hdividedbox-container-in-flex/ --&gt;
&lt;mx:Application name=&quot;HDividedBox_getDividerAt_test&quot;
        xmlns:mx=&quot;http://www.adobe.com/2006/mxml&quot;
        layout=&quot;vertical&quot;
        verticalAlign=&quot;middle&quot;
        backgroundColor=&quot;white&quot;
        initialize=&quot;init();&quot;&gt;

    &lt;mx:Script&gt;
        &lt;![CDATA[
            import mx.containers.ApplicationControlBar;
            import mx.containers.HBox;
            import mx.containers.HDividedBox;
            import mx.controls.ButtonLabelPlacement;
            import mx.controls.CheckBox;

            private var checkBox:CheckBox;
            private var hBox1:HBox;
            private var hBox2:HBox;
            private var hBox3:HBox;
            private var hDividedBox:HDividedBox;

            private function init():void {
                checkBox = new CheckBox();
                checkBox.label = &quot;Disable dividers:&quot;;
                checkBox.labelPlacement = ButtonLabelPlacement.LEFT;
                checkBox.addEventListener(Event.CHANGE,
                            checkBox_change);

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

                hBox1 = new HBox();
                hBox1.percentWidth = 100;
                hBox1.percentHeight = 100;
                hBox1.setStyle(&quot;backgroundColor&quot;, &quot;haloGreen&quot;);

                hBox2 = new HBox();
                hBox2.percentWidth = 100;
                hBox2.percentHeight = 100;
                hBox2.setStyle(&quot;backgroundColor&quot;, &quot;haloBlue&quot;);

                hBox3 = new HBox();
                hBox3.percentWidth = 100;
                hBox3.percentHeight = 100;
                hBox3.setStyle(&quot;backgroundColor&quot;, &quot;haloOrange&quot;);

                hDividedBox = new HDividedBox();
                hDividedBox.percentWidth = 100;
                hDividedBox.percentHeight = 100;
                hDividedBox.addChild(hBox1);
                hDividedBox.addChild(hBox2);
                hDividedBox.addChild(hBox3);
                addChild(hDividedBox);
            }

            private function checkBox_change(evt:Event):void {
                var value:Boolean = !checkBox.selected;
                var idx:uint;
                var len:uint = hDividedBox.numDividers;
                for (idx = 0; idx &lt; len; idx++) {
                    hDividedBox.getDividerAt(idx).visible = value;
                }
            }
        ]]&gt;
    &lt;/mx:Script&gt;

&lt;/mx:Application&gt;
</pre>
<p class="new">If you want to remove the gap between the HDividedBox children after disabling the dividers, you can set the <code>horizontalGap</code> style, as seen in the following example:</p>
<p class="download"><a href="http://blog.flexexamples.com/wp-content/uploads/HDividedBox_getDividerAt_test_2/bin/srcview/source/main.mxml.html">View MXML</a></p>
<pre class="code">
&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
&lt;!-- http://blog.flexexamples.com/2008/10/11/disabling-dividers-in-an-hdividedbox-container-in-flex/ --&gt;
&lt;mx:Application name=&quot;HDividedBox_getDividerAt_test&quot;
        xmlns:mx=&quot;http://www.adobe.com/2006/mxml&quot;
        layout=&quot;vertical&quot;
        verticalAlign=&quot;middle&quot;
        backgroundColor=&quot;white&quot;&gt;

    &lt;mx:Script&gt;
        &lt;![CDATA[
            private function checkBox_change(evt:Event):void {
                <strong style="color:red;">var hGap:Class = hDividedBox.getStyle(&quot;dividerSkin&quot;);</strong>
                var value:Boolean = !checkBox.selected;
                var idx:uint;
                var len:uint = hDividedBox.numDividers;
                for (idx = 0; idx &lt; len; idx++) {
                    hDividedBox.getDividerAt(idx).visible = value;
                }
                <strong style="color:red;">if (value) {
                    hDividedBox.setStyle(&quot;horizontalGap&quot;, hGap.width);
                } else {
                    hDividedBox.setStyle(&quot;horizontalGap&quot;, 0);
                }</strong>
            }
        ]]&gt;
    &lt;/mx:Script&gt;

    &lt;mx:ApplicationControlBar dock=&quot;true&quot;&gt;
        &lt;mx:CheckBox id=&quot;checkBox&quot;
                label=&quot;Disable dividers:&quot;
                labelPlacement=&quot;left&quot;
                change=&quot;checkBox_change(event);&quot; /&gt;
    &lt;/mx:ApplicationControlBar&gt;

    &lt;mx:HDividedBox id=&quot;hDividedBox&quot;
            minHeight=&quot;100&quot;
            width=&quot;100%&quot;
            height=&quot;100%&quot;&gt;
        &lt;mx:HBox id=&quot;hBox1&quot;
                minWidth=&quot;20&quot;
                width=&quot;100%&quot;
                height=&quot;100%&quot;
                backgroundColor=&quot;haloGreen&quot;&gt;
        &lt;/mx:HBox&gt;
        &lt;mx:HBox id=&quot;hBox2&quot;
                minWidth=&quot;20&quot;
                width=&quot;100%&quot;
                height=&quot;100%&quot;
                backgroundColor=&quot;haloBlue&quot;&gt;
        &lt;/mx:HBox&gt;
        &lt;mx:HBox id=&quot;hBox3&quot;
                minWidth=&quot;20&quot;
                width=&quot;100%&quot;
                height=&quot;100%&quot;
                backgroundColor=&quot;haloOrange&quot;&gt;
        &lt;/mx:HBox&gt;
    &lt;/mx:HDividedBox&gt;

&lt;/mx:Application&gt;
</pre>
<p class="information"><a href="http://blog.flexexamples.com/wp-content/uploads/HDividedBox_getDividerAt_test_2/bin/srcview/index.html">View source</a> is enabled in the following example.</p>
<p><iframe src="http://blog.flexexamples.com/wp-content/uploads/HDividedBox_getDividerAt_test_2/bin/main.html" width="100%" height="300"></iframe></p>
<div class="evernoteSiteMemory"><a href="javascript:" onclick="Evernote.doClip({title: 'Disabling dividers in an HDividedBox container in Flex on FlexExamples.com',url: 'http://blog.flexexamples.com/2008/10/11/disabling-dividers-in-an-hdividedbox-container-in-flex/',contentID: 'post-825',code: 'Pete9667',suggestNotebook: 'FlexExamples',suggestTags: 'dividerSkin,getDividerAt(),horizontalGap,numDividers,visible',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/10/11/disabling-dividers-in-an-hdividedbox-container-in-flex/feed/</wfw:commentRss>
		<slash:comments>11</slash:comments>
		</item>
	</channel>
</rss>

