9 Replies Latest reply on May 13, 2010 3:04 PM by FM_Flame

    Flex 4 components/skins hierarchy and interaction - how does it work ?

    FM_Flame Level 1

      Ok so I've watched and read tutorials how to make a mxml component with states and how to manipulate them with buttons and so on. Also in addition to that you can write script to change property of another component that has id set to it. But I get really confused how things work some situations. I will start with one of them for now:

       

      1) we have the main application

      2) we set a skin to it

      3) if I understand correctly I can add states to it, also can set groups and other components with ids in order to make changes to what the user is viewing

      4) so the question is: if I set a button in the main application, how can I make it on click to access the skin and target some specific element and apply the changes to it.

       

      I would appreciate very much if you set a very simple examples on the situations I'll try to discuss here cause It's good to help others with these in my opinion basic concepts that are required to structure your website or component properly.

       

      Looking forward to get some help

        • 1. Re: Flex 4 components/skins hierarchy and interaction - how does it work ?
          TeotiGraphix Level 3

          Hi,

           

          I really can only answer a small part of your question but;

           

          There are really two types of state implementations in Spark.

           

          1. Custom component implementation of getCurrentSkinState()

          2. <s:states> tag implementation in MXML

           

          One allows you to create components that can notify there skins that their state has change and the skin then has he ability to update it's ui.

           

          Two allows you to add view states in your application or skin implementation. This one actually is where your create transitions, effects and anything else that has to do with changing the user interface.

           

          If you defined;

           

          <s:states>

              <s:State name="visible"/>

              <s:State name="hidden"/>

          </s:states>

           

          in you Application's tag, you could call currentState = "hidden" and it could hide a Panel or something. The key to this working is since you have defined states on the Application, you need to tie them to copisite components IE the Panel kie;

           

          <s:Panel visible="true"

                        visible.hidden="false"/>

           

          The above will set the visible property of the Panel to false when the currentState of the Application changes to "hidden".

           

          Mike

           

          Update:

           

          And the difference with SkinnableComponents is they set the currentState automatically for their skins using the getCurrentSkinState() call triggered by a invalidateSkinState() call in the component's heirarchy.

          • 2. Re: Flex 4 components/skins hierarchy and interaction - how does it work ?
            FM_Flame Level 1

            Thanks, that was helpful

             

            I found an article with more info on the getCurrentSkinState() call triggered by a invalidateSkinState() part which now makes this part very clear to me and the rest you said I understand too.

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

             

            I have a few more questions but before asking about all of them I need to run some tests first so I will stop on a thing I tested for now. So here it is:

             

            We have the main application and its skin. In the skin we add a button to click and a second button to test with. We set the second button an ID of "testBtnId" and make the button on click to removeElement(testBtnId); It works perfectly.

            But what if I want to do the same thing on an element that is located in the main app. I found 2 ways:

             

            1) Lets take the same test button there and the code line on the button click handler should look like this:

             

            this.hostComponent.contentGroup.removeElement(testBtnId);

             

            But this won't work since we have the testBtnId in the skin undefined. If I set a name to the button of "testBtnName" and then try this:

             

             

            this.hostComponent.contentGroup.getChildByName("testBtnName")

             

             

            The only way I could target and then remove the element was like this:

             

             

            var

             

            testBtnId:Button = Button(this.hostComponent.contentGroup.getChildByName("testBtnName"));

             

             

            this.hostComponent.contentGroup.removeElement(testBtnId);

             

             

            With the getElementAt method I have to explicitly define the index at which the button is and that could change... so I don't find it that good...

             

             

             

            2) define a variable in the main application for the button like this:

             

            public var testBtnId:spark.components.Button;

             

             

            This way istead of getChildByName() you can select the instance of that button directly and remove it

             

             

            So the question I have on this part is are these the only 2 ways of accessing a component defined in the main application/higher level component ?

            Also I kind of got confused is the button component a child or an element. Since I find it as a child but I can't remove it as a child and I need to remove it as an element... Can anyone explain me what's this about and what are the differences between element and child... when I use one when the other, are they connected or are the same thing... I really don't understand much... so anything would be good to hear from you guys

             

             

            Looking forward to see this fog dispersed 

            • 3. Re: Flex 4 components/skins hierarchy and interaction - how does it work ?
              FM_Flame Level 1

              Here is what I found on some of my questions:

               

              http://www.billdwhite.com/wordpress/?p=296

               

              But if someone knows about the ways of interacting I explained and more please post your wisdom here

              • 4. Re: Flex 4 components/skins hierarchy and interaction - how does it work ?
                TeotiGraphix Level 3

                Hi,

                 

                As far as children verses elements;

                 

                Flex 4 introduced a new API for element access so they could use graphical elements and UIComponents together in the same display list. The original UIComponent implementation used the DisplayObjectContainer's child list API IE getChildByName().

                 

                The Flex 4 Spark IVisualElementContainer API introduced a way to manage IVisualElement instances. This API uses getElementByName(). Anytime you work with a component/container/skin in the spark.* namespaces, you will use the element API.

                 

                contentGroup.getElementByName("myButton");
                

                 

                The above will correctly access the button instance named "myButton".

                 

                Check out the API docs for GroupBase and SkinnableContainer.

                 

                Mike

                • 6. Re: Flex 4 components/skins hierarchy and interaction - how does it work ?
                  TeotiGraphix Level 3

                  Hi,

                   

                  My fault, I keep forgetting that is the one method of the IChildList they didn't pass over. Sorry for the confusion.

                   

                  It's a shame they didn't include that since Spark relies so heavily on id's in the skin.

                   

                  Mike

                  • 7. Re: Flex 4 components/skins hierarchy and interaction - how does it work ?
                    FM_Flame Level 1

                    Yeah it's really strange they didn't add methods that return all children/elements or as you said getElementByName...

                     

                    I have another question. As I read the docs watched videos and so on, I've seen that for skin parts and states u declare them in the component and then you declare them in the skin. Ok but I've tested not adding the states I've set to the skin on the component and It still works just fine. So I don't get what's the point decalring them in the component.. is there anywhere I will need that to do something else ?

                     

                    Same applies for the skin parts, If I can get it by digging (this.skin.getChildByName("elementName")), is declaring the skin part just like making a shortcut to that element or there's something more ?

                    • 8. Re: Flex 4 components/skins hierarchy and interaction - how does it work ?
                      TeotiGraphix Level 3

                      Hi,

                       

                      Declaring a SkinState meta tag in the component's class allows the compiler to give you an error when you are creating a skin and setting it's HostComponent if the states do not exist in the skin's MXML <s:states> code.

                       

                      It also allows ASDoc to document the skin states in your documentation. I think another one is when you create a skin based off of a HostComponent (in the New -> Skin option), Flash Builder will automatically add the states MXML declaration for you.

                       

                      The SkinPart is important for Spark components. Declaring a SkinPart meta data on the component allows you to require parts, thus if one is omited on the skin, the compiler will complain. SkinnableComponent also will set a reference on itself when the skin is created and added. This means you already get a ref to the skin part on your component that's public without digging into the skin reference.

                       

                      And finally, in your component you get partAdded() and partRemoved() notifications when you override these methods.

                       

                      So overall, the meta tags are important if you are trying to build a decent component.

                       

                      Note:

                       

                      this.skin.getChildByName("elementName")
                      

                       

                      The call is not recursive, it would only search the first level of the skin's display list. What if you had elementName in a Group? You would have to id the group as well. This is the purpose of SkinPart.

                       

                      Mike

                      • 9. Re: Flex 4 components/skins hierarchy and interaction - how does it work ?
                        FM_Flame Level 1

                        Thanks a lot Mike, your explanations were very helpful and I am very grateful