<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- controls-texteditor.qdoc -->
<title>Qt Quick Text Editor Guide | Qt 5.9</title>
<link rel="stylesheet" type="text/css" href="style/offline-simple.css" />
<script type="text/javascript">
document.getElementsByTagName("link").item(0).setAttribute("href", "style/offline.css");
// loading style sheet breaks anchors that were jumped to before
// so force jumping to anchor again
setTimeout(function() {
var anchor = location.hash;
// need to jump to different anchor first (e.g. none)
location.hash = "#";
setTimeout(function() {
location.hash = anchor;
}, 0);
}, 0);
</script>
</head>
<body>
<div class="header" id="qtdocheader">
<div class="main">
<div class="main-rounded">
<div class="navigationbar">
<table><tr>
<td ><a href="index.html">Qt 5.9</a></td><td >Qt Quick Text Editor Guide</td></tr></table><table class="buildversion"><tr>
<td id="buildversion" width="100%" align="right">Qt 5.9.4 Reference Documentation</td>
</tr></table>
</div>
</div>
<div class="content">
<div class="line">
<div class="content mainContent">
<link rel="next" href="qtquickcontrols-texteditor-ui.html" />
<p class="naviNextPrevious headerNavi">
<a class="nextPage" href="qtquickcontrols-texteditor-ui.html">Qt Quick Text Editor Guide - UI</a>
</p><p/>
<div class="sidebar">
<div class="toc">
<h3><a name="toc">Contents</a></h3>
<ul>
<li class="level1"><a href="#application-design">Application Design</a></li>
<li class="level1"><a href="#setting-up-the-environment-and-project">Setting Up the Environment and Project</a></li>
<li class="level2"><a href="#project-files">Project Files</a></li>
<li class="level2"><a href="#resource-files">Resource Files</a></li>
<li class="level1"><a href="#example-files">Example Files</a></li>
</ul>
</div>
<div class="sidebar-content" id="sidebar-content"></div></div>
<h1 class="title">Qt Quick Text Editor Guide</h1>
<span class="subtitle"></span>
<!-- $$$qtquickcontrols-texteditor.html-description -->
<div class="descr"> <a name="details"></a>
<a name="application-design"></a>
<h2 id="application-design">Application Design</h2>
<p>The <i>Text Editor</i> 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.</p>
<p>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.</p>
<p>This guide assumes that you have downloaded Qt and are able to install, open, and run the basic examples found in Qt Creator's <b>Welcome Mode</b>. If not, here are the pages that will help you:</p>
<ul>
<li><a href="gettingstarted.html">Getting Started with Qt</a></li>
</ul>
<p>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.</p>
<p>The files are part of the Qt package and are available when searched for <b>Qt Quick Text Editor</b> in Qt Creator's <b>Welcome mode</b>. All files used in the application are listed for viewing in the Qt Quick Controls - Text Editor Example page.</p>
<a name="setting-up-the-environment-and-project"></a>
<h2 id="setting-up-the-environment-and-project">Setting Up the Environment and Project</h2>
<p>We can start by creating the project in Qt Creator. Our application has the name <i>Text Editor</i> and it is a Qt Quick Application. Qt Creator has a wizard that can create the project for you.</p>
<ol class="1" type="1"><li>Select <b>File</b> > <b>New File or Project</b> > <b>Applications</b> > <b>Qt Quick Application</b> > <b>Choose</b>.</li>
<li>In the <b>Name</b> field, enter <b>TextEditor</b> and select <b>Next</b>.</li>
<li>In the <b>Qt Quick component set</b> field, select <b>Qt Quick Controls 1.2</b> > <b>Next</b>.</li>
<li>In the <b>Kit Selection</b> page, select <b>Next</b>.</li>
<li>In the <b>Summary</b> page, select <b>Finish</b>.</li>
</ol>
<p>The wizard creates the project and you can run it by clicking on the run button, <img src="images/qtcreator-run.png" alt="" /> . 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.</p>
<a name="project-files"></a>
<h3 >Project Files</h3>
<p>The wizard creates the project files used to build the project. To view them, select the <b>Edit mode</b>. The following project files are modified later in the guide:</p>
<ul>
<li><b>TextEdit.pro</b> - the project file used to create the build files. Also sets the paths that are visible to the project.</li>
<li><b>Sources</b> - contains the C++ implementation files (<code>.cpp</code>).</li>
<li><b>Resources</b> - 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.</li>
<li><b>Headers</b> - contains the C++ header files (<code>.h</code>). The default project does not have any header files, therefore this is not visible.</li>
</ul>
<a name="resource-files"></a>
<h3 >Resource Files</h3>
<p>The text editor uses several icons to represent various actions. The icons are in the <i>images</i> directory which is directly under the <i>TextEditor</i> 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.</p>
<p>We first need to register the image files into the project's resource file, <i>qml.qrc</i>. 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.</p>
<ul>
<li>To register the image files, in the <b>Edit</b> mode, right-click the <i>qml.qrc</i> file and select <b>Open in Editor</b>.</li>
<li>Click the <b>Add</b> button and select <b>Add Files</b>.</li>
<li>In the file manager, select the files to be added. You can select all the images in the <i>images</i> directory at once.</li>
</ul>
<p>You can refer to the images from QML by referring directly to the filename. For example, <code>images/editcopy.png</code> is the name of the <i>editcopy.png</i> file. We will use these images later in the guide.</p>
<p>Qt Creator then packages the images alongside your application in a single binary. For more information about resource files, see the <a href="qtquick-deployment.html#managing-resource-files-with-the-qt-resource-system">Managing Resource Files with the Qt Resource System</a> and the The Qt Resource System pages.</p>
<a name="example-files"></a>
<h2 id="example-files">Example Files</h2>
<p>The accompanying examples files are listed in the following page:</p>
<ul>
<li>Qt Quick Controls - Text Editor Example</li>
</ul>
</div>
<!-- @@@qtquickcontrols-texteditor.html -->
<p class="naviNextPrevious footerNavi">
<a class="nextPage" href="qtquickcontrols-texteditor-ui.html">Qt Quick Text Editor Guide - UI</a>
</p>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<p>
<acronym title="Copyright">©</acronym> 2017 The Qt Company Ltd.
Documentation contributions included herein are the copyrights of
their respective owners.<br> The documentation provided herein is licensed under the terms of the <a href="http://www.gnu.org/licenses/fdl.html">GNU Free Documentation License version 1.3</a> as published by the Free Software Foundation.<br> Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property
of their respective owners. </p>
</div>
</body>
</html>
