Как автоматически изменить размер страницы при перелистывании в мобильное приложение Flex - PullRequest
0 голосов
/ 17 августа 2011

Это может быть простой вопрос, но по какой-то причине я не могу понять, как настроить автоматическое изменение размера страницы при переходе с альбомной ориентации на книжную в приложении Flex Mobile.

т.е. У меня есть страница, которая отображает меню для сбора информации о клиентах, у меня есть схема, как бы я хотел, чтобы она была в книжной ориентации, но если я переключаюсь на альбомную ориентацию, форматирование приводит к тому, что информация не отображается на экране.

Это может быть вопрос, на который я, вероятно, должен знать ответ, но есть ли у кого-нибудь идеи о том, как поступить примерно так?

Заранее спасибо за любые советы!

Пример страницы

    <?xml version="1.0" encoding="utf-8"?>
<s:View backgroundColor="0xF7F9FD" xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" title="Page1">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>


    <s:Group width="100%" height="100%">

        <s:VGroup verticalAlign="top" paddingTop="5" width="100%" height="100%" horizontalAlign="center">
            <s:Image id="OLICLogo" verticalAlign="top" horizontalAlign="left" source="@Embed('PuritanLogo.jpg')"/>
        </s:VGroup>

        <s:VGroup>
            <s:HGroup paddingTop="125" paddingLeft="40">
                <s:Label id="lblJoint" text="Joint Application" paddingTop="10"/>
                <s:CheckBox id="chkBoxJoint"/>  
            </s:HGroup>
        </s:VGroup>

        <s:VGroup>
            <s:HGroup paddingTop="110" paddingLeft="60">
                <s:Label id="lblTitle" paddingLeft="250" text="Personal Information" fontStyle="italic" fontWeight="bold" fontSize="16" paddingTop="10"/>   
            </s:HGroup>
        </s:VGroup>


        <s:VGroup paddingLeft="375" paddingTop="200" horizontalAlign="center">
            <s:Line visible="true" xFrom="70" xTo="70" yFrom="300" yTo="870">
                <s:stroke>
                    <s:SolidColorStroke color="0x000000" weight="2"/>
                </s:stroke>
            </s:Line>
        </s:VGroup>

        <s:VGroup paddingLeft="40" paddingTop="180">
            <s:HGroup>
                <s:Label id="lblClient" fontWeight="bold" fontSize="16" paddingLeft="125" paddingRight="300" text="Client"/>
                <s:Label id="lblSpouse" fontWeight="bold" fontSize="16" text="Spouse"/>
            </s:HGroup>

        </s:VGroup>

        <s:VGroup paddingLeft="50" paddingTop="240">
            <s:Label id="lblCFName" paddingTop="10" text="First Name: "/>
            <s:Label id="lblCMName" paddingTop="20" text="Middle Name: "/>
            <s:Label id="lblCLName" paddingTop="20" text="Last Name: "/>
            <s:Label id="lblCDOB" paddingTop="20" text="DOB: "/>
            <s:Label id="lblCAddress" paddingTop="50" text="Address: "/>
            <s:Label id="lblCCity" paddingTop="20" text="City: "/>
            <s:Label id="lblCState" paddingTop="20" text="State: "/>
            <s:Label id="lblCZip" paddingTop="20" text="Zip Code: "/>
            <s:Label id="lblCEmail" paddingTop="50" text="Email Address: "/>
            <s:Label id="lblCPhone" paddingTop="20" text="Phone Number: "/>
            <s:Label id="lblCCell" paddingTop="20" text="Cell Phone: "/>
        </s:VGroup>

        <s:VGroup paddingLeft="170" paddingTop="240">
            <s:TextInput width="175" id="txtICFName"/>
            <s:TextInput width="175" id="txtICMName"/>
            <s:TextInput width="175" id="txtICLName"/>
            <s:TextInput width="175" id="txtICDOB"/>
        </s:VGroup>

        <s:VGroup paddingLeft="170" paddingTop="430">
            <s:TextInput width="175" id="txtICAddress"/>
            <s:TextInput width="175" id="txtICCity"/>
            <s:TextInput width="175" id="txtICState"/>
            <s:TextInput width="175" id="txtICZip"/>
        </s:VGroup>

        <s:VGroup paddingLeft="170" paddingTop="620">
            <s:TextInput width="175" id="txtICEmail"/>
            <s:TextInput width="175" id="txtICPhone"/>
            <s:TextInput width="175" id="txtICCell"/>
        </s:VGroup>

        <s:VGroup paddingLeft="410" paddingTop="240">
            <s:Label id="lblSFName" paddingTop="10" text="First Name: "/>
            <s:Label id="lblSMName" paddingTop="20" text="Middle Name: "/>
            <s:Label id="lblSLName" paddingTop="20" text="Last Name: "/>
            <s:Label id="lblSDOB" paddingTop="20" text="DOB: "/>
            <s:Label id="lblSAddress" paddingTop="50" text="Address: "/>
            <s:Label id="lblSCity" paddingTop="20" text="City: "/>
            <s:Label id="lblSState" paddingTop="20" text="State: "/>
            <s:Label id="lblSZip" paddingTop="20" text="Zip Code: "/>
            <s:Label id="lblSEmail" paddingTop="50" text="Email Address: "/>
            <s:Label id="lblSPhone" paddingTop="20" text="Phone Number: "/>
            <s:Label id="lblSCell" paddingTop="20" text="Cell Phone: "/>
        </s:VGroup>

        <s:VGroup paddingLeft="530" paddingTop="240">
            <s:TextInput width="175" id="txtISFName"/>
            <s:TextInput width="175" id="txtISMName"/>
            <s:TextInput width="175" id="txtISLName"/>
            <s:TextInput width="175" id="txtISDOB"/>
        </s:VGroup>

        <s:VGroup paddingLeft="530" paddingTop="430">
            <s:TextInput width="175" id="txtISAddress"/>
            <s:TextInput width="175" id="txtISCity"/>
            <s:TextInput width="175" id="txtISState"/>
            <s:TextInput width="175" id="txtISZip"/>
        </s:VGroup>

        <s:VGroup paddingLeft="530" paddingTop="620">
            <s:TextInput width="175" id="txtISEmail"/>
            <s:TextInput width="175" id="txtISPhone"/>
            <s:TextInput width="175" id="txtISCell"/>
        </s:VGroup>

        <s:VGroup paddingTop="800" paddingLeft="325" horizontalAlign="center">
            <s:Button id="btnContinue" click="btnContinue_clickHandler(event)" label="Continue"/>
        </s:VGroup>

    </s:Group>

    <fx:Script>
        <![CDATA[
            protected function btnContinue_clickHandler(event:MouseEvent):void
            {
                navigator.pushView(AFEAW.Page2);
            }

        ]]>
    </fx:Script>

