`
zhuobinzhou
  • 浏览: 136534 次
  • 性别: Icon_minigender_1
  • 来自: 广州
文章分类
社区版块
存档分类

ViewStack示例

阅读更多

 

<?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" 
			   >
	
	<s:layout>
		<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
	</s:layout>
	
	<s:Panel title="ViewStack Container" width="600" height="100%"
			 color="0x000000" 
			 borderAlpha="0.15">
		
		<s:layout>
			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
		</s:layout>
		
		<s:Label width="100%" color="0x323232" textAlign="center"
				 text="Use the Button controls to change panels of the ViewStack container."/>
		
		<s:BorderContainer borderStyle="solid" width="100%" color="0x323232">
			
			<s:layout>
				<s:HorizontalLayout horizontalAlign="center"  
									paddingTop="5" paddingLeft="5" 
									paddingRight="5" paddingBottom="5" />
			</s:layout>
			
			<s:Button id="searchButton" label="Search Panel"
					  click="myViewStack.selectedChild=search;"/>
			<s:Button id="cInfoButton" label="Customer Info Panel"
					  click="myViewStack.selectedChild=custInfo;"/>
			<s:Button id="aInfoButton" label="Account Panel"
					  click="myViewStack.selectedChild=accountInfo;"/>
		</s:BorderContainer>
		
		<!-- Define the ViewStack and the three child containers and have it
		resize up to the size of the container for the buttons. -->
		<mx:ViewStack id="myViewStack" borderStyle="solid" 
					  width="100%" height="80%" color="0x323232">
			
			<s:NavigatorContent id="search" label="Search" 
								backgroundColor="0xDCDCDC" 
								width="100%" height="100%" 
								fontWeight="bold" >
				
				<s:layout>
					<s:VerticalLayout horizontalAlign="center"  
									  paddingTop="5" paddingLeft="5" 
									  paddingRight="5" paddingBottom="5" />
				</s:layout>
				
				<s:Label text="Search Panel" />
				<s:HGroup >
					<s:TextInput id="Searchtxt" width="200" />
					<mx:Button label="search" click="Searchtxt.text=''" />
				</s:HGroup>
			</s:NavigatorContent>
			
			<s:NavigatorContent id="custInfo" label="Customer Info" 
								backgroundColor="0xDCDCDC" 
								width="100%" height="100%" 
								fontWeight="bold" >
				
				<s:layout>
					<s:VerticalLayout horizontalAlign="center"  
									  paddingTop="5" paddingLeft="5" 
									  paddingRight="5" paddingBottom="5" />
				</s:layout>
				
				<s:Label text="Customer Info" />
				<s:HGroup>
					<s:Label text="Email Address"/>
					<s:TextInput id="email" width="200"/>
					<s:Button label="Submit" click="email.text='';" />
				</s:HGroup>
			</s:NavigatorContent>
			
			<s:NavigatorContent id="accountInfo" label="Account Info" 
								backgroundColor="0xDCDCDC" width="100%" 
								height="100%" fontWeight="bold" >
				
				<s:layout>
					<s:VerticalLayout horizontalAlign="center"  
									  paddingTop="5" paddingLeft="5" 
									  paddingRight="5" paddingBottom="5" />
				</s:layout>
				
				<s:Label text="Account Info" />
				<s:HGroup>
					<s:Button label="Purchases" />
					<s:Button label="Sales" />
					<s:Button label="Reports" />
				</s:HGroup>
			</s:NavigatorContent>
			
		</mx:ViewStack>
		
	</s:Panel>
	
</s:Application>

 

 

 

例子二:

 

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" fontSize="14">
	<!--创建效果 -->
	<mx:WipeUp id="myWU" duration="3000"/>
	<mx:WipeDown id="myWD" duration="3000"/>
	<mx:WipeRight id="myWR" duration="3000"/>
	<mx:VBox height="427" backgroundColor="#ffffff">
		<mx:LinkBar dataProvider="{myViewStack}" borderStyle="solid" width="368"/>
		<!-- 定义ViewStack容器,它包含3个子容器 -->
		<mx:ViewStack id="myViewStack" 
					  borderStyle="solid" 
					  width="100%" height="100%" 
					  hideEffect="{myWD}" 
					  showEffect="{myWU}">
			<!-- 子容器1-->
			<mx:HBox id="c1" label="栏目1" height="100%" width="100%"
					 hideEffect="{myWD}" 
					 showEffect="{myWU}">
				<mx:Label text="现在显示为栏目1"/>
			</mx:HBox>
			<!-- 子容器2-->
			<mx:Canvas id="c2" label="栏目2" height="100%" width="100%"
					   hideEffect="{myWD}" 
					   showEffect="{myWU}">
				<mx:Label text="现在显示为栏目2"/>
				<mx:Image x="0" y="45" width="363" height="286">
					<mx:source>
						file:///C| /QQ_L.jpg
					</mx:source>
				</mx:Image>
			</mx:Canvas>
			<!-- 子容器3-->
			<mx:VBox id="c3" label="栏目3" height="100%" width="100%"
					 hideEffect="{myWD}" 
					 showEffect="{myWU}">
				<mx:Label text="现在显示为栏目3"/>
			</mx:VBox>
		</mx:ViewStack>
	</mx:VBox>
</mx:Application>

 

分享到:
评论

相关推荐

    flex使用viewstack切换页面的例子

    6. **桌面开发**:由于提及了“桌面开发”,这意味着这个示例可能是在Adobe AIR环境下运行,它允许Flex应用在用户的桌面系统上运行,提供了更丰富的本地功能和交互。 7. **实际应用**:在IMDesktopDemo这个项目中,...

    利用viewstack组件实现各个子组件之间的跳转和数据传递

    在本文中,我们将深入探讨如何使用...解压并查看这个示例项目,可以更直观地了解ViewStack组件在实际开发中的运用。通过学习和实践,你可以掌握如何在Flex项目中灵活地切换视图和传递数据,提升你的应用开发能力。

    Flexstore源码解析1 ViewStack+ToggleButtonBar实现幕布特效

    在我们的示例中,这些ToggleButtons将作为导航菜单,触发ViewStack中不同视图的显示。 实现幕布特效的关键在于如何将ViewStack的切换动作与 ToggleButtonBar 的点击事件关联,并加入适当的动画效果。当用户点击...

    MXViewStackEffectExample FLEX切换效果

    MXViewStackEffectExample是基于Adobe Flex的一个示例项目,展示了如何使用MXViewStack组件和效果来实现平滑的视图切换。Flex是一个开源的、基于MXML和ActionScript的框架,用于构建富互联网应用程序(RIA)。这个...

    xmlplus组件设计系列之路由(ViewStack)(7)

    从xmlplus框架提供的示例中可以看出,ViewStack组件可以通过设置一个静态的index属性来指定哪一个子级组件在初始化时被最先显示。例如,在一个ViewStack中,若index属性被设置为“bar”,则表示“bar”组件会是初始...

    flex sample-跳转

    在描述中提到的示例,我们可能看到一个使用ViewStack实现的多页面应用,其中包含了不同的视图,用户可以通过点击按钮或其他交互方式在这些视图之间切换。 要使用ViewStack,首先需要在MXML代码中声明一个ViewStack...

    Eflex_v1.01 18种效果

    Eflex_v1.01是一款专门用于为ViewStack组件添加特效的工具,它包含了18种不同的视觉效果,能够极大地提升应用程序的用户体验和界面吸引力。ViewStack是Flex框架中的一个关键组件,主要用于在多个视图之间进行切换,...

    Flex特效包org

    4. 示例和教程:可能包括演示如何在项目中使用这些效果的示例代码或文档,以帮助开发者快速上手。 在使用这个库时,开发者需要注意兼容性问题,确保所使用的Flex版本与库相匹配,因为不同的Flex版本可能对某些API有...

    Flex从入门到实践2

    作为示例,我们构建了一个简单的名片管理系统,使用ViewStack、TabNavigator或Accordion等组件来实现数据的添加、查找和删除功能。数据存储在客户端的数组集合中,删除操作会提示用户确认。 5. **小结与习题** 本...

    Efflex for flex

    【Efflex for Flex】是专为Flex开发的一款增强组件库,它主要致力于为Flash平台上的Canvas和Viewstack组件提供丰富的切换特效,特别是包含了引人注目的3D特效。这款工具的出现,极大地提升了Flex应用程序在视觉表现...

    flex的跳转

    在提供的代码示例中,ViewStack包含了三个子组件(shouye, leixing, make),每个子组件都是一个MXML组件,可以通过Button点击事件来改变ViewStack的selectedChild,显示或隐藏对应的页面。 2. **使用navigateToURL...

    Flex垂直button

    示例代码如下: ```xml 按钮1" /&gt; 按钮2" /&gt; 按钮3" /&gt; ``` 接下来,我们讨论在Flex中创建带有垂直标签的TabNavigator。TabNavigator是Flex提供的一个多视图组件,可以方便地在多个面板之间切换,每个面板都...

    (十四)Flex4_导航

    NavigatorContent用于承载单个视图,而ViewStack则允许用户在多个视图之间进行堆叠式切换。此外,还有TabNavigator、Accordion和Carousel等组件,它们提供了不同形式的导航体验。 Flex 4引入了Skinning和States的...

    使用 Flex3 开发 OLAP 应用

    以下是一个示例代码片段,展示了如何使用`ViewStack`组件将多个图表组合在一起,并通过切换`ViewStack`的tab来查看不同的图表视图: ```xml ... &lt;mx:ViewStack id="viewStack" width="100%" height="75%" ...

    Flex页面跳转.txt

    根据给定文件的信息,本文将深入探讨Flex页面跳转的各种方式,并通过具体的代码示例来解释如何在实际项目中实现这些跳转。 #### 二、Flex页面跳转方法概述 Flex提供了多种页面跳转的方式,主要包括: 1. **使用...

    Flex3 TabNavigator

    总结一下,这个示例展示了如何利用Flex3的组件扩展机制,通过创建自定义的`RichTabNavigator`、`RichTabBar`和`RichTab`类,实现TabNavigator的标签页可关闭功能。这种技术在需要灵活控制标签页行为的富互联网应用...

    Flex视图切换,自定义控件Demo.rar

    在"Login"这个文件名中,我们可以推测这是一个登录界面的示例。在Flex中,创建登录界面通常涉及到自定义控件,例如创建一个包含用户名和密码输入框的表单,以及登录按钮。这些控件可能需要处理用户输入,验证数据,...

    flex页面跳转及数据绑定

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

    FLEX入门实例--------transition,state的综合运用

    此外,参考博文链接(https://hacker47.iteye.com/blog/196366)可能会提供更详细的解释和示例,帮助你深入理解FLEX中`transition`和`state`的应用。通过实践和探索,你可以创造出更炫酷的动态效果,丰富你的FLEX...

    Flex 开发实例( ArcGIS)

    ViewStack组件允许开发者在一个容器中切换不同的视图。这通常用于实现类似选项卡面板的效果,每个选项卡对应一个不同的视图。 #### 11. 表单 Form Form组件用于收集用户的输入信息。它支持数据验证和数据绑定功能...

Global site tag (gtag.js) - Google Analytics