4 Replies Latest reply on Feb 23, 2011 7:06 AM by robglobal

    The Skin doesn't update display

    Maximist Level 1

      Hallo. I have my list with my itemRenderer. Inside my itemRenderer i have a label and a button :

       

      <s:states>

      <s:State name="normal"/>

      <s:State name="hovered"/>

      <s:State name="selected"/>

      </s:states>

       

       

      <s:Label id="dataOrdine"

      x="2"

      maxWidth="70"

      maxDisplayedLines="1"

      verticalCenter="0"

      color.selected="#FFFFFF"

      fontSize="12"

      paddingTop="2"/>

       

       

       

      <ns:mioPulsante id="dettagliTransazione_btn" x="685" label="Dettagli" width="70" skinClass="skins.pulsanteSemplice_skin" click="dettagliTransazioneClickHandler(event)"

      coloreSfondoPulsanteComune="{data.coloreSfondoPulsanteComune}" coloreEtichettaPulsanteComune="{data.coloreSfondoEtichettaPulsanteComune}"/>

       

      </s:ItemRenderer>

       

       

      mioPulsante is a custom button and inside of it there are 2 property (coloreSfondoPulsanteComune and coloreEtichettaPulsanteComune). If inside my itemRenderer i trace data.coloreSfondoPulsanteComune the value is right, anyway on display i don't see the right color... Maybe i should do something to update display.. I don't know what to do...

       

      Pls help..

       

      Max

       

        • 1. Re: The Skin doesn't update display
          saisri2k2 Level 4

          Maximist wrote:


          coloreSfondoPulsanteComune="{data.coloreSfondoPulsanteComune}" coloreEtichettaPulsanteComune="{data.coloreSfondoEtichettaPulsanteComune}"/>

           

          </s:ItemRenderer>

           

          The above properties when set, would they call invalidateDisplayList() in the component? if so, in the updateDisplayList() do you set thse colors to the corresponding components?  Also, instead of using { }  (bindable tags) override the data and set thse properties from the data like this

           

          override public function set data(value:Object):void{// this method in the itemrender

                  dettagliTransazione_btn.coloreSfondoPulsanteComune = data.coloreSfondoPulsanteComune;

           

          }

           

           

          in the ns:mioPulsante override the updateDisplayList

           

          override protected function updatedisplayList(xxxx):void{


          super.updatedisplaylist();

          this.setStyle("xx",coloreSfondoPulsanteComune);

          );

          • 2. Re: The Skin doesn't update display
            Maximist Level 1

            Hallo. Thx for the help but my structure is a little different. I have a skin.. Ok i will be more clear:

             

            My itemRenderer:

             

            <s:states>

            <s:State name="normal"/>

            <s:State name="hovered"/>

            <s:State name="selected"/>

            </s:states>

             

             

            <s:Label id="dataOrdine"

            x="2"

            maxWidth="70"

            maxDisplayedLines="1"

            verticalCenter="0"

            color.selected="#FFFFFF"

            fontSize="12"

            paddingTop="2"/>

             

             

             

            <ns:mioPulsante id="dettagliTransazione_btn" x="685" label="Dettagli" width="70" skinClass="skins.pulsanteSemplice_skin" click="dettagliTransazioneClickHandler(event)"

            coloreSfondoPulsanteComune="{data.coloreSfondoPulsanteComune}" coloreEtichettaPulsanteComune="{data.coloreSfondoEtichettaPulsanteComune}"/>

             

            </s:ItemRenderer>

             

            My mioPulsante :

             

            <?xml version="1.0" encoding="utf-8"?>

            <s:Button xmlns:fx="http://ns.adobe.com/mxml/2009"

              xmlns:s="library://ns.adobe.com/flex/spark"

              xmlns:mx="library://ns.adobe.com/flex/mx">

             

             

            <fx:Declarations>

            <!-- Place non-visual elements (e.g., services, value objects) here -->

            </fx:Declarations>

             

             

            <fx:Script>

            <![CDATA[

             

             

            public var coloreSfondoPulsanteComune:String;

            public var coloreEtichettaPulsanteComune:String;

             

             

            public var coloreSfondoPulsanteCancellaSelezione:String;

            public var coloreEtichettaPulsanteCancellaSelezione:String;

             

             

            ]]>

             

            </fx:Script>

             

            </s:Button>

             

            And then i have my pulsanteSemplice_skin:

             

            <?xml version="1.0" encoding="utf-8"?>

            <s:SparkSkin xmlns:s="library://ns.adobe.com/flex/spark" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:d="http://ns.adobe.com/fxg/2008/dt" xmlns:flm="http://ns.adobe.com/flame/2008" xmlns:ai="http://ns.adobe.com/ai/2009" height="21" width="200" initialize="aInizializzazioneCompleta(event)">

             

             

            <s:states>

            <s:State name="up"/>

            <s:State name="over"/>

            <s:State name="down"/>

            <s:State name="disabled"/>

            </s:states>

             

             

            <fx:Metadata>

            [HostComponent("componenti.Componenti_Condivisi.mioPulsante")]

            </fx:Metadata>

             

             

            <fx:Script>

             

            <![CDATA[

            import componenti.Componenti_Condivisi.mioPulsante;

             

            import mx.collections.ArrayList;

            import mx.events.FlexEvent;

             

             

            protected function aInizializzazioneCompleta(event:FlexEvent):void

            {

             

            (hostComponent.coloreSfondoPulsanteComune != null) ? (this.coloreSfondoPulsanteComune.color = parseInt(hostComponent.coloreSfondoPulsanteComune) as uint) : (this.coloreSfondoPulsanteComune.color = this.coloreSfondoPulsanteComune.color);

            (hostComponent.coloreEtichettaPulsanteComune != null) ? (this.labelDisplay.setStyle('color', (parseInt(hostComponent.coloreEtichettaPulsanteComune) as uint))) : (this.labelDisplay.setStyle('color', this.labelDisplay.getStyle('color')));

             

            }

            ]]>

             

            </fx:Script>

             

            <s:Group height="100%" width="100%" buttonMode.over="true" alpha.disabled="0.5">

             

            <s:Rect height="100%" width="100%" x="0" y="0" radiusX="3" radiusY="3">

            <s:fill>

            <s:SolidColor id="coloreSfondoPulsanteComune" color="#000000"/>

            </s:fill>

            </s:Rect>

             

            </s:Group>

             

            <s:RichText id="labelDisplay" color="#FFFFFF" alpha.disabled="0.5" columnCount="1" fontSize="16" textDecoration="underline" horizontalCenter="0" verticalCenter="0" textDecoration.up="none" color.over="#FF0000" buttonMode.over="true"/>

             

            </s:SparkSkin>

             

            As you can see what i am tryng to change is the color of the rect in my skin and that is what i can't do... I hope now you can help me better.

             

            Thx for all

             

            Max

            • 3. Re: The Skin doesn't update display
              saisri2k2 Level 4

              Probably use states in the skin? Add a couple of more states to the skin and change the colrs. How to change the state in the skin? seel the

              example below.

              http://saturnboy.com/2009/09/flex4-component-states-skin-states/


              • 4. Re: The Skin doesn't update display
                robglobal

                That's right. Something like this should do the trick:

                 

                <s:SolidColor id="coloreSfondoPulsanteComune" color="#000000"

                     color.over="#cc0000"/>

                 

                 

                Just add the .over state to the color node.