16 Replies Latest reply on May 22, 2010 9:54 AM by nikos101

    flex 3 rowCount thing for combobox happen in flex 4

    nikos101 Level 2

      I can't find a way to have the flex 3 rowCount thing for combobox happen in flex 4. I tried this:

       

      <s:ComboBox id="cb" width="240">
                      <s:layout>
                          <s:VerticalLayout requestedRowCount="25" >
                             
                          </s:VerticalLayout>

       

       

      but no change

        • 1. Re: flex 3 rowCount thing for combobox happen in flex 4
          David_F57 Level 5

          hi,

           

           

          You can set the requestedrowcount in the skin..I just create a custom skin and set the value(the quick fix .)

           

           

          this is the skin part you need to adjust

           

                      <s:Scroller id="scroller" left="0" top="0" right="0" bottom="0" hasFocusableChildren="false" minViewportInset="1">

                          <!--- @copy spark.components.SkinnableDataContainer#dataGroup-->

                          <s:DataGroup id="dataGroup" itemRenderer="spark.skins.spark.DefaultItemRenderer">

                              <s:layout>

                                  <s:VerticalLayout gap="0" horizontalAlign="contentJustify" requestedRowCount="4"/>

                              </s:layout>

                          </s:DataGroup>

                      </s:Scroller>

           

           

          David

          • 3. Re: flex 3 rowCount thing for combobox happen in flex 4
            David_F57 Level 5

            hi,

             

            Its not a bug, with the new spark architecture there is so much new stuff going on that i'm finding it easier to just customize skins, (or call it lazy/lack of time to dig deeper into spark architecture). The Adobe engineers know this stuff off by heart i'm still expanding my knowledge, and like always everything needs to be done yesterday so I just go the easy route for now..

            David

            1 person found this helpful
            • 4. Re: flex 3 rowCount thing for combobox happen in flex 4
              nikos101 Level 2

              I put yer code in a skin but I get this:

               

              <?xml version="1.0" encoding="utf-8"?>
              <s:Scroller id="scroller" left="0" top="0" right="0" bottom="0" hasFocusableChildren="false" minViewportInset="1">
                  <!--- @copy spark.components.SkinnableDataContainer#dataGroup-->
                  <s:DataGroup id="dataGroup" itemRenderer="spark.skins.spark.DefaultItemRenderer">
                      <s:layout>
                          <s:VerticalLayout gap="0" horizontalAlign="contentJustify" requestedRowCount="4"/>
                      </s:layout>
                  </s:DataGroup>
              </s:Scroller>

               

               

               

              The prefix "s" for element "s:Scroller" is not bound.

               

              thanks again

               

              oh and I try use it in 

                <s:DropDownList id="cb" width="240" skinClass="nikos.skins.DropDownList25">
                             

              • 5. Re: flex 3 rowCount thing for combobox happen in flex 4
                David_F57 Level 5

                hi,

                 

                When you create a copy of the combobox skin alll you need to do is ad the parameter in the Verticallayout - this is the section directly from a 'create skin' option whn you right click on the component in designview

                 

                 

                            <s:Scroller id="scroller" left="0" top="0" right="0" bottom="0" hasFocusableChildren="false" minViewportInset="1">

                                <!--- @copy spark.components.SkinnableDataContainer#dataGroup-->

                                <s:DataGroup id="dataGroup" itemRenderer="spark.skins.spark.DefaultItemRenderer">

                                    <s:layout>

                                        <s:VerticalLayout gap="0" horizontalAlign="contentJustify"/>

                                    </s:layout>

                                </s:DataGroup>

                            </s:Scroller>

                the only change to the skin shown in red.

                            <s:Scroller id="scroller" left="0" top="0" right="0" bottom="0" hasFocusableChildren="false" minViewportInset="1">

                                <!--- @copy spark.components.SkinnableDataContainer#dataGroup-->

                                <s:DataGroup id="dataGroup" itemRenderer="spark.skins.spark.DefaultItemRenderer">

                                    <s:layout>

                                        <s:VerticalLayout gap="0" horizontalAlign="contentJustify" requestedRowCount="4"/>

                                    </s:layout>

                                </s:DataGroup>

                            </s:Scroller>

                David.

                1 person found this helpful
                • 6. Re: flex 3 rowCount thing for combobox happen in flex 4
                  nikos101 Level 2

                  thanks so much again for your help


                  • 7. Re: flex 3 rowCount thing for combobox happen in flex 4
                    nikos101 Level 2

                    Unfortunately that does not effect the number of items, I still see only 5

                    items even though I do

                     

                    s:Scroller id="scroller" left="0" top="0" right="0" bottom="0"

                    hasFocusableChildren="false" minViewportInset="1">

                                    <!--- @copy

                    spark.components.SkinnableDataContainer#dataGroup-->

                                    <s:DataGroup id="dataGroup"

                    itemRenderer="spark.skins.spark.DefaultItemRenderer">

                                        <s:layout>

                                            <s:VerticalLayout gap="0"

                    horizontalAlign="contentJustify" requestedRowCount="25"/>

                                        </s:layout>

                                    </s:DataGroup>

                                </s:Scroller>

                     

                    regards

                     

                    Nikos

                    • 8. Re: flex 3 rowCount thing for combobox happen in flex 4
                      David_F57 Level 5

                      hi,

                       

                      in the skin find this area

                       

                              <s:Group id="dropDown" maxHeight="134" minHeight="22" >

                      notice that you have a maxheight for the dropdown, increase that and it should help. At 25 items you ar looking at about a dropdown of 500+ pixels
                      David.

                      • 9. Re: flex 3 rowCount thing for combobox happen in flex 4
                        nikos101 Level 2

                        as u see, its taking me time to understand lol

                        • 10. Re: flex 3 rowCount thing for combobox happen in flex 4
                          David_F57 Level 5

                          hi,

                           

                          I think that it is important to get a strong understanding of the power of the skins. As you pick this stuff up you will find that its extremely useful to squeeze extra capabilities into your components without having to create new components.

                           

                          David.

                          • 11. Re: flex 3 rowCount thing for combobox happen in flex 4
                            nikos101 Level 2

                            this skin stuff is so flexable, you got any radical skins you can send me?

                            • 12. Re: flex 3 rowCount thing for combobox happen in flex 4
                              nikos101 Level 2

                              Hows the job search going mate?


                              • 13. Re: flex 3 rowCount thing for combobox happen in flex 4
                                David_F57 Level 5

                                hi,

                                 

                                I havent go much in the way of exciting skins yet...I think I gave you the link to my reflect skin

                                 

                                http://gumbo.flashhub.net/reflect/

                                 

                                 

                                I'm creating blog software in FB that will have some really kewl skins in it once its done (about another 2-3 weeks and it should be finished).

                                 

                                Not really putting a lot of effort into the work thing, i'm enjoying doing things at my own pace .

                                 

                                 

                                David.

                                • 14. Re: flex 3 rowCount thing for combobox happen in flex 4
                                  nikos101 Level 2

                                  thx, but are you out of a job?

                                  • 15. Re: flex 3 rowCount thing for combobox happen in flex 4
                                    David_F57 Level 5

                                    hi,

                                     

                                     

                                    at the moment yep...:)

                                     

                                    hey are you on facebook ? (easier to communicate for general chit chat )

                                     

                                     

                                     

                                    David.

                                    • 16. Re: flex 3 rowCount thing for combobox happen in flex 4
                                      nikos101 Level 2

                                      Heres a skin you could try for the cb lol

                                       

                                       

                                       

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

                                       

                                      ADOBE SYSTEMS INCORPORATED
                                      Copyright 2008 Adobe Systems Incorporated
                                      All Rights Reserved.

                                       

                                      NOTICE: Adobe permits you to use, modify, and distribute this file
                                      in accordance with the terms of the license agreement accompanying it.

                                       

                                      -->
                                      <!--- The default skin class for the Spark DropDownList component.
                                      The skin for the anchor button for a DropDownList component
                                      is defined by the DropDownListButtonSkin class.

                                       

                                      <p>In a custom skin class that uses transitions, set the
                                      <code>itemDestructionPolicy</code> property to <code>none</code>
                                      for the PopUpAnchor defined by the popUp property.</p>    

                                       

                                      @see spark.components.DropDownList       
                                      @see spark.skins.spark.DropDownListButtonSkin

                                       

                                      @langversion 3.0
                                      @playerversion Flash 10
                                      @playerversion AIR 1.5
                                      @productversion Flex 4
                                      -->
                                      <s:SparkSkin 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=".5">
                                         
                                          <!-- host component -->
                                          <fx:Metadata>
                                              <![CDATA[
                                              /**
                                              * @copy spark.skins.spark.ApplicationSkin#hostComponent
                                              */
                                              [HostComponent("spark.components.DropDownList")]
                                              ]]>
                                          </fx:Metadata>
                                         
                                          <fx:Script fb:purpose="styling">
                                              <![CDATA[           
                                                 
                                                  /* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
                                              //    static private const contentFill:Array = ["bgFill"];
                                                 
                                                  /**
                                                   * @private
                                                   */
                                              //    override public function get contentItems():Array {return contentFill};
                                                  /**
                                                   * @private
                                                   */
                                                  override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
                                                  {
                                                      if (getStyle("borderVisible") == false)
                                                      {
                                                          if (border)
                                                              border.visible = false;
                                                          if (background)
                                                          {
                                                              background.left = background.top = background.right = background.bottom = 0;
                                                          }
                                                          if (scroller)
                                                              scroller.minViewportInset = 0;
                                                      }
                                                      else
                                                      {
                                                          if (border)
                                                              border.visible = true;
                                                          if (background)
                                                          {
                                                              background.left = background.top = background.right = background.bottom = 1;
                                                          }
                                                          if (scroller)
                                                              scroller.minViewportInset = 1;
                                                      }
                                                     
                                                      if (dropShadow)
                                                          dropShadow.visible = getStyle("dropShadowVisible");
                                                     
                                                      openButton.setStyle("cornerRadius", getStyle("cornerRadius"));
                                                     
                                                      if (borderStroke)
                                                      {
                                                          borderStroke.color = getStyle("borderColor");
                                                          borderStroke.alpha = getStyle("borderAlpha");
                                                      }
                                                      super.updateDisplayList(unscaledWidth, unscaledHeight);
                                                  }
                                              ]]>
                                          </fx:Script>
                                         
                                          <s:states>
                                              <s:State name="normal" />
                                              <s:State name="open" />
                                              <s:State name="disabled" />
                                          </s:states>
                                         
                                          <!---
                                          The PopUpAnchor control that opens the drop-down list.
                                         
                                          <p>In a custom skin class that uses transitions, set the
                                          <code>itemDestructionPolicy</code> property to <code>none</code>.</p>
                                          -->
                                          <s:PopUpAnchor id="popUp"  displayPopUp.normal="false" displayPopUp.open="true" includeIn="open"
                                                         left="0" right="0" top="0" bottom="0" itemDestructionPolicy="auto"
                                                         popUpPosition="below" popUpWidthMatchesAnchorWidth="true">
                                             
                                              <!---
                                              This includes borders, background colors, scrollers, and filters.
                                              @copy spark.components.supportClasses.DropDownListBase#dropDown
                                              -->
                                             
                                              <s:Group id="dropDown" maxHeight="800" minHeight="22" >
                                                 
                                                  <!--- @private -->
                                                  <s:RectangularDropShadow id="dropShadow" blurX="20" blurY="20" alpha="0.45" distance="7"
                                                                           angle="90" color="#000000" left="0" top="0" right="0" bottom="0"/>
                                                 
                                                  <!--- @private -->
                                                  <s:Rect id="border" left="0" right="0" top="0" bottom="0">
                                                      <s:stroke>
                                                          <!--- border stroke @private -->
                                                          <s:SolidColorStroke id="borderStroke" weight="1"/>
                                                      </s:stroke>
                                                  </s:Rect>
                                                 
                                                  <!-- fill -->
                                                  <!--- Defines the appearance of drop-down list's background fill. -->
                                                  <s:Rect id="background" left="1" right="1" top="1" bottom="1" >
                                                     
                                                     
                                                      <!--    <s:SolidColor id="bgFill" color="0xFFFFFF" />-->
                                                      <s:stroke>
                                                          <s:SolidColorStroke color="#555555" />
                                                      </s:stroke>
                                                      <s:fill >
                                                          <s:LinearGradient rotation="75" >
                                                              <s:GradientEntry color="0x0e47a5"  />
                                                              <s:GradientEntry color="0x27c1f4" />
                                                              <s:GradientEntry color="0x0e47a5" />
                                                          </s:LinearGradient>
                                                      </s:fill>  
                                                     
                                                  </s:Rect>
                                                 
                                                  <!--- @private -->
                                                  <s:Scroller id="scroller" left="0" top="0" right="0" bottom="0" hasFocusableChildren="false" minViewportInset="1">
                                                      <!--- @copy spark.components.SkinnableDataContainer#dataGroup-->
                                                      <s:DataGroup id="dataGroup" itemRenderer="spark.skins.spark.DefaultItemRenderer">
                                                          <s:layout>
                                                              <s:VerticalLayout gap="0" horizontalAlign="contentJustify" requestedRowCount="15"/>
                                                          </s:layout>
                                                      </s:DataGroup>
                                                  </s:Scroller>
                                              </s:Group>
                                          </s:PopUpAnchor>
                                         
                                          <!---  The default skin is DropDownListButtonSkin.
                                          @copy spark.components.supportClasses.DropDownListBase#openButton
                                          @see spark.skins.spark.DropDownListButtonSkin -->
                                          <s:Button id="openButton" left="0" right="0" top="0" bottom="0" focusEnabled="false"
                                                    skinClass="spark.skins.spark.DropDownListButtonSkin" /> 
                                         
                                          <!--- @copy spark.components.DropDownList#labelDisplay -->
                                          <s:Label id="labelDisplay" verticalAlign="middle" maxDisplayedLines="1"
                                                   mouseEnabled="false" mouseChildren="false"
                                                   left="7" right="30" top="2" bottom="2" width="75" verticalCenter="1" />
                                         
                                      </s:SparkSkin>