Qt Quick Text Editor - Connecting Actions

Earlier in the Qt Quick Text Editor Guide, we created a main.qml file containing the description of our user interface in QML. The user interface contains tool buttons in a tool bar on top of a text area. Afterwards, we created a DocumentHandler class in C++ that will handle the file loading and saving.

Now we shall use the DocumentHandler in the QML file through actions. There is an Action QML type that we can connect to the tool buttons which in turn calls the DocumentHandler functions.

Importing the DocumentHandler QML Type

With the qmlRegisterType() function, we declared that the DocumentHandler QML type is imported from the org.qtproject.example library.

The following code is taken from the main.cpp file from the previous stage.

qmlRegisterType<DocumentHandler>("org.qtproject.example", 1, 0, "DocumentHandler");

In the main.qml file, enter the following import statement:

import org.qtproject.example 1.0

The DocumentHandler type is then available and we can create an object directly by adding it at the bottom of the application window.

DocumentHandler {
    id: document
}

Assigning Actions

As mentioned, the tool buttons are associated with an action, for example, the cut button is associated with the cut action. The cut action embodies the events that define the action, for example, the calling of the appropriate function in the text area.

For our application, we have six actions, which may be placed inside the application window.

Action {
    id: cutaction
    text: "Cut"
    shortcut: "ctrl+x"
    iconSource: "images/editcut.png"
    iconName: "edit-cut"
    onTriggered: textarea.cut()
}

Action {
    id: copyaction
    text: "Copy"
    shortcut: "Ctrl+C"
    iconSource: "images/editcopy.png"
    iconName: "edit-copy"
    onTriggered: textarea.copy()
}

Action {
    id: pasteaction
    text: "Paste"
    shortcut: "ctrl+v"
    iconSource: "qrc:images/editpaste.png"
    iconName: "edit-paste"
    onTriggered: textarea.paste()
}

Action {
    id: fileopenaction
    iconSource: "images/fileopen.png"
    iconName: "document-open"
    text: "Open"
    onTriggered: fileDialog.open()
}

These actions call the appropriate function and assign a specific icon and name to the action. To connect the cutaction to the cut tool button, add the following to the tool button

ToolButton {
            id: cut_toolbutton
            iconSource: "images/editcut.png"
            iconName: "cut_icon"
            anchors.left: save_toolbutton.right
            action: cutaction;
}

For the open and save actions, we require that the user choose an existing file or create a new file. To do this, we can pop up a file dialog and ask the user to select the file to open from or save onto. We can create two file dialogs, one for opening a file and one for saving the file, each setting their own titles.

FileDialog {
    id: fileOpenDialog
    title: "Please choose a file to open"
    nameFilters: ["Text files (*.txt)"]
    onAccepted: document.fileUrl = fileUrl
}

FileDialog {
    id: fileSaveDialog
    title: "Please enter the file to save"
    nameFilters: ["Text files (*.txt)"]
    selectExisting: false
    onAccepted: document.saveFile(fileUrl)
}

Setting the FileDialog's selectExisting property to false allows us to save new files.

The FileDialog type is from the Qt Quick Dialogs and is imported with

import QtQuick.Dialogs 1.2

Deploying TextEditor

Deploying the TextEditor depends on the platform on which the application is run. The process is simple and Qt provides several tools for packaging applications for a given platform. The Deploying Qt Applications page lists the instructions for the supported platforms. For this guide, we will deploy on Windows desktop platform with the windeploytool to create a directory with the required dependent libraries.

To package TextEditor,

1. Copy the texteditor.exe file from the release directory to another directory which serves as the destination folder.
2. Run the windeployqt.exe file which resolves and copies the Qt libraries into the destination folder. windeployqt.exe is found in the bin directory of the installation.

   C:\Qt\5.3\msvc2012_opengl\bin>windeployqt.exe <path to destination folder>

The destination folder can now be packaged and the binary file is executable. The images and QML file are already packaged into the binary file.

Example Files

The accompanying examples files are found in the following page:

• Qt Quick Controls - Text Editor Example