使用HTMLLoader制作简单的网页浏览器

HTMLControl class使用起来没Flex HTML控件那么方便，但更轻量灵活。下面的实例就使用这个类制作一个简单的网页浏览器。

HTMLControl class是DisplayObject的类，我们可以像其它DisplayObject实例一样将其添加到显示列表中。我们可以使用load()方法将指定的站点中的数据加载HTMLLoader对象中。与Flex HTML控件一样，可以使用historyBack()方法在此控件的历史记录列表中向后导航，historyForward()方法在此控件的历史记录列表中向前导航。

首先，创建UI，在Flash CS3的舞台中放置按钮backBtn、按钮forwardBtn、输入文本urlInput和按钮goBtn，并设置相应的宽度。在库中添加UIScrollBar组件。

新建文档类AIRWebBrowser，添加下面的代码：

package {
	import flash.events.KeyboardEvent;
	import flash.events.MouseEvent;
	import flash.events.Event;
	import flash.display.Sprite;
	import fl.events.ScrollEvent;
	import flash.html.HTMLLoader;
	import fl.controls.ScrollBar;
	import flash.display.StageScaleMode;
	import flash.display.StageAlign;
	import flash.net.URLRequest;
	import flash.ui.Keyboard;

	public class AIRWebBrowser extends Sprite {

		private var htmlLoader:HTMLLoader;
		private var vScrollBar:ScrollBar;
		private var hScrollBar:ScrollBar;

		public function AIRWebBrowser() {
			stage.scaleMode = StageScaleMode.NO_SCALE;
			stage.align = StageAlign.TOP_LEFT;
			seupUI();
			seupEvent();
		}

		private function seupUI():void {
			htmlLoader = new HTMLLoader();
			htmlLoader.x = 10;
			htmlLoader.y = 45;
			htmlLoader.width = stage.stageWidth - 40;
			htmlLoader.height = stage.stageHeight - 100;
			addChild( htmlLoader );

			vScrollBar = new ScrollBar();
			vScrollBar.direction = "vertical";
			vScrollBar.x = htmlLoader.x + htmlLoader.width;
			vScrollBar.y = htmlLoader.y;
			vScrollBar.height = htmlLoader.height;
			vScrollBar.lineScrollSize = 15;
			vScrollBar.pageSize = htmlLoader.height;

			hScrollBar= new ScrollBar();
			hScrollBar.direction = "horizontal";
			hScrollBar.x = htmlLoader.x;
			hScrollBar.y = htmlLoader.y + htmlLoader.height;
			hScrollBar.width = htmlLoader.width;
			hScrollBar.lineScrollSize = 15;
			hScrollBar.pageSize = htmlLoader.width;
		}

		private function seupEvent():void {
			stage.addEventListener(KeyboardEvent.KEY_DOWN, keydownHandler);
			goBtn.addEventListener( MouseEvent.CLICK, goClickHandler);
			htmlLoader.addEventListener(Event.HTML_DOM_INITIALIZE, domInitHandler);
			htmlLoader.addEventListener(Event.HTML_RENDER, renderHandler);
			htmlLoader.addEventListener(Event.COMPLETE, loadCompleteHandler);
			backBtn.addEventListener(MouseEvent.CLICK, goBackHandler);
			forwardBtn.addEventListener(MouseEvent.CLICK, goForwardHandler);
			vScrollBar.addEventListener(ScrollEvent.SCROLL, vScrollHandler);
			hScrollBar.addEventListener(ScrollEvent.SCROLL, hScrollHandler);
		}

		private function keydownHandler(event:KeyboardEvent):void {
			if (event.keyCode == Keyboard.ENTER) {
				goURL();
			}
		}

		private function goClickHandler(event:MouseEvent):void {
			goURL();
		}

		private function domInitHandler(event:Event):void {
			updateHTMLHistory();
		}

		private function renderHandler(event:Event):void {
			updateScrollBars();
		}

		private function loadCompleteHandler(event:Event):void {
			updateTitle();
			addChild(vScrollBar);
			addChild(hScrollBar);
		}

		private function goBackHandler(event:MouseEvent):void {
			htmlLoader.historyBack();
		}

		private function goForwardHandler(event:MouseEvent):void {
			htmlLoader.historyForward();
		}

		private function vScrollHandler(event:ScrollEvent):void {
			htmlLoader.scrollV = event.position;
		}

		private function hScrollHandler(event:ScrollEvent):void {
			htmlLoader.scrollH = event.position;
		}

		private function goURL():void {
			var url:String = urlInput.text;
			if (url.indexOf("http://") == -1 && url.indexOf("file:///") == -1) {
				url = "http://" + url;
			}
			htmlLoader.load(new URLRequest(url));
		}

		private function updateTitle():void {
			stage.nativeWindow.title = htmlLoader.window.document.title;
			if (htmlLoader.window.document.title) {
				
			} else {
				stage.nativeWindow.title = htmlLoader.location;
			}
			trace(stage.nativeWindow.title);
		}
		private function updateLocation(location:String):void {
			urlInput.text = location;
		}

		private function updateScrollBars():void {
			if (htmlLoader.contentHeight > htmlLoader.height) {
				vScrollBar.visible = true;
				vScrollBar.minScrollPosition = 0;
				vScrollBar.maxScrollPosition = htmlLoader.contentHeight - htmlLoader.height;
			} else {
				vScrollBar.visible = false;
			}
			if (htmlLoader.contentWidth > htmlLoader.width) {
				hScrollBar.visible = true;
				hScrollBar.minScrollPosition = 0;
				hScrollBar.maxScrollPosition = htmlLoader.contentWidth - htmlLoader.width;
			} else {
				hScrollBar.visible = false;
			}
		}

		private function updateHTMLHistory():void {
			if (htmlLoader.historyPosition == 0) {
				backBtn.enabled = false;
			} else {
				backBtn.enabled = true;
			}
			if ( htmlLoader.historyPosition == ( htmlLoader.historyLength - 1 ) ) {
				forwardBtn.enabled = false;
			} else {
				forwardBtn.enabled = true;
			}
			updateLocation(htmlLoader.location);
		}
	}
}

事实上，使用HTMLLoader Class比Flex HTML控件实现起来要麻烦得多，Flex HTML控件继承了ScrollControlBase class，因此自动为HTML内容添加滚动条。而对于HTMLLoader对象，我们不得不手动添加这部分代码。htmlLoader的contentWidth contentHeight属性可以获取HTML内容的宽度和高度，当发生htmlRender事件时，他们的值会改变，再与htmlLoader对象本身的宽度和高度比较来决定是否显示滚动条。

点击此处下载该实例的源码。

上一篇: 三本Director MX 2004电子书下载
下一篇: Flash CS3 新增组件——Slider
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags: ApolloApollo FlashCS3FlashCS3
相关日志: