1

I am trying to dynamically change the positioning of the Components on my app. Is there a way I can invoke a resize eventlistener every time the user changes the size of his/her browser window?

Bash
  • 23
  • 2

3 Answers3

1

Yes, add BrowserResizeHandler as a bead to the application, and listen to 'sizeChanged' on the initialView.

Something like this pseudo-code (not tested):

<js:Application applicationComplete="{myView.addEventListener("sizeChanged", sizeChangedHandler)}>
<js:beads>
<js:BrowserResizeHandler/>
</js:beads>
 <initialView>
   <MyView id="myView/>
 </initialView>
</js:Application>
yishayw
  • 151
  • 2
  • Thanks for the answer. It helped come up with a solution. I replied to this Question with the approach I used. – Bash Sep 28 '19 at 19:13
0

I was not sure how to make the bead work. Was having issues finding the correct one. However, I used the following approach to invoke the resizing:

<js:Application applicationComplete="initiateApplication(event)">   
      <fx:Script>
        <![CDATA[
        protected function initiateApplication(event:Event):void{
                    window.addEventListener("resize", resizeApp);
        }
        protected function resizeApp():void{
                    trace(this.height=document.documentElement.clientHeight)
                    trace(this.width=document.documentElement.clientWidth)
        }
    ]]>
    </fx:Script>
</js:Application>

If anyone has used another approach, please share.

Bash
  • 23
  • 2
  • For a different approach (expanding on my initial answer), see https://stackoverflow.com/questions/58525420/issue-on-resize-event-with-apache-royale-sdk-0-9-6 – yishayw Oct 28 '19 at 07:16
0

To expand on https://stackoverflow.com/users/11577184/yishayw's answer: The BrowserResizeHandler bead dispatches a sizeChanged event from the view when the app changes size, so something like this should help:

<js:Application applicationComplete="onComplete()">
  <fx:Script>
    <![CDATA[
      protected function onComplete():void{
        myView.addEventListener("sizeChanged", handleResize);
      }
      protected function handleResize():void{
        // do something with the new size...
        trace(this.height)
        trace(this.width)
      }
    ]]>
  </fx:Script>
  <js:beads>
    <js:BrowserResizeHandler/>
  </js:beads>
  <initialView>
    <MyView id="myView/>
  </initialView>
</js:Application>

If your view is in a separate MXML file, the code which handles the resize would go there, instead of the main application mxml file.

I'd recommend checking out the various flavors of Flex layout beads, because I've found that makes resize handlers mostly unnecessary.

Harbs
  • 106
  • 5