`

Flex Deep Link(History Manager)

    博客分类:
  • Flex
阅读更多
【文章出处】http://xinzy.iteye.com/blog/474778
最近做flex项目的时候,发现退出登陆时URL上会自动加上一个“#”字符,很奇怪,Google+Baidu无数次都没有找到答案。今天无意间看到几个群友在说通过“BrowserManager”获取URL,于是仔细查看了API,又发现了“HistoryManager”,这个问题终于明白了。

我 们通常看的Web页面 可以通过浏览器的“前进”“后退”来查看刚才看过的页面,同样,嵌入的页面中的flash也可以实现这样的功能。方法是通过 HistoryManageer类和BrowserManager类两种方法来实现。HistoryManageer类主要是用在Flex2,Flex3 后很少用了。待会我将分别介绍这两种方法。

回到刚才说URL上自动加“#”号的问题:原因是Application 默认historyManagementEnabled属性是ture,也就是说HistoryManageer类功能自动开启了,Application 里面通过程序控制addChild或removeChild任何组件所导致的变化,将会记录在flash的history中,导致重写url,加上“#” 字符。故有了这个奇怪的“#”号。在Flex3中,HistoryManager功能在Flex项目中默认打开的还有Accordion 和 TabNavigator组件。对于没有默认打开该功能的组件,如果要实现该功能,则需要另外注册。下面引用两片文章加以说明:
对于一个网站来说,其是有若干个网页组成的。而各个网页之间的链接叫做超链接。链接成为网页和网页之间的桥梁。那么,对于一个Flash整站来说,有没有一个办法来实现 Flash各页面(更恰当的说是各功能模块)之间的链接呢。比如,我想在浏览器中输入一个链接便可以链到Flash整站中的一页—一个功能模块,而不是每次都要通过Flash整站的第一个页面的功能导航进入。把Flash的各个功能块页面化,那么我们该怎么实现呢。到底能不能实现呢?
答案是肯定的,通过Flex Deep Link 便能实现上述功能。
Flex Deep Link(深链接)-第一,Deep Link 简介。

Deep Link其实也是依赖Flash和浏览器的交互来实现的,通过获取链接地址中#后面的参数来实现页面标记,当你在Flex Bulid3发布一个项目时,其会自动你发布的目录生成一个名为History的文件夹,里面有 History.js,HistoryFrame.html,history.css这三个文件,可见Deep Link也是通过和浏览器交互来实现的.如果浏览器不支持JavaScript或者禁用JavaScript,那么Deep LinK肯定是不能用的。
对于Deep Link应用,最重要的就是学会应用BrowserManager和HistoryManager这两个类。我们由简单到困难,先讲一讲HistoryManager这个类的应用。

Flex Deep Link(深链接)-  第二,HistoryManager。

HistoryManager功能在Flex项目中是默认打开的,比如在使用Accordion 和 TabNavigator组件时,在不同区域切换时,Flex会自动记录下各个状态,我们可以通过点击浏览器的“前进”和“后退”按钮来前进和倒退,在你切换这些组件的区域时,Flex会自动你在网页链接的后面加写参数,以便记录当前页面的状态。
默认情况下HistoryManager的功能是打开的,你可以通过设置各个组件或Application的historyManagementEnabled属性为false(默认为TRUE)来关闭此功能。
这些都没什么好讲的。关键是怎么在一些普通组建上使用HistoryManager功能,默认的navigator container组建都是支持该功能的。要使一些普通组建也支持此功能,必须:
1.实现mx.managers.IHistoryManagerClient接口。
2.用HistoryManager'的register()方法为组建注册。
3.当组件状态改变时保存组件的状态。
4.通过实施IHistoryManagerClient的saveState() 和 loadState()方法来保存和读取组件状态。


拿CheckBox为例:


<?xml version="1.0"?>
<mx:CheckBox
xmlns:mx="http://www.adobe.com/2006/mxml"
label="Check me"

implements="mx.managers.IHistoryManagerClient" //关键步骤1,实现接口
creationComplete="mx.managers.HistoryManager.register(this);"//关键步骤2,注册组件
change="boxChanged(event)"//关键步骤3,当组件发生变化时保存状态
>

<mx:Script><![CDATA[
import mx.managers.HistoryManager;
//实施IHistoryManagerClient的saveState()方法保存状态
public function saveState():Object {
return {selected:selected};
}
//实施IHistoryManagerClient的loadState()方法读取状态
public function loadState(state:Object):void {
var newState:Boolean = state;

if (newState != selected) {
selected = newState;
} else {
if (newState) {
;
} else {
selected = true;
}
}
}

// 保存状态
private function boxChanged(e:Event):void {
HistoryManager.save();

]]></mx:Script>

</mx:CheckBox>
注意:如果你把实现HistoryManager功能的组件放到module中,再在主程序中调用,那么HistoryManager功能是没用的。
麻雀虽小,五脏俱全。上面例子就是如何让任意组件实现HistoryManager的典型案例。点击浏览器的“前进”和“后退”来恢复上个或下个状态。
BrowserManager类要比HistoryManager类更复杂些。BrowserManager类好比就是Flex程序和浏览器之间的一个代理。当浏览地址栏的地址发生变化时,浏览器通过BrowserManager类告知Flex程序。
可以通过BrowserManager类的getInstance()方法来获得其一个实施了IBrowserManager接口的实例。这样就可以访问其setTitle()和setFragment()方法和属性了。下面我就来介绍一下BrowserManager类的一些属性和方法。

Flex Deep Link(深链接)-方法:

1.init(fragment,title)
该方法可以定义默认的链接参数和网页标题。一般在初始化时用到。例如:
browserManager.init("", "Test Deep Linking");定义了参数为空,标题为Test Deep Linking的网页。
2.setTitle(title)
该方法用来设置网页标题。例如:
browserManager.setTitle("The New Title") 设置网页标题为“The New Title”。
3.setFragment(fragment)
该方法用来设置网页参数。例如:
browserManager.setFragment("id=3") 设置参数“id=3”。
Flex Deep Link(深链接)-属性:

1.url
browserManager.url获得页面完整链接。
2.base
browserManager.base获得页面基地址。
3.fragment
browserManager.fragment获得页面链接#后的参数。
4.lastURL
browserManager.lastURL获得上一个页面链接——IE6我获得是失败的,火狐正确。大家可以自己试试。

注意:上面的browserManager便是BrowserManager类的一个实例。实例化过程如下:
import mx.events.BrowserChangeEvent;
import mx.managers.IBrowserManager;
import mx.managers.BrowserManager;
private var browserManager:IBrowserManager;
private function initApp():void {
browserManager = BrowserManager.getInstance();
browserManager.addEventListener(BrowserChangeEvent.BROWSER_URL_CHANGE, parseURL);
browserManager.init("", "Test Deep Linking");
}

Flex Deep Link(深链接)-  如何分析URl



可以用URLUtil类方便的分析Url
类路径mx.utils.URLUtil,例如链接:http://127.0.0.1/index.html#a=3&b=1
var o:Object = URLUtil.stringToObject(browserManager.fragment,"&");
trace(o.a,o.b)
反过来设置地址栏链接:
o.a=5;o.b=7;
var s:String = URLUtil.objectToString(o,"&");
browserManager.setFragment(s);
注意:如果 URLUtil.objectToString()方法第二个参数为空,那么默认的参数分隔符为";"号。

BrowserManager类的事件
BrowserManager类有三种事件:
1.applicationURLChange事件;
当在程序执行时调用setFragment()等方法改变URL时派发此事件。
2.browserURLChange事件;
当手动改变浏览器链接或点击“前进”或“后退”时派发此事件。
3.urlChange事件;
applicationURLChange事件或browserURLChange事件派发时,都将触发该事件。

Flex Deep Link(深链接)-  获得链接信息



可以通过BrowserManager类的属性和URLUtil的一些方法来获得链接信息,例如:
var url:String = browserManager.url;
baseURL = browserManager.base;
fragment = browserManager.fragment; 
previousURL = e.lastURL; 

fullURL = mx.utils.URLUtil.getFullURL(url, url);
port = mx.utils.URLUtil.getPort(url);
protocol = mx.utils.URLUtil.getProtocol(url);
serverName = mx.utils.URLUtil.getServerName(url);
isSecure = mx.utils.URLUtil.isHttpsurl(/url);

具体含义也很清楚,我也就不多讲了。
关于BrowserManager类大致也就上面的内容。要注意的是BrowserManager类和HistoryManager类不能同时使用,也就是说用了BrowserManager类就不能再用HistoryManager类了,当你用了BrowserManager类后,系统会自动禁用 HistoryManager类。
既然能获得了参数,那么实现文章开头那些功能也就没什么了。通过在初始化程序中获取相应的参数,再根据这些参数控制程序显示。和.net,asp,php 类似,万物皆规律。有了BrowserManager类的帮助,加上一些程序控制,现在我在浏览器输入http://127.0.0.1 /news.html#id=20便能在Flash整站中显示某个新闻页面了。
分享到:
评论

相关推荐

    flex3 deep link

    Flex3 Deep Link技术详解 Flex3 是 Adobe 引入的一个强大的富互联网应用程序(RIA)开发框架,它基于ActionScript3 和MXML,用于构建交互性强、功能丰富的Web应用。Deep Linking是Flex3中的一项重要特性,使得Web...

    Bose博士SoundLink Flex 蓝牙扬声器说明书.pdf

    【Bose博士SoundLink Flex 蓝牙扬声器说明书】是Bose品牌提供的一份详细的操作指南,旨在帮助用户了解并充分利用这款高质量的蓝牙扬声器。该说明书包含了产品特性、设置步骤以及使用技巧等内容,确保用户能够轻松...

    EmployeeManager.zip_LCDS Flex_flex_flex LC_flex lcds

    《Flex与LCDS在EmployeeManager项目中的应用》 在当今的IT行业中,富互联网应用程序(Rich Internet Applications,RIA)已经成为提升用户体验的重要手段。Adobe Flex和LiveCycle Data Services(LCDS)是开发此类...

    IBM Flex System Manager

    IBM Flex System Manager可以帮助您充分利用您的IBM PureFlex System,同时使重复性任务实现自动化。Flex System Manager可以大大减少典型管理任务的手动导航步骤的数量。从采用向导和内置专业技术的简化系统设置...

    flex TextArea加链接和link事件

    以下是一个简单的步骤,解释如何在Flex的TextArea中添加链接和处理link事件: 1. **创建自定义组件**: 创建一个新的MXML组件,继承自TextArea。在这个组件中,我们将覆盖默认的text属性,使用TextFlow来替代纯...

    Flex Flex Flex Flex

    Flex Flex Flex Flex Flex Flex Flex Flex Flex Flex Flex Flex Flex Flex Flex Flex Flex Flex Flex Flex Flex Flex Flex Flex Flex Flex Flex Flex Flex Flex Flex Flex Flex Flex Flex Flex Flex Flex Flex ...

    Flex万年历记事本_flex源码

    Flex是Adobe公司推出的一种基于ActionScript 3.0的开源框架,主要用于构建富互联网应用程序(Rich Internet Applications,简称RIA)。这种技术允许开发者创建具有高度交互性和动态视觉效果的Web应用,提供比传统...

    Flex相册 Flex图片

    Flex相册 Flex图片

    flex学习笔记 flex学习总结 flex学习教程

    Flex是Adobe公司推出的一种用于构建富互联网应用程序(RIA)的技术,它基于ActionScript编程语言和Flex框架,可以创建交互性强、用户体验优秀的Web应用。本教程是作者精心编写的Flex学习资料,适合初学者入门,通过...

    pubnub-flex-history:Javascript History包装器,可进行灵活的历史记录调用

    pubnub-flex-history Javascript History包装器,用于灵活的历史记录调用,可自动处理任何分页。 在所有方法中,可以在希望使用时间令牌的地方提供unix epoch时间戳或PubNub 17位数的时间令牌。 包括 未压缩 &lt; ...

    Flex开发环境配置教程

    这可以通过MyEclipse的“Window” &gt; “Preferences” &gt; “MyEclipse” &gt; “Flex” &gt; “Flex SDK Manager”完成。选择合适的SDK版本并指定安装路径。 4. **创建Flex项目**: 在MyEclipse中新建一个Flex项目,选择适当...

    Flex资料大全(Flex白皮书 Flex cookbok Flex编程指南 Flex设计模式等)

    本资料大全包含了多个重要的Flex学习资源,如Flex白皮书、Flex Cookbook以及Flex编程指南,这些都是深入理解Flex开发不可或缺的文献。 1. **Flex白皮书**: Flex白皮书是Adobe官方发布的技术文档,通常包含Flex...

    flex flex和 java交互

    Flex是Adobe公司开发的一种开放源代码的富互联网应用程序(RIA)框架,主要用于构建具有动态图形、交互性丰富的Web应用。Flex应用程序通常使用ActionScript编程语言,并基于Flash Player或Adobe AIR运行时环境。Java...

    FLEX网站源码 FLEX网站源码 FLEX网站源码

    Flex是Adobe公司开发的一种富互联网应用(Rich Internet Application,RIA)框架,主要用于构建运行在浏览器上的交互式应用程序。Flex以其强大的MXML和ActionScript编程语言,以及基于Flash Player或Adobe AIR运行时...

    flex实战项目,flex开发

    Flex是Adobe公司推出的一种用于构建富互联网应用(RIA, Rich Internet Applications)的开源框架,它主要基于ActionScript编程语言和MXML标记语言。这个“Flex实战项目”可能是一个使用Flex技术构建的实际应用示例,...

    记事万年历flex源码

    【标题】"记事万年历flex源码"所涉及的知识点主要集中在Adobe Flex技术和日历应用程序开发上。Flex是一种基于ActionScript 3.0的开源框架,用于构建富互联网应用(RIA)。它允许开发者使用MXML和ActionScript来创建...

    flex_api (FLEX接口)

    Flex API 是一种软件开发接口,主要用于构建富互联网应用程序(Rich Internet Applications,简称RIA),它由Adobe公司开发,用于提供强大的图形和交互性功能。在本文中,我们将深入探讨Flex API的核心概念、主要...

    flex源代码资料,一些flex源代码的例子

    此外,这一章可能还涵盖了如何利用Flex的Layout Manager来管理组件的布局和对齐方式。 Chapter_11可能涵盖服务端通信,如使用HTTPService或WebService与后端服务器进行数据交换,实现AMF(Action Message Format)...

Global site tag (gtag.js) - Google Analytics