flex中实际没有页面跳转的概念,都只有在一个页面中,隐藏显示。那怎样才能很好地实现页面的跳转呢?我经过昨天不懈地努力尝试,终于实现了一种页面跳转的方法。
在网上查询相关资料中,都是说有如下几种方法:1)viewstack, 2)state, 3)modular, 4)navigatortourl等。我的这个方法也是用viewstack来实现。
使用viewstack时,我碰到的主要问题是:到底是要把某一页面的相关处理(比如该页面的按钮响应事件)放在该页面里处理,还是要放在main.mxml中来处理呢?因为放主mxml中处理,那假设要实现登陆跳转到另外一个界面,登录框中的“确定”按钮的响应方法该怎么写?没法写。。。把它写在主mxml中,在子mxml中找不到。我的解决方法是放在子页面里处理。具体实现如下:
(1)新建一个flex工程(main.mxml)
(2)新建两个mxml component(login.mxml, welcome.mxml)
假设要实现的效果是,在login中单击“确定”按钮,可以从login跳转到welcome(开始时显示的是login):
(3)在main.mxml中使用viewstack组建,把login和welcome作为viewstack的子组件,即
<mx:ViewStack id = "pageStores">
<local:login_page id="login"></local:login_page> //注意,要使login先显示出来,则要把它放第一个
<local:home_page id="home"></local:home_page>
</mx:ViewStack>
(4)在login中添加如下代码:
<mx:Script>
<![CDATA[
import mx.containers.ViewStack; //导入viwstack包,下面要用到viewstack类型
import mx.controls.Alert;
private var vs:ViewStack; //vs是main.mxml中定义的viewstack
private function init():void
{
vs = this.parent as ViewStack; //初始login的时候获得main.mxml中的viewstack,即pagestores(它的id),记住,要在login.mxml中加
//入:creationComplete="init()
}
private function getChild(str:String):Object //这段代码是为了获得指定页面对应的对象
{
for each(var obj in vs.getChildren()) //遍历vs中的所有子组件(即所有页面),页面不会太多,顶多一二十个,所以这个方法不会太耗时
{
if(obj.name === str) //如果是想找的页面,就返回这个对象。比如想找到welcome.mxml,则令str="welcome"
{
break;
}
}
return obj;
}
private function btnClick(event:Event):void //确定按钮的响应
{
var obj:Object = getChild("welcome"); //找到想要显示的对象
if(username.text == "admin" && password.text == "admin") //如果用户名与密码正确
{
vs.selectedChild = obj as Canvas; //将welcome作为显示的页面,即实现了页面的跳转
}
else
{
Alert.show("用户名或者密码错误!","ERROR!");
}
}
]]>
</mx:Script>
分享到:
相关推荐
例如,在示例代码中,我们创建了三个子组件(shouye, leixing, makeid)并设置其标签和显示效果,然后通过按钮点击事件改变ViewStack的选择项来实现页面跳转。 2. **navigateToURL**:此方法用于打开新的浏览器窗口...
在Flex中,ViewStack是一个非常重要的容器控件,它允许你在应用程序中实现页面间的导航和切换效果。在这个名为"flex sample-跳转"的项目中,我们可以深入探讨Flex中的ViewStack控件以及与其相关的开发技巧。 ...
### Flex4创建页面知识点详解 ...通过以上内容的详细介绍,我们可以清晰地理解如何在Flex4中创建页面(状态),并实现页面间的逻辑切换及数据绑定。这对于构建复杂且交互丰富的Flex应用来说是非常重要的。
Flex是Adobe公司开发的一种用于构建富互联网应用程序(RIA)的框架,主要基于...通过理解和实践这个“flex 关于事件的例子”,初学者能够掌握Flex中事件处理的基本原理和用法,为构建交互式Flex应用打下坚实基础。
在`mx:Script`标签内,你可以编写处理这些按钮点击事件的函数,例如,`method_le()`应实现跳转到首页的功能,`method_l()`则应返回上一页,而`method_r()`和`method_re()`分别用于前进和跳转到最后一页。同时,`...
6. **事件监听和处理**:在Flex中添加事件监听器,响应用户对分页控件的操作,如点击“上一页”、“下一页”按钮。触发事件后,向后台发送请求并更新数据显示。 7. **优化性能**:考虑到大量数据可能导致性能问题,...
Flex分页是一种在Web开发中实现页面数据分块显示的技术,尤其在大数据量展示时,它能有效地提高用户体验,减少页面加载时间,并提供流畅的滚动交互。标题“flex分页 很好很强大”和描述“简单引用 很方便”暗示了...
本篇文章将深入探讨“flex state跳转”这一主题,以及如何在Flex项目中利用state来实现页面或组件的动态跳转。 一、什么是Flex State Flex State是Flex应用中的一个重要概念,它允许开发者定义UI组件在不同场景下的...
本篇将详细介绍如何在Flex中创建和管理分页控件,并通过事件处理来实现其功能。 首先,我们要了解Flex中的`PagingToolbar`。`PagingToolbar`是Flex中用于实现分页功能的组件,通常与数据网格(如`DataGrid`或`...
页面跳转 - **导航管理**:在复杂的Flex应用中,页面之间的跳转是非常常见的需求。这部分内容会介绍如何实现页面间的导航,以及如何管理和传递状态信息。 #### 11. 样式与主题 - **美化UI**:Flex允许开发者通过...
总之,Flex3中的DataGrid分页是一个涉及数据管理、用户交互和事件处理的过程。通过合理地控制数据加载和更新,我们可以提高应用程序的性能,提供更好的用户体验。学习并掌握这一技术,对于开发大型Flex3应用是至关...
3. **事件处理**:当用户进行翻页操作时,分页组件会触发事件,如`PageChangeEvent`,这样主程序可以根据事件更新数据源,展示新页面的内容。 4. **数据绑定**:Flex分页组件需要与数据源进行绑定,以便根据分页...
造成该现象的原因是,当页面跳转时,微信浏览器会通过window.history读取到浏览的历史记录,此时便会在页面底部显示出前进后退按钮的工具栏,造成页面底部内容遮挡。 三、解决方案: 了解了该问题出现的原因,我们...
在Flex开发中,数据网格(Data Grid)是一种常用的组件,用于显示大量结构化的数据,并提供交互功能,如排序、筛选和编辑。分页是管理大量数据流的关键特性,它允许用户逐页浏览数据,而不是一次性加载所有内容,...
博文链接可能包含了一个具体的实现示例,通过阅读此博客,开发者可以获得关于如何在Flex中实现增删改查和分页操作的详细步骤。 7. FlexTopTest: 这个压缩包文件名“FlexTopTest”可能包含了实现上述功能的一个测试...
Demo7:页面跳转 - **页面管理**: Flex 应用中页面的组织和切换。 - **技术实现**: - 使用 Flex 的 Navigator 组件。 - 实现页面间的参数传递和状态保持。 #### 14. manager - **Manager 类**: Flex 中用于...
- **页面跳转** 是 Web 应用中的常见需求,Flex 通过不同的方法实现了这一功能。 - 例如,可以使用 `mx.controls.Navigator` 或其他第三方库来实现页面之间的导航。 - 正确地管理页面跳转对于创建流畅的用户体验非常...
总的来说,Flex分页组件是Flex应用中数据管理的关键组件,通过监听和响应"pageChanged"事件,可以实现高效且用户友好的数据浏览体验。理解如何配置、使用和扩展这样的组件,对于开发大型、数据密集型的Flex应用至关...