Bb10 connecting qml layouts

Question

How do i load a view when i click a button from one qml layout to other qml? as I'm having a login button if i click the button i want to display the next screen, which is the landing screen, how to do this? can anyone send some idea? Thanks. I know the onclicked but how do i reference it to other qml layouts?

ImageButton {
                    id: btnlogin
                    topMargin: 50
                    verticalAlignment: VerticalAlignment.Center
                    horizontalAlignment: HorizontalAlignment.Center
                    defaultImageSource: "asset:///images/button_login.png"

                    onClicked: {
                        onClicked: {

nicolas nicolas · Accepted Answer · 2013-06-30T13:51:43

There are several ways to achieve this. You can :

1 - Call a C++ function that will show the next screen. To do that you have to create a Q_INVOKABLE method (for instance in the Class associated with your current Page) such as

Q_INVOKABLE void showLoginPage();

Then you call it from the QML this way

onClicked: {
    controller.showLoginPage();
}

2 - Show the next screen directly from the QML.

onClicked: {
    // Directly show the next page from here
}

Then to actually show the next screen, there also are different ways depending on the kind of navigation you have :

1 - Push the screen if you are using a NavigationPane :

C++ example

QmlDocument *qml = QmlDocument::create("LoginPage.qml");

// Creates the root using the page node 
Page *loginPage = qml->createRootNode<Page>();

// Push the login page
navigationPane->push(loginPage);

QML example

ImageButton {
    id: btnlogin
    topMargin: 50
    verticalAlignment: VerticalAlignment.Center
    horizontalAlignment: HorizontalAlignment.Center
    defaultImageSource: "asset:///images/button_login.png"
    onClicked: {
         // show login page when the button is clicked
         var page = getLoginPage();
         navigationPane.push(page);
    }
    property Page loginPage
    function getLoginPage() {
        if (!loginPage) {
            loginPage = loginPageDefinition.createObject();
        }
        return loginPage;
    }
    attachedObjects: [
        ComponentDefinition {
            id: loginPageDefinition
            source: "LoginPage.qml"
        }
    ]

2 - You could also use Sheets

3 - ...

There are many ways to achieve what you want to do.

Hope those little tips will help.

Bb10 connecting qml layouts

1 Answers