8 Replies Latest reply on Mar 5, 2010 2:38 PM by ayule666

    Defining skin parts in mxml/defining properties in skin file

    ayule666 Level 1

      I'm trying to skin a controlbar I'm developing as part of an app. It seems in Flex 4, the whole idea is that skinning takes over much of the role of CSS...

      So I get all gung-ho and dive into making a skin for this thing, only to discover "Skin Parts" can only be declared in AS? Is this really true?

       

      SO it would seem, that in order to specify the "text" property of a label in the skin, the label must first be a skin part, right?

      Is my only option to achieve this behavior re-coding the control bar as a custom component in AS? I tried adding a variable declaration to the top of my app, but of course that gave an error (namespace collision with mxml version).

       

      App code:

      <s:SkinnableContainer id="controlBar" bottom="0" width="100%" skinClass="ControlBarSkin">
             
              <s:BitmapImage id="brandingImg"  source="{brandingImgPath}" />
             
              <mx:Spacer width="20" />
              <!--Sets alpha for the thematic data layer-->
              <s:Label id="themeAlphaSliderLabel" />

       

      Skin code

      <s:Group id="contentGroup" left="5" right="5" top="10" bottom="10" >
              <s:layout>
                  <s:HorizontalLayout verticalAlign="middle"/>
              </s:layout>
             
              <s:BitmapImage id="brandingImg" />
              <mx:Spacer width="20" />
              <s:Label id="themeAlphaSliderLabel" text="Thematic" color="0xEEEEEE" />

        • 1. Re: Defining skin parts in mxml/defining properties in skin file
          franto kormanak Level 1

          in your Skin class your   hostComponent.myProperty to get property from skinned component.  not every component has hostComponent property, only components which can be skinned (see help for "hostComponent")

           

          hope that helps

          • 2. Re: Defining skin parts in mxml/defining properties in skin file
            ayule666 Level 1

            Yeah, that would help me bring stuff into the skin file from the component. I'm trying to bring things into the component from the skin file. The help files all say its possible, but you have to use [SkinPart(required="true/false"] which only works in actionscript. I find it kind-of mind-boggling that there's no easy solution to this!

             

            I just want to set my label text in the skin file!! I guess I'll have to do it in a script block? Or just leave the label text in the original MXML and handle the rest of the appearance in the skin file...

            • 3. Re: Defining skin parts in mxml/defining properties in skin file
              franto kormanak Level 1

              Why you would have functionality in Skin, it's just skin, all other should be done in component. But stil you can use <f:Script> in skin, or just set hostComponent.label = 'whatever' in skin as well...

              • 4. Re: Defining skin parts in mxml/defining properties in skin file
                ayule666 Level 1

                It's not functionality...

                I'm just considering the "text" attribute of a label component to be part of its "Skin"

                • 5. Re: Defining skin parts in mxml/defining properties in skin file
                  rfrishbe Level 3

                  When you are creating a new skinnable component, you really need to go in to code, because that's where all the skinning lifecycle methods are.  It is definitely more of an advanced concept, and not really for people who don't want to go into ActionScript only mode.

                   

                  I don't think what you want is to create a new skinnable component.  Instead, I think you'd be better off just creating a one-off component.  Basically just combine everything in to one file, like:

                   

                  MyCustomComponent:

                   

                  <s:SkinnableContainer id="controlBar" bottom="0" width="100%">

                          <s:layout>
                              <s:HorizontalLayout verticalAlign="middle"/>
                          </s:layout>
                         
                          <s:BitmapImage id="brandingImg"  source="@Embed('...')" />
                          <mx:Spacer width="20" />
                          <s:Label id="themeAlphaSliderLabel" text="Thematic" color="0xEEEEEE" />

                   

                  ...

                   

                  If you want to make it a generic component, you can even add some some properties, so when someone uses your custom component, they could do something like:

                   

                  <local:MyCustomComponent brandingImageSource="{@Embed('...')" />

                   

                  Though in your case, I'm not sure if you even need to create a generic custom component, and you might be better off just hard-coding everything in the custom component (or in the main applicaiton file).

                   

                  Skinning is really for when you want to allow someone to change the look and feel of your component.  You have a definition of the component on one side, and the look of the component on the other.  If you don't need that flexibility, then don't add extra complexity to your application by trying to use it.  Instead, you can just mash it up in to one custom component.

                   

                  For more info on skinning, you can check out: http://www.adobe.com/devnet/flex/articles/flex4_skinning.html

                   

                  Hope that helps,

                  Ryan

                  1 person found this helpful
                  • 6. Re: Defining skin parts in mxml/defining properties in skin file
                    ayule666 Level 1

                    Hm, thanks for the reply.

                    What about all the talk of moving to skins with flex 4? I initially tried hard-coding it and using styles to configure the appearance, but I ran into problems changing the background color (can't do it in css anymore) and everything I read said to use skins...

                     

                    I just rewrote the control bar in AS and now everything works, except for setting the width to 100%. For some reason any reference to "hostComponent" in a script block (initialize, creationComplete) errors with "null object reference".

                    • 7. Re: Defining skin parts in mxml/defining properties in skin file
                      rfrishbe Level 3

                      I think if you check out the article, you'll see a lot of the advantages the Spark architecture provides around skinning.  It's super easy to change the look of a Panel.  I also think it's pretty easy to create your own SkinnableComponent (or extend one of ours to add a new feature), but it does require some ActionScript programming.  In the component, you say "I want my Skin to have this component", and then you add events and hook up data to that skin part.  However, you let the Skin actually define that component and how it looks.

                       


                      I'm not sure I understand some of your questions around styles.  You should be able to change a SkinnableContainer's backgroundColor out of the box because our default SkinnableContainer skin uses this style.  If you change the SkinnableContainer skin, you'll have to make sure your skin honors this style as well.

                       

                      As per hostComponent, hostComponent is a property on the Skin that gets generates when there's [HostComponent] metadata.  So make sure you set that on your skin to get that property.

                       

                      -Ryan

                      1 person found this helpful
                      • 8. Re: Defining skin parts in mxml/defining properties in skin file
                        ayule666 Level 1

                        Ryan, thanks for your reply, you're article was quite helpful in sorting out all this new stuff. I think I'm probably still more than a little confused over the differences and uses of skins vs. css vs. inline styles vs. properties vs. ...

                         

                        I'm trying to separate the style from the structure/control, but maybe that's just over my head for now...?

                         

                        p.s. I'd love to separate it into a separate component as MXML, but the thought of passing along all the needed data back to the main app, and the event handlers makes my head hurt just thinking about it...

                         

                        Message was edited by: ayule666 Fixed my CSS problem...