`
牧羊人
  • 浏览: 214001 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

浏览器前进后退按钮切换状态

    博客分类:
  • flex
阅读更多
Flex browser manager能够让用户通过浏览器的前进后退按钮来导航应用。因为这个browser manager能够对状态的切换进行跟踪。   
以前说过,每个状态是个新的界面,而不是一个新的页面。但是用浏览器也能实现不同状态之间的切换。如何做到呢?先看看背景知识。
BrowserManager:一个 Singleton 管理器,用于充当浏览器和应用程序之间的代理。使用它可以访问浏览器地址栏中的 URL,这与访问 JavaScript 中的 document.location 属性类似。它有一个getInstance() 方法,返回的是一个IBrowserManager类的实例。
IBrowserManager:由 BrowserManager 的共享实例实现的接口。init()方法:初始化 BrowserManager。fragment属性:当前 URL 显示在浏览器地址栏中时,“#”之后的部分。
<?xml version="1.0"?>
<!-- states\StatesBrowserManager.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:mx="library://ns.adobe.com/flex/halo"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   creationComplete="initApp();">
	<fx:Script>
		<![CDATA[
			import mx.managers.BrowserManager;
			import mx.managers.IBrowserManager;
			import mx.events.BrowserChangeEvent;
			import mx.utils.URLUtil;
			// The search string value.
			[Bindable]
			public var searchString:String;
			// 一个 BrowserManager 类的实例.
			private var browserManager:IBrowserManager;
			//在应用创建完成时初始化 BrowserManager.
			public function initApp():void {
				browserManager = BrowserManager.getInstance();
				browserManager.addEventListener(BrowserChangeEvent.BROWSER_URL_CHANGE, parseURL);
				browserManager.init("", "Browser Manager for View States");
				updateURL('default');
			}
			// 当用户按前进后退按钮时触发事件,事件处理器从URL里接到状态的值,从而。用他
			//设定当前状态。 
			private var stateFromURL:String;
			private function parseURL(e:Event):void {
				var o:Object = URLUtil.stringToObject(browserManager.fragment);
				stateFromURL = o.state;
				currentState=stateFromURL;
			}
			// 状态改变时改变地址。
			private function updateURL(myCurrentState:String):void {
				var s:String = "state=" + myCurrentState;
				browserManager.setFragment(s);
			}
			// 当按下go按钮时执行该方法。
			// 它会改变状态以及调用updateURL()方法来改变URL。
			public function doSearch():void {
				currentState = "results";
				updateURL('results');
				searchString = searchInput.text;
			}
			// 点击reset按钮时执行该方法,该方法是状态改到默认值,。并且改变URL
			public function reset():void {
				currentState = '';
				searchInput.text = "";
				searchString = "";
				updateURL('default');
			}
		]]>
	</fx:Script>
	<s:states>
		<!-- The state for displaying the search results -->
		<s:State name="default"/>
		<s:State name="results"/>
	</s:states>
	<!-- In the default state, just show a panel
	with a search text input and button. -->
	<s:Panel id="panel1"
			 title="Search" title.results="Results"
			 resizeEffect="Resize"
			 width="10%" height="10%"
			 width.results="100%" height.results="100%">
		<s:layout>
			<s:VerticalLayout/>
		</s:layout>
		<s:SkinnableContainer id="searchFields" defaultButton="{b}">
			<s:layout>
				<s:HorizontalLayout/>
			</s:layout>
			<s:TextInput id="searchInput"/>
			<s:Button id="b"
					  label="Go"
					  click="doSearch();"/>
			<s:Button includeIn="results"
					  label="Reset"
					  click="reset();"/>
		</s:SkinnableContainer>
		<s:TextInput includeIn="results"
					  text="Search results for {searchString}"/>
	</s:Panel>
</s:Application>
分享到:
评论

相关推荐

    Vue 禁用浏览器的前进后退操作

    在Vue应用程序中,有时我们需要控制浏览器的前进后退(前进/后退按钮)操作,以满足特定的用户体验需求。在本文中,我们将深入探讨如何在Vue中禁用或管理这些功能,以及与`history`对象相关的一些核心概念。 首先,...

    一键调出IE10常用菜单栏和前进后退按钮.docx

    - **效果展示**:前进后退按钮位于网页边缘,可以方便地进行前后网页的切换。 **步骤五:使用快捷键调出** - **操作方法**:除了鼠标操作外,还可以通过快捷键“Alt + ,”(前进)和“Alt + .”(后退)来实现网页...

    NotePad前进后退插件

    前进后退插件就是为了弥补这一点,它模拟了浏览器的前进和后退按钮概念,让用户可以轻松地在编辑历史中前进或后退,快速定位到之前编辑过的任意位置。 描述中提到的"非常方便的一个NotePad插件,可以非常有效的提高...

    类似于IE中的前进、后退按键功能的示例

    这个示例主要讲解如何在C#或VB.NET这样的.NET环境中创建一个简单的历史记录系统,模拟IE浏览器中的前进和后退按钮功能。 首先,我们需要理解这一功能的核心原理。在浏览器中,前进和后退功能依赖于一个页面访问历史...

    AJAX 网页保留浏览器前进后退等功能

    在传统的网页浏览中,用户可以通过点击浏览器的前进和后退按钮来浏览历史记录,每刷新一次页面,URL就会更新以反映当前的状态。但在使用AJAX的网页中,由于页面内容是动态加载的,URL可能不会随着用户交互而改变,...

    前进后退类

    2. **文件系统的前进后退**:在文件管理系统中,前进后退功能允许用户在浏览过的目录之间自由切换。这可以通过维护一个目录路径栈来实现,每当用户进入一个新的目录,就将该目录压入栈顶;当用户点击“后退”时,弹...

    JavaScript不刷新实现浏览器的前进后退功能

    但是很多早先的AJAX应用是不支持浏览器的前进后退的,这导致了用户不管在网站里浏览到何处,一旦刷新就会立刻回到起初的位置,并且用户也无法通过浏览器的前进后退按钮来实现浏览历史的切换。 对于第一个问题,解决...

    super_prefetcher前进后退键盘脚本

    在日常浏览网页时,用户通常依赖浏览器的前进和后退按钮来切换历史页面,但通过键盘快捷键可以提高效率,尤其对于频繁进行此操作的用户来说,这是一个非常实用的功能。JavaScript作为客户端脚本语言,能够直接与用户...

    banner-按钮全屏切换

    3. **按钮切换**:在全屏切换的Banner中,为了方便用户控制轮播的进程,通常会提供前进和后退的按钮。这些按钮可以是图标形式,也可以是文字,比如"上一张"和"下一张"。用户点击按钮,Banner图片就会按照预设顺序...

    ajax无刷新页面切换,历史记录后退前进解决方案.docx

    当用户点击浏览器的后退或前进按钮时,`window.onpopstate`事件会被触发。在这个事件的回调函数中,可以通过`event.state`访问之前保存的状态对象,从而恢复页面的状态。 例如,假设我们有一个动态内容区域,其ID为...

    Android实现类似浏览器可以新增标签页,可以随意多个标签之间来回切换

    - 每个标签页内的布局设计应与浏览器类似,包括地址栏、前进/后退按钮、刷新和收藏等功能。 通过以上步骤,我们可以实现一个功能完备、体验良好的Android多标签页应用。在实际开发中,还需要考虑到错误处理、网络...

    jQuery实现页面点击后退弹出提示框的方法

    总的来说,这个方法通过利用 jQuery 的事件处理能力和浏览器的 `history` API,实现了在用户点击后退按钮时弹出提示框的功能。如果你需要在用户后退时执行其他操作,可以将 `alert` 替换为你自定义的函数。这个技巧...

    用delphi做的简单浏览器

    【描述】中的"小小的浏览器"表明这是一个小型项目,可能包含了一些基础的浏览器功能,如地址栏输入、页面加载、前进/后退按钮等。对于初学者来说,这样的项目是一个很好的实践机会,能让他们理解Delphi的事件驱动...

    浏览器VC++编程 简易浏览器源码 VS2008开发 浏览器软件

    4. 用户界面元素:如地址栏、前进/后退按钮、刷新按钮等,它们的事件处理与WebBrowser控件的交互。 开发过程中,"include"文件夹包含了必要的头文件,这些头文件可能包含了Windows API的声明和WebBrowser控件的接口...

    易语言多标签浏览器

    在源码中,这通常涉及到一个子程序(即函数)的编写,该子程序负责创建新的标签页,并可能初始化一些必要的浏览器状态,如URL输入框、前进/后退按钮等。 "进度条保持"则是指在浏览器加载网页时显示的进度条。在...

    可以自动控制网页操作的浏览器MutouBrowser(Pro).rar

    木头多功能浏览器(专业版)可以生成自动刷新网页监控网页...11、支持自动打开、关闭浏览器标签页,浏览器自动前进后退功能; 12、浏览器自动执行自定义javascript或jquery代码。 13、可以完成复杂的网页自动控制流程。

    简易浏览器

    前进和后退按钮,用于在浏览历史中切换页面;书签功能,方便用户快速访问常去的网站;以及可能的多标签页支持,让用户同时打开多个网页。 对于视频播放,简易浏览器可能支持常见的视频格式如MP4、WebM和ogg,以及流...

    java课程设计-网页浏览器

    - **事件处理**:实现用户交互,例如,当用户在地址栏输入URL时触发加载事件,点击前进/后退按钮时切换历史记录。 4. **网页保存**: - **本地存储**:访问的网页可以保存为HTML文件,同时保存相关资源(如图片、...

    VC/MFC多页浏览器源代码

    - 添加常用的功能按钮,如前进、后退、刷新、停止加载、新开选项卡等,这些功能需要通过调用WebBrowser控件的方法来实现。 5. **源代码结构** - `MyWebbrowser`可能包含了主窗口类(如CMyWebBrowserApp)、选项卡...

    vb编写浏览器源码

    标题和描述中提到的“定时刷新”、“定时网页(新选项卡)”和“定时前进后退”,意味着我们需要使用定时器控件(`Timer`)配合`WebBrowser`控件来实现特定功能。例如,设置定时器每隔一段时间自动调用`Navigate`...

Global site tag (gtag.js) - Google Analytics