Flex Canvas child Randomly resizes
- by BS_C3
Hi!
I have an application with a viewstack that contains all the components that need to be displayed. The navigation is defined in the main application.
All the components are based on canvas.
The main application looks like that:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:components="components.*">
<mx:VBox width="1024" height="100%" horizontalCenter="0" verticalGap="0" backgroundColor="#FFFFFF">
<mx:Image id="header" verticalAlign="top" />
<mx:ViewStack id="body" horizontalCenter="0" verticalCenter="0" width="100%" height="100%">
<components:HomePage id="hp" width="100%"/>
<components:CollectionSelection id="cs" width="100%"/>
<components:SearchEngine id="se" width="100%"/>
<components:SearchResult id="sr" width="100%"/>
<components:Tray id="tr" width="100%"/>
<components:Order id="or" width="100%"/>
</mx:ViewStack>
<mx:Image id="footer" verticalAlign="bottom" maintainAspectRatio="false" width="100%"/>
</mx:VBox>
</mx:Application>
I'm getting a strange behaviour from the TRAY component.
Here's the code for component Tray (I've only left the display info):
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Image id="bg"
horizontalCenter="0" verticalCenter="0"
width="100%" height="100%"
maintainAspectRatio="false"/>
<mx:HBox width="100%">
<mx:Button x="20" y="20" label="BACK"/>
<mx:Spacer width="100%"/>
<mx:LinkBar
itemClick="linkbar_itemClick(event)"
styleName="GLBLinkBTN"
separatorColor="#FFFFFF"
separatorWidth="1"
>
<mx:dataProvider>
<mx:Object label="CLEAR"/>
<mx:Object label="LOGOUT"/>
</mx:dataProvider>
</mx:LinkBar>
</mx:HBox>
<mx:VBox id="mainBox" horizontalCenter="0" verticalCenter="0" verticalGap="0">
<mx:HBox width="100%" height="50" backgroundColor="#60524D" verticalAlign="bottom" paddingBottom="5">
<mx:Label styleName="TRTitle" paddingLeft="15"/>
<mx:Spacer width="100%"/>
<mx:Label styleName="TRItems" paddingRight="15"/>
</mx:HBox>
<mx:HorizontalList id="hlist"
dataProvider="{TrayData.instance.itemsCollection}"
columnCount="{TrayData.instance.hlistColumns}"
rowCount="1"
itemRenderer="components.TrayItem"
horizontalScrollPolicy="off"
rollOverColor="#FFFFFF"
selectionColor="#FFFFFF"
horizontalCenter="0" verticalCenter="0"
borderStyle="none"
horizontalScrollPosition="{TrayData.instance.hsPosition}"
/>
<mx:HBox width="100%" backgroundColor="#E7DDDB" height="40" verticalAlign="middle" paddingLeft="20" paddingRight="20">
<mx:Box width="25" verticalAlign="middle" horizontalAlign="left">
<mx:Button id="leftBtn" />
</mx:Box>
<mx:Spacer width="100%"/>
<mx:Box width="25" verticalAlign="middle" horizontalAlign="right">
<mx:Button id="rightBtn" />
</mx:Box>
</mx:HBox>
</mx:VBox>
</mx:Canvas>
All the components are displaying properly. However, sometimes, randomly, the vbox "mainBox" in the tray component is not displaying as it should: the horizontallist shrinks and instead of fully displaying its items, I get horizontal and vertical scrollbars for each item...
I'm currently trying to reproduce this behaviour (to get a print screen) but right know, it's working fine... -_-' As soon as I get it work as it shouldn't, I'll upload an image.
Here's the code for the itemRenderer (just in case...):
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" >
<mx:HBox width="100%" paddingTop="0" paddingBottom="0" paddingRight="3">
<mx:Spacer width="100%"/>
<mx:Box width="14" height="14" verticalAlign="middle" horizontalAlign="center">
<mx:Button width="8" height="8"/>
</mx:Box>
</mx:HBox>
<mx:VBox paddingLeft="20" paddingRight="20" verticalGap="15" paddingBottom="15">
<mx:Canvas id="thumbnail">
<mx:Image id="thumbnailBG" />
<mx:Image id="thumbnailIM" />
</mx:Canvas >
<mx:VBox width="100%" verticalGap="7">
<mx:HBox width="100%" height="13">
<mx:Label width="74" opaqueBackground="#ECE5E2"/>
<mx:Label paddingBottom="5"/>
</mx:HBox>
<mx:HBox width="100%" height="13">
<mx:Label width="74" opaqueBackground="#ECE5E2"/>
<mx:Label />
</mx:HBox>
<mx:HBox width="100%" height="13">
<mx:Label width="74" opaqueBackground="#ECE5E2"/>
<mx:Label />
</mx:HBox>
<mx:HBox width="100%" height="13">
<mx:Label width="74"opaqueBackground="#ECE5E2"/>
<mx:Label />
</mx:HBox>
<mx:HBox width="100%" height="13">
<mx:Label width="74" opaqueBackground="#ECE5E2"/>
<mx:Label />
</mx:HBox>
<mx:HBox width="100%" height="13">
<mx:Label width="74" opaqueBackground="#ECE5E2"/>
<mx:Label />
</mx:HBox>
<mx:HBox width="100%" height="13">
<mx:Label width="74" opaqueBackground="#ECE5E2"/>
<mx:Label />
</mx:HBox>
<mx:HBox width="100%" height="13">
<mx:Label width="74" opaqueBackground="#ECE5E2"/>
<mx:Label />
</mx:HBox>
</mx:VBox>
<mx:Button />
</mx:VBox>
</mx:VBox>
Your help would really be appreciated.
Regards,
BS_C3
