Open Webpage in Adobe Flex Desktop Application

Question

We are developing a small desktop application by using Adobe Flex. In this application, we will have a screen with input box in which user will enter URL of any website and then enter.

After providing URL, the desktop application will open that webpage into the same screen just below the URL input box. Also we want to give an option to capture screenshot of that opened webpage manually(ie on button click).

When the webpage is open in desktop app, then our screen should be work like browser ie we can go to any internal page by clicking webpage instead of providing another URL into input box.

We have searched lot of things regarding the same, but nothing got. Can anyone explain us, how can we implement this type of functionality into our desktop application? or Is it possible to make this application using Adobe Flex?

Your solution will be appreciated. Thanks in advance.

Answer 1

You can do that using the HTML control .

Take this example :

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
                       xmlns:s="library://ns.adobe.com/flex/spark"
                       xmlns:mx="library://ns.adobe.com/flex/mx"
                       width="920" height="580">

    <fx:Script>
        <![CDATA[

            protected function btn_history_back_clickHandler(event:MouseEvent):void
            {           
                // history back
                html_browser.historyBack();             
            }
            protected function btn_history_forward_clickHandler(event:MouseEvent):void
            {               
                // history forward
                html_browser.historyForward()
            }

            protected function btn_go_clickHandler(event:MouseEvent):void
            {
                var url:String = txt_url.text;              
                if(url != '')
                {   
                    if(url.substr(0, 4) == 'http')
                    {
                        // open the typed url
                        html_browser.location = url;
                    }                   
                }
            }

            protected function html_browser_locationChangeHandler(event:Event):void
            {
                // update our url text input
                txt_url.text = html_browser.location;
            }

        ]]>
    </fx:Script>

    <mx:HTML id="html_browser" x="6" y="39" width="905" height="511"
             locationChange="html_browser_locationChangeHandler(event)"/>
    <s:Button id="btn_forward" x="38" y="10" width="28" label="&gt;" click="btn_history_forward_clickHandler(event)"/>
    <s:Button id="btn_go" x="858" y="10" width="50" label="GO" click="btn_go_clickHandler(event)"
              enabled="true"/>
    <s:TextInput id="txt_url" x="74" y="10" width="775"/>
    <s:Button id="btn_back" x="10" y="10" width="28" label="&lt;" click="btn_history_back_clickHandler(event)"/>
</s:WindowedApplication>

Which will give you something like this ( it's the same window just I pressed the back button to show the different pages ) :

Of course this is just a very simple example to show you how to start, you can improve and adapt it to your specific needs.

Hope that can help.