7 Replies Latest reply on Oct 2, 2008 9:21 AM by Newsgroup_User

    Setting styles dynamically

    SiHoop Level 1
      Can I set a style dynamically? In the component below, I want to change the button style (in the onChange event handler) according to the selected state of the button, but the style is ignored and replaced with a default version of a button. If not, is there a work around that you would recommend or do I need to restructure my code?
        • 1. Re: Setting styles dynamically
          ANewFlexUser
          How many style properties are you trying to change? I've had sucess calling the setStyle()method in the past, but I've only been trying to alter one or two individual properties at a time. Something like this should work, but it might get verbose if you're trying to make a lot of changes:
          • 2. Re: Setting styles dynamically
            Level 7

            "SiHoop" <webforumsuser@macromedia.com> wrote in message
            news:gc1ddt$eg4$1@forums.macromedia.com...
            > Can I set a style dynamically? In the component below, I want to change
            > the
            > button style (in the onChange event handler) according to the selected
            > state of
            > the button, but the style is ignored and replaced with a default version
            > of a
            > button. If not, is there a work around that you would recommend or do I
            > need to
            > restructure my code?
            >
            > <?xml version="1.0" encoding="utf-8"?>
            > <mx:VBox xmlns:mx=" http://www.adobe.com/2006/mxml"
            > implements="mx.controls.listClasses.IDropInListItemRenderer">
            > <mx:Script>
            > <![CDATA[
            > import mx.controls.listClasses.BaseListData;
            > import mx.controls.Button;
            > import MyDataGrid_sh
            > private var _listData:BaseListData;
            > [Bindable]public var key:String;
            > [Bindable]public var linkButton:String="linkButton";
            >
            > private var myDataGrid:MyDataGrid_sh;
            >
            > public function get listData():BaseListData {
            > return _listData;
            > }
            > public function set listData( value:BaseListData ):void {
            > _listData = value;
            > myDataGrid = _listData.owner as MyDataGrid_sh;
            > key=_listData.uid;
            > }
            > private function onChange(event:Event):void{
            > parentDocument.hideMapMarker()
            > var i:int=myDataGrid.toggledButtons.getItemIndex(key);
            > //Select button
            > if(i==-1 && (event.target as Button).selected==true){
            > myDataGrid.toggledButtons.addItem(key)
            > dg_Button.styleName="linkButton1"
            >
            > }
            > //Release back to original state
            > if(i>=0 ){
            > myDataGrid.toggledButtons.removeItemAt(i);
            > dg_Button.styleName="linkButton"
            > }
            > myDataGrid.invalidateList();
            > }
            > override protected function updateDisplayList(unscaledWidth:Number,
            > unscaledHeight:Number):void{
            > super.updateDisplayList(unscaledWidth, unscaledHeight);
            > if(key){
            > var i:int=myDataGrid.toggledButtons.getItemIndex(key);
            > if(i>=0){
            > dg_Button.selected=true;
            > }
            > else{
            > dg_Button.selected=false;
            > }
            > }
            > }
            > ]]>
            > </mx:Script>
            > <mx:Button styleName="{linkButton}" id="dg_Button" width="50"
            > toggle="true" click="onChange(event)"/>
            > </mx:VBox>

            I think the problem may be that you're binding the styleName property, so it
            might be setting it right back even if it gets set properly.

            try <mx:Button styleName="linkButton" id="dg_Button" width="50" ...

            Unless you need what VBox gives you, you may want to consider using a
            lighter base component. At least go to Canvas, if you're not comfortable
            with UIComponent. If you want to try your hand at UIComponent, there's a
            simple example of one fully commented as part of my DataGrid with
            styleFunction example
            http://flexdiary.blogspot.com/2008/09/extended-datagrid-with-stylefunction.html

            HTH;

            Amy


            • 3. Re: Setting styles dynamically
              SiHoop Level 1
              The code below is a simplified example of what I am trying to do-- unfortunately, the style does not change properly. Instead, a default button replaces the style when the button is clicked, but it resets when clicked a second time. What is wrong with this?
              • 4. Re: Setting styles dynamically
                Level 7

                "SiHoop" <webforumsuser@macromedia.com> wrote in message
                news:gc2mun$7f7$1@forums.macromedia.com...
                > The code below is a simplified example of what I am trying to do--
                > unfortunately, the style does not change properly. Instead, a default
                > button
                > replaces the style when the button is clicked, but it resets when clicked
                > a
                > second time. What is wrong with this?
                >
                > <?xml version="1.0" encoding="utf-8"?>
                > <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml"
                > layout="absolute">
                > <mx:Script>
                > <![CDATA[
                > import mx.controls.Button;
                >
                > private function onChange(event:Event):void{
                > if(dg_Button.selected){
                > trace(0)
                > dg_Button.styleName="style1";
                > }else{
                > trace(1)
                > dg_Button.styleName="style2";
                > }
                > }
                > ]]>
                > </mx:Script>
                > <mx:Style>
                >
                > .style1{
                >
                > upSkin:Embed(" http://www.adobe.com/images/shared/download_buttons/get_adobe_fla
                > sh_player.png");
                >
                > overSkin:Embed(" http://www.adobe.com/images/shared/download_buttons/get_adobe_f
                > lash_player.png");
                >
                > downSkin:Embed(" http://www.adobe.com/images/shared/download_buttons/get_adobe_f
                > lash_player.png");
                > }
                > .style2{
                >
                > upSkin:Embed(" http://www.adobe.com/images/shared/download_buttons/get_adobe_rea
                > der.png");
                >
                > overSkin:Embed(" http://www.adobe.com/images/shared/download_buttons/get_adobe_r
                > eader.png");
                >
                > downSkin:Embed(" http://www.adobe.com/images/shared/download_buttons/get_adobe_r
                > eader.png");
                > }
                > </mx:Style>
                > <mx:Button styleName="style2" id="dg_Button" width="150" toggle="true"
                > click="onChange(event)"/>
                > </mx:Application>

                First, if you apply each style in the normal way, do you get the visual
                effect you expect? Second, what are you getting in the trace? If you put a
                break point at the end of your function and look to see what the stylename
                is in the variables window, what is it?

                HTH;

                Amy


                • 5. Re: Setting styles dynamically
                  Level 7

                  "SiHoop" <webforumsuser@macromedia.com> wrote in message
                  news:gc2mun$7f7$1@forums.macromedia.com...
                  > The code below is a simplified example of what I am trying to do--
                  > unfortunately, the style does not change properly. Instead, a default
                  > button
                  > replaces the style when the button is clicked, but it resets when clicked
                  > a
                  > second time. What is wrong with this?
                  >
                  > <?xml version="1.0" encoding="utf-8"?>
                  > <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml"
                  > layout="absolute">
                  > <mx:Script>
                  > <![CDATA[
                  > import mx.controls.Button;
                  >
                  > private function onChange(event:Event):void{
                  > if(dg_Button.selected){
                  > trace(0)
                  > dg_Button.styleName="style1";
                  > }else{
                  > trace(1)
                  > dg_Button.styleName="style2";
                  > }
                  > }
                  > ]]>
                  > </mx:Script>
                  > <mx:Style>
                  >
                  > .style1{
                  >
                  > upSkin:Embed(" http://www.adobe.com/images/shared/download_buttons/get_adobe_fla
                  > sh_player.png");
                  >
                  > overSkin:Embed(" http://www.adobe.com/images/shared/download_buttons/get_adobe_f
                  > lash_player.png");
                  >
                  > downSkin:Embed(" http://www.adobe.com/images/shared/download_buttons/get_adobe_f
                  > lash_player.png");
                  > }
                  > .style2{
                  >
                  > upSkin:Embed(" http://www.adobe.com/images/shared/download_buttons/get_adobe_rea
                  > der.png");
                  >
                  > overSkin:Embed(" http://www.adobe.com/images/shared/download_buttons/get_adobe_r
                  > eader.png");
                  >
                  > downSkin:Embed(" http://www.adobe.com/images/shared/download_buttons/get_adobe_r
                  > eader.png");
                  > }
                  > </mx:Style>
                  > <mx:Button styleName="style2" id="dg_Button" width="150" toggle="true"
                  > click="onChange(event)"/>
                  > </mx:Application>

                  Now that I've seen what you're trying to do, I went and looked at the docs
                  for Button. You could probably just use ONE style that sets the
                  selectedUpSkin, selectedDownSkin, selectedOverSkin. ;-)

                  HTH;

                  Amy


                  • 6. Re: Setting styles dynamically
                    SiHoop Level 1
                    That's it. Thank you! However, from a logical point of view I'm frustrated as I don't understand why my previous approach would not work.
                    • 7. Re: Setting styles dynamically
                      Level 7

                      "SiHoop" <webforumsuser@macromedia.com> wrote in message
                      news:gc2rm9$dhq$1@forums.macromedia.com...
                      > That's it. Thank you! However, from a logical point of view I'm frustrated
                      > as I don't understand why my previous approach would not work.

                      Probably because you didn't include skins for the selected states...