Flex application with lots of user interface objects == slow?

Question

I am creating my first custom Flex component in Flex 3. This is a data table based on the Grid container class, with a simple text label in each cell. (DataGrid and AdvancedDataGrid were not suitable starting points for my needs.) The component works quite well using small tables, but I tried to perform stress testing using a larger table and was disappointed with the results.

The process of creating components has several slow points, but they are my best to optimize and are not my main goal. What bothers me the most is what appears to be a limitation in the Flex framework itself.

This "large" table of examples contains more than 7000 cells. It is quite expensive, but 1-2 orders of magnitude smaller than the largest that I need to accommodate. In the standard Grid structure, the main part of the component consists of a Grid with 400 GridRows of 16 GridItems each, plus several other smaller auxiliary Grids.

After displaying the table, I find the following:

• Mouse related events are not triggered. In particular, I have rollOver / rollOut event handlers registered in each cell of the table so that I highlight the cell under the pointer. On a small table, I could quickly move the mouse over the table, and the backlight will follow the pointer in real time. With a large table, the backlight is very loose, changing only about twice per second, skipping many cells.
• If I put the mouse cursor over a component and leave it there, my processor is bound (one processor core, anyway) and stays that way until I leave the component when it goes into standby mode. At the moment, my component does nothing.

Flex doesn't seem to be able to scale to support component trees that are so large. I shudder to imagine how he will behave with 100,000 cells. Maybe I click Grid for its intended purpose, but the presence of an object in a table cell does not look like an unreasonable model, and ~ 14,000 objects in a tree (GridItem and shortcut per cell) seem rather modest.

I still need to get useful data from the FlexBuilder profiler; I'm working on it. At the moment, my biggest questions are:

• Flex ?
• ?

Flash Player 9 Firefox WinXP.

Answer 1

, Flex , , , (, DisplayObject Canvas, ).

. DisplayObjects ( ) , , .

, , , 1000+ , Flex.

, . , 1000 , , 100 , / . , . .

Answer 2

, , . , , . , .

- , Flex , 1000+ "" . , ( )

1) , . , Spark DataGrid, ViewPorts. http://hansmuller-flex.blogspot.com/2009/06/introduction-to-viewports-and-scrolling.html. , "", , , .

2) , , : , , , , , , , , . , :  - > , , reparenting, ( )

: , 10X10 (), 100X100. 20X20, X Y , . reparenting, , . - "" . , , , (x, y) .

3) , : Flex SDK - . "". , SDK DataGrids , UITextField (Halo), Label. UIComponent . asdocs UIComponent , , .

4) : . , flex profiler. . , , . , , , .

5) , : , .. . Flex - , , .

: http://www.flexicious.com/resources/Ultimate/Docs/LargeDataset.htm?

, !

Answer 3

Flex, , , . , DataGrid 20 22 . DataGrid - . Entity Entity Entity ListBase/List , , :

http://weblogs.macromedia.com/pent/archives/2008/03/itemrenderers_p.html

Answer 4

, ... , Flex, .

, Flash ... . , .

(Java,.NET ..) . , 200-300 + .

Answer 5

flex, , -. , .

:

this.addEventListener(MouseEvent.MOUSE_MOVE, );

public function redraw(anything:Object=null):void{
        //draw something here
            this.graphics.clear();
            this.graphics.lineStyle(3, 0x000000);
            this.graphics.moveTo(startPoint.x, startPoint.y);
            this.graphics.lineTo(endPoint.x, endPoint.y);
            this.scaleTextInput.x = centerPoint.x;
            this.scaleTextInput.y = centerPoint.y;

    }

...

:

Event.ENTER_FRAME? , , , :

:

this.addEventListener(Event.ENTER_FRAME, );

this.addEventListener(MouseEvent.MOUSE_MOVE, );

. Flexing

: http://www.deepakdhakal.com