Redirection - Login.qml to Home.qml

[Mathan]

Hi,

I am developing an mobile app in Qt/C++. I had designed the Login page , Now i have to redirect to HomePage.qml.
How can I achieve that?

Thanks in advance.

[anda_skoa]

How do you display Login.qml?

Is it directly instantiated in your main QML file?
Is it the main QML file?

Cheers,
_

[Mathan]

Sorry for the delay,

HomePage.QML will not be the mail QML file.

What I did:
Created one qml file called HomePage.Qml, after login successful I have to show the HomePage.qml.

Thanks in advance

[anda_skoa]

HomePage.QML will not be the mail QML file.

Sorry, misunderstanding, this is not what I was asking for.

Is Login.qml the main QML file? The one you are passing to QQuickView or QQuickWindow?

Or are you loading a different QML file first that then instantiates a Login object or uses a Loader to load Login.qml?

Cheers,
_

[Mathan]

Sorry for the delay.

Right now I had kept main.qml as a MAIN and wrote the qml code for the Login [Getting user credential/Validated].
Now, I have to show the list item which is in ListProduct.qml. So How it can be done?
Ex: in .Net - Redirect or server.transfer

Here in Qt, What approach I have to follow?

[anda_skoa]

Right now I had kept main.qml as a MAIN and wrote the qml code for the Login [Getting user credential/Validated].

So your main.qml contains the code for login and you don't have a separate Login.qml?

Maybe it would be better if you posted some code instead of randomly referring to different files.

Cheers,
_

[Mathan]

Yes, You are right, Login.qml code has to logically seprated, Since I unable to redirect to Login.qml from main.qml, I had implanted the code in main.qml itself.

According to this code, text field with username and password will be shown, Once the user is authenticated, I setting to load an method.

Code of main.qml:

import QtQuick 2.3
import QtQuick.Controls 1.2
import Esri.QtCPPSearchV4 1.0
 
import QtQuick.Layouts 1.0
 
QtCPPSearchV4 {
    id: objQtCPPSearchV4
    width: 800
    height: 600
 
    // add a mapView component
    MapView {
        anchors.fill: parent
        objectName: "mapView"
    }
 
    Rectangle{
    id: idthisLogin
    anchors.fill: parent
    property bool loginSuccess: false
    color: "white"
 
    Timer{
    id: idinfoTimer
    interval: 5000;
    running:  false;
    repeat: false;
    onTriggered: {
 
        if(idthisLogin.loginSuccess){
        idInfoPopUp.visible = true
        idthisLogin.visible = false
        }else
        {
 
        idLoginColumn.visible = true
        }
 
 
    }//onTriggered
 
    }//Timer
 
    MouseArea{
        anchors.bottomMargin: 0
        anchors.leftMargin: 1
        anchors.rightMargin: -1
        anchors.topMargin: 0
        anchors.fill:parent
        onClicked: {
    console.log("Clicked Mouse Area: Login");
    }
    }
 
 
 
    Item {
        id: idItemLogin
        width: parent.width / 2
        anchors.centerIn: parent
        anchors.verticalCenterOffset: -parent.height / 4
 
        ColumnLayout{
                    id: idLoginColumn
                    anchors.fill: parent
                    anchors.margins: 3
                    spacing: 3
 
                    TextField{
                    id: idUsernameTextField
                    Layout.fillWidth: true
                    placeholderText: "UserName"
                    }
 
                    TextField{
                    id: idPasswordTextField
                    Layout.fillWidth: true
                    placeholderText: "Password"
                    }
 
                    Button{
                    id: idbtnSubmit
                    Layout.fillWidth: true
                    text: "Login"
 
                    onClicked: {
                    console.log("ProcessButton: id = ", idUsernameTextField.text)
                    console.log("ProcessButton: Password = ", idPasswordTextField.text)
 
                        if(idUsernameTextField.text == "m" && idPasswordTextField.text == "123"){
                            idthisLogin.loginSuccess = true;
                            idLoginColumn.visible = false
 
                            idinfoTimer.start ()
                            idInfoPopUp.info = qsTr("Login Success!");
                            idInfoPopUp.visible = true
                            objQtCPPSearchV4.funcLoadBasemap();
 
 
 
 
                        }
                        else
                        {
                            idthisLogin.loginSuccess = false
                            idInfoPopUp.info = qsTr("Login Failed!");
                            idLoginColumn.visible = true
 
 
                        }
 
                        idUsernameTextField.text = ""
                        idPasswordTextField.text = ""
 
 
                    }
                    }
 
        }//ColumnLayout
 
        Rectangle{
        id: idInfoPopUp
        color: "red"
        anchors.fill: parent
        property string info: qstr("Login");
        visible: false
 
        Text {
            width: 318
            height: 65
 
            text: idInfoPopUp.info
            anchors.verticalCenterOffset: -5
            anchors.horizontalCenterOffset: 0
            anchors.centerIn: parent;
        }
 
        }
 
    }//Item
 
 
    }//Rectangle
 
 
 
 
    /*Function for the JavaScript*/
    function funcLoadBasemap()
    {
        objQtCPPSearchV4.metLoadBaseMap()
 
    }
 
}//QtCPPSearchV4

