CODEWITHSUNDEEP
apache-flexmobilestatemxmlflex4.6
user355318
user355318

Reputation:

Flex includeIn( state of topLevelApplication )

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.?

Upvotes: 1

Views: 1298

Answers (2)

Christian Junk
Christian Junk

Reputation: 1010

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>

Upvotes: 0

Mansuro
Mansuro

Reputation: 4627

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

Upvotes: 2

Related Questions