asked on

In Flex with actionscript how do I move to top of application space during StateChangeEvent

I have a flex application which often has a height taller than the visible space in the browser window (say 2200 pixels high with a browser window 1000 pixels high). Buttons toward the bottom of the screen use a click handler to change the currentState to a new view. The view changes - but the visible space stays put. I'd like it to jump back to the top of the application.

I can listen for a StateChangeEvent... but have no idea how to move the browser scroll bar back to the top.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal">
  <mx:states>
    <mx:State name="export">
      <mx:AddChild relativeTo="{canvas1}" position="lastChild">
        <mx:Label text="Success!!!" fontSize="22" x="20"/>
      </mx:AddChild>
      <mx:AddChild relativeTo="{canvas1}" position="lastChild">
        <mx:Label text="If you don't see 'Success' you failed..." fontSize="22" x="20" y="1970"/>
      </mx:AddChild>			
    </mx:State>
  </mx:states>
  <mx:Script>
    <![CDATA[
      import mx.events.StateChangeEvent;
      public function handleStateChange(event:StateChangeEvent) :void
      {
        // Code goes here...
      }
      private function initApp():void
      {	
        addEventListener(StateChangeEvent.CURRENT_STATE_CHANGE,handleStateChange);
      }
    ]]>
  </mx:Script>
  <mx:Canvas width="978" height="2500" id="canvas1">
    <mx:Button id="mainNavDash" label="Send me to the top!!!" width="247" height="68" x="20" y="2000" click="currentState='export'"/>
  </mx:Canvas>
</mx:Application>

Open in new window

Jones911

You mean scroll the whole browser window? If so I think your goign to have to use some java script to do it.

bittermonk

ASKER

Jones,
Yea - I figure Javascript is necesary... but still can't seem to find an answer. This code strip adds the event handler using flash.external.ExternalInterface.

In the HTML template I added:

<script language="javascript">
      function toTop() {
       self.scrollTo(0, 0);
      }
</script>

It doesn't work. The script works if I'm not using Flex.

However if I use an alert like this:

<script language="javascript">
      function toTop() {
       alert("message received");
      }
</script>

It will work.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" applicationComplete="initApp()">
  <mx:states>
    <mx:State name="export">
      <mx:AddChild relativeTo="{canvas1}" position="lastChild">
        <mx:Label text="Success!!!" fontSize="22" x="20"/>
      </mx:AddChild>
      <mx:AddChild relativeTo="{canvas1}" position="lastChild">
        <mx:Label text="If you don't see 'Success' you failed..." fontSize="22" x="20" y="1970"/>
      </mx:AddChild>                    
    </mx:State>
  </mx:states>
  <mx:Script>
    <![CDATA[
      import mx.events.StateChangeEvent;
      import mx.collections.ArrayCollection;
      import flash.external.*;
 
      public function handleStateChange(event:StateChangeEvent) :void
      {
			flash.external.ExternalInterface.call("toTop");
      }
      private function initApp():void
      { 
        application.addEventListener(StateChangeEvent.CURRENT_STATE_CHANGE,handleStateChange);
      }
    ]]>
  </mx:Script>
  <mx:Canvas width="978" height="2500" id="canvas1">
    <mx:Button id="mainNavDash" label="Send me to the top!!!" width="247" height="68" x="20" y="2000" click="currentState='export'"/>
  </mx:Canvas>
</mx:Application>

Open in new window

bittermonk

ASKER

I've loaded the app sample that doesn't work here with view source:

http://www.datatramp.com/flex/scrollTest.html

bittermonk

ASKER

Best I can tell with firebug the scroll bar is a flash scroll bar - not HTML... so the answer is not JavaScript.

ASKER CERTIFIED SOLUTION

bittermonk

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Jones911

Nice. Thanks for posting the solution aswell.