QDS-10801 Switch from widget based UI to QML based UI

CMakeLists.txt

@@ -34,6 +34,7 @@ qt_add_executable(${PROJECT_NAME}
     design-viewer/src/dv_android.cpp design-viewer/src/dv_android.h
     design-viewer/src/dv_wasm.cpp design-viewer/src/dv_wasm.h
     design-viewer/src/dv_base.cpp design-viewer/src/dv_base.h
+    resources.qrc
 )
 
 target_link_libraries(${PROJECT_NAME} PRIVATE

design-viewer/src/dv_android.cpp

@@ -39,11 +39,9 @@
 
 void DvAndroid::printLog(const QString &log)
 {
-    QDateTime now = QDateTime::currentDateTime();
-    QString time = now.toString("hh:mm:ss");
-    m_logs->setText(m_logs->text() + "\n" + time + " >> " + log);
-
     qDebug() << log;
+    m_logs += log + "\n";
+    emit logsChanged();
 }
 
 void DvAndroid::printWarn(const QString &warn)
@@ -103,50 +101,6 @@ QSharedPointer<QNetworkReply> DvAndroid::fetchResource(const QString &url)
     return reply;
 }
 
-void DvAndroid::setupUi()
-{
-    m_mainWindow.setLayout(m_layout);
-
-    // setup UI layout
-    m_layout->addWidget(m_logo);
-    m_layout->addWidget(m_buildInfo);
-    m_layout->addWidget(m_logs);
-    m_layout->addWidget(m_scrollArea);
-    m_layout->addWidget(m_lineEdit);
-    m_layout->addWidget(m_button);
-
-    // show build info
-    QString buildInfo = "Qt Design Viewer for Android\n" + QCoreApplication::applicationVersion()
-                        + "\n" + "Built with Qt " + QString(QT_VERSION_STR) + "\n"
-                        + "OpenSSL support: " + QVariant(QSslSocket::supportsSsl()).toString();
-    m_buildInfo->setText(buildInfo);
-    m_buildInfo->setAlignment(Qt::AlignHCenter);
-
-    // configure logs area
-    m_logs->setWordWrap(true);
-
-    // configure scrollarea for the logs
-    m_scrollArea->setWidget(m_logs);
-    m_scrollArea->setWidgetResizable(true);
-
-    QObject::connect(m_scrollArea->verticalScrollBar(), &QScrollBar::rangeChanged, this, [&]() {
-        m_scrollArea->verticalScrollBar()->setSliderPosition(
-            m_scrollArea->verticalScrollBar()->maximum());
-    });
-
-    // configure line edit
-    m_lineEdit->setPlaceholderText("Enter project URL here");
-    m_lineEdit->setText(
-        "https://designviewer.qt.io/#17e8907b3b84b8206d45be4f551f4e25/TestTwo.qmlrc");
-
-    // configure the button
-    m_button->setText("Download and run project");
-    QObject::connect(m_button, &QPushButton::clicked, this, &DvAndroid::fetchAndRunProject);
-
-    // start the show
-    m_mainWindow.showMaximized();
-}
-
 void DvAndroid::printSysInfo()
 {
     const QRect screenGeometry = QGuiApplication::primaryScreen()->geometry();
@@ -159,44 +113,23 @@ void DvAndroid::printSysInfo()
     printLog("-- Screen width: " + QSTRN(screenGeometry.width()));
 }
 
-void DvAndroid::updateLogo()
-{
-    printLog("Fetching logo...");
-    m_logo->setText("Fetching logo...");
-    auto logoReply = fetchResource("https://designviewer.qt.io/qtdesignstudioviewer-256.png");
-
-    if (logoReply->error() != QNetworkReply::NoError) {
-        printErr("Could not fetch logo");
-        m_logo->setText("Could not fetch logo");
-        return;
-    }
-
-    QByteArray data = logoReply->readAll();
-    QPixmap pixmap;
-    pixmap.loadFromData(data);
-    m_logo->setPixmap(pixmap);
-    m_logo->setAlignment(Qt::AlignCenter);
-    printLog("Logo fetched successfully");
-}
-
 bool DvAndroid::initialize()
 {
     printLog("Initializing Qt Design Viewer...");
-    setupUi();
     printSysInfo();
-    updateLogo();
-
+    m_buildInfo = QCoreApplication::applicationVersion() + "\n" + "Qt " + QString(QT_VERSION_STR)
+                  + "\n" + "OpenSSL support: " + QVariant(QSslSocket::supportsSsl()).toString();
+    emit buildInfoChanged();
     printLog("Initialization complete");
     return true;
 }
 
