Basic version of QML app

communicator/CMakeLists.txt

@@ -1,72 +1,40 @@
-cmake_minimum_required(VERSION 3.5)
+cmake_minimum_required(VERSION 3.16)
 
 project(communicator VERSION 0.1 LANGUAGES CXX)
 
-set(CMAKE_AUTOUIC ON)
 set(CMAKE_AUTOMOC ON)
-set(CMAKE_AUTORCC ON)
-
-set(CMAKE_CXX_STANDARD 20)
 set(CMAKE_CXX_STANDARD_REQUIRED ON)
 
-find_package(QT NAMES Qt6 Qt5 REQUIRED COMPONENTS Widgets)
-find_package(Qt${QT_VERSION_MAJOR} REQUIRED COMPONENTS Widgets)
-
-add_compile_options(-Wall -Wextra -pedantic -Wno-unused-function -Werror)
+find_package(Qt6 6.2 COMPONENTS Quick REQUIRED)
 
-set(PROJECT_SOURCES
-        main.cpp
-        mainwindow.cpp
-        mainwindow.h
-        mainwindow.ui
+qt_add_executable(appcommunicator
+    main.cpp
 )
 
-if(${QT_VERSION_MAJOR} GREATER_EQUAL 6)
-    qt_add_executable(communicator
-        MANUAL_FINALIZATION
-        ${PROJECT_SOURCES}
-    )
-# Define target properties for Android with Qt 6 as:
-#    set_property(TARGET communicator APPEND PROPERTY QT_ANDROID_PACKAGE_SOURCE_DIR
-#                 ${CMAKE_CURRENT_SOURCE_DIR}/android)
-# For more information, see https://doc.qt.io/qt-6/qt-add-executable.html#target-creation
-else()
-    if(ANDROID)
-        add_library(communicator SHARED
-            ${PROJECT_SOURCES}
-        )
-# Define properties for Android with Qt 5 after find_package() calls as:
-#    set(ANDROID_PACKAGE_SOURCE_DIR "${CMAKE_CURRENT_SOURCE_DIR}/android")
-    else()
-        add_executable(communicator
-            ${PROJECT_SOURCES}
-        )
-    endif()
-endif()
-
-target_link_libraries(communicator PRIVATE Qt${QT_VERSION_MAJOR}::Widgets)
+qt_add_qml_module(appcommunicator
+    URI communicator
+    VERSION 1.0
+    QML_FILES main.qml
+    QML_FILES RegisterPage.qml
+    QML_FILES LoginPage.qml
+    QML_FILES StartPage.qml
+)
 
 # Qt for iOS sets MACOSX_BUNDLE_GUI_IDENTIFIER automatically since Qt 6.1.
 # If you are developing for iOS or macOS you should consider setting an
 # explicit, fixed bundle identifier manually though.
-if(${QT_VERSION} VERSION_LESS 6.1.0)
-  set(BUNDLE_ID_OPTION MACOSX_BUNDLE_GUI_IDENTIFIER com.example.communicator)
-endif()
-set_target_properties(communicator PROPERTIES
-    ${BUNDLE_ID_OPTION}
+set_target_properties(appcommunicator PROPERTIES
+#    MACOSX_BUNDLE_GUI_IDENTIFIER com.example.appcommunicator
     MACOSX_BUNDLE_BUNDLE_VERSION ${PROJECT_VERSION}
     MACOSX_BUNDLE_SHORT_VERSION_STRING ${PROJECT_VERSION_MAJOR}.${PROJECT_VERSION_MINOR}
     MACOSX_BUNDLE TRUE
     WIN32_EXECUTABLE TRUE
 )
 
+target_link_libraries(appcommunicator
+    PRIVATE Qt6::Quick)
+
 include(GNUInstallDirs)
-install(TARGETS communicator
+install(TARGETS appcommunicator
     BUNDLE DESTINATION .
-    LIBRARY DESTINATION ${CMAKE_INSTALL_LIBDIR}
-    RUNTIME DESTINATION ${CMAKE_INSTALL_BINDIR}
-)
-
-if(QT_VERSION_MAJOR EQUAL 6)
-    qt_finalize_executable(communicator)
-endif()
+    LIBRARY DESTINATION ${CMAKE_INSTALL_LIBDIR})

communicator/LoginPage.qml

@@ -0,0 +1,46 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+
+Item {
+    width: 800
+    height: 600
+
+    ColumnLayout {
+        spacing: 10
+        anchors.centerIn: parent
+
+        TextField {
+            id: userNameField
+            placeholderText: "User Name"
+        }
+
+        TextField {
+            id: passwordField
+            placeholderText: "Password"
+            echoMode: TextInput.Password
+        }
+
+        Button {
+            text: "Login"
+            onClicked: {
+                var userName = userNameField.text;
+                var password = passwordField.text;
+                console.log("Login user: ")
+                console.log("User Name:", userName, "Password:", password);
+            }
+        }
+    }
+
+    RowLayout {
+        width: parent.width
+        anchors.top: parent.top
+        spacing: 10
+        Button {
+            text: "Back"
+            onClicked: {
+                stackView.pop()
+            }
+        }
+    }
+}

communicator/RegisterPage.qml

@@ -0,0 +1,52 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+
+Item {
+    width: 800
+    height: 600
+
+    ColumnLayout {
+        anchors.centerIn: parent
+        spacing: 10
+
+        TextField {
+            id: userNameField
+            placeholderText: "User Name"
+        }
+
+        TextField {
+            id: passwordField
+            placeholderText: "Password"
+            echoMode: TextInput.Password
+        }
+
+        TextField {
+            id: emailField
+            placeholderText: "Email"
+        }
+
+        Button {
+            text: "Register"
+            onClicked: {
+                var userName = userNameField.text;
+                var password = passwordField.text;
+                var email = emailField.text;
+                console.log("Register user: ")
+                console.log("User Name:", userName, "Password:", password, "email:", email);
+            }
+        }
+    }
+
+    RowLayout {
+        width: parent.width
+        anchors.top: parent.top
+        spacing: 10
+        Button {
+            text: "Back"
+            onClicked: {
+                stackView.pop()
+            }
+        }
+    }
+}

communicator/StartPage.qml

@@ -0,0 +1,87 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import QtQuick.Window
+Item {
+    ColumnLayout {
+        anchors.fill: parent
+        spacing: 10
+
+        Text {
+            text: "Simple Text Communicator"
+            font.pixelSize: 40
+            color: "black"
+            // anchors.horizontalCenter: parent.horizontalCenter
+            Layout.alignment: Qt.AlignHCenter
+        }
+
+        //@TODO add logo here
+        // Item {
+        //     Layout.alignment: Qt.AlignHCenter
+        //     width: parent.width / 2
+        //     height: parent.height / 4
+
+        //     Image {
+        //         anchors.top: parent.bottom
+        //         source: "logo.png"
+        //         width: parent.width / 2
+        //         height: parent.height / 4
+        //     }
+        // }
+
+        RowLayout {
+            anchors {
+                horizontalCenter: parent.horizontalCenter
+                bottom: parent.bottom
+
+            }
+
+            spacing: 10
+
+            Item {
+                width: parent.width / 2 - 5
+                height: parent.height / 2
+            }
+
+            Item {
+                width: parent.width / 2 - 5
+                height: parent.height / 2
+
+                GridLayout {
+                    columns: 2
+                    anchors.bottom: parent.bottom
+                    anchors.bottomMargin: 20
+                    anchors.horizontalCenter: parent.horizontalCenter
+
+                    Button {
+                        text: "Register"
+                        Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+                        width: parent.width / 15
+                        height: parent.height / 40
+                        font.pixelSize: 30
+                        MouseArea {
+                            anchors.fill: parent
+                            onClicked: {
+                                stackView.push(registerPage)
+                            }
+                        }
+                    }
+
+                    Button {
+                        text: "Login"
+                        Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+                        width: parent.width / 15
+                        height: parent.height / 40
+                        font.pixelSize: 30
+                        MouseArea {
+                            anchors.fill: parent
+                            onClicked: {
+                                stackView.push(loginPage)
+                           }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

communicator/main.cpp

@@ -1,10 +1,22 @@
-#include <QApplication>
+#include <QGuiApplication>
+#include <QQmlApplicationEngine>
 
-#include "mainwindow.h"
+int main(int argc, char *argv[])
+{
+    QGuiApplication app(argc, argv);
 
-int main(int argc, char *argv[]) {
-    QApplication a(argc, argv);
-    MainWindow w;
-    w.show();
-    return a.exec();
+    QQmlApplicationEngine engine;
+    const QUrl url(u"qrc:/communicator/main.qml"_qs);
+    QObject::connect(
+        &engine,
+        &QQmlApplicationEngine::objectCreated,
+        &app,
+        [url](QObject *obj, const QUrl &objUrl) {
+            if (!obj && url == objUrl)
+                QCoreApplication::exit(-1);
+        },
+        Qt::QueuedConnection);
+    engine.load(url);
+
+    return app.exec();
 }

communicator/main.qml

@@ -0,0 +1,32 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+
+ApplicationWindow {
+    visible: true
+    width: 800
+    height: 600
+    title: "Login/Register"
+
+    StackView {
+        id: stackView
+        anchors.fill: parent
+
+        initialItem: startPage
+
+        Component {
+            id: startPage
+            StartPage {}
+        }
+
+        Component {
+            id: registerPage
+            RegisterPage {}
+        }
+
+        Component {
+            id: loginPage
+            LoginPage {}
+        }
+    }
+}