7 Replies Latest reply on Oct 4, 2011 8:57 AM by Jerry62712

    Explain scroll skin

    Jerry62712 Level 1

      Copying an example I was able to get a scroll bar to appear.  I can understand the theory that removing this from components will make them lighter weight and the functionality can be added back when needed.  But I would like to know why it looks like it does.  Neither Adobe 4 Training from the Source nor the web sources I looked at nor the one where I copyied it explained it.  Hopefully, someone here can.  Here is the source:

      <?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>
              [HostComponent("spark.components.BorderContainer")]
          </fx:Metadata>
      
          <s:states>
              <s:State name="normal" />
              <s:State name="disabled" />
          </s:states>
      
          <s:Rect 
              id="backgroundRect" 
              left="0" right="0" 
              top="0" bottom="0"  >
              <s:fill>
                  <s:SolidColor 
                      id="bgRectFill" 
                      color="#FFFFFF"/>
              </s:fill>
          </s:Rect>
      
          <s:Group 
              left="0" right="0" 
              top="0" bottom="0">
              <s:layout>
                  <s:VerticalLayout 
                      gap="0" 
                      horizontalAlign="justify" />
              </s:layout>
      
              <!--- Application Control Bar -->
              <s:Group 
                  id="topGroup" 
                  minWidth="0" minHeight="0" >
      
                  <!-- layer 0: control bar highlight -->
                  <s:Rect 
                      left="0" right="0" 
                      top="0" bottom="1" >
                      <s:stroke>
                          <s:LinearGradientStroke 
                              rotation="90" weight="1">
                              <s:GradientEntry color="0xFFFFFF" />
                              <s:GradientEntry color="0xD8D8D8" />
                          </s:LinearGradientStroke>
                      </s:stroke>
                  </s:Rect>
      
                  <!-- layer 1: control bar fill -->
                  <s:Rect 
                      left="1" right="1" 
                      top="1" bottom="2" >
                      <s:fill>
                          <s:LinearGradient rotation="90">
                              <s:GradientEntry color="0xEDEDED" />
                              <s:GradientEntry color="0xCDCDCD" />
                          </s:LinearGradient>
                      </s:fill>
                  </s:Rect>
      
                  <!-- layer 2: control bar divider line -->
                  <s:Rect 
                      left="0" right="0" 
                      bottom="0" height="1" 
                      alpha="0.55">
                      <s:fill>
                          <s:SolidColor color="0x000000" />
                      </s:fill>
                  </s:Rect>
      
                  <!-- layer 3: control bar -->
                  <s:Group id="controlBarGroup" 
                              left="0" right="0" 
                              top="1" bottom="1" 
                              minWidth="0" minHeight="0">
                      <s:layout>
                          <s:HorizontalLayout 
                              paddingLeft="10" paddingRight="10" 
                              paddingTop="7" paddingBottom="7" 
                              gap="10" />
                      </s:layout>
                  </s:Group>
              </s:Group>
      
              <s:Scroller 
                  id="contentScroller" 
                  width="100%" height="700" 
                  minWidth="0" minHeight="0">
                  <s:Group 
                      id="contentGroup" 
                      width="100%" height="100%" 
                      minWidth="0" minHeight="0" />
              </s:Scroller>
          </s:Group>
      </s:Skin>
      
        • 1. Re: Explain scroll skin
          Jerry62712 Level 1

          I haven't found any Adobe site that explains what is going on inside of the skin.

           

          Anyone?

          • 2. Re: Explain scroll skin
            Jerry62712 Level 1

            Wow, who would have expected that this Flex core item would stump everyone.

            • 3. Re: Explain scroll skin
              Jerry62712 Level 1

              Three days later and not a single person knows even one part of this skin?

              • 4. Re: Explain scroll skin
                targetplanet Level 1

                The component skin files are seperate from the functioality code to make it easier to reskin.  It explains itself, each part of the skin is marked with a comment.  If you are not familiar with the New Spark component skins, that would be a good place to start for info on what is in this skin.  did you have specific questions about parts of the file?

                • 5. Re: Explain scroll skin
                  Jerry62712 Level 1

                  The problem is it doesn't explain itself.  The cryptic notes may mean something, but not to me. Example:

                   

                  <fx:Script fb:purpose="styling">
                      private var paddingChanged:Boolean;
                     
                      /* Define the skin elements that should not be colorized. */
                      static private const exclusions:Array = ["background", "textDisplay"];

                  So what is being colorized?  The text, if any?  The border, if any?  The background, if any?  Based on the above it isn't possible to know unless you already know in which case it is redundent.  It gets even worse when you have:

                   

                      /**
                       *  @private
                       */
                      override public function get contentItems():Array {return contentFill};

                   

                  "Private" is real helpful in describing a public function.  A wonderful comment full of meaning.

                  Further, exactly what "contentItmes" are we talking about?  This is from a TextInput skin BTW.  What array of items are in an input?

                   

                  I could go on, but the point has been made.  The comments are NOT descriptions of the various points in the skin.  This skin is about 200 lines long and it is hopefully going to replace the two lines of CSS that formerly worked.

                   

                  I think a better place to start with skins is here where someone (so far no one) can explain what the heck is happening in one.  Since there is not a single comment in that entire skin that explains how to use it or what the areas of it mean, I ask the question.

                  • 6. Re: Explain scroll skin
                    targetplanet Level 1

                    There are a lot of good resources on the web to help you learn about Flex 4 skinning.  It seems like a big jump from Flex 3, adding a lot more code, but in reality you have so much more control over the appearence of your components, and a lot more freedom to customize them.  I think you need to do a little more research into spark skins before you jump to conclusions.  Most of the time when reskinning a component, you don't need to touch the actionscript, you just modify the mxml.  And you still have the ability to change the styles of components, see here the reference for teh textInput, http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/TextIn put.html#commonstyleSummary.  If you don't need to drasticly change the look of the component, usually css works fine.

                    I suggest you start here

                    http://help.adobe.com/en_US/flex/using/WS53116913-F952-4b21-831F-9DE85B647C8A.html

                    and then do some more reading on Flex 4 skinning, and I think you will be able to answer your own questions.

                    • 7. Re: Explain scroll skin
                      Jerry62712 Level 1

                      Here is the sum total of skinning from your cite:

                      Skin States

                      To skin the component, implement a skin that defines the following states. Although you must implement all skin states, a skin state can be empty. An empty skin state specifies no changes to the default skin state.

                       

                      They did mention it could be skinned and if you expand the drop down next to the above they list the required states.  No reason why the control requires different states that you will never use (obviously someone can use them).

                       

                      The first cite includes the link to the second cite which has the "Adobe Doc" with all the normal Adobewrite.

                       

                      My concern isn't that if you plow through weeks of links you might eventually figure out the many overrides, required states, arcane and seemingly random (thus the post) items littering the landscape.  I'm sure if you had designed it the skinning would have been more logical and documented on the face of it.  But we have to work with the new paradigm and all it entails.

                       

                      Often people that work with something can explain it in human talk and not technobabble.  As I pointed out with just two examples the doc and comments on the skinning by Adobe is slightly less than worthless.