1 Reply Latest reply on May 28, 2010 4:17 PM by UbuntuPenguin

    Help: Rect in component states doesn't show

    elmonty2 Level 1

      I have an MXML component with several states. In some of these states, a rectangle is supposed to appear.  The component code is below.  When I preview each state of the component in the Flash Builder 4 IDE, it looks correct, but at runtime, the rectangles for the "amenities" and "location" states do not appear.  I have tried several approaches, including:

       

      - Using state groups

      - Using one Rect with different state properties

      - With and without depth properties

       

      The same problem occurs with each of these approaches.

       

      <?xml version="1.0" encoding="utf-8"?>
      <s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx"
               xmlns:components="components.*"
               >
          <s:states>
              <s:State name="page1"/>
              <s:State name="offer1"/>
              <s:State name="offer2"/>
              <s:State name="page2"/>
              <s:State name="amenities"/>
              <s:State name="location"/>
          </s:states>
          <fx:Declarations>
          </fx:Declarations>
          <fx:Script>
              <![CDATA[
                  import mx.core.FlexGlobals;
                  import valueObjects.Location;
                  
                  [Bindable]
                  private var app:AppBuilder = FlexGlobals.topLevelApplication as AppBuilder;
                  
                  private function ServiceHours(loc:Location):String
                  {
                      var s:String = "<b>Service Department Hours:</b>\n" +
                          loc.FormattedHours() + "\n\n" +
                          "<b>Call today for an appointment!\n" +
                          loc.phone + "</b>\n\n" +
                          loc.web;
                      
                      return s;
                  }
              ]]>
          </fx:Script>
          <mx:Image x="0" y="0" includeIn="page1,offer1,offer2"
                    source="images/page1.png" 
                    />
          <mx:Image x="0" y="0" includeIn="page2,amenities,location"
                    source="images/page2.png" 
                    />
          <components:VisualOffer x="3" y="3" scaleX="0.28" scaleY="0.28" offer="{app.offer1}" includeIn="page1,offer1,offer2"/>
          <components:VisualOffer x="81" y="3" scaleX="0.28" scaleY="0.28" offer="{app.offer2}" includeIn="page1,offer1,offer2"/>
          <s:Label x="98" y="150" width="64" includeIn="page2,amenities,location" 
                   fontFamily="Verdana" fontSize="3" lineHeight="3"
                   text="{app.amenities}" 
                   />
          <s:Label x="98" y="178" width="64" includeIn="page2,amenities,location" 
                   fontFamily="Verdana" fontSize="3" lineHeight="3"
                   text="{ServiceHours(app.location)}"
                   />
          <s:Rect x.offer1="3" y.offer1="3"
                  x.offer2="80" y.offer2="3" 
                  x="3" y="3" width="75" height="67"             
                  includeIn="offer1,offer2" 
                  >
              <s:stroke>
                  <s:SolidColorStroke color="#CC0000" weight="2"/>
              </s:stroke>
          </s:Rect>
          <s:Rect x="94" y="140" width="60" height="39" includeIn="amenities" depth="99">
              <s:stroke>
                  <s:SolidColorStroke color="#CC0000" weight="2"/>
              </s:stroke>
          </s:Rect>
          <s:Rect x="94" y="178" width="60" height="37" includeIn="location" depth="100">
              <s:stroke>
                  <s:SolidColorStroke color="#CC0000" weight="2"/>
              </s:stroke>
          </s:Rect>
      </s:Group>
      
      
      
        • 1. Re: Help: Rect in component states doesn't show
          UbuntuPenguin Level 4

          Have you tried putting all that skin logic in an mxml skin component.  Then you could iterate through the skin states and see exactly where your rectangles are.  I had this problem once , it was due to the fact my rectangle was under something.  Anyway , check out skins , they are cumbersome at first , but once you understand how they work you will be fine.  Start with making a skin for a SkinnableContainer class and putting that service logic you have in a SkinnableContainer.

           

          Sincerely ,

            Ubu

           

          If this post was helpful please mark it as such.