Qt QJSEngine Hello world

Данный пример построен на примере из книги М.Шлее «Qt профессиональное программирование на Qt» «Черепашья графика». Для лучшего понимания работы советую почитать раздел «Язык сценариев Qt Scripts».

В примере будет реализован простой терминал, в который можно вводить команды. Результат выполнения команд будет отображаться в этом же терминале. Пользовательский интерфейс будет реализован на QML.

Создадим проект Qt Quick



Опишем форму. Файл main.qml:

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.0

Window {
    id: window
    visible: true
    width: Screen.width/2
    height: Screen.height/2
    title: qsTr("Тест jsEnjine")

    property string consoleFontFamily: "Consolas"
    property int fontPixelSize: 14

    TextArea {
        id: textAreaLog
        anchors.bottom: rectangle.top
        anchors.bottomMargin: 3
        anchors.right: parent.right
        anchors.rightMargin: 3
        anchors.left: parent.left
        anchors.leftMargin: 3
        anchors.top: parent.top
        anchors.topMargin: 3
        readOnly: true
    }

    Rectangle {
        id: rectangle
        height: 25
        anchors.right: parent.right
        anchors.rightMargin: 3
        anchors.left: parent.left
        anchors.leftMargin: 3
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 3
        border.color: "#0c0a0a"

        TextEdit {
            id: textEditInput
            anchors.right: parent.right
            anchors.rightMargin: 5
            anchors.left: parent.left
            anchors.leftMargin: 5
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 5
            anchors.top: parent.top
            anchors.topMargin: 5
            font.pixelSize: fontPixelSize
        }
    }
}

Форма



Добавим в проект классы AppCore и Console, немного допишем main.c

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QQmlContext>
#include "appcore.h"

int main(int argc, char *argv[])
{
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
    QGuiApplication app(argc, argv);
    AppCore appCore;
    QQmlApplicationEngine engine;
    QQmlContext *context = engine.rootContext();//Создаем корневой контекст
    //Загружаем объект в контекст для установки соединения, а 
    //так же определяем имя
    //по которому будет происходить соединение
    context->setContextProperty("appCore",&appCore);
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
    if(engine.rootObjects().isEmpty())
        return -1;
    return app.exec();
}

appcore.h

#ifndef APPCORE_H
#define APPCORE_H

#include <QObject>
#include <QJSEngine>
#include "console.h"

class AppCore : public QObject
{
    Q_OBJECT
public:
    explicit AppCore(QObject *parent = nullptr);
private:
    QJSEngine   appScriptEngine;
    Console     *userConsole;
signals:
    Q_INVOKABLE void appEndTextArea(const QString& text);
    Q_INVOKABLE void clearTextArea();
public slots:
    Q_INVOKABLE void slotEvaluate(const QString& code);
};
#endif // APPCORE_H

appcore.c

#include "appcore.h"

AppCore::AppCore(QObject *parent) : QObject(parent)
{
    userConsole = new Console(this);
    QJSValue val = appScriptEngine.newQObject(userConsole);
    appScriptEngine.globalObject().setProperty("console",val);

    connect(userConsole, SIGNAL(appEndTextArea(QString)),this,SIGNAL(appEndTextArea(QString)));
    connect(userConsole, SIGNAL(clearTextArea()),this,SIGNAL(clearTextArea()));
}

void AppCore::slotEvaluate(const QString& code)
{
    QJSValue result = appScriptEngine.evaluate(code);
    if(result.isError()){
        QString er = QString("Ошибка в строке %1: %2").arg(result.property("lineNumber").toInt()).arg(result.toString());
        emit appEndTextArea(er);
    }
}

console.h

#ifndef CONSOLE_H
#define CONSOLE_H

#include <QObject>

class Console : public QObject
{
    Q_OBJECT
public:
    explicit Console(QObject *parent = nullptr);

    Q_INVOKABLE void log(const QString& message);
    Q_INVOKABLE void clear();
signals:
    Q_INVOKABLE void appEndTextArea(const QString& text);
    Q_INVOKABLE void clearTextArea();

};

#endif // CONSOLE_H

console.cpp

#include "console.h"

Console::Console(QObject *parent) : QObject(parent)
{

}

void Console::log(const QString& message)
{
    emit appEndTextArea(message);
}

void Console::clear()
{
    emit clearTextArea();
}

В конструкторе класса AppCore мы добавили экземпляр класса Console в QJSEngine, так же мы определили что будем обращаться к методам этого класса через «console»

QJSValue val = appScriptEngine.newQObject(userConsole);
appScriptEngine.globalObject().setProperty("console",val);

Сигнал appEndTextArea(const QString& text) — добавление текста в textAreaLog в
main.qml.

Сигнал clearTextArea() — очистить область вывода текста textAreaLog в main.qml.

Слот slotEvaluate(const QString& code) — выполнение js кода, введенного в textEditInput в main.qml.

Допишем в main.qml обработчики сигналов:

Connections{
        target: appCore
        onAppEndTextArea:{
            textAreaLog.cursorPosition = textAreaLog.length;
            textAreaLog.append(text);
        }
        onClearTextArea:{
            textAreaLog.cursorPosition=0;
            textAreaLog.text = "";
        }
    }

Так же допишем в textEditInput сигнал, вызова слота void slotEvaluate(const QString& code):

TextEdit {
            id: textEditInput
            anchors.right: parent.right
            anchors.rightMargin: 5
            anchors.left: parent.left
            anchors.leftMargin: 5
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 5
            anchors.top: parent.top
            anchors.topMargin: 5
            font.pixelSize: fontPixelSize

            Keys.onReturnPressed:{
                if(textEditInput.text == "")return;
                appCore.slotEvaluate(text)
                clear()
            }
            Keys.onEscapePressed: clear()
        }

Теперь при вводе команды в textEditInput и нажатии Enter команда будет передана в slotEvaluate в AppCore. При нажатии ESC поле textEditInput очистится.

При запуске приложения, если мы введем в textEditInput команду console.log(«Hello world»), то в поле textAreaLog увидим Hello world. Если ввести команду неизвестную QJSEngine, то в терминале высветится ошибка.



Таким образом, мы написали приложение, в котором мы можем вызывать методы подключенных к QJSEngine классов и выводить результаты выполнения этих методов. Кто то скажет «А при чем тут JS? Ведь классы написаны на С++?», но это уже другая история…

Ссылка проекта на github