Thursday, May 19, 2011

HTML in AIR: Part 8

Today we will continue making our AIR browser application. We will add a history list, and improve our address bar.

In this tutorial we are starting with the code that we've got from one of the previous tutorials in the HTML in AIR tutorial series.

First of all, add a ComboBox object to the stage, call it historyList. This is where our browser history will be stored in!

Let's create a function that updates our history list. From what we know from the previous tutorial, we should be able to find out the title and url of the items in our history. We can pass them to the combobox as label and data:

function updateHistoryList():void
{
historyList.dataProvider = new DataProvider();

for (var i:int=myHtml.historyLength-1; i>=0; i--)
{
historyList.addItem({label:myHtml.getHistoryAt(i).title, data:myHtml.getHistoryAt(i).url});
}
}

updateHistoryList();

Now, we have called this function on start, but that's not enough. We want it to update every time we visit a new page. We also want the text in our address bar to update every time we visit a new page.

We can listen to the Event.LOCATION_CHANGE event for that:

myHtml.addEventListener(Event.LOCATION_CHANGE, changeLocation);

function changeLocation(Event):void
{
t_address.text = myHtml.location;
updateHistoryList();
}

Now the list updates and so does the address bar, but we need the list to be interactive. If we click on an item - we need to send the user to that page's url. Because we've stored the url in the combobox item's data, we can easily read it from there and send the user to that page using the load() method:

historyList.addEventListener(Event.CHANGE, listChange);

function listChange(evt:Event):void
{
myHtml.load(new URLRequest(evt.target.selectedItem.data));
}

And here's the final code:

import flash.html.HTMLLoader;
import flash.net.URLRequest;
import fl.controls.ScrollBarDirection;
import fl.controls.ScrollBar;
import flash.events.Event;
import flash.events.MouseEvent;
import fl.data.DataProvider;
import fl.controls.ComboBox;

var topSpace:int = 50;

var myHtml:HTMLLoader = new HTMLLoader();
addChild(myHtml);
myHtml.y +=  topSpace;
myHtml.width = stage.stageWidth - 16;
myHtml.height = stage.stageHeight - 16 - topSpace;
myHtml.load(new URLRequest("http://www.google.com/"));
t_address.text = "http://www.google.com/";
myHtml.addEventListener(Event.COMPLETE, onComplete);
myHtml.addEventListener(Event.SCROLL, onScroll);

var scrollBarV:ScrollBar = new ScrollBar();
scrollBarV.direction = "vertical";
scrollBarV.y = topSpace;
scrollBarV.x = stage.stageWidth - 16;
scrollBarV.height = stage.stageHeight - 16 - topSpace;
scrollBarV.addEventListener(Event.SCROLL, scrV);
addChild(scrollBarV);

var scrollBarH:ScrollBar = new ScrollBar();
scrollBarH.direction = "horizontal";
scrollBarH.y = stage.stageHeight - 16;
scrollBarH.width = stage.stageWidth - 16;
scrollBarH.addEventListener(Event.SCROLL, scrH);
addChild(scrollBarH);

function onComplete(Event):void
{
myHtml.scrollH = 0;
myHtml.scrollV = 0;
scrollBarV.setScrollProperties(myHtml.height, 0, myHtml.contentHeight - myHtml.height);
scrollBarH.setScrollProperties(myHtml.width, 0, myHtml.contentWidth - myHtml.width);
}

function onScroll(Event):void
{
scrollBarV.scrollPosition = myHtml.scrollV;
scrollBarH.scrollPosition = myHtml.scrollH;
}

function scrV(Event):void
{
myHtml.scrollV = scrollBarV.scrollPosition;
}

function scrH(Event):void
{
myHtml.scrollH = scrollBarH.scrollPosition;
}

b_back.addEventListener(MouseEvent.CLICK, function(){myHtml.historyBack()});
b_forward.addEventListener(MouseEvent.CLICK, function(){myHtml.historyForward()});
b_go.addEventListener(MouseEvent.CLICK, function(){myHtml.load(new URLRequest(t_address.text));});

function updateHistoryList():void
{
historyList.dataProvider = new DataProvider();

for (var i:int=myHtml.historyLength-1; i>=0; i--)
{
historyList.addItem({label:myHtml.getHistoryAt(i).title, data:myHtml.getHistoryAt(i).url});
}
}

updateHistoryList();

myHtml.addEventListener(Event.LOCATION_CHANGE, changeLocation);

function changeLocation(Event):void
{
t_address.text = myHtml.location;
updateHistoryList();
}

historyList.addEventListener(Event.CHANGE, listChange);

function listChange(evt:Event):void
{
myHtml.load(new URLRequest(evt.target.selectedItem.data));
}

Thanks for reading!

Related:

HTML in AIR: Part 1
HTML in AIR: Part 2
HTML in AIR: Part 3
HTML in AIR: Part 4
HTML in AIR: Part 5
HTML in AIR: Part 6
HTML in AIR: Part 7
HTML in AIR: Part 9
HTML in AIR: Part 10
HTML in AIR: Part 11
HTML in AIR: Part 12
HTML in AIR: Part 13
HTML in AIR: Part 14
HTML in AIR: Part 15
HTML in AIR: Part 16
HTML in AIR: Part 17

No comments:

Post a Comment