Flex 4 mx:HDividedBox flicker with liveDragging enabled *only* when mouse is over component

1
votes

I've noticed that an "out of the box" HDividedBox has some serious flickering issues when liveDragging is enabled, but only when the pointer is over the contents of the DividedBox while dragging. If you grab the BoxDivider and move the pointer off the component while dragging, the flicker goes away and the component renders properly.

I have tested this with both my customized component and an extremely basic HDividedBox implementation with Group, SkinnableContainer, and BoxContainer children as well as nested groups with clipping. All types of children exhibit the same behavior. If someone has a workaround for this I would greatly appreciate some input!!

Thanks a lot, and here's a code snippet that shows my issue.

 <mx:HDividedBox width="500" height="200" liveDragging="true">
      <s:SkinnableContainer minWidth="0" backgroundColor="green" percentHeight="100"/>
      <s:SkinnableContainer minWidth="0" backgroundColor="blue" percentHeight="100"/>
      <s:SkinnableContainer minWidth="0" backgroundColor="yellow" percentHeight="100"/>
      <s:SkinnableContainer minWidth="0" backgroundColor="red" percentHeight="100"/>
 </mx:HDividedBox>

Thanks,

Aaron

1
apache-flexmouseoverdragflicker

1 Answers

0
votes

As fun as it was to pull the dividers around and see how that sample behaves, I did not experience any flickering issues. Possible explanations:

  1. Processor speed - I run a fast processor, some others may not be able to keep up with the required number of redraws. You may also be working with more complex components that are more difficult to draw than solid colors.

  2. Mouse events may be getting dispatched/handled multiple times in the components you are using.

  3. I did experience some divider 'twitching' when moving the bars occasionally. The is most likely due to the multiple layout computations necessary to compute the correct widths of each divided box based on percentages, every time a divider moves just a pixel.

Edit: Run this and move the dividers to get an idea of how many resizes/redraws are occurring due to using livedragging:.

<fx:Declarations>
    <fx:int id = "resizeCount">0</fx:int>
</fx:Declarations>


    <mx:HDividedBox 
        width = "500" height = "200"
        liveDragging = "true">
        <s:SkinnableContainer 
            minWidth = "0"
            percentHeight = "100"
            backgroundColor = "green"

            resize = "{trace(resizeCount);resizeCount++}" />
        <s:SkinnableContainer 
            minWidth = "0"
            percentHeight = "100"
            backgroundColor = "blue"

            resize = "{trace(resizeCount);resizeCount++}" />
        <s:SkinnableContainer 
            minWidth = "0"
            percentHeight = "100"
            backgroundColor = "yellow"

            resize = "{trace(resizeCount);resizeCount++}" />
        <s:SkinnableContainer 
            minWidth = "0"
            percentHeight = "100"
            backgroundColor = "red"

            resize = "{trace(resizeCount);resizeCount++}" />
    </mx:HDividedBox>

It quickly gets into the hundreds... then thousands...