<?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; CSSSelector</title>
	<atom:link href="http://blog.flexexamples.com/category/cssselector/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>Styling specific states in a Spark ToggleButton control in Flex 4 (redux)</title>
		<link>http://blog.flexexamples.com/2009/02/14/styling-specific-states-in-an-fxtogglebutton-control-in-flex-gumbo-redux/</link>
		<comments>http://blog.flexexamples.com/2009/02/14/styling-specific-states-in-an-fxtogglebutton-control-in-flex-gumbo-redux/#comments</comments>
		<pubDate>Sun, 15 Feb 2009 06:21:47 +0000</pubDate>
		<dc:creator>Peter deHaan</dc:creator>
				<category><![CDATA[CSSCondition]]></category>
		<category><![CDATA[CSSSelector]]></category>
		<category><![CDATA[CSSStyleDeclaration]]></category>
		<category><![CDATA[Flex4]]></category>
		<category><![CDATA[ToggleButton (Spark)]]></category>
		<category><![CDATA[CSSConditionKind]]></category>
		<category><![CDATA[Gumbo]]></category>
		<category><![CDATA[setStyle()]]></category>

		<guid isPermaLink="false">http://blog.flexexamples.com/2009/02/14/styling-specific-states-in-an-fxtogglebutton-control-in-flex-gumbo-redux/</guid>
		<description><![CDATA[<p>In a previous example, <a href="http://blog.flexexamples.com/2009/02/11/styling-specific-states-in-an-fxtogglebutton-control-in-flex-gumbo/">&#8220;Styling specific states in a Spark ToggleButton control in Flex 4&#8243;</a>, we saw how to style specific states in a Flex 4 Spark ToggleButton control using CSS by specifying the state name after the control name in the &#60;Script&#62; block.</p> <p>The following example shows how you can set styles on [...]]]></description>
			<content:encoded><![CDATA[<p>In a previous example, <a href="http://blog.flexexamples.com/2009/02/11/styling-specific-states-in-an-fxtogglebutton-control-in-flex-gumbo/">&#8220;Styling specific states in a Spark ToggleButton control in Flex 4&#8243;</a>, we saw how to style specific states in a Flex 4 Spark ToggleButton control using CSS by specifying the state name after the control name in the &lt;Script&gt; block.</p>
<p>The following example shows how you can set styles on specific states on a Flex 4 Spark ToggleButton control using ActionScript.</p>
<p>Full code after the jump.</p>
<p><span id="more-964"></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/2009/02/14/styling-specific-states-in-an-fxtogglebutton-control-in-flex-gumbo-redux/ --&gt;</span></span>
<span style="color: #000000;"><span style="color: #7400FF;">&lt;s:Application</span> name=<span style="color: #ff0000;">&quot;Spark_ToggleButton_statesStyle_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>
<span style="color: #000000;">        initialize=<span style="color: #ff0000;">&quot;init();&quot;</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;">            import mx.styles.*;</span>
&nbsp;
<span style="color: #000000;">            private function init<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>:void <span style="color: #66cc66;">&#123;</span></span>
<span style="color: #000000;">                var theStyle:CSSStyleDeclaration;</span>
<span style="color: #000000;">                var condition:CSSCondition = new CSSCondition<span style="color: #66cc66;">&#40;</span>CSSConditionKind.PSEUDO, <span style="color: #ff0000;">&quot;upAndSelected&quot;</span><span style="color: #66cc66;">&#41;</span>;</span>
<span style="color: #000000;">                var selector:CSSSelector = new CSSSelector<span style="color: #66cc66;">&#40;</span><span style="color: #ff0000;">&quot;spark.components.ToggleButton&quot;</span>, <span style="color: #66cc66;">&#91;</span>condition<span style="color: #66cc66;">&#93;</span><span style="color: #66cc66;">&#41;</span>;</span>
&nbsp;
<span style="color: #000000;">                // s|ToggleButton:upAndSelected</span>
<span style="color: #000000;">                theStyle = new CSSStyleDeclaration<span style="color: #66cc66;">&#40;</span>selector<span style="color: #66cc66;">&#41;</span>;</span>
<span style="color: #000000;">                theStyle.setStyle<span style="color: #66cc66;">&#40;</span><span style="color: #ff0000;">&quot;chromeColor&quot;</span>, <span style="color: #ff0000;">&quot;haloOrange&quot;</span><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:ToggleButton</span> id=<span style="color: #ff0000;">&quot;btn&quot;</span></span>
<span style="color: #000000;">            label=<span style="color: #ff0000;">&quot;Spark ToggleButton&quot;</span></span>
<span style="color: #000000;">            horizontalCenter=<span style="color: #ff0000;">&quot;0&quot;</span></span>
<span style="color: #000000;">            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>

<div span="googleAdsLeaderboard">
<script type="text/javascript"><!--
google_ad_client = "pub-3325829455487492";
/* 728x90, created 7/15/09 */
google_ad_slot = "6403511741";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
<br />
</div>
<p class="information"><a href="http://dl.dropbox.com/u/4509565/FlexExamples_com/Spark_ToggleButton_statesStyle_test/srcview/index.html">View source</a> is enabled in the following example.</p>
<p><iframe src="http://dl.dropbox.com/u/4509565/FlexExamples_com/Spark_ToggleButton_statesStyle_test/main.html" width="100%" height="100"></iframe></p>
<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: 'Styling specific states in a Spark ToggleButton control in Flex 4 (redux) on FlexExamples.com',url: 'http://blog.flexexamples.com/2009/02/14/styling-specific-states-in-an-fxtogglebutton-control-in-flex-gumbo-redux/',contentID: 'post-964',code: 'Pete9667',suggestNotebook: 'FlexExamples',suggestTags: 'CSSCondition,CSSConditionKind,CSSSelector,CSSStyleDeclaration,Gumbo,setStyle()',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/2009/02/14/styling-specific-states-in-an-fxtogglebutton-control-in-flex-gumbo-redux/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

