Web browser in Air with flex
March 24th, 2009 in Air, Flex | 19 CommentsLearn how to create your own web browser by using the HTML component in AIR.
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>
Mar 26th, 2009
Thanks man ! Great tutorial !
Jun 5th, 2009
very cool – thanks!
Jun 19th, 2009
How can you do this within a Flex application?
Jun 19th, 2009
@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
Jun 24th, 2009
How can I remove this gray margin/border around my browser?
Jun 24th, 2009
Great tutorial! Thx a lot.
Jul 7th, 2009
cool
Aug 18th, 2009
How can i display pdf documents? i mean the links to pdf documents doesn’t do nothing.
Thx
Regards
Aug 26th, 2009
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…
Oct 10th, 2009
Didn’t work for me: Whitespace is not allowed before XML Processing Instructon.
Dec 2nd, 2009
ya its really cool
Dec 16th, 2009
Thank you, exactly the tut I’m looking for…
Dec 18th, 2009
[...] View Tutorial December 18, 2009 | Tags: Flex 3, HTML component| No Comments » [...]
Dec 18th, 2009
@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.
Mar 15th, 2010
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
Apr 30th, 2010
I know i’m a little late but GREAT works Man You ROCK
Jul 9th, 2010
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
Jul 9th, 2010
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”/>
Jul 16th, 2010
Hi. How to restrict user from accessing certain website?