Flex开发中的深度链接与运行时共享库应用

### Flex开发中的深度链接与运行时共享库应用 #### 1. URL解析示例 首先，我们来看一个URL解析的示例。如果URL为 `http://localhost:8501/flex4cookbook/main.html#name=Andrew;index=12345;productId=987`，其解析结果如下： | 类型 | 详情 | | ---- | ---- | | 完整URL | `http://localhost:8501/flex4cookbook/main.html#name=Andrew;index=12345;productId=987` | | 基础URL | `http://localhost:8501/flex4cookbook/main.html` | | URL片段 | `name=Andrew%20Trice;index=12345;productId=987654` | | 对象 | (Object)#0<br> index = 12345<br> name = "Andrew"<br> productId = 987 | | name | Andrew | | index | 12345 | | productId | 987 | | URL端口 | 8501 | | URL协议 | http | | URL服务器 | localhost | | 带端口的URL服务器 | localhost:8501 | #### 2. 通过BrowserManager进行数据深度链接 在开发中，我们可能需要将浏览器URL中的数据传递到Flex控件中，并且根据Flex应用程序中的数据更新浏览器URL，同时要支持浏览器的前进和后退导航按钮。 **问题**：需要将浏览器URL中的数据传递到Flex控件中，并根据Flex应用程序中的数据更新浏览器URL。 **解决方案**：使用 `BrowserManager` 类和 `BrowserChangeEvents` 来读写浏览器URL中的数据。 **操作步骤**： 1. 当浏览器URL发生变化时，`BrowserManager` 实例会派发 `BrowserChangeEvent.BROWSER_URL_CHANGE` 事件。遇到此类事件时，调用 `updateValues()` 方法更新Flex控件中的值。 2. 以下是一个示例代码，展示了如何从浏览器URL读取数据并将其放入Flex的 `TextInput` 字段中： ```xml <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo" minWidth="1024" minHeight="768" creationComplete="onCreationComplete()" > <fx:Script> <![CDATA[ import mx.events.BrowserChangeEvent; import mx.managers.IBrowserManager; import mx.managers.BrowserManager; import mx.utils.URLUtil; private var bm:IBrowserManager private function onCreationComplete():void { // 获取浏览器管理器实例 bm = BrowserManager.getInstance(); // 初始化浏览器管理器 bm.init(); // 根据URL参数设置初始值 updateValues(); // 添加事件监听器以处理浏览器的前进和后退按钮 bm.addEventListener( BrowserChangeEvent.BROWSER_URL_CHANGE, onURLChange ); } private function updateValues():void { // 根据URL片段更新文本框的值 var o:Object = URLUtil.stringToObject(bm.fragment); firstName.text = o.firstName; lastName.text = o.lastName; } private function updateURL():void { // 更新URL片段 bm.setFragment( "firstName=" + firstName.text + ";lastName=" + lastName.text ); } private function onURLChange( event : BrowserChangeEvent ):void { // 根据更改的URL调用更新值的方法 updateValues(); } ]]> </fx:Script> <s:TextInput x="10" y="10" id="firstName" change="updateURL()" /> <s:TextInput x="10" y="40" id="lastName" change="updateURL()" /> </s:Application> ``` 这个示例中，当应用程序加载时，会从当前URL读取数据并将 `firstName` 和 `lastName` 参数的值写入文本框。当文本框中的值发生变化时，应用程序会调用 `setFragment()` 方法更新浏览器URL。 #### 3. 通过BrowserManager进行容器深度链接 **问题**：需要根据URL参数控制Flex 4容器的可见内容。 **解决方案**：使用 `BrowserManager` 类和 `BrowserChangeEvents` 来控制Flex组件的可见性并跟踪历史记录。 **操作步骤**： 1. 利用URL片段控制和跟踪Flex应用程序中哪些容器和组件是可见的。应用程序加载时，初始化 `BrowserManager` 类实例，帮助解析和处理浏览器URL。 2. `updateContainers()` 方法用于确定 `TabNavigator` 实例中哪个选项卡是可见的。当选项卡的可见选项卡发生变化时，使用以下代码设置URL片段中的 `selectedIndex` 属性： ```actionscript bm.setFragment( "selectedIndex=" + tabNav.selectedIndex ); ``` 这会更新浏览器URL并将更改添加到浏览器历史记录中。 以下是示例代码： ```xml <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo" minWidth="1024" minHeight="768" creationComplete="onCre ```