6 Replies Latest reply on Jan 25, 2010 7:51 PM by jdesko

    Spark List custom itemRenderer w/TextArea problems

    jdesko

      I have a custom composite component, in it is a Spark List whose data comes from SQL and is paged, for this list I have a custom itemRenderer.  In the renderer I have a Spark Label and TextArea.  For the TextArea if I use TextConverter to importToFlow the first page looks good, but then as I get new data from SQL the TextArea does not show the new data - unless I click on a row then the proper data shows for that row; the Label in the renderer always shows the proper data.  There are no errors.

       

      I am using sdk #13654

       

      Any suggestions?

       

      Thanks,

      John

        • 1. Re: Spark List custom itemRenderer w/TextArea problems
          jdesko Level 2

          Update:

          I found that if I set useVirtualLayout = false then this takes care of the data display problem.

           

          John

          • 2. Re: Spark List custom itemRenderer w/TextArea problems
            Shongrunden Adobe Employee

            Does your item renderer execute any code off of the creationComplete event?

            • 3. Re: Spark List custom itemRenderer w/TextArea problems
              jdesko Level 2

              Hello Shongrunden;

               

              Thanks for the reply.

              Does your item renderer execute any code off of the creationComplete event?

              No, actually no functions at all.  Below is the itemRenderer;

               

              Thanks again,

              John

               

              (Sorry for the mess below, when inserting Raw HTML for this message it didn't show after being posted)

               

              <?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">

               

              <s:states>

              <s:State name="normal"/>

              <s:State name="hovered"/>

              <s:State name="selected"/>

              </s:states>

               

              <fx:Script>

              <![CDATA[

              import flashx.textLayout.conversion.TextConverter;

               

              ]]>

              </fx:Script>

               

              <fx:Declarations>

              <mx:DateFormatter id="dateFormatter" formatString="MM/DD/YYYY"/>

              </fx:Declarations>

               

              <!-- have to match this gap with headerGroup -->

              <s:HGroup gap="0" verticalAlign="top">

               

              <s:Group id="labelGroup">

              <s:Rect height="100" width="110"

              alpha.normal="1.0" alpha.hovered="1.0" alpha.selected="1.0">

              <s:fill>

              <s:LinearGradient rotation="90">

              <s:GradientEntry color="0x000000" includeIn="selected, hovered"/>

              <s:GradientEntry color="0x5fdd02"/>

              <s:GradientEntry color="0x1f7402" ratio="0.2"/>

              <s:GradientEntry color="0x5fdd02" ratio="0.95"/>

              <s:GradientEntry color="0xffffff" includeIn="selected, hovered"/>

              </s:LinearGradient>

              </s:fill>

              </s:Rect>

               

              <s:Label id="userArea"

              text="{data.user_name + '\n' + dateFormatter.format(data.date)}"

              height="100" width="110"

              paddingTop.normal="5" paddingTop.hovered="15" paddingTop.selected="15" paddingLeft="5"

              color.normal="0xffffff" color.hovered="0xffffff" color.selected="0xffffff"/>

              </s:Group>

               

              <s:Group id="textAreaGroup">

              <s:Rect height="100%" width="100%">

              <s:fill>

              <s:SolidColor color="0xffffff"/>

              </s:fill>

              </s:Rect>

               

              <s:TextArea id="ideaArea"

              textFlow="{TextConverter.importToFlow(data.lyrics_idea, TextConverter.TEXT_FIELD_HTML_FORMAT)}"

              width="300" height="100"

              editable="false"

              focusEnabled="false"

              borderVisible="false"/>

              </s:Group>

              </s:HGroup>

               

              <s:Rect width="100%">

              <s:stroke>

              <s:SolidColorStroke color="0x000000" weight="1"/>

              </s:stroke>

              </s:Rect>

               

              </s:ItemRenderer>

              • 4. Re: Spark List custom itemRenderer w/TextArea problems
                Shongrunden Adobe Employee

                Interesting.  Is it just the date that isn't showing up on the next page?  Can you still see the lyrics_idea and user_name fields?  Can you try modifying your userArea label to remove the dateFormatter.format() call and let me know if you can see the raw date data:

                 

                 

                <s:Label id="userArea"
                                                     text="{data.user_name + '\n' + data.date}"
                                                     height="100" width="110"
                                                     paddingTop.normal="5" paddingTop.hovered="15" paddingTop.selected="15" paddingLeft="5"
                                                     color.normal="0xffffff" color.hovered="0xffffff" color.selected="0xffffff"/>

                 

                • 5. Re: Spark List custom itemRenderer w/TextArea problems
                  jdesko Level 2

                  Hello Shongrunden;

                   

                  Thanks for the reply.  Actually the problem is in using a TextArea in the itemRenderer. 

                   

                  A Label component used in the renderer always displays proper information, no problem.

                   

                  The problem is in using a TextArea (or RichText).  The List shows the proper data for the first page of data retrieved, but when new data is sent to the List the TextArea is not updated visually (however a Label shows the correct info), but when I click on a row in the List the proper data appears in the TextArea.  Below is the area of the renderer with the problem.

                   

                  <s:TextArea id="ideaArea"

                  textFlow="{TextConverter.importToFlow(data.lyrics_idea, TextConverter.TEXT_FIELD_HTML_FORMAT)}"

                  width="300" height="100"

                  editable="false"

                  focusEnabled="false"

                  borderVisible="false"/>

                   

                  In the List's properties if I set useVirtualLayout=false then everything works. 

                   

                  Thanks again,

                   

                  John

                  • 6. Re: Spark List custom itemRenderer w/TextArea problems
                    jdesko Level 2

                    Solved:

                     

                    To get the Spark List custom itemRenderer that contains a Spark TextArea (problem child) and a Label to work properly with useVirtualLayout = true;

                     

                    I had to override set data and in this call validateNow();

                     

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

                    {

                    userArea.text= value.user_name + '\n' + dateFormatter.format(value.date);

                    ideaArea.textFlow = TextConverter.importToFlow(value.lyrics_idea, TextConverter.TEXT_FIELD_HTML_FORMAT);

                    ideaArea.validateNow();

                    }

                     

                    John