<?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; setStyleDeclaration()</title>
	<atom:link href="http://blog.flexexamples.com/tag/setstyledeclaration/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 text alignment in an Flex Accordion header</title>
		<link>http://blog.flexexamples.com/2007/09/13/changing-text-alignment-in-an-flex-accordion-header/</link>
		<comments>http://blog.flexexamples.com/2007/09/13/changing-text-alignment-in-an-flex-accordion-header/#comments</comments>
		<pubDate>Fri, 14 Sep 2007 05:56:17 +0000</pubDate>
		<dc:creator>Peter deHaan</dc:creator>
				<category><![CDATA[Accordion]]></category>
		<category><![CDATA[getStyleDeclaration()]]></category>
		<category><![CDATA[StyleManager]]></category>
		<category><![CDATA[getChildren()]]></category>
		<category><![CDATA[icon]]></category>
		<category><![CDATA[setStyleDeclaration()]]></category>
		<category><![CDATA[textAlign]]></category>

		<guid isPermaLink="false">http://blog.flexexamples.com/2007/09/13/changing-text-alignment-in-an-flex-accordion-header/</guid>
		<description><![CDATA[<p>The following example shows how you can use the textAlign style to control the text alignment of a label in an Accordion header.</p> <p>Full code after the jump.</p> <p></p> <p class="download"><a href="http://blog.flexexamples.com/wp-content/uploads/Accordion_textAlign_test/main.mxml">View MXML</a></p> &#60;?xml version="1.0" encoding="utf-8"?&#62; &#60;!-- http://blog.flexexamples.com/2007/09/13/changing-text-alignment-in-an-flex-accordion-header/ --&#62; &#60;mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white" creationComplete="init();"&#62; &#60;mx:Style&#62; .MyHeaderStyle { color: haloBlue; fontWeight: bold; textAlign: left; textRollOverColor: [...]]]></description>
			<content:encoded><![CDATA[<p>The following example shows how you can use the <code>textAlign</code> style to control the text alignment of a label in an Accordion header.</p>
<p>Full code after the jump.</p>
<p><span id="more-178"></span></p>
<p class="download"><a href="http://blog.flexexamples.com/wp-content/uploads/Accordion_textAlign_test/main.mxml">View MXML</a></p>
<pre class="code">
&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;!-- http://blog.flexexamples.com/2007/09/13/changing-text-alignment-in-an-flex-accordion-header/ --&gt;
&lt;mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init();"&gt;

    &lt;mx:Style&gt;
        .MyHeaderStyle {
            color: haloBlue;
            fontWeight: bold;
            textAlign: left;
            textRollOverColor: haloOrange;
            textSelectedColor: black;
            icon: Embed(source="assets/asterisk_orange.png");
        }
    &lt;/mx:Style&gt;

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

            private function init():void {
                comboBox.dataProvider = accordion.getChildren()
            }

            private function comboBox_change(evt:ListEvent):void {
                accordion.selectedIndex = comboBox.selectedIndex;
            }

            private function accordion_change(evt:IndexChangedEvent):void {
                comboBox.selectedIndex = accordion.selectedIndex;
            }

            private function changeTextAlign(evt:ListEvent):void {
                var cssDecl:CSSStyleDeclaration = StyleManager.getStyleDeclaration(".MyHeaderStyle");
                cssDecl.setStyle("textAlign", evt.currentTarget.selectedItem);
                StyleManager.setStyleDeclaration(".MyHeaderStyle", cssDecl, false);
            }
        ]]&gt;
    &lt;/mx:Script&gt;

    &lt;mx:ApplicationControlBar dock="true"&gt;
        &lt;mx:Label text="Selected child:" /&gt;
        &lt;mx:ComboBox id="comboBox"
                change="comboBox_change(event);"&gt;
        &lt;/mx:ComboBox&gt;

        &lt;mx:Spacer width="50" /&gt;

        &lt;mx:Label text="textAlign:" /&gt;
        &lt;mx:ComboBox change="changeTextAlign(event)"&gt;
            &lt;mx:dataProvider&gt;
                &lt;mx:String&gt;left&lt;/mx:String&gt;
                &lt;mx:String&gt;center&lt;/mx:String&gt;
                &lt;mx:String&gt;right&lt;/mx:String&gt;
            &lt;/mx:dataProvider&gt;
        &lt;/mx:ComboBox&gt;
    &lt;/mx:ApplicationControlBar&gt;

    &lt;mx:Accordion id="accordion"
            headerStyleName="MyHeaderStyle"
            themeColor="haloSilver"
            width="100%"
            height="100%"
            change="accordion_change(event);"&gt;
        &lt;mx:VBox label="One" /&gt;
        &lt;mx:VBox label="Two" /&gt;
        &lt;mx:VBox label="Three" /&gt;
        &lt;mx:VBox label="Four" /&gt;
        &lt;mx:VBox label="Five" /&gt;
    &lt;/mx:Accordion&gt;

&lt;/mx:Application&gt;
</pre>
<p class="information"><a href="http://blog.flexexamples.com/wp-content/uploads/Accordion_textAlign_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/Accordion_textAlign_test/bin/main.html" width="100%" height="300"></iframe></p>
<div class="evernoteSiteMemory"><a href="javascript:" onclick="Evernote.doClip({title: 'Changing text alignment in an Flex Accordion header on FlexExamples.com',url: 'http://blog.flexexamples.com/2007/09/13/changing-text-alignment-in-an-flex-accordion-header/',contentID: 'post-178',code: 'Pete9667',suggestNotebook: 'FlexExamples',suggestTags: 'getChildren(),getStyleDeclaration(),icon,setStyleDeclaration(),textAlign',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/2007/09/13/changing-text-alignment-in-an-flex-accordion-header/feed/</wfw:commentRss>
		<slash:comments>10</slash:comments>
		</item>
	</channel>
</rss>

