title: Why does the following code for switching the visibility of two containers not work and what is the correct way of doing it?
body: <p>I am trying to make a button that makes a box visible or invisible depending on the state of another box. Here is my code:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                 xmlns:s="library://ns.adobe.com/flex/spark"
                 xmlns:mx="library://ns.adobe.com/flex/mx"&gt;
  
      &lt;fx:Script&gt;
          &lt;![CDATA[
              public function switchContainers():void {
                  if ((screen1.visible = false) &amp;&amp; (screen2.visible = true)) {
                      screen2.visible = false;
                      screen2.includeInLayout = false;
                      screen1.visible = true;
                      screen1.includeInLayout = true;
                  } else {
                      screen1.visible = false;
                      screen1.includeInLayout = false;
                      screen2.visible = true;
                      screen2.includeInLayout = true;
                  }
              }
          ]]&gt;
      &lt;/fx:Script&gt;
  
      &lt;s:SkinnableContainer id="screen1" width="100%" height="80%" backgroundColor="red" visible="false" includeInLayout="false" /&gt;
      &lt;s:SkinnableContainer id="screen2" width="100%" height="80%"  backgroundColor="blue" visible="true" includeInLayout="true" /&gt;
      &lt;s:Button top="5" left="5" label="Switch containers" click="switchContainers()"/&gt;
  
  &lt;/s:Application&gt;
  </code></pre>
  
  <p>Whenever I click the button, nothing happens. I only get to see the blue container. Why doesn't this work?</p>
  
  <p>The ultimate aim of this exercise is to get to display different "screens" in an application (a login screen, a menu screen, etc.) without resorting to ViewStack (I'm trying to use exclusively Spark components). What is the preferred way of doing this?</p>