Saturday, May 14, 2011

HTML in AIR: Part 4

Today we will create a scrollbar for our HTMLLoader object.

We will, in fact, create two scrollbars - a horizontal one, and a vertical one.

Let's start by creating our HTMLLoader object.

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/"));

The number 16 is the thickness of our scrollbar. This is the default value, we can't change the scroll bar's thickness from 16.

To make the scrollbars work as we want them to, we need to tell them some information about the content. This includes the width and height of the content. Now, we have the height and width property of the HTMLLoader object, but that is not the same as the width and height of the content. For this, we have contentWidth and contentHeight properties.

However, they only become available after the content has fully loaded. We can listen to that event using Event.COMPLETE listener.

myHtml.addEventListener(Event.COMPLETE, onComplete);

The user is able to scroll the html content using his mouse wheel and keyboard as well, so we need to update the scrollbars when he does that. We can listen to the Event.SCROLL event to know when to update.

myHtml.addEventListener(Event.SCROLL, onScroll);

Now, we need to create two scroll bars. We'll use the ScrollBar class. Note, that if you are using Flash IDE, you'll have to take the UIScrollBar component from the components menu and put it into your current project's library.

When creating the scroll bars, we need to specify direction, coordinates and add a listener for the scroll bar. We'll listen for the Event.SCROLL event, which we will later use to scroll the content in the HTMLLoader.

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

This was the vertical scroll bar. Now for the horizontal one.

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

Now, the onComplete function. We need to set the scrollH and scrollV properties of our HTMLLoader to 0, and then set scroll properties for the scroll bar. These properties include the total width/height of the scroll bar, the current position of the bar that we drag, and how much of the content is not viewed right now.

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

The onScroll function, as said before, should update the scrollbars scroll position when the content is scrolled by something else than the scroll bar.

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

The scrV and scrH functions are used to simply update the scrollV and scrollH properties of the HTMLLoader object.

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

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

And the full code:

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

Thanks for reading!

Related:

HTML in AIR: Part 1
HTML in AIR: Part 2
HTML in AIR: Part 3
HTML in AIR: Part 5
HTML in AIR: Part 6
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