`
love_jun1314
  • 浏览: 2840 次
文章分类
社区版块
存档分类
最新评论

Flex 中实现按钮事件页面跳转

    博客分类:
  • Flex
阅读更多
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>
分享到:
评论

相关推荐

    flex页面跳转及数据绑定

    例如,在示例代码中,我们创建了三个子组件(shouye, leixing, makeid)并设置其标签和显示效果,然后通过按钮点击事件改变ViewStack的选择项来实现页面跳转。 2. **navigateToURL**:此方法用于打开新的浏览器窗口...

    flex sample-跳转

    在Flex中,ViewStack是一个非常重要的容器控件,它允许你在应用程序中实现页面间的导航和切换效果。在这个名为"flex sample-跳转"的项目中,我们可以深入探讨Flex中的ViewStack控件以及与其相关的开发技巧。 ...

    Flex4创建页面

    ### Flex4创建页面知识点详解 ...通过以上内容的详细介绍,我们可以清晰地理解如何在Flex4中创建页面(状态),并实现页面间的逻辑切换及数据绑定。这对于构建复杂且交互丰富的Flex应用来说是非常重要的。

    flex 关于事件的例子

    Flex是Adobe公司开发的一种用于构建富互联网应用程序(RIA)的框架,主要基于...通过理解和实践这个“flex 关于事件的例子”,初学者能够掌握Flex中事件处理的基本原理和用法,为构建交互式Flex应用打下坚实基础。

    flex分页控件的使用

    在`mx:Script`标签内,你可以编写处理这些按钮点击事件的函数,例如,`method_le()`应实现跳转到首页的功能,`method_l()`则应返回上一页,而`method_r()`和`method_re()`分别用于前进和跳转到最后一页。同时,`...

    Flex +BlazeDS+java后台分页的实现

    6. **事件监听和处理**:在Flex中添加事件监听器,响应用户对分页控件的操作,如点击“上一页”、“下一页”按钮。触发事件后,向后台发送请求并更新数据显示。 7. **优化性能**:考虑到大量数据可能导致性能问题,...

    flex分页 很好很强大

    Flex分页是一种在Web开发中实现页面数据分块显示的技术,尤其在大数据量展示时,它能有效地提高用户体验,减少页面加载时间,并提供流畅的滚动交互。标题“flex分页 很好很强大”和描述“简单引用 很方便”暗示了...

    flex state跳转

    本篇文章将深入探讨“flex state跳转”这一主题,以及如何在Flex项目中利用state来实现页面或组件的动态跳转。 一、什么是Flex State Flex State是Flex应用中的一个重要概念,它允许开发者定义UI组件在不同场景下的...

    flex 分页控件,通过事件处理

    本篇将详细介绍如何在Flex中创建和管理分页控件,并通过事件处理来实现其功能。 首先,我们要了解Flex中的`PagingToolbar`。`PagingToolbar`是Flex中用于实现分页功能的组件,通常与数据网格(如`DataGrid`或`...

    Flex入门文档 -王一松

    页面跳转 - **导航管理**:在复杂的Flex应用中,页面之间的跳转是非常常见的需求。这部分内容会介绍如何实现页面间的导航,以及如何管理和传递状态信息。 #### 11. 样式与主题 - **美化UI**:Flex允许开发者通过...

    flex3 对dataGrid 实现分页

    总之,Flex3中的DataGrid分页是一个涉及数据管理、用户交互和事件处理的过程。通过合理地控制数据加载和更新,我们可以提高应用程序的性能,提供更好的用户体验。学习并掌握这一技术,对于开发大型Flex3应用是至关...

    Flex 分页组件,flex自定义组件

    3. **事件处理**:当用户进行翻页操作时,分页组件会触发事件,如`PageChangeEvent`,这样主程序可以根据事件更新数据源,展示新页面的内容。 4. **数据绑定**:Flex分页组件需要与数据源进行绑定,以便根据分页...

    iOS新版微信底部工具栏遮挡问题完美解决

    造成该现象的原因是,当页面跳转时,微信浏览器会通过window.history读取到浏览的历史记录,此时便会在页面底部显示出前进后退按钮的工具栏,造成页面底部内容遮挡。 三、解决方案: 了解了该问题出现的原因,我们...

    FLEX DATA GRID 分页

    在Flex开发中,数据网格(Data Grid)是一种常用的组件,用于显示大量结构化的数据,并提供交互功能,如排序、筛选和编辑。分页是管理大量数据流的关键特性,它允许用户逐页浏览数据,而不是一次性加载所有内容,...

    flex基于datagrid控件的增删改查及分页实现

    博文链接可能包含了一个具体的实现示例,通过阅读此博客,开发者可以获得关于如何在Flex中实现增删改查和分页操作的详细步骤。 7. FlexTopTest: 这个压缩包文件名“FlexTopTest”可能包含了实现上述功能的一个测试...

    FLEX教程-FLEX教程

    Demo7:页面跳转 - **页面管理**: Flex 应用中页面的组织和切换。 - **技术实现**: - 使用 Flex 的 Navigator 组件。 - 实现页面间的参数传递和状态保持。 #### 14. manager - **Manager 类**: Flex 中用于...

    flex + java教程

    - **页面跳转** 是 Web 应用中的常见需求,Flex 通过不同的方法实现了这一功能。 - 例如,可以使用 `mx.controls.Navigator` 或其他第三方库来实现页面之间的导航。 - 正确地管理页面跳转对于创建流畅的用户体验非常...

    flex分页组件

    总的来说,Flex分页组件是Flex应用中数据管理的关键组件,通过监听和响应"pageChanged"事件,可以实现高效且用户友好的数据浏览体验。理解如何配置、使用和扩展这样的组件,对于开发大型、数据密集型的Flex应用至关...

Global site tag (gtag.js) - Google Analytics