Flex手机项目 - 使用设备的Web浏览器
作者:hangge | 2015-01-06 16:09
StageWebView类可以用来在基于Flash的AIR移动应用程序中显示HTML内容。其利用的是移动操作系统的Web控件来显示HTML,即手机系统自身的浏览器内核。

--- 浏览器页面 BrowserAppHome.mxml ---
源码下载:
BrowserApp.zip
下面是一个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>
<?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>
源码下载:
全部评论(0)