Web browser in Air with flex

Learn how to create your own web browser by using the HTML component in AIR.

Download Source

Screenshot

The HTML component displays full HTML content within your AIR applications. In this tutorial we are going to build our own web browser with an adress bar and forward and back history controls.

1. To get started, create a new Air project named WebBrowser that will also create an mxml file named WebBrowser.mxml. Open it so we can begin to add our code and set the layout of the WindowedApplication to vertical.

2. Insert the following code between the WindowedApplication tags :

<mx:ApplicationControlBar dock="true" fillAlphas="[1.0, 1.0]" 
        fillColors="[#0E0847, #FFFFFF]">
		<mx:Label text="AIR WEB BROWSER" fontWeight="bold" 
                        fontSize="12" color="#990000"/>
		<mx:Label text="Enter URL:"/>
		<mx:TextInput id="urlInput"/>
		<mx:Button label="GO"()" />
		<mx:Spacer width="100%"/>
		<mx:Button label="Back" />
		<mx:Button label="Forward"/>
</mx:ApplicationControlBar>
<mx:HTML id="browser" height="100%" width="100%"/>

This is the base of our code. We have just added the controls and the HTML component.

3. Let’s add the functions. To do so, first add a script tag and declare a variable myURL as a String and set it as [Bindable]. Next create a goToURL function that will change the location of the HTML component. The function will check if the ‘http’ is already in the url that the user has typed and if not will add ‘http’ at the beginning.
The code looks like that:

<mx:Script>
	<![CDATA[
	
          [Bindable]
          private var myURL:String = "http://";
		
	  private function goToUrl():void{
		myURL = urlInput.text;
		if (myURL.substr(0,4) != "http")
       		{
         		myURL = "http://" + myURL;
        	}
		browser.location = myURL;
	 }
	
         ]]>
	</mx:Script>

4. Now we have to call the functions. Bind the text property of the TextInput to the variable myURL that we have declared before. The goToURL function will be called if the user press enter on the textinput or click on the Go button. Finally the functions for the history controls are very simple , we use the historyBack and historyForward methods of the HTML component.
So we have added to our code the following

<mx:TextInput id="urlInput" enter="goToUrl()" text="{myURL}"/>
<mx:Button label="GO" click="goToUrl()" />
<mx:Button label="Back" click="browser.historyBack()" />
<mx:Button label="Forward" click="browser.historyForward()"/>

5. The final code looks like beneath. Run the application to test it.

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
	
	<mx:Script>
		<![CDATA[
		
		[Bindable]
		 private var myUrl:String = "http://";
		
		 private function goToUrl():void{
			myUrl = urlInput.text;
			if (myUrl.substr(0,4) != "http")
       		{
         		myUrl = "http://" + myUrl;
        	}
			browser.location = myUrl;
		}
		 
		]]>
	</mx:Script>
	
	<mx:ApplicationControlBar dock="true" fillAlphas="[1.0, 1.0]" 
                     fillColors="[#0E0847, #FFFFFF]">
		<mx:Label text="AIR WEB BROWSER" fontWeight="bold" 
                       fontSize="12" color="#990000"/>
		<mx:Label text="Enter URL:"/>
		<mx:TextInput id="urlInput" enter="goToUrl()" text="{myUrl}"/>
		<mx:Button label="GO" click="goToUrl()" />
		<mx:Spacer width="100%"/>
		<mx:Button label="Back" click="browser.historyBack()" />
		<mx:Button label="Forward" click="browser.historyForward()"/>   
	</mx:ApplicationControlBar>
	
    <mx:HTML id="browser" height="100%" width="100%"/>
    
</mx:WindowedApplication>

30 thoughts on “Web browser in Air with flex

  1. MIKE

    @Kenzy : Everything is explained in the tut, you can download the source code.
    Just follow the tutorial and it works …

    @Admin : Thanks for all these great tutorials

  2. John

    How can i display pdf documents? i mean the links to pdf documents doesn’t do nothing.

    Thx

    Regards

  3. Kay

    Hi, thanks for tutorial. Do have any idea how to extract content from the HTML component so u can for example display page titles? help…

  4. Pingback: Web browser in Air with flex » Sid Douno

  5. Sid Douno

    @Kenzy: You can’t do this in a Flex application. The HTML component is only available in an AIR applicatio Well as far as I know.

    @Jack: In your mxml, you must not have any whitespace before the xml declaration. It should be the first thing in the .mxml document. Hope I am making sense.

    @Admin: Cool Tutorial. I linked to this page from my blog.

  6. Luis Moura

    Hi guys I love the tutorial and i have the code like the code in the tutorial, but I have a few problems
    when I try to run the application a message appears that says this:
    An Unknown item is declared as the root of your mxml document. Switch to source mode to correct it
    I don’t know what’s going on
    help me please

  7. Ivan

    For all who wants to erase the gray border around de aplications just change de values of

    TO

    just change this part layout=”absolute”>

    and i think you miss something… some people may able yo display a web page when the aplications runs… an not to type it every time

    just change

    <mx:HTML id="browser" height="100%" width="100%"

    To

  8. Ivan

    opps mi comment get mess…

    ok just change layout=”vertical” To layout=”absulute”
    this is for say goodbay to the gray border around the app

    and just add jus right to the end before width=”100%” jus add location=”http://page.com”/>

  9. Pingback: Web browser in Air with flex « GuarniBlog

  10. cheat

    Hi Sir
    I do with your example by sucessful and I continued test it with automation flex 4.0 by simple
    but I can not records and playback all HTML browser controls like (shopping,gamil,web,video,…)
    Please,Could you tell me about resolution and thank you for best example
    Best reguard

  11. Neha

    i need right click effect as same as used in browser…how can we use that in it as it doesnt support it for links and other things…

  12. Indra

    i need to display the web page using Flex 4.5 . i have used StageWebView to do the same. The problem i am having is the webpage is displayed in a rectangle. The rectangle is displayed before the page is loaded.

  13. Sam

    Great tutorial, clears lots of concepts. I’m working behind firewall and need proxy to connect with internet. Can you tell me how to work things through, so I may be able to view things.

    SM

Leave a Reply

Your email address will not be published. Required fields are marked *