这是什么控制以及如何使用它的BB导航10级联 [英] what is this control and how to use it in BB 10 cascades for navigation

问题描述

我需要开发一个BB 10级联的应用程序中，我需要把这个图像中添加控件像

I need to develop a bb 10 cascades app in which i need to add a control like in this image

http://subefotos.com/ver/?37868d57047746ce1ea9ca55b7637e9eo.jpg#codigos

（四舍五入以红色）

当我在第二个泡沫碰，我需要显示第二个屏幕，第三泡第三个屏幕等。应显示默认屏幕是第一个屏幕（第一泡灯高）

when i touch on second bubble, i need to show second screen ,for third bubble third screen and so on. Default screen should be displayed is first screen(first bubble high lights)

但如何做到这一点的BB​​ 10瀑布，什么是所谓的BB 10的控制？

but how to do it in BB 10 cascades and what is that control called in bb 10?

请帮忙，

谢谢！

推荐答案

------- AM ADDED页面导航的位置，重用此code为您的项目----------- -

-------AM ADDED PAGE NAVIGATION HERE, REUSE THIS CODE FOR YOUR PROJECT-------------

从我的github样本获取示例应用程序为您查询....

Get sample app from my github samples for your query....

https://github.com/svmrajesh/ BB-10-瀑布/树/主/ MY％20APPS / stackNavigation

1.main.qml：（第一页）

1.main.qml: (first page)

import bb.cascades 1.0

NavigationPane { id: navigationPane backButtonsVisible: false peekEnabled: false

Page {
    id: rootPage
    Container {
        background: Color.LightGray

        layout: DockLayout {

        }
        Label {
            text: "First page"
            horizontalAlignment: HorizontalAlignment.Center
            verticalAlignment: VerticalAlignment.Center
        }
    }

    actions: [
        ActionItem {
            title: "Next page"
            ActionBar.placement: ActionBarPlacement.OnBar
            onTriggered: {
                var page = pageDefinition.createObject();
                navigationPane.push(page);

            }

            attachedObjects: ComponentDefinition {
                id: pageDefinition
                source: "PageTwo.qml"
            }
        }
    ]
}
onPopTransitionEnded: {
    page.destroy();
}

}

2.second页

}

2.second page

import bb.cascades 1.0

Page { id: pageTwo Container { background: Color.Gray layout: DockLayout {

    }
    Label {
        text: "Second page"
        horizontalAlignment: HorizontalAlignment.Center
    }


    Container {
        layout: StackLayout {

        }
        horizontalAlignment: HorizontalAlignment.Center
        verticalAlignment: VerticalAlignment.Center

        Button {

        text: qsTr("Next Page")
        imageSource: "asset:///images/picture1thumb.png"
        onClicked: {
            // show detail page when the button is clicked
            var page = getSecondPage();
            console.debug("pushing detail " + page)
            navigationPane.push(page);
        }
        property Page secondPage
        function getSecondPage() {
            if (! secondPage) {
                secondPage = secondPageDefinition.createObject();
            }
            return secondPage;
        }
        attachedObjects: [
            ComponentDefinition {
                id: secondPageDefinition
                source: "PageTwoOne.qml"
            }
        ]
    }

    Button {
       text: "Previous Page"
       onClicked: {
           navigationPane.pop();
       }

    }

}
}

/* ------------- Use this Code If back button visibility is "True"-----------------

paneProperties: NavigationPaneProperties {

    backButton: ActionItem {
        title: "Back"
     // imageSource: "asset:///back.png"
        onTriggered: {
            navigationPane.pop();
        }
        }
} */

}

3.last页

}

3.last page

import bb.cascades 1.0

Page { id: pageTwoone

    Container {
 background: Color.DarkGray
 layout: DockLayout {}

 Label {
        horizontalAlignment: HorizontalAlignment.Center
        text: "Last Page"
 }


 Container {
      layout: StackLayout {}
      horizontalAlignment: HorizontalAlignment.Center
      verticalAlignment: VerticalAlignment.Center


    Button {
        horizontalAlignment: HorizontalAlignment.Center
        verticalAlignment: VerticalAlignment.Center
        text: qsTr("Goto Home Page")

        onClicked: {
            // show detail page when the button is clicked
            navigationPane.navigateTo(rootPage);
             }
            }
        Button {
            horizontalAlignment: HorizontalAlignment.Center
            verticalAlignment: VerticalAlignment.Center
            text: qsTr("Goto Back")

            onClicked: {
                // show detail page when the button is clicked
                navigationPane.pop();
            }

        }
    }
}
}

------------添加更多的页面中使用这个code导航------------------------ ----

------------ ADD More pages to navigate using this code----------------------------

-------------复制此code和运行..从上面的链接获得示例应用程序如果需要的话------

-------------copy this code and run.. get sample app from above link if needed ------

这篇关于这是什么控制以及如何使用它的BB导航10级联的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！