How to change the spark Application width and height in FLEX?

Question

this is how I change the Application width and height:

 FlexGlobals.topLevelApplication.width = FlexGlobals.topLevelApplication.parameters.width;
 FlexGlobals.topLevelApplication.height = FlexGlobals.topLevelApplication.parameters.height;

I'am trying to change the width and height of the spark Application:

<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009"    
    xmlns:mx="library://ns.adobe.com/flex/mx"     
    xmlns:s="library://ns.adobe.com/flex/spark"
width="100" height="100">

as if I was specified it here in code, I'am passing it from html flashvars, but the width and height of application doesn't change, what is wrong?

Doesn't the application always extend the full height width of the stage; which is set by the web browser when you embed the SWF into the page? — JeffryHouser

Raja Jaganathan Raja Jaganathan · Accepted Answer · 2014-01-30T07:45:03

Hope this will help you.

You need to find index.template.html file under history-template folder in your flex project(flashbuilder). Add following javascript code in index.template.html file after swfobject.js script tag.You can directly pass height and width javascript itself.

Javascript code

        function getFlexApp(appName) {
          if (navigator.appName.indexOf ("Microsoft") !=-1) {
            return window[appName];
          } else {
            return document[appName];
            }
        }


        var appName = "${application}";            
        var flexAppHeight = "150px"; //Your customize height
        var flexAppWidth = "200px";  //Your customize width          

        function changeDimension(){           
            var app = getFlexApp(appName);              
            app.style.height = flexAppHeight;
            app.style.width = flexAppWidth;
        }

Flex Code

Call application1_preinitializeHandler(event) in application preinitilize event.

         protected function application1_preinitializeHandler(event:FlexEvent):void
            {               
                if(ExternalInterface.available) 
                {     
                    ExternalInterface.call("changeDimension"); 
                }           
            }

Also make sure your js function code available in your HTML Markup(view source). Flex calls also options(No need your case) and you can directly set height and width itself in Javascript and even better you do in HTML as well.

Just call after changeDimension() function declaration.

changeDimension(); //No need to call from Flex.

How to change the spark Application width and height in FLEX?

1 Answers