import QtQuick 2.3
import QtQuick.Controls 1.2
import Esri.QtCPPSearchV4 1.0

import QtQuick.Layouts 1.0

QtCPPSearchV4 {
    id: objQtCPPSearchV4
    width: 800
    height: 600

    // add a mapView component
    MapView {
        anchors.fill: parent
        objectName: "mapView"
    }

    Rectangle{
    id: idthisLogin
    anchors.fill: parent
    property bool loginSuccess: false
    color: "white"

    Timer{
    id: idinfoTimer
    interval: 5000;
    running:  false;
    repeat: false;
    onTriggered: {

        if(idthisLogin.loginSuccess){
        idInfoPopUp.visible = true
        idthisLogin.visible = false
        }else
        {

        idLoginColumn.visible = true
        }


    }//onTriggered

    }//Timer

    MouseArea{
        anchors.bottomMargin: 0
        anchors.leftMargin: 1
        anchors.rightMargin: -1
        anchors.topMargin: 0
        anchors.fill:parent
        onClicked: {
    console.log("Clicked Mouse Area: Login");
    }
    }



    Item {
        id: idItemLogin
        width: parent.width / 2
        anchors.centerIn: parent
        anchors.verticalCenterOffset: -parent.height / 4

        ColumnLayout{
                    id: idLoginColumn
                    anchors.fill: parent
                    anchors.margins: 3
                    spacing: 3

                    TextField{
                    id: idUsernameTextField
                    Layout.fillWidth: true
                    placeholderText: "UserName"
                    }

                    TextField{
                    id: idPasswordTextField
                    Layout.fillWidth: true
                    placeholderText: "Password"
                    }

                    Button{
                    id: idbtnSubmit
                    Layout.fillWidth: true
                    text: "Login"

                    onClicked: {
                    console.log("ProcessButton: id = ", idUsernameTextField.text)
                    console.log("ProcessButton: Password = ", idPasswordTextField.text)

                        if(idUsernameTextField.text == "m" && idPasswordTextField.text == "123"){
                            idthisLogin.loginSuccess = true;
                            idLoginColumn.visible = false

                            idinfoTimer.start ()
                            idInfoPopUp.info = qsTr("Login Success!");
                            idInfoPopUp.visible = true
                            objQtCPPSearchV4.funcLoadBasemap();




                        }
                        else
                        {
                            idthisLogin.loginSuccess = false
                            idInfoPopUp.info = qsTr("Login Failed!");
                            idLoginColumn.visible = true


                        }

                        idUsernameTextField.text = ""
                        idPasswordTextField.text = ""


                    }
                    }

        }//ColumnLayout

        Rectangle{
        id: idInfoPopUp
        color: "red"
        anchors.fill: parent
        property string info: qstr("Login");
        visible: false

        Text {
            width: 318
            height: 65

            text: idInfoPopUp.info
            anchors.verticalCenterOffset: -5
            anchors.horizontalCenterOffset: 0
            anchors.centerIn: parent;
        }

        }

    }//Item


    }//Rectangle




    /*Function for the JavaScript*/
    function funcLoadBasemap()
    {
        objQtCPPSearchV4.metLoadBaseMap()

    }

}//QtCPPSearchV4

To copy to clipboard, switch view to plain text mode 

[anda_skoa]

There are two ways to change the content:

1) set one item visible while setting the old one invisble. you do that already.
2) Using a Loader and changing its source or sourceComponent

For your code, instead of the Rectangle with the id "idthisLogin" you could have a Loader will the main item

QtCPPSearchV4 {
    Loader {
        anchors.fill: parent
 
        property bool loginSuccess: false
 
        source: loginSuccess ? "MainView.qml" : "Login.qml"
    }
}

QtCPPSearchV4 {
    Loader {
        anchors.fill: parent

        property bool loginSuccess: false

        source: loginSuccess ? "MainView.qml" : "Login.qml"
    }
}

To copy to clipboard, switch view to plain text mode 

When the loginSuccess property changes, then the Loader's content changes.

Cheers,
_

[Mathan]

Dear All,

I am developing the app for mobile devices using Qt5.7/ArcGIS Runtime SDK 100.0.0. I had developed the login.qml and can authenticate the user.

Query: How to redirect the user from the Login.qml to MapList.qml?
Ex: Login.qml - User authentication
MapList.qml - Listing of available maps.

Once the user authenticated successfully, The user has to view the Maplisting. So the user can select the map and view/download it.

What is the strategy should be followed?

If possible some examples or Code snippets

Thanks for the advance