Change UI when button pressed

SimonR

Hello everybody,
I am new to QML and need some help here: I have 2 ui.qml files. I want when the user presses a button, the ui changes to my other file. How can I do that?

Markkyboy

@SimonR - please paste your code (both files if possible) so we 'the community' have something to play with, although more experienced users can probably answer you without seeing your code, but it would be helpful (for me) to see it, thanks.

SimonR

Code:

SignInForm.ui.qml

import QtQuick 2.9
import QtQuick.Controls 2.2

PageBackground {
    id: pageBackground
    width: 600
    height: 480
    property alias create_account: create_account
    property alias login: login
    property alias password: password
    property alias username: username

    TextField {
        id: username
        y: 140
        anchors.horizontalCenter: parent.horizontalCenter
        placeholderText: qsTr("Username")
    }

    TextField {
        id: password
        x: -4
        y: -1
        anchors.horizontalCenterOffset: 0
        placeholderText: qsTr("Password")
        anchors.verticalCenterOffset: 0
        anchors.centerIn: parent
        echoMode: TextInput.Password
    }

    Button {
        id: login
        x: 100
        y: 297
        text: qsTr("Log-In")
        anchors.horizontalCenter: parent.horizontalCenter
        font.pointSize: 16
    }

    Button {
        id: create_account
        x: 246
        y: 271
        width: 109
        height: 20
        text: qsTr("Create an account") //when Button pressed, change to SignUpForm.ui.qml
        anchors.horizontalCenter: parent.horizontalCenter
    }
}

SignIn.qml

import QtQuick 2.4
import QtQuick.Controls 2.2
import com.SimonCplusplus.signin 1.0 //C++ class to use the user input in C++

SignInForm {
    SIGNIN {
        id: signin
    }

    username.onEditingFinished: signin.username = username.text
    password.onEditingFinished: signin.password = password.text
    //when Button pressed, change to SignUpForm.ui.qml
}

SignUpForm.ui.qml

import QtQuick 2.9
import QtQuick.Controls 2.2

PageBackground {
    width: 600
    height: 480
    property alias sign_up: sign_up
    property alias password_new: password_new
    property alias username_new: username_new

    TextField {
        id: username_new
        y: 140
        anchors.horizontalCenter: parent.horizontalCenter
        placeholderText: qsTr("Username")
    }

    TextField {
        id: password_new
        x: -4
        y: -1
        anchors.horizontalCenterOffset: 0
        placeholderText: qsTr("Password")
        anchors.verticalCenterOffset: 0
        anchors.centerIn: parent
        echoMode: TextInput.Password
    }

    Button {
        id: sign_up
        x: 100
        y: 297
        text: qsTr("Sign-up")
        anchors.horizontalCenter: parent.horizontalCenter
        font.pointSize: 16
    }
}

SignUp.qml

import QtQuick 2.4
import QtQuick.Controls 2.2
import com.SimonCplusplus.signup 1.0

SignUpForm {
    SIGNUP {
        id: signup
    }

    username_new.onEditingFinished: signup.username = username_new.text
    password_new.onEditingFinished: signup.password = password_new.text
}

main.qml

import QtQuick 2.6
import QtQuick.Controls 2.0

ApplicationWindow{
    id: root
    width: 600
    height: 480
    visible: true

     SignIn {
    }
}

Please excuse that there might be some issues, but I'm new to QML. I just want when the user presses the button create_account the application should change to SignUp.

Markkyboy

I am also new(ish) to QML, so there may well be a lack of understanding on my part.

I am struggling to get your code to run, I'm seeing many errors I cannot resolve. could you also paste your .pro file please, thanks

SimonR

You get errors because you don't have the C++ functions. I'll paste my whole project in here.
This should help. Just download the project and build it.

Markkyboy

@SimonR - thank you, I can compile it now, I'm due to go for lunch shortly, meanwhile, have a look at this question/answer found here on QtForum, see if this helps at all;

https://forum.qt.io/topic/72569/functions-are-not-supported-in-a-qt-quick-ui-form/2

I've tried my usual approaches but I get "functions are not supported in a Qt Quick UI form! as per the title of the link above.