flex_ViewStack导航容器示例;

原创 2012年03月23日 16:05:54

=》TVView.mxml自定义组件

<?xml version="1.0" encoding="utf-8"?>

<s:NavigatorContent xmlns:fx="http://ns.adobe.com/mxml/2009"
                    xmlns:s="library://ns.adobe.com/flex/spark"
                    xmlns:mx="library://ns.adobe.com/flex/mx"
                    width="100%" height="100%">
    
    <!--view-->
    <s:Panel title="电视" width="100%" height="100%">
        <s:layout>
            <s:VerticalLayout paddingLeft="20" paddingTop="20" paddingRight="20" paddingBottom="20"/>
        </s:layout>
        
        <s:HGroup width="100%" enabled="false">
            <s:TextInput id="searchfield" width="100%"/>
            <s:Button id="searchBtn" label="Search for TVs"/>
        </s:HGroup>
        
        <s:Line width="100%">
            <s:stroke>
                <s:SolidColorStroke color="0x000000" weight="1" caps="square"/>
            </s:stroke>
        </s:Line>
        
        <s:Spacer height="10"/>
        <s:Label text="搜索结果:抱歉!没有搜到这类型、款式的电视的相关信息!" fontWeight="bold" fontSize="16"/>
    </s:Panel>
    
</s:NavigatorContent>

=》Computer.mxml自定义组件

<?xml version="1.0" encoding="utf-8"?>
<s:NavigatorContent xmlns:fx="http://ns.adobe.com/mxml/2009"
                    xmlns:s="library://ns.adobe.com/flex/spark"
                    xmlns:mx="library://ns.adobe.com/flex/mx"
                    width="100%" height="100%">
    
    <!--view-->
    <s:Panel title="计算机(电脑)" width="100%" height="100%">
        <s:layout>
            <s:VerticalLayout paddingLeft="20" paddingTop="20" paddingRight="20" paddingBottom="20"/>
        </s:layout>
        
        <s:HGroup width="100%" enabled="false">
            <s:TextInput id="comSearch" width="100%"/>
            <s:Button id="comBtn" label="Search for Computer"/>
        </s:HGroup>
        
        <s:Line width="100%">
            <s:stroke>
                <s:SolidColorStroke color="0x000000" weight="1" caps="square"/>
            </s:stroke>
        </s:Line>
        
        <s:Spacer height="10"/>
        <s:Label text="搜索结果:抱歉!没有搜到要查找的计算机类型信息!" fontWeight="bold" fontSize="16"/>
    </s:Panel>
</s:NavigatorContent>

=》ViewStack.mxml应用程序

<?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/mx"
               xmlns:ViewStack="learns.ViewStack.*"
               minWidth="1024" minHeight="768" pageTitle="ViewStack导航容器示例">
    
    <!-- Demo_ViewStack导航容器示例 -->
    
    <s:layout>
        <s:VerticalLayout paddingLeft="20" paddingRight="20" paddingTop="10" />
    </s:layout>
    <fx:Script>
        <![CDATA[
            import mx.events.IndexChangedEvent;
            
            protected function stack_changeHandler(event:IndexChangedEvent):void
            {
                // 获取切换到的容器:
                var relatedgroup:Object = event.relatedObject;
                
                // 打印日志:
                trace("=1>Old index: " + event.oldIndex + "; \n=2>New index: " + event.newIndex + "; \n" +
                    "=3>Label of new selection: " + relatedgroup.label + ";");
            }
            
        ]]>
    </fx:Script>
    
    <!--view-->
    <s:ButtonBar dataProvider="{stack}"/>
    
    <mx:ViewStack id="stack" width="650" height="200" change="stack_changeHandler(event)">
        <ViewStack:TVView label="购买电视" />
        <ViewStack:ComputerView label="购买电脑" />
    </mx:ViewStack>
    
</s:Application>



Flex ViewStack页面跳转

//主页面(应用) Main.mxml //子页面(组件) MarketingForecast.mxml import mx.core.Container; import m...
  • xumengxing
  • xumengxing
  • 2012年10月10日 15:23
  • 1024

Flex4 Halo 导航容器示例

这里简单介绍Halo的导航容器,使用容器是创建Flex4应用程序布局和导航的最简单方式。 如下例子将写一个Flex Halo导航的简单示例,相关解释在注释中。 ...
  • PrinceTerence
  • PrinceTerence
  • 2014年05月09日 17:55
  • 1090

《React-Native系列》43、通用容器和导航设计方案

在现阶段我们的RN实践都是基于已发布过的APP,譬如将从某个入口进入的子模块都替换成RN页面。那么我们可以将这个子模块设计成一个通用RN容器,所有的RN页面都在RN容器内部跳转。RN容器在iOS使用U...
  • hsbirenjie
  • hsbirenjie
  • 2016年11月23日 23:19
  • 3097

SSIS--->>>> 图文并貌简单使用for循环容器

 测试使用foreach循环容器循环向数据库中添加数据1.建立测试表:  use master  create table TestFor(id int,value varchar(10))2.建立I...
  • jiangshun
  • jiangshun
  • 2009年08月13日 23:48
  • 2349

构建Apache Tomcat 6.0 Servlet/JSP 容器

构建Apache Tomcat 6.0 Servlet/JSP 容器这个子项目包含了Tomcat 6.0的源代码,一个实现了Java Community Process http://www.jcp....
  • zhanggang807
  • zhanggang807
  • 2015年08月15日 21:40
  • 371

面包屑导航:最佳实践和范例

译文出处:http://www.cogu.cn/archives/65 本文翻译自:http://www.hongkiat.com/blog/breadcrumb-navigation-exam...
  • adoocoke
  • adoocoke
  • 2012年12月16日 10:39
  • 2618

实用好看的CSS+JS+table 导航

实用好看的CSS+JS+table 导航
  • qq_19524879
  • qq_19524879
  • 2015年07月09日 08:51
  • 1394

iOS 视图切换(UITabBarController,UINavigation,Controller模态窗口)

在iOS开发中视图的切换是很频繁的,独立的视图应用在实际开发过程中并不常见,除非你的应用足够简单。在iOS开发中常用的视图切换有三种,今天我们将一一介绍:UITabBarController,UINa...
  • jichunw
  • jichunw
  • 2015年03月11日 11:57
  • 2181

导航容器viewStack

 大家好,很高兴来学习flex。今天将探讨一下导航容器viewStack。viewStack和TabNavigator都是导航容器,两者都有相似之处,明显的不同点在于viewStack在将子容器插入之...
  • xiaoxin888888
  • xiaoxin888888
  • 2009年03月10日 10:20
  • 1971

js二级导航菜单代码实例

分享一个比较简单的二级导航菜单效果。 鼠标悬浮菜单能够出现二级菜单,代码实例如下: 00100200300400500600700800901001101201301401501601701801...
  • Return_KB
  • Return_KB
  • 2018年01月10日 10:05
  • 90
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:flex_ViewStack导航容器示例;
举报原因:
原因补充:

(最多只允许输入30个字)