Embedding Browser into Flex 3

Posted by beThinker | Posted in Flex | Posted on 03-06-2009

Air Application
This tutorial teaches you how to create Adobe Air(Adobe Integrated Runtime) Desktop application using Flex Builder 3. The Air Engine include integrated web browser kernel that is base on the web kit kernel same with Safari browser.The example below show you how to embed a browser into Adobe Flex 3.

First thing first, you must have Adobe Flex Builder 3 and Adobe AIR in your system. If you don’t have one click this link www.adobe.com.

Now, Create new MXML project File>New or shortcut key ALT+SHIFT+N (windows) then chose Flex Project. And type project name, I use HtmlWindow then in Application type chose Desktop application (runs in Adobe AIR) and then click finish. You’ll see a code in your window just like below:

1
2
3
4
5
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">


</mx:WindowedApplication>


Then insert this code:

1
<mx:HTML id="myBrowser" width="100%" height="100%" location="http://www.bethinkerconcepts.com" />


The HTML control lets you display HTML content in your application, width and height is the size of your application, location property to specify the URL of an HTML page whose content is displayed in the control.

Now, the code should look like this:

1
2
3
4
5
6
7
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">

<mx:HTML id="myBrowser" width="100%" height="100%"
location="http://www.bethinkerconcepts.com" />

</mx:WindowedApplication>


Now lets test your application by pressing Run HTML button or go to RUN->RUN HTML or shorcut key CTRL+F11.

Next will add some navigation button, so that you can input url and also have a forward and back button. Ok now above HTML tag put a Horizontal Box. Inside that HBox tag, you’ll to have Label, TextInput and 3 buttons which is Go, Forward and Back. Your code should look like this:

For Label tag:

1
<mx:Label text="ex:(http://www.google.com)url:" fontSize="12"/>


For textInput tag which have an id and called myText:

1
<mx:TextInput id="myText"/>


For 1st button which is label “Go There” and click attributes, location property will change the value of the control’s.

1
<mx:Button label="Go There" fontSize="14" click="myBrowser.location=myText.text"/>


For 2nd & 3rd button which is label “Forward” and click attribute with historyForward() and historyBack() methods.

1
2
<mx:Button label="Forward" click="myBrowser.historyForward()"/>
<mx:Button label="Back" click="myBrowser.historyBack()"/>


Your code now should look like this:

1
2
3
4
5
6
7
8
9
10
11
12
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<mx:HBox>
    <mx:Label text="ex:(http://www.google.com)url:" fontSize="12"/>
    <mx:TextInput id="myText"/>
    <mx:Button label="Go There" fontSize="14" click="myBrowser.location=myText.text"/>
    <mx:Button label="Forward" click="myBrowser.historyForward()"/>
    <mx:Button label="Back" click="myBrowser.historyBack()"/>
</mx:HBox>
    <mx:HTML id="myBrowser" width="100%" height="100%"
       location="http://www.focusoutsourcing.com" />      
</mx:WindowedApplication>


That’s it! Test again. I hope this tutorial is helpful to someone. Download the source file.

Sponsored Links
No Comments

Write a Comment