Как разместить элемент управления "Список искр" под StageWebView в Flex Mobile

Я разрабатываю мобильное приложение для iOS и Android, используя Flex Mobile. В одном из представлений я отображаю StageWebView с картой Google и элементом управления списком искр для отображения других данных. Я использую StageWebView для того, чтобы использовать Google Maps JavaScript API v3. Пример кода ниже:

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" title="Clubs" backgroundAlpha="0"
    viewActivate="view1_viewActivateHandler(event)"
    backKeyPressed="view1_backKeyPressedHandler(event)"
    initialize="view1_initializeHandler(event)">

<fx:Script>
    <![CDATA[
        import flash.sensors.Geolocation;

        import mx.collections.ArrayCollection;
        import mx.events.FlexEvent;

        import spark.events.ViewNavigatorEvent;
        private var myWebView:StageWebView;
        [Bindable]
        private var locations:ArrayCollection;
        private var geolocation:Geolocation;

        protected function view1_initializeHandler(event:FlexEvent):void
        {
            myWebView = new StageWebView();
            myWebView.stage = this.stage;
        }

        protected function view1_viewActivateHandler(event:ViewNavigatorEvent):void
        {   
            if(Geolocation.isSupported)
            {
                geolocation = new Geolocation();
                geolocation.addEventListener(GeolocationEvent.UPDATE, onGeolocationChange);
            }
        }

        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{

            super.updateDisplayList(unscaledWidth, unscaledHeight);

            if (myWebView) {
                var point:Point = (new Point());
                point = localToGlobal(point);
                myWebView.viewPort = new Rectangle(point.x,point.y, stage.width,stage.height/3);
            }
        }

        protected function view1_backKeyPressedHandler(event:Event):void
        {
            if (myWebView) 
            {
                myWebView.viewPort = null;
                myWebView = null;
            }

            navigator.popView();
        }

        protected function onGeolocationChange(event:GeolocationEvent):void
        {
            geolocation.removeEventListener(GeolocationEvent.UPDATE, onGeolocationChange);

            locations = new ArrayCollection();
            var location0:Object = new Object();
            location0.lat = event.latitude;
            location0.long = event.longitude;
            locations.addItem(location0);
            var location1:Object = new Object();
            location1.lat = "42.697325";
            location1.long = "23.315364";
            locations.addItem(location1);
            var location2:Object = new Object();
            location2.lat = "42.696441";
            location2.long = "23.321028";
            locations.addItem(location2);



            var url:String = "http://whozzzin.dev.mediatecture.at/gmapsformobile/map.php";

            var counter:Number = 1;

            for each(var location:Object in locations)
            {
                if(counter == 1)
                {   
                    url += "?locations["+counter.toString()+"][lat] = " + location.lat;
                    url += "&locations["+counter.toString()+"][long] = " + location.long;
                }
                else
                {
                    url += "&locations["+counter.toString()+"][lat] = " + location.lat;
                    url += "&locations["+counter.toString()+"][long] = " + location.long;
                }
                counter++;
            }

            myWebView.loadURL(url);

        }


    ]]>
</fx:Script>

<s:navigationContent>
    <s:Button includeInLayout="{Capabilities.version.indexOf('IOS') > -1}" visible="{Capabilities.version.indexOf('IOS') > -1}" id="backButton" label="BACK" click="view1_backKeyPressedHandler(event)"/>
</s:navigationContent>

<s:List width="100%" contentBackgroundAlpha="0" id="placesList" dataProvider="{locations}" labelField="lat">
    <s:layout>
        <s:TileLayout columnWidth="{(width - 16)/3}"/>
    </s:layout>
</s:List>

</s:View>

В настоящее время список не виден, потому что он появляется за StageWebView. Мой вопрос заключается в том, как позиционировать элемент управления List точно после WebStageView.

Источник

2 ответа

Решение

Как я это решил:

Я получил основание WebStageView и преобразовал новую точку из глобальной в локальную с x =0 и y = myWebView.bootom:

        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{

            super.updateDisplayList(unscaledWidth, unscaledHeight);

            if (myWebView) {
                var point:Point = (new Point(0,this.radiusDropDown.height));
                point = localToGlobal(point);
                myWebView.viewPort = new Rectangle(point.x,point.y, stage.width,stage.height/3);
                this.placesList.y = globalToLocal(new Point(0,myWebView.viewPort.bottom)).y;

            }
        }
Источник

Вы можете использовать top ограничение:

<s:List width="100%" top="{stage.height/3}" id="placesList"

Изменить: положить в trace(stage.height); в вашем updateDisplayList функция, а также посмотреть на stage.stageHeight, Эти значения должны помочь вам выяснить точное top значение для использования в этом случае.

Источник
Другие вопросы по тегам