Qt Quick Text Editor Guide

Application Design

The Text Editor example is a simple example of creating an application with Qt. Specifically, the example uses QML to set up the user interface, C++ to implement the file operations, and the Qt tools to manage the project files and build environment.

We will use Qt Quick Designer to add QML controls onto our application and set up the controls and resources. We will also implement the logic and connect the user interface to a C++ backend that will handle the saving and loading of text files.

This guide assumes that you have downloaded Qt and are able to install, open, and run the basic examples found in Qt Creator's Welcome Mode. If not, here are the pages that will help you:

Getting Started with Qt

The guide attempts to be self-contained but will refer to topics in the Qt reference documentation. Feel free to click on the links, but it is not necessary to leave the guide to find the information necessary to develop the application.

The files are part of the Qt package and are available when searched for Qt Quick Text Editor in Qt Creator's Welcome mode. All files used in the application are listed for viewing in the Qt Quick Controls - Text Editor Example page.

Setting Up the Environment and Project

We can start by creating the project in Qt Creator. Our application has the name Text Editor and it is a Qt Quick Application. Qt Creator has a wizard that can create the project for you.

Select File > New File or Project > Applications > Qt Quick Application > Choose.
In the Name field, enter TextEditor and select Next.
In the Qt Quick component set field, select Qt Quick Controls 1.2 > Next.
In the Kit Selection page, select Next.
In the Summary page, select Finish.

The wizard creates the project and you can run it by clicking on the run button, . The application is an empty shell but it contains the basic window and layout on which we can build. Make sure that you can run the basic application and if not, make sure that your build environment and Qt version are configured.

Project Files

The wizard creates the project files used to build the project. To view them, select the Edit mode. The following project files are modified later in the guide:

TextEdit.pro - the project file used to create the build files. Also sets the paths that are visible to the project.
Sources - contains the C++ implementation files (.cpp).
Resources - contains a resource file that configures the application assets and how the application resolves the location of the assets. The QML file is also found here.
Headers - contains the C++ header files (.h). The default project does not have any header files, therefore this is not visible.

Resource Files

The text editor uses several icons to represent various actions. The icons are in the images directory which is directly under the TextEditor project directory. The images as well as the project files are also listed in the reference documentation on the Qt Quick Controls - Text Editor Example page.

We first need to register the image files into the project's resource file, qml.qrc. The resource files compact the images into the binary packages. The resource files provide a streamlined directory structure, which is cross-platform. It is beneficial especially on mobile platforms, where each platform manages the application resources differently.

To register the image files, in the Edit mode, right-click the qml.qrc file and select Open in Editor.
Click the Add button and select Add Files.
In the file manager, select the files to be added. You can select all the images in the images directory at once.

You can refer to the images from QML by referring directly to the filename. For example, images/editcopy.png is the name of the editcopy.png file. We will use these images later in the guide.

Qt Creator then packages the images alongside your application in a single binary. For more information about resource files, see the Managing Resource Files with the Qt Resource System and the The Qt Resource System pages.