Adobe Flex Mobile Stage size

Question

How would I go about finding the display size and position of the stage or navigator area in Adobe Flex mobile? I would like to be able to make something the exact width and height (without using 100% w&h). And position the top at the top of the stage. I'm sure this description isn't the easiest to understand, so hopefully this image will help:

Application Layout

        protected function init(event:FlexEvent):void
        {
            if (NativeMaps.isSupported){
                NativeMaps.service.addEventListener(Event.ACTIVATE, mapReady2);
                //NativeMaps.service.addEventListener(NativeMapEvent.MAP_CREATED, mapReady);                    
                try{
                    NativeMaps.service.mapOptions.compassEnabled=true;
                    NativeMaps.service.mapOptions.zoomControlsEnabled = true;
                    NativeMaps.service.mapOptions.zoomGesturesEnabled = true;
                    NativeMaps.service.mapOptions.rotateGesturesEnabled = true;
                    NativeMaps.service.mapOptions.myLocationButtonEnabled = true;
                }catch(e:Error){
                }
                var tla:ViewNavigatorApplication=FlexGlobals.topLevelApplication as ViewNavigatorApplication;                   
                var width:Number = tla.width;
                var height:Number = tla.height-tla.actionBar.height;
                var x:Number = 0;
                var y:Number = tla.actionBar.height;

                NativeMaps.service.createMap(width,height,x,y);
            }
        }

I'm confused.. do you want the stage or the navigator? To get the stage; you can use the height and width of the top level application; and to put something at the top of the stage; set the x value to zero. To set something at the top left of the stage, set the y value to zero too. Can you share some code and/or be more specific? — JeffryHouser
I was afraid I was being a little confusing when writing that. Does the stage include the navigation bar? I am wanting the area directly below the navigation bar. I am using a distriqt ANE that displays a native map. When creating the map, you specify the width, height, x & y. If you do stage.width, stage.height, 0,0, it covers up the navigation bar. I would like it to display directly below the nav bar. — jay
Everything that is visual is on the stage; so technically the stage includes the nav bar. However, it is probably more accurate to say the stage contains the Application and the Application contains the navigation bar. Sounds like you want the size of the Application, minus the navigation bar. Which Application component are you using? — JeffryHouser
Yes, that sounds exactly like what I am wanting to do. I wanting to embed the NativeMap into my ViewNavigatorApplication. — jay

JeffryHouser JeffryHouser · Accepted Answer · 2013-10-11T16:41:42

I think this is what you need:

var tla :ViewNavigatorApplication = FlexGlobals.topLevelApplication as ViewNavigatorApplication;
var width :Number = tla.width;
var height :Number = tla.height=tla.actionBar.height;
var x :Number = 0;
var y :Number = tla.actionBar.height;

Then size your component using the width and height and position it using the x and y values. I wrote this in the browser, so expect typos in code. There may be some padding issues that make the sizes / positioning slightly off but you'll have to try it and see what you get.

Adobe Flex Mobile Stage size

1 Answers