Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>First of all add two <em>states</em> to your application:</p> <pre class="lang-js prettyprint-override"><code>&lt;s:states&gt; &lt;s:State name="portrait"/&gt; &lt;s:State name="landscape"/&gt; &lt;/s:states&gt; </code></pre> <p>Next, add the following function to your <code>&lt;fx:Script&gt;</code> section:</p> <pre class="lang-js prettyprint-override"><code>&lt;fx:Script&gt; &lt;![CDATA[ import mx.events.ResizeEvent; protected function application1_resizeHandler(event:ResizeEvent):void { if (width&gt;height) this.currentState="landscape"; else this.currentState="portrait"; } ]]&gt; &lt;/fx:Script&gt; </code></pre> <p>Also call the method above on application <em>resize</em>:</p> <pre class="lang-js prettyprint-override"><code>&lt;s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" applicationDPI="160" resize="application1_resizeHandler(event)"&gt; </code></pre> <p>Now if you want to include or exclude a component just add <em>visible</em> or <em>includeIn</em> on the desired component:</p> <pre class="lang-js prettyprint-override"><code>visible.landscape="false" </code></pre> <p>or</p> <pre class="lang-js prettyprint-override"><code>includeIn="landscape" </code></pre> <p>Full code sample:</p> <pre class="lang-js prettyprint-override"><code>&lt;?xml version="1.0" encoding="utf-8"?&gt; &lt;s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" resize="application1_resizeHandler(event)"&gt; &lt;fx:Declarations&gt; &lt;!-- Place non-visual elements (e.g., services, value objects) here --&gt; &lt;/fx:Declarations&gt; &lt;s:states&gt; &lt;s:State name="portrait"/&gt; &lt;s:State name="landscape"/&gt; &lt;/s:states&gt; &lt;fx:Script&gt; &lt;![CDATA[ import mx.events.ResizeEvent; protected function application1_resizeHandler(event:ResizeEvent):void { if (width&gt;height) this.currentState="landscape"; else this.currentState="portrait"; } ]]&gt; &lt;/fx:Script&gt; &lt;s:Button includeIn="landscape" x="58" y="52" label="Landscape"/&gt; &lt;s:Button includeIn="portrait" x="58" y="90" label="Portrait"/&gt; &lt;/s:WindowedApplication&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload