<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	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/"
		>
<channel>
	<title>Comments on: Styling a Button control</title>
	<atom:link href="http://blog.flexexamples.com/2007/09/09/styling-a-button-control/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.flexexamples.com/2007/09/09/styling-a-button-control/</link>
	<description>Just a bunch of Adobe Flex Examples</description>
	<lastBuildDate>Thu, 18 Mar 2010 16:39:56 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
		<item>
		<title>By: Vipin</title>
		<link>http://blog.flexexamples.com/2007/09/09/styling-a-button-control/comment-page-1/#comment-986</link>
		<dc:creator>Vipin</dc:creator>
		<pubDate>Sat, 07 Mar 2009 08:05:33 +0000</pubDate>
		<guid isPermaLink="false">http://blog.flexexamples.com/2007/09/09/styling-a-button-control/#comment-986</guid>
		<description>Thanks Peter,
I seem that this Artical is very benificiary for the begineers as well as others.
this artical contains a quick summary to use styles in flex. Thanks A lot.
:)</description>
		<content:encoded><![CDATA[<p>Thanks Peter,<br />
I seem that this Artical is very benificiary for the begineers as well as others.<br />
this artical contains a quick summary to use styles in flex. Thanks A lot.<br />
:)</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: Declan</title>
		<link>http://blog.flexexamples.com/2007/09/09/styling-a-button-control/comment-page-1/#comment-985</link>
		<dc:creator>Declan</dc:creator>
		<pubDate>Fri, 28 Sep 2007 16:10:07 +0000</pubDate>
		<guid isPermaLink="false">http://blog.flexexamples.com/2007/09/09/styling-a-button-control/#comment-985</guid>
		<description>Thanks Peter. The ToggleButtonBar is a handy option alright. I&#039;ll persevere with the button control though, as it is still the preferred option for my current project and i will definitely want it again for future projects.

~ d :-)</description>
		<content:encoded><![CDATA[<p>Thanks Peter. The ToggleButtonBar is a handy option alright. I&#8217;ll persevere with the button control though, as it is still the preferred option for my current project and i will definitely want it again for future projects.</p>
<p>~ d :-)</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: peterd</title>
		<link>http://blog.flexexamples.com/2007/09/09/styling-a-button-control/comment-page-1/#comment-984</link>
		<dc:creator>peterd</dc:creator>
		<pubDate>Fri, 28 Sep 2007 14:50:32 +0000</pubDate>
		<guid isPermaLink="false">http://blog.flexexamples.com/2007/09/09/styling-a-button-control/#comment-984</guid>
		<description>Declan,

Perhaps not exactly what you want, but have you considered using the ToggleButtonBar control?

I have an example of it at &lt;a href=&quot;http://blog.flexexamples.com/2007/08/22/creating-a-vertical-togglebuttonbar-in-flex/&quot; rel=&quot;nofollow&quot;&gt;&quot;Creating a vertical ToggleButtonBar in Flex&quot;&lt;/a&gt;.

You can definitely do what you want with a regular Button control also. Either set the &lt;code&gt;toggle&lt;/code&gt; property to &lt;code&gt;true&lt;/code&gt; (and possibly the &lt;code&gt;selected&lt;/code&gt; property as well). But you&#039;d have to track which button is currently selected and set the other button&#039;s &lt;code&gt;selected&lt;/code&gt; property to &lt;code&gt;false&lt;/code&gt;. Plus, you may need to override the &lt;code&gt;selectedUpSkin&lt;/code&gt; style (and maybe the &lt;code&gt;selectedOverSkin&lt;/code&gt; and &lt;code&gt;selectedDownSkin&lt;/code&gt; styles as well).

Hope that helps,
Peter</description>
		<content:encoded><![CDATA[<p>Declan,</p>
<p>Perhaps not exactly what you want, but have you considered using the ToggleButtonBar control?</p>
<p>I have an example of it at <a href="http://blog.flexexamples.com/2007/08/22/creating-a-vertical-togglebuttonbar-in-flex/" rel="nofollow">&#8220;Creating a vertical ToggleButtonBar in Flex&#8221;</a>.</p>
<p>You can definitely do what you want with a regular Button control also. Either set the <code>toggle</code> property to <code>true</code> (and possibly the <code>selected</code> property as well). But you&#8217;d have to track which button is currently selected and set the other button&#8217;s <code>selected</code> property to <code>false</code>. Plus, you may need to override the <code>selectedUpSkin</code> style (and maybe the <code>selectedOverSkin</code> and <code>selectedDownSkin</code> styles as well).</p>
<p>Hope that helps,<br />
Peter</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: Declan</title>
		<link>http://blog.flexexamples.com/2007/09/09/styling-a-button-control/comment-page-1/#comment-981</link>
		<dc:creator>Declan</dc:creator>
		<pubDate>Fri, 28 Sep 2007 11:07:40 +0000</pubDate>
		<guid isPermaLink="false">http://blog.flexexamples.com/2007/09/09/styling-a-button-control/#comment-981</guid>
		<description>toggle=&quot;true&quot; is what&#039;s missing from the message above.

I typed the actual mxml tag but it didn&#039;t print out for some reason.</description>
		<content:encoded><![CDATA[<p>toggle=&#8221;true&#8221; is what&#8217;s missing from the message above.</p>
<p>I typed the actual mxml tag but it didn&#8217;t print out for some reason.</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: Declan</title>
		<link>http://blog.flexexamples.com/2007/09/09/styling-a-button-control/comment-page-1/#comment-982</link>
		<dc:creator>Declan</dc:creator>
		<pubDate>Fri, 28 Sep 2007 11:04:01 +0000</pubDate>
		<guid isPermaLink="false">http://blog.flexexamples.com/2007/09/09/styling-a-button-control/#comment-982</guid>
		<description>I guess in this scenario:  is more appropriate for my needs but, i presume i would also need some actionscript to tell it to switch to false when the next button is clicked. Then a style can be applied to change the background of the toggle state from default grey to that bright lozenge effect.

sorry, i&#039;m relatively new to this Flex stuff :-&#124;</description>
		<content:encoded><![CDATA[<p>I guess in this scenario:  is more appropriate for my needs but, i presume i would also need some actionscript to tell it to switch to false when the next button is clicked. Then a style can be applied to change the background of the toggle state from default grey to that bright lozenge effect.</p>
<p>sorry, i&#8217;m relatively new to this Flex stuff :-|</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: Declan</title>
		<link>http://blog.flexexamples.com/2007/09/09/styling-a-button-control/comment-page-1/#comment-983</link>
		<dc:creator>Declan</dc:creator>
		<pubDate>Fri, 28 Sep 2007 10:42:53 +0000</pubDate>
		<guid isPermaLink="false">http://blog.flexexamples.com/2007/09/09/styling-a-button-control/#comment-983</guid>
		<description>Hmm... not quite what i had in mind. Nice to know though!

You know when you click say, a haloGreen button and it changes to a bright green Lozenge type effect?

I would like that to stay that way until you click the next button. Kinda like switching the button on/off and when you click the next button it switches on and the previous one goes off.

hope that makes sense? ~ d</description>
		<content:encoded><![CDATA[<p>Hmm&#8230; not quite what i had in mind. Nice to know though!</p>
<p>You know when you click say, a haloGreen button and it changes to a bright green Lozenge type effect?</p>
<p>I would like that to stay that way until you click the next button. Kinda like switching the button on/off and when you click the next button it switches on and the previous one goes off.</p>
<p>hope that makes sense? ~ d</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: peterd</title>
		<link>http://blog.flexexamples.com/2007/09/09/styling-a-button-control/comment-page-1/#comment-980</link>
		<dc:creator>peterd</dc:creator>
		<pubDate>Thu, 27 Sep 2007 17:30:06 +0000</pubDate>
		<guid isPermaLink="false">http://blog.flexexamples.com/2007/09/09/styling-a-button-control/#comment-980</guid>
		<description>Declan,

How about the following:

&lt;pre class=&quot;code&quot;&gt;
&lt;mx:Button emphasized=&quot;true&quot; /&gt;
&lt;/pre&gt;

Peter</description>
		<content:encoded><![CDATA[<p>Declan,</p>
<p>How about the following:</p>
<pre class="code">
&lt;mx:Button emphasized="true" /&gt;
</pre>
<p>Peter</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: Declan</title>
		<link>http://blog.flexexamples.com/2007/09/09/styling-a-button-control/comment-page-1/#comment-979</link>
		<dc:creator>Declan</dc:creator>
		<pubDate>Thu, 27 Sep 2007 15:09:17 +0000</pubDate>
		<guid isPermaLink="false">http://blog.flexexamples.com/2007/09/09/styling-a-button-control/#comment-979</guid>
		<description>Hi Peter,

I have 3 buttons and when each one is clicked i would like them each to have a selected state or On effect so, the user will know what section they are in. Currently i am using haloBlue on each button and ideally i would like the haloBlue mouseOver state to stay when each button is selected.

Is that achievable and if so could you possibly show an example. Thanks! :-)</description>
		<content:encoded><![CDATA[<p>Hi Peter,</p>
<p>I have 3 buttons and when each one is clicked i would like them each to have a selected state or On effect so, the user will know what section they are in. Currently i am using haloBlue on each button and ideally i would like the haloBlue mouseOver state to stay when each button is selected.</p>
<p>Is that achievable and if so could you possibly show an example. Thanks! :-)</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: Reza.H</title>
		<link>http://blog.flexexamples.com/2007/09/09/styling-a-button-control/comment-page-1/#comment-976</link>
		<dc:creator>Reza.H</dc:creator>
		<pubDate>Sun, 09 Sep 2007 16:31:57 +0000</pubDate>
		<guid isPermaLink="false">http://blog.flexexamples.com/2007/09/09/styling-a-button-control/#comment-976</guid>
		<description>Thanks for your quick comment back :D</description>
		<content:encoded><![CDATA[<p>Thanks for your quick comment back :D</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: peterd</title>
		<link>http://blog.flexexamples.com/2007/09/09/styling-a-button-control/comment-page-1/#comment-977</link>
		<dc:creator>peterd</dc:creator>
		<pubDate>Sun, 09 Sep 2007 15:04:26 +0000</pubDate>
		<guid isPermaLink="false">http://blog.flexexamples.com/2007/09/09/styling-a-button-control/#comment-977</guid>
		<description>Reza.H,

Try something similar to the following:

&lt;pre class=&quot;code&quot;&gt;
&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
&lt;mx:Application 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:Style&gt;
        .MyButton {
            borderColor: red;
        }
    &lt;/mx:Style&gt;

    &lt;mx:Script&gt;
        &lt;![CDATA[
            private function changeBorderColor(value:Object):void {
                var cssDecl:CSSStyleDeclaration = StyleManager.getStyleDeclaration(&quot;.MyButton&quot;);
                if (cssDecl != null) {
                    cssDecl.setStyle(&quot;borderColor&quot;, value);
                }
            }
        ]]&gt;
    &lt;/mx:Script&gt;

    &lt;mx:Button id=&quot;button3&quot;
            label=&quot;Button 3&quot;
            styleName=&quot;MyButton&quot;
            click=&quot;changeBorderColor(&#039;haloOrange&#039;);&quot; /&gt;

&lt;/mx:Application&gt;
&lt;/pre&gt;

You should be able to pass strings such as &quot;red&quot; or &quot;haloBlue&quot; to the &lt;code&gt;changeBorderColor()&lt;/code&gt; method, as well as color values such as 0xFF0000.

Hope that helps,
Peter</description>
		<content:encoded><![CDATA[<p>Reza.H,</p>
<p>Try something similar to the following:</p>
<pre class="code">
&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"&gt;

    &lt;mx:Style&gt;
        .MyButton {
            borderColor: red;
        }
    &lt;/mx:Style&gt;

    &lt;mx:Script&gt;
        &lt;![CDATA[
            private function changeBorderColor(value:Object):void {
                var cssDecl:CSSStyleDeclaration = StyleManager.getStyleDeclaration(".MyButton");
                if (cssDecl != null) {
                    cssDecl.setStyle("borderColor", value);
                }
            }
        ]]&gt;
    &lt;/mx:Script&gt;

    &lt;mx:Button id="button3"
            label="Button 3"
            styleName="MyButton"
            click="changeBorderColor('haloOrange');" /&gt;

&lt;/mx:Application&gt;
</pre>
<p>You should be able to pass strings such as &#8220;red&#8221; or &#8220;haloBlue&#8221; to the <code>changeBorderColor()</code> method, as well as color values such as 0xFF0000.</p>
<p>Hope that helps,<br />
Peter</p>
]]></content:encoded>
	</item>
</channel>
</rss>
