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实现页面的跳转(转)

flex其中没有页面跳转这个说法,其实,就是应用程序的切换。网上的方法:1)viewstack, 2)state 3)modular 4)navigator url 转贴:http://www.cnb...

flex中TabBar、ButtonBar以及ViewStack

flex中实现标签页的方法: 方法1:                        width="100%" height="100%" top="22" change="costViewSt...

flex 使用viewstack实现页面的跳转(转)

flex中实际没有页面跳转的概念,都只有在一个页面中,隐藏显示。那怎样才能很好地实现页面的跳转呢?我经过昨天不懈地努力尝试,终于实现了一种页面跳转的方法。   在网上查询相关资料中,都是说有如下几种...

Accordion 、ViewStack、TabNavigator 导航组件

1) Accordion 这个是一个可以收缩的导航控件,就像常用的QQ、MSN聊天工具的折叠面板。这个我们可以了解一下Accordion的selectedIndex和selectedChild两个属性...

flex使用viewstack切换页面的例子

  • 2011年07月03日 00:50
  • 4.63MB
  • 下载

Flex viewstack切换

  • 2013年10月23日 10:24
  • 2.47MB
  • 下载

flex4.5使用viewstack实现页面跳转

创建一个flex项目,主页面为main.mxml放在默认包下,和三个Canvas组件(放在component包下),代码如下: main.mxml                xmlns...

flex ViewStack 主程序与自定义组件传参

页面效果: 很多情况下,应用都是动态数据,需要根据左边的树点击后,动态设置右边参数. Index.mxml代码如下:                                ...

Flex的导航TabNavigator演示示例

Flex4 中使用ModuleLoader为子容器 动态加入到TabNavigator导航器容器中的例子

经常在一些工程中看到 选择左侧目录树 右侧添加TAB加载内容的例子 如图 在这里使用ModuleLoader作为子容器 将其动态的加入到TabNavigator中的例子 首先建立几个Modu...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:flex_ViewStack导航容器示例;
举报原因:
原因补充:

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