1

In a Flex Mobile App, my Application component handles states like portrait/landscape ios/android and phone/tablet in groups. In my View I want to include a button if the main App has one specific state of these. I don't want any View to check portroit/landscape and stuff again to set as own state. On the other hand the views states are required for other things. So how can I say include the button in my view only if the state of the topLevelApplication is landscape e.g.?

ketan
  • 19,129
  • 42
  • 60
  • 98

2 Answers2

2

Use the attribute includein="landscape" if it is present in multiple state you can put a comma separated list

Mansuro
  • 4,558
  • 4
  • 36
  • 76
0

First of all add two states to your application:

<s:states>
    <s:State name="portrait"/>
    <s:State name="landscape"/>
</s:states>

Next, add the following function to your <fx:Script> section:

<fx:Script>
    <![CDATA[
        import mx.events.ResizeEvent;

        protected function application1_resizeHandler(event:ResizeEvent):void
        {
            if (width>height)
                this.currentState="landscape";
            else this.currentState="portrait";
        }
    ]]>
</fx:Script>

Also call the method above on application resize:

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
           xmlns:s="library://ns.adobe.com/flex/spark" applicationDPI="160" resize="application1_resizeHandler(event)">

Now if you want to include or exclude a component just add visible or includeIn on the desired component:

visible.landscape="false"

or

includeIn="landscape"

Full code sample:

<?xml version="1.0" encoding="utf-8"?>
<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)">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>

    <s:states>
        <s:State name="portrait"/>
        <s:State name="landscape"/>
    </s:states>

    <fx:Script>
        <![CDATA[
            import mx.events.ResizeEvent;

            protected function application1_resizeHandler(event:ResizeEvent):void
            {
                if (width>height)
                    this.currentState="landscape";
                else this.currentState="portrait";
            }
        ]]>
    </fx:Script>
    <s:Button includeIn="landscape" x="58" y="52" label="Landscape"/>
    <s:Button includeIn="portrait" x="58" y="90" label="Portrait"/>

</s:WindowedApplication>
Christian Junk
  • 1,000
  • 1
  • 8
  • 22
  • Ok that might be the best method to do this. But I would have thought that there could be better solutions since everyone tells you, that for performance reasons includeIn/excludeIn is better than setting visible=false and includeInLayout=false, because objects don't need to be created. And the includeIn/excludeIn are afaik only available with states.. –  Apr 02 '12 at 23:18
  • You are right, but with the above code you do have states and therfor you are able to use `includeIn/excludeIn`. Please see the full code sample above. – Christian Junk Apr 03 '12 at 07:32
  • Yeah but I want to access the Applications states in my view component not in my application component. Please see my question. –  Apr 03 '12 at 14:30