Post HTTP request from qt5 using qml

Question

Hi everyone, I am trying to send the http post request from my qt app. I have read alot and still struggling to get some concepts of signals and slots. Would be nice if somebody can help me out from here..

here is my qml code snippet:

TextField { id: u_name; placeholderText: userText(); Layout.fillWidth: true; style: StyleTextField {} }
                TextField { id: p_text;   echoMode: TextInput.Password;  Layout.fillWidth: true; style: StyleTextField {} }
                Button {
                    id: signInButton
                    text: "Sign In";
                    style: StyleButton {}
                    Layout.fillWidth: true;
                    //Layout.alignment: Qt.AlignTop;
                    signal esLoginClicked()
                    onClicked: {
                        if (u_name.text.length)  Settings.userText =  u_name.text;
                        if (p_text.text.length)  Settings.passText  = p_text.text;
                      signInButton.esLoginClicked().connect(esLogin(u_name.text,       p_text.text));
                        page_stack.pop();
                    }
                }

Here I am trying to get username and password from user and want to pass it to slot "esLogin" that I have declared in my header file using signal esLoginCLicked() which I have created here only. My header files looks like this...

Q_OBJECT
Q_PROPERTY(QString userText  READ userText  WRITE setUserText NOTIFY userTextChanged)
Q_PROPERTY(QString passText  READ passText  WRITE setPassText NOTIFY passTextChanged)

 public:
 static esQuickSettings *instance(void);

 public:
 QString userText(void);
 QString passText(void);
// void esLoginClicked(void);
// void esLoginClicked(const QString& userText, const QString passText);

 public:
 void setUserText(const QString& user);
 void setPassText(const QString& passt);
 void esLogin(const QString& userText, const QString& passText);
  signals:
 void userTextChanged(void);
 void passTextChanged(void);

but somehow I am not able to make it work and missing some key concept here to make signal and slot work.

P.S: I want to take input from QML and put in slot which will have the definition in cpp file respective to header.

Answer 1

There are (at least) two ways to address this issue, but I will only let you know one of them based on the comment discussion.

Connect the QML signal to the C++ slot.

main.qml

...
Button {
    id: signInButton
    // This is necessary for finding this nested item in C++
    objectName: "SignInButtonObjectName"
    ...
}
...

main.cpp

...
QQmlEngine engine;
QQmlComponent component(&engine, "main.qml");
QObject *object = component.create();
QObject *childObject = object->findChild<QObject*>("SignInButtonObjectName");
Foo foo;
QObject::connect(childObject, SIGNAL(esLoginClicked(const QString&, const QString&)), &foo, SLOT(esLogin(const QString&, const QString&)));
...

The other approach would be to call the C++ slot in your qml code when the signal happens to be emitted which is probably even simpler. In that case, you would make the method below either Q_INVOKABLE or even better: a slot.

void esLogin(const QString& userText, const QString& passText);

Then, you would need to make sure that this method is exposed to qml via context properties, namely: you would make the class a context property which would be available to qml for calling like foo.esLogin() in your desired qml signal handler.