Monday, May 16, 2011

HTML in AIR: Part 6

In this tutorial we'll learn about using history with our HTMLLoader object and add an address bar.

When you are using your web browser, you probably often use the 'back' and 'forward' buttons to get to the pages you've already visited. You most likely use the address bar a lot too.

Today, we will learn how to add these features to your AIR application. In the end, we'll have a simple functioning web browser made completely in AIR.

Let's go!

We will start with the code that we already have from one of the previous tutorials - the one where we've made custom scrollbars. Here is the code copy-pasted from the end of that tutorial:

import flash.html.HTMLLoader;
import flash.net.URLRequest;
import fl.controls.ScrollBarDirection;
import fl.controls.ScrollBar;
import flash.events.Event;

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

var scrollBarV:ScrollBar = new ScrollBar();
scrollBarV.direction = "vertical";
scrollBarV.x = stage.stageWidth - 16;
scrollBarV.height = stage.stageHeight - 16;
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;
}

This is where we will start moving from. Well, first of all, we need to lower the whole construction a little bit lower, to get enough space to put our back/forward buttons and the address bat on.

We'll introduce a new variable called topSpace which contains the height of the space in the head of the window.

If you are using Flash IDE like me, you can draw and decorate the bar with that height on stage. If you are not, you can do that with code. In this example, I just put two square buttons, an input text field and a "go" button near the address bar.

The objects are called b_back, b_forward, t_address, b_go.

We can use the methods historyBack() and historyForward() to navigate forward and back of our history journal.

Here's what the code looks like in the end:

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 flash.display.SimpleButton;

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));});

Now we have an application where we can surf the web and even have back and forward buttons to move around our history. We also have an address bar, which we can use to directly go to an url. However, it doesn't update once we, for example, follow a link on a site.

We'll improve the application later, when we learn more about HTML history.

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 7
HTML in AIR: Part 8
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