views:

333

answers:

1

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"&gt;
 <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


Hi! I finally got the random behaviour again. And here are some screen shots... The code hasn't changed...

This is the normal behaviour:

alt text

This is the random behaviour:

alt text

FI: I get the normal behaviour back when I do a refresh of the application.

Hope that this will help you understand my issue >_<

Regards.

+2  A: 

Your "mainBox" doesn't have its width set to 100%, the way all the others do. This could cause those problems you're seeing. When you nest a bunch of containers, it only takes one to screw things up. Break one link in that chain and problems occur.

Robusto
Hi!Thanks for your answer. I didn't set the width to 100% cause I didn't want the vbox to have the same width as its parent. I'd like the vbox to have the size of the horizontallist.But I'll put add the property to see if I still get a wrong width on display (I still haven't had the random behaviour... >_< )
BS_C3