14 Replies Latest reply on Jun 3, 2011 10:16 AM by Flex harUI

    what component to display a matrix

    eprevot123 Level 2

      I want to create a grid with horizontal and vertical header, like Excel tables.

      All the cells of this grid are independant :

      seems to me that in a datagrid, the cells of a same row represent differents fields of a unique dataProvider element.

      but here I want that each cell represent an independant element.

      For example I would like to have a model that is a matrix, maybe an ArrayCollection of ArrayCollections, and each element of this matrix is displayed in the corresponding cell.

       

      What component would you use ?

        • 1. Re: what component to display a matrix
          Flex harUI Adobe Employee

          It depends on what else you want to do with it, like selection,

          manipulation, animation.

           

          You could just use constraintColumns/constraintRows, or TileLayout, or even

          the old MX Grid/GridColumn/GridRow

          • 2. Re: what component to display a matrix
            eprevot123 Level 2

            I would like to be able to scroll vertically and horizontally, and still see the headers (like the datagrid does).

             

            I tried to create a mxml component with DataGroup with TileLayout, surrounded by HGroup and VGroup for the headers but if I set scrollers on the datagroup then the headers don't follow, and if I set scrollers around the hole component then headers disapear when I scroll.

            Plus the component takes 7sec to display the 240 cells, I still have to determine which of the model creation or the component displaying takes so long.

             

            Can we have vertical and horizontal headers with MX Grid ?

            Since I don't know what will be the number of row/columns, I would have to create the Grid/GridColumn/GridRow in an as file ?

            • 3. Re: what component to display a matrix
              eprevot123 Level 2

              I created a AS component with mx grid/gridRow/gridITem, and other grids for the horizontal and vertical headers, and synchronize the headers's scrollbar with the main grid scrollbars.

              It works but it takes a loooong time to display. (about 6 seconds to display 4 columns, 17 rows, a renderer in each cell).

               

              I click on a button to change the state of my application and display the grid.

              My AS method to create the Grids/GridRows/GridItems takes 3 seconds to finish, then I receive a "addedToStage" event, and then I wait again 3secs to see the grid.

               

              -> I don't understand the 3 secs between the addedToStage event and the display I see on screen.

              -> If I can't reduce the time, at least I would like that the application changes as soon as I change the state, and see each cell displayed as it is created. How to do that ?

               

              Edit : I tested with 20 rows, 20 columns => 1sec to calculate the Grid, 25secs to display the grid !!

              • 4. Re: what component to display a matrix
                Flex harUI Adobe Employee

                Comment out the renderers and see how fast it is.  It might be something

                about the renderers.

                • 5. Re: what component to display a matrix
                  eprevot123 Level 2

                  Well of course with nothing in the renderer it's almost instantaneous.

                  But I need these renderers to display the information, otherwise the grid is useless...

                  Maybe flex draws every renderers instead of drawing only the visible ones.

                  I tried with DataGroup and TileLayout but has the same problem (too long to display).

                   

                  You seem to think there is a problem with the renderer, do you have something in mind ? any clue ?

                   

                  Edit : each renderer contains a Rect (to display the frame to have a grid), 2 labels, 1 textArea, 3 buttons with icon (icon is embeded once in another class)

                  • 6. Re: what component to display a matrix
                    Flex harUI Adobe Employee

                    Post the renderer code.

                    • 7. Re: what component to display a matrix
                      eprevot123 Level 2

                      Here is the mxml part of my renderer (Labels are bound on var sound:XMLList that has only one XML element) :

                       

                      <s:Group>

                           <s:states>
                              <s:State id="noSound" name="noSound"/>
                              <s:State id="soundRecording" name="soundRecording"/>
                              <s:State id="soundRecorded" name="soundRecorded"/>
                          </s:states>
                         
                          <s:Rect width="100%" height="100%" >
                              <s:fill>
                                  <s:SolidColor id="background" color="0xFFFFFF"/>
                              </s:fill>
                              <s:stroke>
                                  <s:SolidColorStroke color="0x000000" weight="1"/>
                              </s:stroke>
                          </s:Rect>
                         
                          <s:Label x="5" y="5"
                                   text="{sound.@id}"
                                   includeInLayout="{isExpanded}" visible="{isExpanded}"/>
                          <s:Label x="40" y="5"
                                   includeIn="soundRecorded"
                                   includeInLayout="{isExpanded}" visible="{isExpanded}"
                                   text="{sound.@pathName}" toolTip="{sound.@pathName}"
                                   width="100%" maxDisplayedLines="1"/>
                         
                          <s:TextArea id="descriTA" x="5" y="22"
                                      includeInLayout="{isExpanded}" visible="{isExpanded}"
                                      width="150" height="60"
                                      change="{descriChange(descriTA.text)}" text="{sound.@descri}"/>
                         
                          <s:Image id="playImage" source="{SoundGrid.playIcon}"
                                   mouseDown="{playImage.source = SoundGrid.playIconDown}"
                                   mouseUp="{playImage.source = SoundGrid.playIcon}" mouseOut="{playImage.source = SoundGrid.playIcon}"
                                   includeIn="soundRecorded"
                                   includeInLayout="{isExpanded}" visible="{isExpanded}"
                                   x="5" y="84"
                                   toolTip="play"
                                   click="playClicked()" />
                          <s:Image id="recordImage" source="{SoundGrid.recordIcon}"
                                   mouseDown="{recordImage.source = SoundGrid.recordIconDown}"
                                   mouseUp="{recordImage.source = SoundGrid.recordIcon}" mouseOut="{recordImage.source = SoundGrid.recordIcon}"
                                   includeIn="noSound"
                                   includeInLayout="{isExpanded}" visible="{isExpanded}"
                                   x="5" y="84"
                                   toolTip="record"
                                   click="recordClicked()"/>
                          <s:Image id="stopImage" source="{SoundGrid.stopIcon}"
                                   mouseDown="{stopImage.source = SoundGrid.stopIconDown}"
                                   mouseUp="{stopImage.source = SoundGrid.stopIcon}" mouseOut="{stopImage.source = SoundGrid.stopIcon}"
                                   includeIn="soundRecording"
                                   includeInLayout="{isExpanded}" visible="{isExpanded}"
                                   x="5" y="84"
                                   toolTip="stop"
                                   click="stopClicked()"/>
                          <s:Image id="importImage" source="{SoundGrid.importIcon}"
                                   mouseDown="{importImage.source = SoundGrid.importIconDown}"
                                   mouseUp="{importImage.source = SoundGrid.importIcon}" mouseOut="{importImage.source = SoundGrid.importIcon}"
                                   includeIn="noSound"
                                   includeInLayout="{isExpanded}" visible="{isExpanded}"
                                   x="50" y="84"
                                   toolTip="import"
                                   click="importClicked()"/>
                         
                      </s:Group>

                      • 8. Re: what component to display a matrix
                        Flex harUI Adobe Employee

                        You might want to use the profiler to see if it shows anything as being

                        slow.  There is lots of bindings which can be slow, and lots of mx:Images

                        which could be slow if the images are big or external.

                        • 9. Re: what component to display a matrix
                          eprevot123 Level 2

                          In the renderer, it is the textArea and the Images that take the most time. But I still don't know how to speed up the display.

                          I can remove binding and update the cells myself but I want to have Images in each cell.

                           

                          Are you saying that this display time is normal ? as long as I use binding and Image (and textArea) I won't be able to display faster the renderers ?

                           

                          (what is external image ? mine is in the src/assets folder)

                          • 10. Re: what component to display a matrix
                            Flex harUI Adobe Employee

                            Images are either embedded or loaded at runtime.  Loading at runtime takes

                            more time.  Another factor is the original size of the image vs the

                            displayed size.  If I take a full photograph that is 10's of MB in size and

                            display it down in a small area, that will also take time.

                            • 11. Re: what component to display a matrix
                              eprevot123 Level 2

                              I embed the images, and they are 4K (16x16 pixels icon).

                              • 12. Re: what component to display a matrix
                                Flex harUI Adobe Employee

                                I don't think a 16x16 icon should be 4K in size.  If you are asking the

                                player to scale it down, that may take extra time.

                                • 13. Re: what component to display a matrix
                                  eprevot123 Level 2

                                  I don't set any height/width to the Image, no code to scale the image, it displays it as it is.

                                  Anyway I tried to replace the Images by Buttons without icon, and the time to display the grid is the same. So I don't think I can gain time on this part.

                                   

                                  But I tried to replace the TextArea by a Label and it's better.

                                  I added a listener to trace "added" events on the renderer and I see many traces for the scrollers of the TextArea.

                                  I tried to remove the scrollers from the TextArea : scroller="{null}" horizontalScrollPolicy="off" verticalScrollPolicy="off"

                                  But I still trace all the scrollers "added" events.

                                   

                                  Is there a way to not calculate scrollers when displaying a spark TextArea ?

                                  And does it seem likely to you that TextArea scrollers are the main source of my problem ?

                                  • 14. Re: what component to display a matrix
                                    Flex harUI Adobe Employee

                                    Probably.  If you don't ever want them, use some component like

                                    RichEditableText that doesn't have scrollbars built in.