2 Replies Latest reply on Dec 1, 2011 5:49 PM by frank_aq

    Strange resize upon pushing a view (Flex 4.6 SDK Mobile App)

    DeathByMoose

      So, I can't quite figure out how to stop this from happening, so I'm hoping someone can help.

       

      Whenever I push a view in my mobile app, the view that I'm calling the navigator.pushView() from gets resized just before the new view gets pushed.

       

       

      EXAMPLE:

       

      This is the view I'm calling the navigator.pushView from:

      view_start.png

       

      After I call the navigator.pushView(), you can see that it is resized as the new view is being slid into view:

      view_push.png

       

       

      Why would this be happening?  It's very noticable and really looks bad.

       

       

      The code for this particular view is shown below:

      <s:View xmlns:fx="http://ns.adobe.com/mxml/2009"

                          xmlns:s="library://ns.adobe.com/flex/spark" title="Mobile Test" backgroundColor="#FFFFFF" viewActivate="view1_viewActivateHandler(event)">

                <fx:Script>

                          <![CDATA[

                                    import model.Job;

       

                                    import spark.events.ViewNavigatorEvent;

                                    //AFCBF9

       

                                    protected function view1_viewActivateHandler(event:ViewNavigatorEvent):void

                                    {

                                              if(this.parentDocument.bottomBar.visible == false)

                                              {

                                                        this.parentDocument.bottomBar.visible = true;

                                              }

                                    }

       

                                    protected function createJobButton_clickHandler(event:MouseEvent):void

                                    {

                                              this.parentApplication.job = new Job();

                                              navigator.pushView(CreateJobStep1View);

                                    }

       

                          ]]>

                </fx:Script>

       

                <fx:Declarations>

                          <!-- Place non-visual elements (e.g., services, value objects) here -->

                </fx:Declarations>

       

                <s:VGroup left="10" right="10" top="10" bottom="10">

                          <s:Group id="createJobButton" height="100%" width="100%" click="createJobButton_clickHandler(event)">

                                    <s:Rect left="0" right="0" top="0" bottom="0" radiusX="10">

                                              <s:fill>

                                                        <s:LinearGradient rotation="90">

                                                                  <s:GradientEntry alpha="1.0" color="#006E00" ratio="0"/>

                                                                  <s:GradientEntry alpha="1.0" color="#003700" ratio="1"/>

                                                        </s:LinearGradient>

                                              </s:fill>

                                              <s:stroke>

                                                        <s:SolidColorStroke color="#002600" weight="4"/>

                                              </s:stroke>

                                    </s:Rect>

                                    <s:Label color="#FFFFFF" fontWeight="bold" horizontalCenter="0" styleName="bigLabel"

                                                         text="Set Up a Job" verticalCenter="0"/>

                          </s:Group>

                          <s:Group height="100%" width="100%" click="navigator.pushView(ReportsView)">

                                    <s:Rect left="0" right="0" top="0" bottom="0" radiusX="10">

                                              <s:fill>

                                                        <s:LinearGradient rotation="90">

                                                                  <s:GradientEntry alpha="1.0" color="#BB6000" ratio="0"/>

                                                                  <s:GradientEntry alpha="1.0" color="#BB1400" ratio="1"/>

                                                        </s:LinearGradient>

                                              </s:fill>

                                              <s:stroke>

                                                        <s:SolidColorStroke color="#880100" weight="4"/>

                                              </s:stroke>

                                    </s:Rect>

                                    <s:Label color="#FFFFFF" fontWeight="bold" horizontalCenter="0" styleName="bigLabel"

                                                         text="View Reports" verticalCenter="0"/>

                          </s:Group>

                          <s:Group height="100%" width="100%" click="navigator.pushView(CreateContactsView)">

                                    <s:Rect left="0" right="0" top="0" bottom="0" radiusX="10">

                                              <s:fill>

                                                        <s:LinearGradient rotation="90">

                                                                  <s:GradientEntry alpha="1.0" color="#3160B0" ratio="0"/>

                                                                  <s:GradientEntry alpha="1.0" color="#092160" ratio="1"/>

                                                        </s:LinearGradient>

                                              </s:fill>

                                              <s:stroke>

                                                        <s:SolidColorStroke color="#070040" weight="4"/>

                                              </s:stroke>

                                    </s:Rect>

                                    <s:Label color="#FFFFFF" fontWeight="bold" horizontalCenter="0" styleName="bigLabel"

                                                         text="Create Contacts" verticalCenter="0"/>

                          </s:Group>

                          <s:Group height="100%" width="100%" click="navigator.pushView(BuyCreditsView)">

                                    <s:Rect left="0" right="0" top="0" bottom="0" radiusX="10">

                                              <s:fill>

                                                        <s:LinearGradient rotation="90">

                                                                  <s:GradientEntry alpha="1.0" color="#CC0000" ratio="0"/>

                                                                  <s:GradientEntry alpha="1.0" color="#8D0000" ratio="1"/>

                                                        </s:LinearGradient>

                                              </s:fill>

                                              <s:stroke>

                                                        <s:SolidColorStroke color="#5A0000" weight="4"/>

                                              </s:stroke>

                                    </s:Rect>

                                    <s:Label color="#FFFFFF" fontWeight="bold" horizontalCenter="0" styleName="bigLabel"

                                                         text="Buy Credits" verticalCenter="0"/>

                          </s:Group>

                </s:VGroup>

       

      </s:View>

        • 1. Re: Strange resize upon pushing a view (Flex 4.6 SDK Mobile App)
          DeathByMoose Level 1

          Well, I played around with this a bit more and found what I think is a sorta kludgey fix, but if this is the way it's gotta be, I guess that's okay.  But it seems to me that the view should be resizing it's children on it's own.

           

          Here what I did to "fix" it:

           

          I just added 'minHeight="{this.parent.height - 20}"' to the outer VGroup.

           

           

          Now I just need to go about adding something similar to all of my views.

           

           

           

          Now, I AM using a custom ViewNavigator skin.  Maybe this has something to do with this?  I dunno...   the custom skin is listed below:

           

          <?xml version="1.0" encoding="utf-8"?>

          <s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"

                              xmlns:s="library://ns.adobe.com/flex/spark">

                    <!-- host component -->

                    <fx:Metadata>

                              [HostComponent("spark.components.ViewNavigator")]

                    </fx:Metadata>

           

                    <!-- states -->

                    <s:states>

                              <s:State name="landscapeAndOverlay" />

                              <s:State name="portraitAndOverlay" />

                              <s:State name="landscape" />

                              <s:State name="portrait" />

                              <s:State name="disabled" />

                              <s:State name="normal" />

                    </s:states>

           

                    <!-- SkinParts

                    name=contentGroup, type=spark.components.Group, required=false

                    name=actionBar, type=spark.components.ActionBar, required=false

                    -->

           

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

                              <s:ActionBar id="actionBar" width="100%" visible="false"/>

                              <s:VGroup id="contentGroup" height="100%" width="100%" />

                              <s:Group id="bottomBar" width="100%" height="50" visible="false">

                                        <s:Rect width="100%" height="50">

                                                  <s:fill>

                                                            <s:SolidColor color="#2B4381"/>

                                                  </s:fill>

                                        </s:Rect>

                                        <s:HGroup width="100%" height="100%" horizontalAlign="center" verticalAlign="middle">

                                                  <s:Label text="Credits Remaining:" fontWeight="bold" color="#FFFFFF">

                                                            <s:filters>

                                                                      <s:DropShadowFilter distance="1" alpha=".5" color="#000000"/>

                                                            </s:filters>

                                                  </s:Label>

                                                  <s:Label text="{this.parentDocument.availableCredits}" fontWeight="bold" color="#009CFF">

                                                            <s:filters>

                                                                      <s:DropShadowFilter distance="1" alpha=".5" color="#000000"/>

                                                            </s:filters>

                                                  </s:Label>

                                        </s:HGroup>

                              </s:Group>

                    </s:VGroup>

           

          </s:Skin>

          • 2. Re: Strange resize upon pushing a view (Flex 4.6 SDK Mobile App)
            frank_aq Level 1

            Not going to be a helpful answer but I have noticed some UI layout issues in 4.6. I had a VStack with components inside set to 80 and 20%. Doing this seemed to cause them to bleed off the edge of the screen. Not sure why, as this seemed to work in 4.5