6 Replies Latest reply on May 12, 2010 7:26 AM by David_F57

    Easy points: Add a new style property using <fx:Metadata> in custom mxml comp

    jp77

      Hey, I think this is a real 'I'm missing the point totally" question:

       

      I want to be able to set the color of a stroke inside a skinnable container the same way that the backgroundColor can be set (from the parent mxml tag).

       

      I have created a custom skinClass for the skinnable container and created a stroke element with a hard coded color value, like so:

      ...

      <s:stroke>
      <s:LinearGradientStroke weight="3" rotation="90"  >
        <s:entries>
         <s:GradientEntry id="strokeTopColor" color="0x000000" />
         <s:GradientEntry id="strokeBottomColor" color="0xFFFFFF" />
        </s:entries>
      </s:LinearGradientStroke>
      </s:stroke>

       

      ...which works cool.

       

      I read up on adding style property via an <fx:Metadata> (actually as mx:Metadata in majority of documentation)

        • 1. Re: Easy points: Add a new style property using <fx:Metadata> in custom mxml comp
          David_F57 Level 5

          hi,

           

          if you just want to have extra properties for the component you can do it this way

           

          David

           

           

          the application - calling custom component

           

           

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

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

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

             xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:ns1="*">

          <fx:Declarations>

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

          </fx:Declarations>

          <fx:Script>

          <![CDATA[

           

          ]]>

          </fx:Script>

          <ns1:myContainer x="265" y="153" hiLite="0xFFFFFF" loLite="0XFF00FF">

          </ns1:myContainer>

          </s:Application>

           

           

          the component
          ==========
          <?xml version="1.0" encoding="utf-8"?>
          <s:SkinnableContainer xmlns:fx="http://ns.adobe.com/mxml/2009"
          xmlns:s="library://ns.adobe.com/flex/spark"
          xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300" skinClass="myskin">
          <fx:Declarations>
          <!-- Place non-visual elements (e.g., services, value objects) here -->
          </fx:Declarations>
          <fx:Script>
          <![CDATA[
          [Bindable] public var hiLite:uint = 0xE0E0E0;
          [Bindable] public var loLite:uint = 0xC0C0C0;
          ]]>
          </fx:Script>
          </s:SkinnableContainer>
          the skin
          ======
          <?xml version="1.0" encoding="utf-8"?>
          <s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
              xmlns:fb="http://ns.adobe.com/flashbuilder/2009" alpha.disabled="0.5">
              <fx:Metadata>
              <![CDATA[
                   [HostComponent("myContainer")]
              ]]>
              </fx:Metadata>
             
              <fx:Script fb:purpose="styling">
                  <![CDATA[        
                      override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void
                      {
                          super.updateDisplayList(unscaledWidth, unscaledHeight);
                      }
                  ]]>       
              </fx:Script>
             
              <s:states>
                  <s:State name="normal" />
                  <s:State name="disabled" />
              </s:states>
             
              <s:Rect id="background" left="0" right="0" top="0" bottom="0">
          <s:fill>
          <s:LinearGradient rotation="0">
          <s:GradientEntry color="{hostComponent.hiLite}" />
          <s:GradientEntry color="{hostComponent.loLite}" />
          </s:LinearGradient>
          </s:fill>
              </s:Rect>
              <s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" minWidth="0" minHeight="0">
                  <s:layout>
                      <s:BasicLayout/>
                  </s:layout>
              </s:Group>
          </s:Skin>
          • 2. Re: Easy points: Add a new style property using <fx:Metadata> in custom mxml comp
            jp77 Level 1

            Thanks David! That will work....

             

            Just out of curiosity can it somehow be done this way or is it much of a muchness when compared to your solution?

             

            Declaring this somewhere (in the skinClass or in an extended component instance..?)

             

            <fx:Metadata>

            [Style(name="strokeTopColor", type="uint", format="Color", inherit="no", theme="spark")];

            </fx:Metadata>

             

            ... then in the skinClass using ...

             

            <s:GradientEntry id="strokeTopColor" color="{getStyle('strokeTopColor')}" />

            Thanks a lot though!

             

            JP

            • 3. Re: Easy points: Add a new style property using <fx:Metadata> in custom mxml comp
              TeotiGraphix Level 3

              Hi,

               

              Yes, you can put the Style meta in the component file. The getStyle() will pick up those values in the skin set on the component.

               

              Mike

              1 person found this helpful
              • 4. Re: Easy points: Add a new style property using <fx:Metadata> in custom mxml comp
                David_F57 Level 5

                hi,

                 

                its a much of muchness with my way being a little off the "best practice" path  <=== they're air quotes

                 

                Ever since css anything with the word style in it just puts me off.  I just feel my way is a little easier and makes for easier to follow code, for instance if I have  a couple of gradients just setting 2 variables to me is more efficient than the abstraction of calling functions all through my code, or like a lot of code i've seen the style values end up in bindable variables anyway.

                 

                David.

                1 person found this helpful
                • 5. Re: Easy points: Add a new style property using <fx:Metadata> in custom mxml comp
                  TeotiGraphix Level 3

                  David,

                   

                  Flex 4 Spark has definitly skewed what is best practices. Being a Flex component dev for going on 6 years now, Adobe greatly changed the "best practices" of Style implementation in spark.

                   

                  I agree that your way is simple. And is the way Adobe seems to be leaning with Spark. Styles come into play if you need inheritence or some greater mission to differentiate look from behavioral settings.

                   

                  I don't like the idea of binding getStyle() either since it adds overhead. I think this is an area where Adobe needs to really start laying down some rules about style verses property.

                   

                  Anyway my answer was just yes you can do it, should you? That's really up to the API you are aiming for and the developer.

                   

                  Mike

                  • 6. Re: Easy points: Add a new style property using <fx:Metadata> in custom mxml comp
                    David_F57 Level 5

                    hi,

                     

                    Its always a matter of comfort I suppose, and what you feel is maintainable. With spark everything goes out the window with best practice becuase a skin is in itself a component which sorta makes spark skins work well outside the "style" conventions of skins. But I agree we need to have some sort of 'fair' practice so that other developers code is easy to follow. Maybe even some nice rules about reducing layers of abstraction that seem to be flavour of the decade(and leave design patterns to gay fashion designers ).

                     

                    David.