0 Replies Latest reply on Jun 2, 2009 1:04 PM by jomelia

    Display issues with View States

    jomelia

      I'm having a strange display issue with my view states. In the base state, I have a small dashboard app that has twp panels side by side. When one panel (pnlProduct) is clicked, the state changes to the state specific to that panel. The other panel (pnlBudget) is removed and pnlProduct resizes to fit the space. A grid in pnlProduct moves down and an image of a chart is added. Here's the problem: when I load the app and click on pnlProduct, the image displays as it should. If I go to pnlBudget first, and then go to pnlProduct, the image does not display. I ran a trace on the "added" event of the image and the trace shows the image was added, even though it does not display. I'm posting the relevant code below. Thanks for the help.

       

      Jack

       

      <mx:states>
              <mx:State name="budget">
                  <mx:RemoveChild target="{pnlProduct}"/>
                  <mx:SetProperty target="{pnlBudget}" name="width" value="275"/>
                  <mx:SetProperty target="{pnlBudget}" name="height" value="275"/>
                  <mx:SetEventHandler target="{pnlBudget}" name="click"/>
                 
                  <mx:RemoveChild target="{grid1}"/>
                  <mx:SetProperty target="{pnlBudget}" name="layout" value="vertical"/>
                  <mx:AddChild relativeTo="{pnlBudget}" position="lastChild">
                      <mx:LinkBar dataProvider="{viewBudgeted}">
                      </mx:LinkBar>
                  </mx:AddChild>
                  <mx:AddChild relativeTo="{pnlBudget}" position="lastChild">
                      <comps:Budgeted id="viewBudgeted"/>
                  </mx:AddChild>
                  <mx:SetProperty target="{pnlBudget}" name="mouseChildren"/>
                  <mx:SetProperty target="{pnlBudget}" name="buttonMode"/>
                  <mx:SetProperty target="{pnlBudget}" name="useHandCursor"/>
                  <mx:SetEventHandler target="{pnlBudget}" name="mouseOut"/>
                  <mx:SetEventHandler target="{pnlBudget}" name="mouseOver"/>
                  <mx:SetStyle target="{pnlBudget}" name="color" value="#000000"/>
                  <mx:SetProperty name="height" value="150"/>
              </mx:State>
              <mx:State name="product">
                  <mx:RemoveChild target="{pnlBudget}"/>
                  <mx:SetProperty target="{pnlProduct}" name="width" value="275"/>
                  <mx:SetProperty target="{pnlProduct}" name="height" value="275"/>
                  <mx:SetStyle target="{pnlProduct}" name="resizeEffect" value="{resize}"/>
                 
                  <mx:AddChild relativeTo="{grid2}" position="before">
                      <mx:Image source="images/productChart3.png" id="imgProdChart" 
                          horizontalCenter="0" addedEffect="{fadeOut}"/>
                  </mx:AddChild>
                  <mx:SetProperty target="{pnlProduct}" name="title" value="Product Spend"/>
                  <mx:SetProperty target="{grid2}" name="y" value="76"/>
                  <mx:SetProperty target="{pnlProduct}" name="x" value="5"/>
                 
                 
              </mx:State>
          </mx:states>
          <mx:Script>
              <![CDATA[
                  import mx.core.Application;
                  import mx.controls.Alert;

       

              ]]>
          </mx:Script>
          <mx:Resize id="resize" duration="350" />
          <mx:Resize id="resizeSlow" duration="750" />
          <mx:Move id="movePanel" duration="500"/>
          <mx:Fade id="fadeOut" duration="250" />
          <mx:Panel x="5" y="5" resizeEffect="{resizeSlow}"
              width="135" height="130" horizontalAlign="center" verticalGap="0"
              mouseOver="Application.application.tileRollover(pnlBudget)"
              mouseOut="Application.application.tileRollout(pnlBudget)"
              id="pnlBudget" paddingTop="1"
              borderStyle="solid" borderColor="#003366"
              paddingLeft="0" useHandCursor="true"
              mouseChildren="false" buttonMode="true"
              click="Application.application.goToLevel('budget','exec');Application.application.isBudge ted=true;invalidateDisplayList()" cornerRadius="8"
              backgroundColor="#FFFFFF" borderThickness="2"
              dropShadowEnabled="true" paddingRight="0" title="Budgeted/Actual" styleName="mdmPanel">
              <mx:Grid horizontalGap="1" verticalGap="1" width="100%" fontFamily="Arial" fontSize="11" color="#000000" backgroundAlpha="1" removedEffect="{fadeOut}" id="grid1">
                  <mx:GridRow width="100%" height="100%" backgroundColor="#003399" color="#ffffff">
                      <mx:GridItem width="60%" height="100%" verticalAlign="middle">
                          <mx:Label fontWeight="bold" text="Total YTD"/>
                      </mx:GridItem>
                      <mx:GridItem width="40%" height="100%" verticalAlign="middle">
                          <mx:Label text="Amount" fontWeight="bold"/>
                      </mx:GridItem>
                     
                  </mx:GridRow>
                  <mx:GridRow width="100%" height="100%"
                      borderStyle="solid" borderSides="bottom" borderColor="#999999">
                      <mx:GridItem  height="100%" verticalAlign="middle">
                          <mx:Label text="Actual" fontWeight="bold"/>
                      </mx:GridItem>
                      <mx:GridItem height="100%" verticalAlign="middle" horizontalAlign="right">
                          <mx:Label text="$5.24m" fontWeight="bold" textAlign="right"/>
                      </mx:GridItem>

       

                  </mx:GridRow>
                  <mx:GridRow width="100%" height="100%"
                      borderStyle="solid" borderSides="bottom" borderColor="#999999">
                      <mx:GridItem  height="100%" verticalAlign="middle">
                          <mx:Label text="Budgeted" fontWeight="bold"/>
                      </mx:GridItem>
                      <mx:GridItem height="100%" verticalAlign="middle" horizontalAlign="right">
                          <mx:Label text="$4.95m" fontWeight="bold" textAlign="right"/>
                      </mx:GridItem>

       

                  </mx:GridRow>
                  <mx:GridRow width="100%" height="100%"
                      borderStyle="solid" borderSides="bottom" borderColor="#999999">
                      <mx:GridItem  height="100%" verticalAlign="middle">
                          <mx:Label text="Variance Amt" fontWeight="bold"/>
                      </mx:GridItem>
                      <mx:GridItem height="100%" verticalAlign="middle" horizontalAlign="right">
                          <mx:Label text="$0.29m" fontWeight="bold" textAlign="right"/>
                      </mx:GridItem>

       

                  </mx:GridRow>
                  <mx:GridRow width="100%" height="100%">
                      <mx:GridItem  height="100%" verticalAlign="middle">
                          <mx:Label text="Variance %" fontWeight="bold"/>
                      </mx:GridItem>
                      <mx:GridItem height="100%" verticalAlign="middle" horizontalAlign="right">
                          <mx:Label text="5.9%" fontWeight="bold" textAlign="right"/>
                      </mx:GridItem>

       

                  </mx:GridRow>
              </mx:Grid>
          </mx:Panel>
          <mx:Panel y="5"
              width="135" height="130" horizontalAlign="center"
              verticalGap="1" id="pnlProduct" moveEffect="{movePanel}"
              click="Application.application.goToLevel('product','exec');invalidateDisplayList()"
              mouseOver="Application.application.tileRollover(pnlProduct)"
              mouseOut="Application.application.tileRollout(pnlProduct)"
              borderStyle="solid" borderColor="#003366" useHandCursor="true"
              mouseChildren="false" buttonMode="true" cornerRadius="8"
              backgroundColor="#FFFFFF" borderThickness="2" dropShadowEnabled="true" paddingTop="1" title="Product Spend YTD" styleName="mdmPanel" layout="absolute" x="145">
              <mx:Grid horizontalGap="1" verticalGap="1" width="100%"
                  fontFamily="Arial" fontSize="11" color="#000000"
                  backgroundAlpha="1" id="grid2" x="0" y="1" moveEffect="{movePanel}">
                  <mx:GridRow width="100%" height="100%" backgroundColor="#003399" color="#ffffff">
                      <mx:GridItem width="60%" height="100%" verticalAlign="middle">
                          <mx:Label fontWeight="bold" text="Product"/>
                      </mx:GridItem>
                      <mx:GridItem width="30%" height="100%" verticalAlign="middle" horizontalAlign="center">
                          <mx:Label text="Amt" fontWeight="bold"/>
                      </mx:GridItem>
                      <mx:GridItem width="20%" height="100%" verticalAlign="middle" horizontalAlign="center">
                          <mx:Label text="Pct" fontWeight="bold"/>
                      </mx:GridItem>
                     
                  </mx:GridRow>
                  <mx:GridRow width="100%" height="100%"
                      borderStyle="solid" borderSides="bottom" borderColor="#999999">
                      <mx:GridItem  height="100%" verticalAlign="middle">
                          <mx:Label text="Mobile" fontWeight="bold"/>
                      </mx:GridItem>
                      <mx:GridItem height="100%" verticalAlign="middle" horizontalAlign="right">
                          <mx:Label text="$1.36m" fontWeight="bold" textAlign="right"/>
                      </mx:GridItem>
                      <mx:GridItem height="100%" verticalAlign="middle" horizontalAlign="right">
                          <mx:Label text="26%" fontWeight="bold" textAlign="right"/>
                      </mx:GridItem>
                 
                  </mx:GridRow>
                  <mx:GridRow width="100%" height="100%"
                      borderStyle="solid" borderSides="bottom" borderColor="#999999">
                      <mx:GridItem  height="100%" verticalAlign="middle">
                          <mx:Label text="Voice" fontWeight="bold"/>
                      </mx:GridItem>
                      <mx:GridItem height="100%" verticalAlign="middle" horizontalAlign="right">
                          <mx:Label text="$1.68m" fontWeight="bold" textAlign="right"/>
                      </mx:GridItem>
                      <mx:GridItem height="100%" verticalAlign="middle" horizontalAlign="right">
                          <mx:Label text="32%" fontWeight="bold" textAlign="right"/>
                      </mx:GridItem>
                 
                  </mx:GridRow>
                  <mx:GridRow width="100%" height="100%"
                      borderStyle="solid" borderSides="bottom" borderColor="#999999">
                      <mx:GridItem  height="100%" verticalAlign="middle">
                          <mx:Label text="Data" fontWeight="bold"/>
                      </mx:GridItem>
                      <mx:GridItem height="100%" verticalAlign="middle" horizontalAlign="right">
                          <mx:Label text="$1.26m" fontWeight="bold" textAlign="right"/>
                      </mx:GridItem>
                      <mx:GridItem height="100%" verticalAlign="middle" horizontalAlign="right">
                          <mx:Label text="24%" fontWeight="bold" textAlign="right"/>
                      </mx:GridItem>
                 
                  </mx:GridRow>
                  <mx:GridRow width="100%" height="100%">
                      <mx:GridItem  height="100%" verticalAlign="middle">
                          <mx:Label text="Access" fontWeight="bold"/>
                      </mx:GridItem>
                      <mx:GridItem height="100%" verticalAlign="middle" horizontalAlign="right">
                          <mx:Label text="$0.94m" fontWeight="bold" textAlign="right"/>
                      </mx:GridItem>
                      <mx:GridItem height="100%" verticalAlign="middle" horizontalAlign="right">
                          <mx:Label text="18%" fontWeight="bold" textAlign="right"/>
                      </mx:GridItem>
                 
                  </mx:GridRow>
              </mx:Grid>
          </mx:Panel>