-void DvAndroid::fetchAndRunProject()
+void DvAndroid::downloadAndRun(const QString &url)
 {
     printLog("=========================");
     printLog("Fetching a new project...");
 
-    QString projectUrl = m_lineEdit->text();
-
+    QString projectUrl = url;
     if (projectUrl.startsWith("https://designviewer.qt.io/#")) {
         projectUrl = projectUrl.split("#").at(1);
         projectUrl.prepend("https://designviewer.qt.io/qmlprojects/");
@@ -208,7 +141,7 @@ void DvAndroid::fetchAndRunProject()
         return;
     }
 
-    if (!runProject(reply->readAll(), QFileInfo(m_lineEdit->text()).baseName())) {
+    if (!runProject(reply->readAll(), QFileInfo(url).baseName())) {
         printErr("Could not run project");
         return;
     }
@@ -263,8 +196,6 @@ void DvAndroid::showAppWindow()
     printLog("Initializing and showing the QML app window");
 
     m_quickWindow->show();
-    m_mainWindow.hide();
-    QObject::connect(m_quickWindow.data(), &QQuickWindow::closing, &m_mainWindow, &QWidget::show);
 }
 
 #endif // !defined(Q_OS_WASM)

design-viewer/src/dv_android.h

@@ -39,19 +39,19 @@
 
 class DvAndroid : public DvBase
 {
+    Q_OBJECT
+    Q_PROPERTY(QString logs READ logs NOTIFY logsChanged)
+    Q_PROPERTY(QString buildInfo READ buildInfo NOTIFY buildInfoChanged)
+
 public:
     bool initialize() override;
+    QString logs() const { return m_logs; }
+    QString buildInfo() const { return m_buildInfo; }
 
 private:
-    // UI components
-    QWidget m_mainWindow;
-    QVBoxLayout *m_layout{new QVBoxLayout};
-    QLabel *m_logo{new QLabel};
-    QLabel *m_buildInfo{new QLabel};
-    QLabel *m_logs{new QLabel};
-    QScrollArea *m_scrollArea{new QScrollArea};
-    QLineEdit *m_lineEdit{new QLineEdit};
-    QPushButton *m_button{new QPushButton};
+    // UI data
+    QString m_logs;
+    QString m_buildInfo;
 
     // Other members
     QNetworkAccessManager m_nam;
@@ -65,12 +65,16 @@ private:
     void showFatalMessageAndDie(const QStringList &message);
     QSharedPointer<QNetworkReply> fetchResource(const QString &url);
 
-    void setupUi();
     void printSysInfo();
-    void updateLogo();
+
+signals:
+    void logsChanged();
+    void buildInfoChanged();
+
+public slots:
+    void downloadAndRun(const QString &url);
 
 private slots:
-    void fetchAndRunProject();
     void orientateWindow(Qt::ScreenOrientation orientation);
 };
 

design-viewer/src/dv_base.h

@@ -38,6 +38,7 @@
 
 class DvBase : public QObject
 {
+    Q_OBJECT
 public:
     virtual bool initialize() = 0;
 

design-viewer/src/main.cpp

@@ -25,6 +25,7 @@
 
 #include <QApplication>
 #include <QDebug>
+#include <QQmlContext>
 #include <QSurfaceFormat>
 
 #include "dv_android.h"
@@ -50,6 +51,10 @@ int main(int argc, char *argv[])
     QApplication::setApplicationName(QStringLiteral("Qt Design Viewer"));
 
     dv.reset(new DvAndroid);
+    QQuickView view;
+    view.engine()->rootContext()->setContextProperty("backend", dv.data());
+    view.setSource(QUrl(QStringLiteral("qrc:/main.qml")));
+    view.show();
 #endif
 
     if (!dv->initialize())

main.qml

+
+
+/*
+This is a UI file (.ui.qml) that is intended to be edited in Qt Design Studio only.
+It is supposed to be strictly declarative and only uses a subset of QML. If you edit
+this file manually, you might introduce QML code that is not supported by Qt Design Studio.
+Check out https://doc.qt.io/qtcreator/creator-quick-ui-forms.html for details on .ui.qml files.
+*/
+import QtQuick 6.4
+import QtQuick.Controls 6.4
+import QtQuick.Controls.Material
+import QtQuick.Layouts
+
+Rectangle {
+    id: root
+    width: 1024
+    height: 768
+
+    color: "#EAEAEA"
+
+    Material.theme: Material.Light
+    Material.accent: Material.Blue
+    Material.primary: Material.Blue
+
+    ColumnLayout {
+        id: bar
+        y: 408
+        anchors.bottom: column.top
+        anchors.bottomMargin: 24
+        anchors.horizontalCenter: parent.horizontalCenter
+        ProgressBar {
+            id: progressBar
+            Layout.minimumWidth: 380
+            to: 100
+
+            value: 50
+        }
+    }
+
+    ColumnLayout {
+        id: column
+        y: 549
+        height: 113
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 12
+        anchors.rightMargin: 22
+        anchors.leftMargin: 22
+        TextField {
+            id: urlTextField
+            horizontalAlignment: Text.AlignHCenter
+            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+            Layout.fillWidth: true
+            placeholderText: qsTr("Enter URL")
+        }
+
+        Button {
+            id: downloadButton
+            text: qsTr("Download and Run")
+            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+            onClicked: backend.downloadAndRun(urlTextField.text)
+        }
+    }
+
+    Item {
+        id: header
+        width: 351
+        height: 309
+        anchors.top: parent.top
+        anchors.topMargin: 12
+        anchors.horizontalCenter: parent.horizontalCenter
+
+        Image {
+            id: qdsicon
+            x: 47
+            y: -23
+            source: "dvicon.png"
+            fillMode: Image.PreserveAspectFit
+        }
+
+        ColumnLayout {
+            anchors.top: qdsicon.bottom
+            anchors.horizontalCenterOffset: -1
+            anchors.topMargin: -20
+            anchors.horizontalCenter: parent.horizontalCenter
+            Label {
+                id: label
+                text: qsTr("Android Design Viewer")
+                Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+            }
+
+            Label {
+                id: label1
+                text: qsTr("Technology Preview")
+                Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+            }
+
+            Label {
+                id: label2
+                text: backend.buildInfo
+                Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+                horizontalAlignment: "AlignHCenter"
+            }
+        }
+    }
+
+    Rectangle {
+        id: log
+        visible: root.height > 620
+        color: "#ececec"
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.top: header.bottom
+        anchors.bottom: bar.top
+        anchors.topMargin: 0
+        anchors.bottomMargin: 24
+        anchors.leftMargin: 22
+
+        Label {
+            id: label3
+            visible: false
+            text: qsTr("Log")
+            anchors.top: parent.top
+            anchors.topMargin: 12
+            anchors.horizontalCenter: parent.horizontalCenter
+            font.bold: true
+        }
+
+        ScrollView {
+            id: scrollArea
+            anchors.left: parent.left
+            anchors.right: parent.right
+            anchors.top: label3.bottom
+            anchors.bottom: parent.bottom
+            anchors.rightMargin: 2
+
+            TextArea {
+                id: logTextArea
+                text: backend.logs
+                rightInset: 20
+
+                readOnly: true
+                clip: false
+                anchors.topMargin: 5
+                placeholderText: qsTr("Application Logs")
+                width: scrollArea.width
+            }
+        }
+    }
+}

resources.qrc

+<RCC>
+    <qresource prefix="/">
+        <file>main.qml</file>
+        <file>dvicon.png</file>
+    </qresource>
+</RCC>