</s:View>

Ответы [ 2 ]

2 голосов
/ 17 августа 2011

Читать эту статью .

В двух словах, слушайте StageOrientationEvent.ORIENTATION_CHANGE , запущенный со сцены.

В вашем слушателе событий; делать вещи

Подробнее о StageOrientationEvent

Я не уверен, что ваш основной тег приложения или представление вызовут это событие.

0 голосов
/ 03 апреля 2012

В мобильных приложениях я стараюсь использовать ограничения (сверху, снизу, слева, справа, вертикальный центр, горизонтальный центр) и ширину / высоту в процентах - чтобы при изменениях ориентации я не особо волновался.Когда я волнуюсь, я полагаюсь на состояния просмотра.

Если вы используете класс Flex View, StageOrientationEvent.ORIENTATION_CHANGE действительно необходим, только если вы хотите предотвратить изменение ориентации.

Причина в том, что класс View автоматически установит для вас состояние «портретного» или «ландшафтного» вида, если ваша реализация просто включает в себя состояние портретного / ландшафтного вида .Вот метод getCurrentState() класса View:

public function getCurrentViewState():String
{
    var aspectRatio:String = FlexGlobals.topLevelApplication.aspectRatio;

    if (hasState(aspectRatio))
        return aspectRatio;

    // If the appropriate state for the orientation of the device
    // isn't defined, return the current state
    return currentState;
}

Так что, если у вашего View класса есть такие состояния:

<s:states>
    <s:State name="portrait" stateGroups="portraitStates,whatever"/>
    <s:State name="landcsape" stateGroups="landscapeStates"/>
    <s:State name="landscapeWithControls" stateGroups="landscapeStates"/>
</s:states>

Затем вы можете использовать эти имена stateGroupс мощным синтаксисом состояний представлений во Flex 4 для обработки всех остальных задач по ориентации.

Для представлений со сложными состояниями представлений удобно переопределить getCurrentViewState() и добавить дополнительные имена состояний:

override public function getCurrentViewState():String
{
    var state:String = super.getCurrentViewState();
    if (someCondition)
    {
        state+="withControls";
    }
    return state;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...