24 Replies Latest reply on Mar 5, 2010 10:55 AM by jdesko

    Spark ComboBox problem

    jdesko Level 2

      I am using latest nightly SDK 4.1.0.14532 with FB Beta 2 standalone with fix(rename 10 and .minorTargetVersion)

       

      Below is a test app. with minimum code along with a pic showing the problem.

       

      I retrieve data from php/mySQL and in this test app I populate a Spark ComboBox, MX ComboBox and a Spark DropDownList.  In the Spark ComboBox when I scroll thru the data in the dropdown the  TextInput shows the data but "has two lines" (see pic); if I scroll thru the data in the TextInput with the dropdown closed it shows fine, but ... if I cursor to the end of the text the cursor then drops to a line below.  I thought Spark TextInput was single line?

       

      The MX ComboBox and Spark DropDownList scroll fine with or without dropdown open and no problems.

       

      With the Spark ComboBox I've tried a labelFunction and returned the text at various lengths and also I've set the ComboBox width to a very wide # and this didn't help.

       

      ! But ... The problem at this time seems to be isolated to one column in a table, this is the only non-number column that has letters/non letter characters (ie. -,.).  I have other apps in the same project with Spark ComboBox's working properly (they are not retrieving this column of data).  Basically this column is stock symbols descriptions (ex. ADBE Adobe Inc.)

       

      Thanks in advance,

      John

       

       

      Pic below shows how there seems to be two lines in the TextInput.

      Picture 2.png

       

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

      <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

         xmlns:s="library://ns.adobe.com/flex/spark"

         xmlns:mx="library://ns.adobe.com/flex/mx"

         xmlns:stocks="services.stocks.*"

         minWidth="1024" minHeight="768"

         creationComplete="init()">

      <s:layout>

      <s:HorizontalLayout paddingTop="20" paddingLeft="20"/>

      </s:layout>

       

      <fx:Script>

      <![CDATA[

      import mx.controls.Alert;

      import mx.rpc.events.FaultEvent;

      import mx.rpc.events.ResultEvent;

       

      private function init():void

      {

      var info:Object = new Object();

      info.symbol = "K";

      info.numItems = 20;

      getSymbols_result.token = stocks.getSymbolDescription_paged(info);

      getSymbols_result.addEventListener(FaultEvent.FAULT, faultHandler);

      getSymbols_result.addEventListener(ResultEvent.RESULT, getSymbols_resultHandler);

      }

       

      private function faultHandler(event:FaultEvent):void

      {

      Alert.show("There was a fault error", "Fault Error", Alert.OK);

      }

       

      private function getSymbols_resultHandler(event:ResultEvent):void

      {

       

      }

      ]]>

      </fx:Script>

       

      <fx:Declarations>

      <stocks:Stocks id="stocks" fault="Alert.show(event.fault.faultString + '\n' + event.fault.faultDetail)" showBusyCursor="true"/>

      <s:CallResponder id="getSymbols_result"/>

      </fx:Declarations>

       

      <s:ComboBox dataProvider="{getSymbols_result.lastResult}" labelField="description"/>

      <mx:ComboBox dataProvider="{getSymbols_result.lastResult}" labelField="description"/>

      <s:DropDownList dataProvider="{getSymbols_result.lastResult}" labelField="description"/>

      </s:Application>

        • 1. Re: Spark ComboBox problem
          kubens Level 2

          Unfortunatelly this is not really a perfect solution,  because for usability reasons it is not very helpfull if the text is  just truncated

           

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

          <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

             xmlns:s="library://ns.adobe.com/flex/spark"

             xmlns:mx="library://ns.adobe.com/flex/mx"

              minWidth="1024"

             minHeight="768"

              creationComplete="init()"

          >

           

          <fx:Script>

          <![CDATA[

          import flashx.textLayout.container.ScrollPolicy;

          private function init():void

          {

               cboxDescription.setStyle('horizontalScrollPolicy', ScrollPolicy.OFF);

          }

           

          ]]>
          </fx:Script>

           

          <s:ComboBox id="cboxDescription" dataProvider="{getSymbols_result.lastResult}"  labelField="description"/>

           

          </s:Application>

          • 2. Re: Spark ComboBox problem
            Peter deHaan Level 4

            @jdesko,

             

            Can you please file a bug at http://bugs.adobe.com/flex/ and include your simple test case.

             

            Thanks,

            Peter

            • 3. Re: Spark ComboBox problem
              jdesko Level 2

              Hello kubens;

               

              Thanks for the reply.  I might be missing it, but I don't see HorizontalScrollPolicy for either Spark ComboBox or TextInput?

               

              Thanks,

              John

              • 4. Re: Spark ComboBox problem
                jdesko Level 2

                Hello Peter,

                 

                Thanks for the reply, I will file a bug report.

                 

                John

                • 5. Re: Spark ComboBox problem
                  Peter deHaan Level 4

                  I quickly looked through your code and tried with the latest nightly 4.1 SDK build and couldnt repro the issue with the following test case (I wasnt sure what your data from PHP looked like, so I had to guess):

                   

                  <?xml version="1.0" encoding="utf-8"?>
                  <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                                 xmlns:s="library://ns.adobe.com/flex/spark"
                                 xmlns:mx="library://ns.adobe.com/flex/mx">
                      <s:layout>
                          <s:HorizontalLayout paddingTop="20" paddingLeft="20"/>
                      </s:layout>
                      <s:controlBarContent>
                          <s:Label id="sdkVer" initialize="sdkVer.text = mx_internal::VERSION + '  |  ' + Capabilities.version;" />
                      </s:controlBarContent>
                     
                      <fx:Declarations>
                          <s:ArrayList id="dp">
                              <fx:Object description="Kellogg Company" />
                              <fx:Object description="Arcadia Resources Inc." />
                              <fx:Object description="Kadant Inc." />
                              <fx:Object description="Kaiser Aluminum Corporation" />
                              <fx:Object description="Karman Corporation" />
                              <fx:Object description="Adobe Systems Incorporated" />
                              <fx:Object description="Yahoo Inc" />
                              <fx:Object description="Apple Inc" />
                              <fx:Object description="Google Inc" />
                              <fx:Object description="Microsoft Inc" />
                          </s:ArrayList>
                      </fx:Declarations>
                     
                      <s:ComboBox dataProvider="{dp}" labelField="description"/>
                      <mx:ComboBox dataProvider="{dp}" labelField="description"/>
                      <s:DropDownList dataProvider="{dp}" labelField="description"/>
                     
                  </s:Application>

                   

                  Can you reproduce the issue with that test case? If not, I wonder if it is something in your data provider. Any chance you can post the data that you get back from your PHP script?

                   

                  Thanks,

                  Peter

                  • 6. Re: Spark ComboBox problem
                    jdesko Level 2

                    Hello Peter;

                     

                    I am terribly sorry for wasting your time and embarassed

                     

                    After dumping my SQL data to a text file, I saw that the column that had the issue, the data provider was putting a \r at the end of it.  Example 'Adobe Systems Incorporated \r'.  I originally thought there might be an issue like this, but when browsing the SQL table, or looking at the data in FB's Network Monitor, or retrieving the data to any type of component (except Spark ComboBox's TextInput), and also tracing the data retrieved ... non of these procedures showed any \r or any signs of anything like it.  This is why I was assuming (I know don't) the ComboBox was the issue.

                     

                    I will have to solve this problem in SQL.  It would be nice to do a ComboBox LabelFunction and strip off the \r if found, but Flex doesn't show it (as mentioned above).

                     

                    Again very embaraced and my apologies,

                     

                    John

                    • 7. Re: Spark ComboBox problem
                      Peter deHaan Level 4

                      @John,

                       

                      No problem!

                      You could try stripping the \n \r with RegExp or a simple string replace, or maybe even the mx.utils.StringUtil.trim() method.

                       

                       

                      <?xml version="1.0" encoding="utf-8"?>
                      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" initialize="init();">
                         
                          <mx:Script>
                              <![CDATA[
                                  import mx.utils.ObjectUtil;
                                  import mx.utils.StringUtil;
                                 
                                  private static const ADBE:String = "    Adobe Systems Inc\n\r      ";
                                 
                                  private function init():void {
                                      var trimmedStr:String = StringUtil.trim(ADBE);
                                      trace(ObjectUtil.toString(trimmedStr));  // "Adobe Systems Inc"
                                  }
                              ]]>
                          </mx:Script>
                         
                      </mx:Application>

                       

                      HTH,

                      Peter

                      • 8. Re: Spark ComboBox problem
                        jdesko Level 2

                        Hello Peter;

                         

                        Many thanks for the replies.  I tried the StringUtil in the ComboBox LabelFunction, but it didn't work.  As I mentioned earlier Flex doesn't show the /r at the end of the column coming in from SQL, but again ComboBox somehow sees it?  I'm befuddled (is that a word?).

                         

                        Here is a little of the data retrieved (copied from Network Monitor):

                         

                        body = [ASObject(7292476){exchange=, description=Gillette Company (The), symbol=G, symbol_id=1168}, ASObject(7090894){exchange=, description=GIANT INTERACTIVE GROUP INC, symbol=GA, symbol_id=1169}, ASObject(8095517){exchange=, description=Gabelli Equity Trust, Inc. (the), symbol=GAB, symbol_id=1170}, ASObject(14921161){exchange=, description=Gabelli Equity Tr Inc, symbol=GAB-D, symbol_id=1171},

                         

                         

                        Thanks Again,

                        John

                        • 9. Re: Spark ComboBox problem
                          jdesko Level 2

                          Hello Peter;

                           

                          Also, here is a trace output coming from the ComboBox LabelFunction (again no /r). 

                           

                          Thanks Again,

                          John

                           

                          GAB - Gabelli Equity Trust, Inc. (the)

                          GAB-D - Gabelli Equity Tr Inc

                          GAB-F - Gabelli Equity Tr Inc

                          GABC - German American Bancorp Inc.

                          G - Gillette Company (The)

                          GA - GIANT INTERACTIVE GROUP INC

                          GAB - Gabelli Equity Trust, Inc. (the)

                          GAB-D - Gabelli Equity Tr Inc

                          GAB-F - Gabelli Equity Tr Inc

                          GABC - German American Bancorp Inc.

                          G - Gillette Company (The)

                          GA - GIANT INTERACTIVE GROUP INC

                          GAB - Gabelli Equity Trust, Inc. (the)

                          GAB-D - Gabelli Equity Tr Inc

                          GAB-F - Gabelli Equity Tr Inc

                          GABC - German American Bancorp Inc.

                          • 10. Re: Spark ComboBox problem
                            Peter deHaan Level 4

                            Is the data from PHP SQL, or is it an array of objects?

                             

                            I'll take another look at this, but if you can remove the web services aspect of it and still reproduce the multi-line s:ComboBox issue, I'd say file it at http://bugs.adobe.com/flex/.

                            It's just a lot harder for us to debug if we dont have access to the PHP data and we're stuck guessing at exact data/strings. I'm not 100% certain if the Network Monitor is trimming strings or anything like that, so it's a bit hard for me to debug if I cannot reproduce the issue locally.

                             

                            Peter

                            • 11. Re: Spark ComboBox problem
                              Peter deHaan Level 4

                              Actually, I think I can repro this with the following test case:

                               

                              <?xml version="1.0" encoding="utf-8"?>
                              <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                                             xmlns:s="library://ns.adobe.com/flex/spark"
                                             xmlns:mx="library://ns.adobe.com/flex/mx"
                                             initialize="init();">

                                  <s:layout>
                                      <s:VerticalLayout paddingLeft="20" paddingTop="20" />
                                  </s:layout>
                                 
                                  <fx:Script>
                                      <![CDATA[
                                          import mx.collections.ArrayList;
                                         
                                          protected static const dp:ArrayList = new ArrayList();
                                         
                                          private function init():void {
                                              dp.addItem({description: "General Electric\n"});
                                              dp.addItem({description: "Adobe Systems Inc\r"});
                                              dp.addItem({description: "1The quick brown fox jumps\r"});
                                              dp.addItem({description: "2The quick brown fox jumps\r"});
                                              dp.addItem({description: "3The quick brown fox jumps\r"});
                                              dp.addItem({description: "4The quick brown fox jumps\r"});
                                              dp.addItem({description: "5The quick brown fox jumps\r"});
                                              dp.addItem({description: "6The quick brown fox jumps\r"});
                                              dp.addItem({description: "7The quick brown fox jumps\r"});
                                          }
                                      ]]>
                                  </fx:Script>

                                  <s:TextInput id="ti" text="{cb.selectedItem.description}" />
                                  <s:ComboBox id="cb" dataProvider="{dp}" labelField="description" width="200" x="20" y="20" />
                                 
                              </s:Application>

                               

                              Peter

                              • 12. Re: Spark ComboBox problem
                                jdesko Level 2

                                Hello Again Peter;

                                 

                                The data is coming from php/MySql.  I'm working on a php trim() script (SQL doesn't have a function to remove /r's) to replace the records (8k+) before/after they get inserted into the SQL database or before they're sent to Flex. 

                                 

                                I will report back after above is done.

                                 

                                Thanks,

                                John

                                • 13. Re: Spark ComboBox problem
                                  jdesko Level 2

                                  I'm glad that you can reproduce it ... I don't know if that's good or bad?

                                   

                                  Thanks,

                                  John

                                  • 14. Re: Spark ComboBox problem
                                    jdesko Level 2

                                    Hello Peter;

                                     

                                    I'd be happy to send you a minimized version of the SQL data (I don't see were I can attach a file in the forum?) and I used a minimal php script for testing.  But it looks like you can repro w/o.

                                     

                                    John

                                     

                                    basic php script:

                                     

                                    public function getSymbols()

                                    {

                                    $sql = "SELECT * FROM clone";

                                    $result = mysql_query($sql) or die("Query failed: " . mysql_error());

                                    return $result;

                                    }

                                    • 15. Re: Spark ComboBox problem
                                      Peter deHaan Level 4

                                      Thats OK, I can repro it with a simple standalone application. Not sure if it is a bug w/ s:ComboBox or s:TextInput yet. I could argue either way.

                                      In the mean time you would have to try trimming the data in PHP before sending it to Flex, or loop over your data in Flex to remove any unwanted trailing line breaks.

                                       

                                      Did you want to file the bug in JIRA (http://bugs.adobe.com/flex/) or did you want me to?

                                       

                                      Peter

                                      • 16. Re: Spark ComboBox problem
                                        jdesko Level 2

                                        Hello Peter;

                                         

                                        Thanks for your help.  On filing the bug report:  I don't mind doing it since you've done a lot already.  But ... if you file it, it might carry more weight, it would be done right, plus I don't know if you get credit/cudos from Adobe.

                                         

                                        Quick management decision - I'll file the bug report to spare you the time (if it helps for you to do it, let me know).

                                         

                                        Thanks,

                                        John

                                        • 17. Re: Spark ComboBox problem
                                          Peter deHaan Level 4

                                          Go ahead, you found it, you file it.

                                          I file enough bugs that all credit and/or kudos have long since run out.

                                           

                                          But if you can post the bug number here once you've filed it, that would help since I can try and get the bug looked at a bit quicker.

                                           

                                          Thanks,

                                          Peter

                                          • 18. Re: Spark ComboBox problem
                                            jdesko Level 2

                                            Here is the link to the bug report:

                                             

                                            https://bugs.adobe.com/jira/browse/FB-26184

                                             

                                             

                                            Thanks Again Peter,

                                             

                                            John

                                            • 19. Re: Spark ComboBox problem
                                              jdesko Level 2

                                              Hello Peter;

                                               

                                              FWIW

                                               

                                              I tried a simple itemRenderer (code below) and this is probably user error, but:

                                              1. The dropDownList displays okay, but the ComboBox TextInput displays [object Object].  I understand it is looking for, in this example, the object.description, but when using a custom itemRenderer how do you tell TextInput what to display?  Unless you have to have a separate renderer for textInput.  I did try a caretChange function, where it would replace the textInput.text but Flex didn't like this, I'm sure because ComboBox is looking at new text and ....

                                               

                                              2. After you hit enter on a selectedItem in the dropDownList, Flex errors out with (I did have it working at one point, not sure what I changed, if anything):

                                              TypeError: Error #1009: Cannot access a property or method of a null object reference.

                                               

                                              So, either user error or does Spark ComboBox have issues with itemRenderers?

                                               

                                              Also, thanks for adding your code to the bug report, that's probably better than me saying go to the forum topic.

                                               

                                              Thanks again,

                                              John

                                               

                                              Your modified code:

                                               

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

                                              <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

                                                 xmlns:s="library://ns.adobe.com/flex/spark"

                                                 xmlns:mx="library://ns.adobe.com/flex/mx"

                                                 initialize="init();">

                                              <s:layout>

                                              <s:VerticalLayout paddingLeft="20" paddingTop="20" />

                                              </s:layout>

                                               

                                              <fx:Script>

                                              <![CDATA[

                                              import mx.collections.ArrayList;

                                               

                                              protected static const dp:ArrayList = new ArrayList();

                                               

                                              private function init():void {

                                              dp.addItem({description: "General Electric\n"});

                                              dp.addItem({description: "Adobe Systems Inc\r"});

                                              dp.addItem({description: "1The quick brown fox jumps\r"});

                                              dp.addItem({description: "2The quick brown fox jumps\r"});

                                              dp.addItem({description: "3The quick brown fox jumps\r"});

                                              dp.addItem({description: "4The quick brown fox jumps\r"});

                                              dp.addItem({description: "5The quick brown fox jumps\r"});

                                              dp.addItem({description: "6The quick brown fox jumps\r"});

                                              dp.addItem({description: "7The quick brown fox jumps\r"});

                                              }

                                              ]]>

                                              </fx:Script>

                                              <s:TextInput id="ti" text="{cb.selectedItem.description}" />

                                              <s:ComboBox id="cb" dataProvider="{dp}" width="200" x="20" y="20"

                                              itemRenderer="renderers.symbolComboBoxRenderer"/>

                                               

                                              </s:Application>

                                               

                                              - symbolComboBoxRenderer

                                               

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

                                              <s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx">

                                              <fx:Script>

                                              <![CDATA[

                                              import mx.events.FlexEvent;

                                               

                                              override public function set data(value:Object):void

                                              {

                                              super.data = value;

                                               

                                              description.text = value.description;

                                               

                                              dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE));

                                              }

                                              ]]>

                                              </fx:Script>

                                               

                                              <s:Label id="description"/>

                                              </s:ItemRenderer>

                                               

                                              .

                                              • 20. Re: Spark ComboBox problem
                                                Peter deHaan Level 4

                                                I dont know if this is the best, but it seems to work (which is good enough for me):

                                                 

                                                    <s:ComboBox id="cb"
                                                                dataProvider="{dp}"
                                                                width="200"
                                                                x="20" y="20"
                                                               labelField="description"
                                                                itemRenderer="symbolComboBoxRenderer" />

                                                 

                                                 

                                                And then in my renderer I just added a bit more error checking since it seems that the data() setter was getting null, which was causing your RTEs when trying to access the description property:

                                                <?xml version="1.0" encoding="utf-8"?>
                                                <s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                                                                xmlns:s="library://ns.adobe.com/flex/spark"
                                                                xmlns:mx="library://ns.adobe.com/flex/mx">
                                                    <fx:Script>
                                                        <![CDATA[
                                                            import mx.events.FlexEvent;
                                                            import mx.utils.StringUtil;
                                                           
                                                            override public function set data(value:Object):void  {
                                                                super.data = value;
                                                               
                                                                if (value && value.hasOwnProperty("description")) {
                                                                        labelDisplay.text = StringUtil.trim(value.description);
                                                                }
                                                                dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE));
                                                            }
                                                        ]]>
                                                    </fx:Script>
                                                   
                                                    <s:Label id="labelDisplay" left="5" right="5" top="5" bottom="5" />
                                                   
                                                </s:ItemRenderer>

                                                 

                                                Peter

                                                • 21. Re: Spark ComboBox problem
                                                  jdesko Level 2

                                                  Hey Peter;

                                                   

                                                  First - On the original ComboBox issue with /r I used a CustomComboBoxSkin with a valueCommit function (below code is the modified portion of the standard skin) so far this works with your code/data to resolve the problem, along with using StringUtil in the renderer for the dropDown.  I am trying this with my php/mySQL data now (I guess I could have waited till I did to post this).

                                                   

                                                  <!--- @copy spark.components.ComboBox#textInput -->

                                                      <s:TextInput id="textInput" valueCommit="textInput.text = mx.utils.StringUtil.trim(textInput.text)"

                                                                   left="0" right="18" top="0" bottom="0"

                                                                   skinClass="skins.CustomComboBoxTextInputSkin"/>

                                                   

                                                  Second - Thanks again for your help with the itemRenderer.  (Insert emoticon here for kick self in butt) for missing labelField.  That was a great idea on the renderer error check.

                                                   

                                                  Thanks again,

                                                  John

                                                  • 22. Re: Spark ComboBox problem
                                                    jdesko Level 2

                                                    Peter;

                                                     

                                                    So using StringUtil in both the itemRenderer and in the CustomComboBoxSkin TextInput valueCommit seems to have taken care of the /r issue with both your code/data and the data returned by php/mySql.

                                                     

                                                    So for the bug report workaround or fix?

                                                     

                                                    Thanks for all your help,

                                                     

                                                    John

                                                    • 23. Re: Spark ComboBox problem
                                                      Peter deHaan Level 4

                                                      Personally I probably wouldn't bother filing a bug. I think the 1-2 bugs we have on it already are good enough, and this may fall into a "garbage in, garbage out" policy.

                                                      The easiest/bestest solution (in my opinion) would be to trim the description fields in the data provider and remove any trailing space/linebreaks there. That way you probably dont need custom item renderers or skins.

                                                       

                                                      Peter

                                                      • 24. Re: Spark ComboBox problem
                                                        jdesko Level 2

                                                        Hello Peter;

                                                         

                                                        I agree with what you said.  My apps need a custom skin and renderer anyways on the comboBox so I'll leave the stringUtils.trim in for now.

                                                         

                                                        Again, thanks for all of your time and help.

                                                         

                                                        John