Flex手机项目 - 使用设备的Web浏览器

2015-01-06 发布：hangge 阅读：587

StageWebView类可以用来在基于Flash的AIR移动应用程序中显示HTML内容。其利用的是移动操作系统的Web控件来显示HTML，即手机系统自身的浏览器内核。

下面是一个Web浏览器的例子，功能有：

1，输入url访问网页，同时支持网页内跳转

2，网页加载完毕后显示网页标题和地址

3，支持前进，后退功能

效果图如下：

代码如下：

--- 主应用页面 BrowserApp.mxml ---

<?xml version="1.0" encoding="utf-8"?>
<s:ViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
					        xmlns:s="library://ns.adobe.com/flex/spark" 
							firstView="views.BrowserAppHome"
							applicationDPI="240">
	<fx:Style>
		@namespace s "library://ns.adobe.com/flex/spark";
		s|View
		{
			backgroundColor:#999999;
			color:#393839;
		}
		
		s|Label
		{
			fontSize:18;
		}
		      
        .backBtnStyle 
		{
			icon: Embed(source="assets/left.png");
		}
		
		.forwardBtnStyle
		{
			icon: Embed(source="assets/right.png");
		}
	</fx:Style>
</s:ViewNavigatorApplication>

--- 浏览器页面 BrowserAppHome.mxml ---

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
		xmlns:s="library://ns.adobe.com/flex/spark"
		addedToStage="onCreationComplete()" 
		title="浏览器">
    
	<fx:Script>
		<![CDATA[
			
			private var webView:StageWebView;
			
			/**
			 * 页面初始化响应
			 */
			private function onCreationComplete():void
			{
				//设置浏览器显示区域
				var rectangle:Rectangle = new Rectangle();
				rectangle.x = 0;
				rectangle.y = 270;
				rectangle.width = stage.stageWidth;
				rectangle.height = (stage.stageHeight - 270);
				
				webView = new StageWebView();
				webView.addEventListener(Event.COMPLETE, onComplete);
				webView.stage = stage;
				webView.viewPort = rectangle;
				webView.loadURL("http://baidu.com"); 
				
				//创建控制区域与浏览器区域的黑色分隔线
				var divider:Sprite = new Sprite();
				divider.graphics.beginFill(0x000000);
				divider.graphics.drawRect(0, 265, stage.stageWidth, 5);
				divider.graphics.endFill();
				webView.stage.addChild(divider);
				
				backBtn.enabled = false;
			}
			
			/**
			 * 页面加载完毕响应
			 */
			private function onComplete(e:Event):void
			{
				//设置网站标题和地址
				pageTitle.text = webView.title;
				pageAddress.text = webView.location;
				
				//设置前进，后退按钮状态
				backBtn.enabled = webView.isHistoryBackEnabled;
				forwardBtn.enabled = webView.isHistoryForwardEnabled;
			}
			
			/**
			 * 后退按钮
			 */
			private function back():void
			{
				if(webView.isHistoryBackEnabled)
				{
					webView.historyBack();
				}
			}
			
			/**
			 * 前进按钮
			 */
			private function forward():void
			{
				if(webView.isHistoryForwardEnabled)
				{
					webView.historyForward();
				}
			}
			
			/**
			 * 网站页面加载按钮
			 */
			private function go():void
			{
				webView.loadURL(pageAddress.text);
			}
			
		]]>
	</fx:Script>
    
	<s:layout>
		<s:VerticalLayout paddingLeft="20" paddingRight="20" paddingBottom="20" paddingTop="20"/>
	</s:layout>
	
	<s:navigationContent>
		<s:Button id="backBtn" styleName="backBtnStyle" enabled="false" click="back()" />
		<s:Button id="forwardBtn" enabled="false" styleName="forwardBtnStyle" click="forward()"/>
	</s:navigationContent>
	
	<s:VGroup width="100%" height="95">
		<s:Label id="pageTitle" paddingLeft="5" fontSize="16" width="100%" height="20"/>
	    <s:HGroup width="100%" height="70" y="200">
			<s:TextInput id="pageAddress" width="100%" fontSize="18" height="50"/>
			<s:Button id="goBtn" label="Go" height="50" click="go()"/>
		</s:HGroup>
	</s:VGroup>
</s:View>

源码下载：

BrowserApp.zip