`

F3 v. F4: Using ViewStack, TabNavigator and Accordion

阅读更多
You have probably used mx:ViewStack, mx:TabNavigator and mx:Accordion somewhere in your Flex development efforts over the last 5+ years and had code that looks like this:

<mx:TabNavigator width="400" height="200" horizontalCenter="0" y="15">
    <mx:VBox label="Tab 1">
        <mx:Label text="This is tab 1"/>
    </mx:VBox>
    <mx:VBox label="Tab 2">
        <mx:Label text="This is tab 2"/>
    </mx:VBox>
    <mx:VBox label="Tab 3">
        <mx:Label text="This is tab 3"/>
    </mx:VBox>
</mx:TabNavigator>
   
<mx:Accordion width="400" height="200" horizontalCenter="0" y="225">
    <mx:VBox label="Accordion 1">
        <mx:Label text="This is Accordion 1"/>
    </mx:VBox>
    <mx:VBox label="Accordion 2">
        <mx:Label text="This is Accordion 2"/>
    </mx:VBox>
    <mx:VBox label="Accordion 3">
        <mx:Label text="This is Accordion 3"/>
    </mx:VBox>
</mx:Accordion>


Perhaps you would like to continue to use TabNavigator and Accordion within your Flex 4 efforts but you would like the children to be Spark components. Since there is no equivalent to these components yet within Spark, you will need still need to use the mx namespace within your Flex 4 application. If you have tried something like this:

<mx:TabNavigator width="400" height="200" horizontalCenter="0" y="15">
    <s:VGroup>
        <s:Label text="This is tab 1"/>
    </s:VGroup>
    <s:VGroup>
        <s:Label text="This is tab 2"/>
    </s:VGroup>
    <s:VGroup>
        <s:Label text="This is tab 3"/>
    </s:VGroup>
</mx:TabNavigator>
   
<mx:Accordion width="400" height="200" horizontalCenter="0" y="225">
    <s:VGroup>
        <s:Label text="This is Accordion 1"/>
    </s:VGroup>
    <s:VGroup>
        <s:Label text="This is Accordion 2"/>
    </s:VGroup>
    <s:VGroup>
        <s:Label text="This is Accordion 3"/>
    </s:VGroup>
</mx:Accordion>


You will have received an error that said “The children of Halo navigators must implement INavigatorContent.“. So, what does this mean? Are you screwed and forced to start over and redesign your UI? No, the fix is easy, just wrap your Spark components in a Spark NavigatorContent component.

<mx:TabNavigator width="400" height="200" horizontalCenter="0" y="15">
    <s:NavigatorContent label="Tab 1">
        <s:VGroup>
            <s:Label text="This is tab 1"/>
        </s:VGroup>
    </s:NavigatorContent>
    <s:NavigatorContent label="Tab 2">
        <s:VGroup>
            <s:Label text="This is tab 2"/>
        </s:VGroup>
    </s:NavigatorContent>
    <s:NavigatorContent label="Tab 3">
        <s:VGroup>
            <s:Label text="This is tab 3"/>
        </s:VGroup>
    </s:NavigatorContent>
</mx:TabNavigator>
   
<mx:Accordion width="400" height="200" horizontalCenter="0" y="225">
    <s:NavigatorContent label="Accordion 1">
        <s:VGroup>
            <s:Label text="This is Accordion 1"/>
        </s:VGroup>
    </s:NavigatorContent>
    <s:NavigatorContent label="Accordion 2">
        <s:VGroup>
            <s:Label text="This is Accordion 2"/>
        </s:VGroup>
    </s:NavigatorContent>
    <s:NavigatorContent label="Accordion 3">
        <s:VGroup>
            <s:Label text="This is Accordion 3"/>
        </s:VGroup>
    </s:NavigatorContent>
</mx:Accordion>
分享到:
评论

相关推荐

    Developing Flex Applications 910p dda_doc88_cracker.zip

    The relationship between MXML and ActionScript classes. . . . . . . . . . . . . . . . . . 37 How MXML relates to standards. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43...

    Flex常规控件和组件

    4. LinkBar:LinkBar 是一组水平或垂直排列的 LinkButton,常用于控制 ViewStack 容器的子视图或创建独立链接。用户点击 LinkButton 时,内容会被高亮,类似网页中的超链接。 5. LinkButton:LinkButton 是无边框的...

    marionette.viewstack:Marionette 的视图堆栈实现

    Marionette.Viewstack Marionette 的视图堆栈实现安装可能...选择(backbone.viewstack)[ ] (backbone.viewstack.js)[ ] backbone.viewstack.js看起来更高级,并且有一个很棒的演示,但它没有满足我的需求,我不需要定义

    Flex从入门到实践2

    通过`&lt;mx:Accordion&gt;`标签创建Accordion导航容器,它提供了一种紧凑的界面布局,使用户可以方便地查看和访问各个表单。 4. **实例:名片管理系统** 作为示例,我们构建了一个简单的名片管理系统,使用ViewStack、...

    flex使用viewstack切换页面的例子

    在ActionScript中,你可以通过`viewStack.selectedChild = loginPanel;`来切换到名为`loginPanel`的面板。在MXML中,可以通过改变`selectedIndex`属性来实现切换,如`&lt;s:ViewStack selectedIndex="{index}"&gt;`,其中`...

    flex3 tabnavigator一个很好的例子

    viewStack.addChild(tab1); viewStack.addChild(tab2); tabNav.addChild(viewStack); ``` 这段代码创建了TabNavigator,并添加了两个Canvas实例作为选项卡。 3. **属性和事件**:TabNavigator有许多可配置的...

    Flex页面跳转.txt

    1. **定义ViewStack**:在MXML中定义一个`ViewStack`组件,并设置其属性如`creationPolicy`等。 ```xml &lt;mx:ViewStack id="storeViews" width="100%" height="550" creationPolicy="all"&gt; 主页" showEffect=...

    Flex4视频教程_03-08导航器.rar

    主要的导航组件有NavigatorContent、ViewStack、TabNavigator、Accordion、HorizontalNavigator和VerticalNavigator等,它们各自有特定的用途和显示方式。 NavigatorContent是导航容器的基础元素,通常用于包含单一...

    flex的跳转

    另一种常见的方式是将不同的界面封装为MXML组件,然后通过TabNavigator或Accordion等组件来实现页面的切换。这些组件提供了一种可视化的方式来管理多个组件,用户可以通过点击标签或展开/折叠来切换视图。此外,...

    Eflex_v1.01 18种效果

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

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

    viewStack.addEventListener(FlexEvent.CHANGE, onViewSwitched); function onViewSwitched(event:FlexEvent):void { // 在这里处理视图切换的逻辑 } ``` 3. **使用导航控制**:如果是在MXML中,可以使用 navigator...

    MXViewStackEffectExample FLEX切换效果

    MXViewStackEffectExample则可能包含了一些自定义的效果代码,这些代码可能是通过ActionScript实现的,用来在切换ViewStack中的视图时添加动画效果。ActionScript是Flex的主要编程语言,它基于ECMAScript,提供了...

    Flex垂直button

    在本文中,我们将深入探讨如何在Flex环境中创建一个垂直排列的按钮(Flex Vertical Button)以及一个包含垂直标签的TabNavigator组件。Flex是一个基于ActionScript 3.0的开放源代码框架,用于构建富互联网应用程序...

    深入浅出flex中文教程

    1. Flex框架:包括Application、ViewStack、Canvas等容器,以及EventDispatcher事件处理机制,为开发者提供了一套完整的开发架构。 2. Flex Builder:是基于Eclipse的集成开发环境,提供代码提示、调试、预览等功能...

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

    1. **初始化ViewStack和ToggleButtonBar**:首先,你需要在代码中创建ViewStack和ToggleButtonBar实例,为每个幕布内容添加一个ViewStack的子组件,并在ToggleButtonBar中定义每个按钮。 2. **关联按钮和视图**:接...

    使用 Flex3 开发 OLAP 应用

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

    Flex viewstack切换

    Flex 实现viewstack简单切换。

    Android ViewStackActivity 演示

    - `View1.java`, `View2.java`, ...: 各个需要切换的View类,它们继承自`View`或`ViewGroup`,并且可能包含各自独特的UI和交互逻辑。 - `res/layout/main.xml`: Activity的布局文件,可能包含了一个可以容纳多个子...

    flex albumn

    - `ViewStack` 或 `TabNavigator`: 用于切换不同相册视图的容器,用户可以浏览不同的相册页面或标签。 - `List` 或 `DataGrid`: 显示相片列表,与数据绑定结合,可以从服务器动态加载数据。 - `Image` 组件:展示...

Global site tag (gtag.js) - Google Analytics