Flex Web应用程序中的多线程

Question

I am working on web application. In which i am stuck with some issue.

When i call some server function it will take time to get response. When response have high number of data. It will get data, process on that data and update GUI in background.

Upto that my application GUI freeze. I can not click on any part. I see some where that ActionScript support multithreading. I found some tutorial for that which is here . But, it is for desktop application only.

Is there any way i can handle this freezing of application/GUI in web application. It will decrease my application performance and looks very bad.

Example:

If i have list of data with checkbox and on checkbox click there is some process. Now, there is one button called "Select All". Now, if i click on "select all" then all check box selected and process on check selection is going and freeze the application upto process done.

like: I have following list

<s:List id="tempList" itemRenderer="CustomItemRenderer" 
                    dataProvider="{someList}" useVirtualLayout="false"/>

ItemRenderer have label and checkbox as following.

<s:CheckBox id="cCheckId" selected="{data.selected}" 
                change="onChangeHandler(event)" />
<s:Label id="lblTest"  />

protected function onChangeHandler(event:Event):void
{
    data.selected = !data.selected;
}

Now, on button Select all will select all check box.

<s:Button id="btnSelectAll" label="Select All" click="selectAllHandler(event)" />

protected function selectAllHandler(event:MouseEvent):void
{
  for(var i:int = 0;i<someList.length;i++)
  {
    someList[i].selected = true;
  }
}

Now, if someList have lots of data then it will freeze the screen.

Any help is greatly appreciated.

Answer 1

The main idea behind the list and itemrenderers that you have a list (or datagrid) that displays like 30 items and then you can scroll to see the rest. Then you will only have 30 Itemrenderers that would be updated at once.

If you don't want to scroll you will need to distribute your item selection over several frames, something like that (untested, but you get the idea)

private static const ITEMS_AT_ONCE:int = 5000;
private var _currentIndex:int;

protected function selectAllHandler(event:MouseEvent):void
{
    _currentIndex = 0;
    addEventListener(Event.ENTER_FRAME, onEnterFrame); // this will call the onEnterFrame method on each frame rendered
}

private function onEnterFrame(e:Event):void
{
    // make sure we don't run out of bounds of the dataprovider's length
    var maxIndex:int = Math.min(_currentIndex + ITEMS_AT_ONCE, someList.length);

    // set selection for the current bunch
    for (var i:int = _currentIndex; i < maxIndex; i++)
    {
        someList[i].selected = true;
    }

    if (maxIndex == someList.length)
    {
        // We are done, remove enterframe listener
        removeEventListener(Event.ENTER_FRAME, onEnterFrame);

        // I'm not sure but don't you need to refresh the dataprovider to reflect the changes in the ItemRenderers ?
        // (someList.dataProvider as ArrayCollection).refresh();
    }
    else
    {
        // update the _currentindex so we continue after this item on the next frame
        _currentIndex = maxIndex;
    }

Another possible solution - if you display all of them anyways - you might try to switch to a VGroup that will hold custom UIComponents (without MXML) for the items - this should speed up the rendering.