Open a web page in a flex mobile app

问题:

I am developing a Flex mobile app, I use the navigateToURL function, It open the web page into the default web browser but I would like to open the web page into the application when I click on the button.

The full code of my app:

     <?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="Test">



<fx:Script>

    import flash.net.URLRequest;
    import flash.net.navigateToURL;
    import flash.display.MovieClip;
    import flash.media.StageWebView;
    import flash.geom.Rectangle;
    import flash.events.KeyboardEvent;
    import flash.ui.Keyboard;
    import flash.desktop.NativeApplication;
    import mx.events.FlexEvent; 
        private var browser:StageWebView;
        protected function onViewCreated(event:FlexEvent):void
        {
            browser = new StageWebView();
            browser.viewPort = new Rectangle(0, 0, 100, 200);
            browser.stage = this.stage;
            browser.loadURL("http://stackoverflow.com");
        }       

        </fx:Script>



<s:Button x="209" y="67" label="test" click="event" />


 </s:View>

回答1:

Take a look at the StageWebView class, it should fit to what you want to do.

Here is a sample code of how I'm using it:

    private var browser:StageWebView;
    protected function onViewCreated(event:FlexEvent):void
    {
        browser = new StageWebView();
        browser.viewPort = new Rectangle(0, 0, 100, 200);
        browser.stage = this.stage;
        browser.addEventListener(Event.COMPLETE, onBrowserLoaded);
        browser.loadURL("http://stackoverflow.com");
    }

In this case the browser is opened at the specified coordinates as soon as the view is created. But you could display it on the click event of your button, or trigger a pop-up or another view that will act as a container.

EDIT: From what you've edited in your first post, you just have to fix the click handler so your code will be called when clicking the button. For the moment it's not. Try the following:

<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    title="Test">


<fx:Script>
    <![CDATA[

import flash.net.URLRequest;
import flash.net.navigateToURL;
import flash.display.MovieClip;
import flash.media.StageWebView;
import flash.geom.Rectangle;
import flash.events.KeyboardEvent;
import flash.ui.Keyboard;
import flash.desktop.NativeApplication;
import mx.events.FlexEvent; 
    private var browser:StageWebView;
    protected function onButtonClicked(event:MouseEvent):void
    {
        browser = new StageWebView();
        browser.viewPort = new Rectangle(0, 0, 100, 200);
        browser.stage = this.stage;
        browser.loadURL("http://stackoverflow.com");
    }       

    ]]>
    </fx:Script>

<s:Button x="209" y="67" label="test" click="onButtonClicked(event)" />

EDIT2: As you requested, you can use another function to close the browser. Assuming you want to do so when clicking a button, it would be something like this:

protected function onButton2Clicked(event:MouseEvent):void
{
    browser.dispose();
}    

And the button declaration (contained in the Navigation button):

<s:actionContent>
    <s:Button label="Close Browser" click="onButton2Clicked(event)" />
</s:actionContent>

If you play around with the actionContent Toolbar, you should find an interesting way to do what you're searching for.

回答2:

Thinks it work well,

<s:navigationContent>
    <s:Button  click="onButtonCClicked(event)"  icon="@Embed('logo3/back3.png')"/>
</s:navigationContent>

<fx:Script>
    <![CDATA[



import flash.net.URLRequest;
            import flash.net.navigateToURL;
            import flash.display.MovieClip;
            import flash.media.StageWebView;
            import flash.geom.Rectangle;
            import flash.events.KeyboardEvent;
            import flash.ui.Keyboard;
            import flash.desktop.NativeApplication;
            import mx.events.FlexEvent; 
            import flash.display.MovieClip; 
            import flash.media.StageWebView; 
            import flash.geom.Rectangle; 

            private var browser:StageWebView;
            protected function onButtonClicked(event:MouseEvent):void
            {
                browser = new StageWebView();
                browser.viewPort = new Rectangle(0, 70, 500, 400);
                browser.stage = this.stage;
                browser.loadURL("http://stackoverflow.com");
            }  

            protected function onButtonCClicked(event:MouseEvent):void
            {
                browser.dispose();
                navigator.pushView(menu)
            }   
            protected function onButtonRClicked(event:MouseEvent):void
            {
                browser.reload();

            }  







        ]]>
</fx:Script>
<s:Button x="209" y="67" label="test" click="onButtonClicked(event)" />