4 Replies Latest reply on Nov 22, 2010 7:16 AM by drkstr_1

    custom combobox skin, rowCount and rowHeight

    Piotr Wierzgała

      Hi,

       

      I'm trying to write a custom ComboBox skin that would allow me to modify dropdownlist's row count and row height. So far I managed to modify row count by changing dropDown Group's maxHeight property.

       

      I added a Style metatag to my skin:

       

      [Style(name="rowCount", type="uint")]

       

      and applied it to the default skin:

       

      <s:Group id="dropDown" maxHeight="{getStyle('rowCount')*22}" minHeight="22" >

       

      It works but I have a few questions:

       

      1. How can I set default rowCount value? If I don't specify rowCount property in my main application then combobox always show all contents in it's drop down list. I'd like it to be - 5 - as default.

       

      2. What should I do to have "rowCount" on a prompt list when I press ctrl+space in my ComboBox MXML tag?

       

      3. How can I get ComboBox itemRenderer's height? I assume that by default it's 22px and that's why I multiply rowCount by 22. But I'd like my skin to work right even if I use some custom item renderer which would for example have 40px height.

       

      I was looking for some answers with google but I couldn't find any useful article. Most of the results were covering some very basic skinning topics or were completly useless. Could anyone help me, please?

        • 1. Re: custom combobox skin, rowCount and rowHeight
          drkstr_1 Level 4

          1. In your component you can use a default value if no style is set, or you can set a default theme which has all the styles set. But I would still suggest falling back to a default in your component to reduce potential errors.

           

          2. Not sure I understand this one. The Style metadata tag should already make it up in the auto-complete prompt. Is this different than using ctrl+space?

           

          3. The item renderers can be itterated just like any other child element:

           

          dataGroup.getElementAt(i)
          • 2. Re: custom combobox skin, rowCount and rowHeight
            Piotr Wierzgała Level 1

            I've created only MXML skin which I try to use with default ComboBox component:

             

             

            and here's how I set rowCount style property:

             

             

            s|ComboBox {
                 rowCount: 7;
            }
            

             

             

            @2: Of course I ment auto-complete prompt in general not just by ctrl+space I suppose that it would work if I create custom ComboBox component but I have only custom ComboBox skin. I can't event set rowCount like that:

             

            <s:ComboBox skinClass="skins.CustomComboBoxSkin" rowCount="7">

             

             

            because compiler says "Cannot resolve attribute 'rowCount' for component type spark.components.ComboBox.".

             

            @1: Ok, thanks, solved

             

            I've added:

             

             

            if (getStyle("rowCount") == null) {
                 setStyle("rowCount",5);
            }
            

             

             

            at the and of skin's styleChanged function and it do the thing.

             

            @3: Thanks for that tip I'll check it soon.

            • 3. Re: custom combobox skin, rowCount and rowHeight
              Piotr Wierzgała Level 1

              Ok, here're my futher reflections:

               

              1. I tried using dataGroup.getElementAt(0) to get first element height but dataGroup.getElementAt(0) always returned null.

               

              if (dataGroup != null) {
                   var ve:IVisualElement = dataGroup.getElementAt(0);
                   var rowHeight:uint = ve.height;
              }
              

               

              I placed code above in skin's updateDisplayList function and despite the fact that there were 10 elements* in dataGroup ve was null.

               

              *dataGroup.numElements was equal 10.

               

              2. I knew that there were some elements in dataGroup so I did sth like this:

               

              if (dataGroup != null) {
                   var rowHeight:uint = dataGroup.contentHeight/dataGroup.numElements;
              }
              

               

              This worked fine because rowHeight was 22 as it should be.

               

              3. Satisfied with step 2 result I decided to set dataGroup maxHeight:

               

              if (dataGroup != null) {
                   var rowHeight:uint = dataGroup.contentHeight/dataGroup.numElements;
                   dataGroup.maxHeight = getStyle("rowCount")*rowHeight;
              }
              

               

              maxHeight was calculated properly but unfortuantely it didn't work because instead of calculated value the one from mxml tag - 153 - was used:

               

              <s:Group id="dropDown" maxHeight="{153}" minHeight="22" >

               

              4. I removed maxHeight from mxml tag but then whole drop down list was displayed each time.

               

              5. Ok, if maxHeigth in mxml tag is the most important one then let it be:

               

              <s:Group id="dropDown" maxHeight="{getStyle("rowCount")*(dataGroup.contentHeight/dataGroup.numElements)}" minHeight="22" >

               

              but no... it still didn't worked because drop down list each time was displayed as a tiny little square in the top-left corner of it's normal position.

               

              Skinning that component is a real paaain.

               

              Could anyone tell me what I'm doing wrong? or do you know any realy good skinning tutorial which could help me?

              • 4. Re: custom combobox skin, rowCount and rowHeight
                drkstr_1 Level 4

                I see what's going on now.

                 

                You need to create a custom class which has the styles and component logic you need. You can do this pretty easily by extending ComboBox. Any custom styles you have should go in the metadata of the hostComponent, and they will show up in the auto-complete. You can reference them the same way in your skin. IE. getStyle('rowCount')

                 

                I know it's a lot of information, but I would give this a solid read through:

                 

                http://help.adobe.com/en_US/flex/using/WSC8DB0C28-F7A6-48ff-9899-7957415A0A49.html