<?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 - Connecting Actions | 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 - Connecting Actions</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="prev" href="qtquickcontrols-texteditor-logic.html" />
<p class="naviNextPrevious headerNavi">
<a class="prevPage" href="qtquickcontrols-texteditor-logic.html">Qt Quick Text Editor Guide - Logic</a>
</p><p/>
<div class="sidebar">
<div class="toc">
<h3><a name="toc">Contents</a></h3>
<ul>
<li class="level1"><a href="#importing-the-documenthandler-qml-type">Importing the DocumentHandler QML Type</a></li>
<li class="level1"><a href="#assigning-actions">Assigning Actions</a></li>
<li class="level1"><a href="#deploying-texteditor">Deploying TextEditor</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 - Connecting Actions</h1>
<span class="subtitle"></span>
<!-- $$$qtquickcontrols-texteditor-action.html-description -->
<div class="descr"> <a name="details"></a>
<p>Earlier in the <a href="qtquickcontrols-texteditor.html">Qt Quick Text Editor Guide</a>, we created a <i>main.qml</i> 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.</p>
<p>Now we shall use the DocumentHandler in the QML file through <i>actions</i>. There is an Action QML type that we can connect to the tool buttons which in turn calls the DocumentHandler functions.</p>
<a name="importing-the-documenthandler-qml-type"></a>
<h2 id="importing-the-documenthandler-qml-type">Importing the DocumentHandler QML Type</h2>
<p>With the <code>qmlRegisterType()</code> function, we declared that the DocumentHandler QML type is imported from the <code>org.qtproject.example</code> library.</p>
<p>The following code is taken from the <i>main.cpp</i> file from the previous stage.</p>
<pre class="cpp">
qmlRegisterType<span class="operator"><</span>DocumentHandler<span class="operator">></span>(<span class="string">"org.qtproject.example"</span><span class="operator">,</span> <span class="number">1</span><span class="operator">,</span> <span class="number">0</span><span class="operator">,</span> <span class="string">"DocumentHandler"</span>);
</pre>
<p>In the <i>main.qml</i> file, enter the following import statement:</p>
<pre class="qml">
import org.qtproject.example 1.0
</pre>
<p>The DocumentHandler type is then available and we can create an object directly by adding it at the bottom of the application window.</p>
<pre class="qml">
<span class="type">DocumentHandler</span> {
<span class="name">id</span>: <span class="name">document</span>
}
</pre>
<a name="assigning-actions"></a>
<h2 id="assigning-actions">Assigning Actions</h2>
<p>As mentioned, the tool buttons are associated with an <i>action</i>, 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.</p>
<p>For our application, we have six actions, which may be placed inside the application window.</p>
<pre class="qml">
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()
}
</pre>
<p>These actions call the appropriate function and assign a specific icon and name to the action. To connect the <code>cutaction</code> to the cut tool button, add the following to the tool button</p>
<pre class="qml">
<span class="type">ToolButton</span> {
<span class="name">id</span>: <span class="name">cut_toolbutton</span>
<span class="name">iconSource</span>: <span class="string">"images/editcut.png"</span>
<span class="name">iconName</span>: <span class="string">"cut_icon"</span>
<span class="name">anchors</span>.left: <span class="name">save_toolbutton</span>.<span class="name">right</span>
<span class="name">action</span>: <span class="name">cutaction</span>;
}
</pre>
<p>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.</p>
<pre class="qml">
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)
}
</pre>
<p>Setting the FileDialog's <code>selectExisting</code> property to <code>false</code> allows us to save new files.</p>
<p>The FileDialog type is from the Qt Quick Dialogs and is imported with</p>
<pre class="qml">
import QtQuick.Dialogs 1.2
</pre>
<a name="deploying-texteditor"></a>
<h2 id="deploying-texteditor">Deploying TextEditor</h2>
<p>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 <a href="deployment.html">Deploying Qt Applications</a> page lists the instructions for the supported platforms. For this guide, we will deploy on Windows desktop platform with the <code>windeploytool</code> to create a directory with the required dependent libraries.</p>
<p>To package TextEditor,</p>
<ol class="1" type="1"><li>Copy the <i>texteditor.exe</i> file from the release directory to another directory which serves as the destination folder.</li>
<li>Run the <i>windeployqt.exe</i> file which resolves and copies the Qt libraries into the destination folder. <i>windeployqt.exe</i> is found in the <i>bin</i> directory of the installation.<pre class="cpp">
C:\<span class="type">Qt</span>\<span class="number">5.3</span>\msvc2012_opengl\bin<span class="operator">></span>windeployqt<span class="operator">.</span>exe <span class="operator"><</span>path to destination folder<span class="operator">></span>
</pre>
</li>
</ol>
<p>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.</p>
<a name="example-files"></a>
<h2 id="example-files">Example Files</h2>
<p>The accompanying examples files are found in the following page:</p>
<ul>
<li>Qt Quick Controls - Text Editor Example</li>
</ul>
</div>
<!-- @@@qtquickcontrols-texteditor-action.html -->
<p class="naviNextPrevious footerNavi">
<a class="prevPage" href="qtquickcontrols-texteditor-logic.html">Qt Quick Text Editor Guide - Logic</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>
