AIR - StageWebView на iPhone - PullRequest
Новая
       23

AIR - StageWebView на iPhone

1 голос
/ 20 июля 2011

Я использую Flash Builder 4.5 для создания приложения для iPhone.

Для показа рекламы я планирую использовать StageWebView и загрузить веб-страницу с рекламным кодом.

Допустим, объявление будет 320х50 пикселей. Таким образом, код Actionscript будет выглядеть примерно так: 

adView = new StageWebView();
adView.loadURL("http://www.myadishere.com/ad.html");
var top:Number = navigator.actionBar.measuredHeight + 1
adView.viewPort = new Rectangle(0, top, 320, 50);
adView.stage = stage;

В приложении я установил applicationDPI = "160" , чтобы приложение правильно отображалось при запуске на iPhone3 и iPhone4. Однако содержание StageWebView выглядит крошечным на iPhone4. Если я сделаю adView.drawViewPortToBitmapData () размер растрового изображения в порядке.

Итак, вопрос в том, как сделать так, чтобы содержимое StageWebView масштабировалось соответствующим образом, чтобы оно выглядело нормально независимо от разрешения экрана?

Ответы [ 5 ]

4 голосов
/ 18 августа 2011 
 You need to scale by yourself. Here is sample code.


<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" width="100%" height="100%" top="0">
    <fx:Declarations>
    </fx:Declarations>
    <fx:Script>
        <![CDATA[
            import mx.core.FlexGlobals;
            import mx.core.IVisualElement;
            import mx.events.FlexEvent;

            import spark.components.View;
            import spark.events.ViewNavigatorEvent;

            [Bindable]
            public var htmlText:String;
            public var url:String;
            private var swv:StageWebView;
            private function resizeSWV():void{
                var currentFlexScalingFactor:Number=FlexGlobals.topLevelApplication.runtimeDPI/FlexGlobals.topLevelApplication.applicationDPI;
                if(swv!=null){

    //swv.viewPort=new Rectangle(0, stage.stageHeight-height*currentFlexScalingFactor-FlexGlobals.topLevelApplication.tabbedNavigator.tabBar.height*currentFlexScalingFactor,width*currentFlexScalingFactor,height*currentFlexScalingFactor);

    swv.viewPort=new Rectangle(0, systemManager.screen.height*currentFlexScalingFactor-height*currentFlexScalingFactor-FlexGlobals.topLevelApplication.tabbedNavigator.tabBar.height*currentFlexScalingFactor,width*currentFlexScalingFactor,height*currentFlexScalingFactor);

                }
            }

        ]]>
    </fx:Script>
    <s:creationComplete>
        <![CDATA[
        swv=new StageWebView();
        resizeSWV();
        swv.stage=stage;


        var htmlString:String=htmlText;
        var urlL:String=url;

        swv.loadURL(url);
        (owner as View).addEventListener(ViewNavigatorEvent.REMOVING,
        function(event:ViewNavigatorEvent):void{
            swv.viewPort=null;
            swv.dispose();
            swv=null;
        }
        );
        ]]>
    </s:creationComplete>
    <s:resize>
        resizeSWV();
    </s:resize>
</s:Group>

 This is for TabbedViewNavigatorApplication.
2 голосов
/ 22 июля 2011

Попробуйте добавить следующий код в ваш HTML-код в разделе <head>: 

<meta name="viewport" content="width=XXXpx, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

Замените «XXX» на ваш баннер / ширину StageWebView.Это должно заставить изображение появиться с размером, который вы намереваетесь.

0 голосов
/ 23 мая 2012

Вот как я это делаю: 

<?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" 
viewActivate="openSWV(event)"
viewDeactivate="closeSWV(event)">

    <s:states>
        <s:State name="portrait"/>
        <s:State name="landscape"/>
    </s:states> 

    <s:navigationContent>
        <s:Button icon="@Embed('assets/icons/back.png')" label.landscape="Back" click="navigator.popView()"/>
    </s:navigationContent>

    <s:titleContent>
        <s:Label text="Help" color="#FFFFFF" textAlign="center" fontWeight="bold" width="100%" />
    </s:titleContent>

    <fx:Declarations>
        <fx:String id="_help">
            <![CDATA[
            <html>
            <body>
            <p>Blah blah blah</p>
            </body>
            </html>
            ]]>
        </fx:String>
    </fx:Declarations>

    <fx:Script>
        <![CDATA[
            import mx.core.FlexGlobals;
            import mx.events.FlexEvent;
            import flash.media.StageWebView;

            private var _swv:StageWebView;

            private function openSWV(event:Event=null):void {
                _swv = new StageWebView();
                stage.addEventListener(Event.RESIZE, resizeSWV);

                _swv.stage = stage;
                resizeSWV();

                _swv.loadString(_help, 'text/html');
            }

            private function closeSWV(event:Event=null):void {
                stage.removeEventListener(Event.RESIZE, resizeSWV);
                if (! _swv)
                    return;
                _swv.dispose();
                _swv = null;
            }           

            private function resizeSWV(event:Event=null):void {
                if (! _swv)
                    return;

                var scale:Number = FlexGlobals.topLevelApplication.runtimeDPI / FlexGlobals.topLevelApplication.applicationDPI;

                // align to the right-bottom corner
                _swv.viewPort = new Rectangle(stage.stageWidth - scale * width, stage.stageHeight - scale * height, scale * width, scale * height);

            }
        ]]>
    </fx:Script>
</s:View>

Я выравниваюсь по правому нижнему углу, потому что я использую SplitViewNavigator .

Если вы просто хотитедля выравнивания по дну, просто используйте: 

_swv.viewPort = new Rectangle(0, stage.stageHeight - scale * height, scale * width, scale * height);
0 голосов
/ 01 августа 2011

@ OMA Я думаю, что StageWebView немного глючит. Когда (в HTML) я ставлю: 

<meta name="viewport" content="initial-scale=x.x">

приложение iPhone падает. Любое «...- масштабирование» приводит к сбою приложения. Без инструкции «...- шкала» работает нормально.

Код, который у меня есть на данный момент: 

<meta name="viewport" content="width=320px, height=50px, user-scalable=no"> 
<style type="text/css">

body, html {margin: 0 0; padding: 0 0; overflow: hidden;}
body {width: 320px; height: 50px;}
html {height: 50px;}

Это отчасти работает - ADL показывает контент в неправильном размере, однако в большинстве случаев iPhone показывает рекламу так, как должно быть. Однако иногда объявление показывается в половинном размере - не знаю почему - это точно такая же HTML-страница и все время один и тот же код AS, однако способ показа объявления меняется

0 голосов
/ 20 июля 2011

Во-первых, зачем вам нужно устанавливать DPI вручную?Проблема в том, что DPI iphone 4 намного выше, чем 160 (я думаю, что это вдвое больше, но не верьте мне на слово).Почему бы просто не изменить размер приложения в зависимости от относительного значения (в процентах) или даже изменить его расположение в зависимости от разрешения.Вы всегда можете проверить Capabilities.pixelAspectRatio, чтобы увидеть, что такое dpi, и соответственно изменить положение.

Опять же, если бы это был я, я использовал бы проценты для большинства вещей.Размер меняется лучше, а кода в целом меньше.

...