168 lines
8.9 KiB
HTML
168 lines
8.9 KiB
HTML
<?xml version="1.0" encoding="UTF-8"?>
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
<!-- programming-qml.qdoc -->
|
|
<title>Add a new visual item | CSDataQuick Documentation 1.2</title>
|
|
<link rel="stylesheet" type="text/css" href="style/online.css" />
|
|
<script type="text/javascript">
|
|
(function (i, s, o, g, r, a, m) {
|
|
i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
|
|
(i[r].q = i[r].q || []).push(arguments)
|
|
}, i[r].l = 1 * new Date(); a = s.createElement(o),
|
|
m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
|
|
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
|
|
|
|
ga('create', 'UA-24645639-4', 'qt.io');
|
|
ga('set', 'forceSSL', true);
|
|
ga('send', 'pageview');
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div class="header" id="header">
|
|
<header id="navbar" class="">
|
|
</header>
|
|
</div>
|
|
<div class="main">
|
|
<div class="main-rounded">
|
|
<div class="navigationbar">
|
|
<ul class="sub-navigation">
|
|
<li><a href="../../CSDataQuick.html">Home</a></li>
|
|
<li><a href="../docs.html" class="active">Documentation</a></li>
|
|
<li><a href="http://github.com/xiaoqiangwang/CSDataQuick/">Code</a></li>
|
|
<li><a href="https://github.com/xiaoqiangwang/CSDataQuick/issues/">Bug Reports</a></li>
|
|
</ul>
|
|
<div id="main_title_bar">
|
|
<h1>CSDataQuick Documentation</h1>
|
|
<div class="search_bar">
|
|
<script>
|
|
(function() {
|
|
var cx = '001693341472456439948:u9v0snkru3q';
|
|
var gcse = document.createElement('script');
|
|
gcse.type = 'text/javascript';
|
|
gcse.async = true;
|
|
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//www.google.com/cse/cse.js?cx=' + cx;
|
|
var s = document.getElementsByTagName('script')[0];
|
|
s.parentNode.insertBefore(gcse, s);
|
|
})();
|
|
</script>
|
|
<gcse:searchbox-only resultsUrl="search-results.html"></gcse:searchbox-only>
|
|
</div></div>
|
|
<ul>
|
|
<li><a href="index.html">CSDataQuick Documentation</a></li>
|
|
<li>Add a new visual item</li>
|
|
</ul>
|
|
</div>
|
|
<div class="content">
|
|
<div class="line">
|
|
<div class="content mainContent">
|
|
<div class="sidebar">
|
|
<div class="toc">
|
|
<h3><a name="toc">Contents</a></h3>
|
|
<ul>
|
|
<li class="level1"><a href="new-visual-item.html#create-the-visual-item">Create the visual item</a></li>
|
|
<li class="level1"><a href="new-visual-item.html#add-it-to-the-components-library">Add it to the components library</a></li>
|
|
<li class="level1"><a href="new-visual-item.html#make-it-available-in-designer">Make it available in designer</a></li>
|
|
<li class="level1"><a href="new-visual-item.html#further">Further</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="sidebar-content" id="sidebar-content"></div></div>
|
|
<div class="context">
|
|
<h1 class="title">Add a new visual item</h1>
|
|
<span class="subtitle"></span>
|
|
<!-- $$$new-visual-item.html-description -->
|
|
<div class="descr"> <a name="details"></a>
|
|
<p>Suppose you want to have a new edit control, which postpones writting its value to the data engine until an apply button is clicked.</p>
|
|
<a name="create-the-visual-item"></a>
|
|
<h2 id="create-the-visual-item">Create the visual item</h2>
|
|
<p>This new item fits to the <i>controls</i> category of visual items. So we start with <a href="qml-csdataquick-components-cscontrol.html">CSControl</a> as the root item, and call it ApplyEdit.qml.</p>
|
|
<pre class="qml">import QtQuick 2.0
|
|
import QtQuick.Layouts 1.0
|
|
import QtQuick.Controls 1.4
|
|
import CSDataQuick.Components 1.0
|
|
|
|
<span class="type"><a href="qml-csdataquick-components-cscontrol.html">CSControl</a></span> {
|
|
<span class="name">id</span>: <span class="name">root</span>
|
|
<span class="name">width</span>: <span class="number">150</span>
|
|
<span class="name">height</span>: <span class="number">20</span>
|
|
}</pre>
|
|
<p>The <a href="http://doc.qt.io/qt-5/qml-qtquick-textinput.html">TextInput</a> and apply Button could be inside a horizontal <a href="http://doc.qt.io/qt-5/qml-qtquick-layouts-rowlayout.html">RowLayout</a>. The <a href="http://doc.qt.io/qt-5/qml-qtquick-textinput.html">TextInput</a> expands horizontally to take all free space.</p>
|
|
<pre class="qml"><span class="type"><a href="http://doc.qt.io/qt-5/qml-qtquick-layouts-rowlayout.html">RowLayout</a></span> {
|
|
<span class="name">anchors</span>.fill: <span class="name">parent</span>
|
|
|
|
<span class="type"><a href="http://doc.qt.io/qt-5/qml-qtquick-textinput.html">TextInput</a></span> {
|
|
<span class="name">id</span>: <span class="name">input</span>
|
|
<span class="name">Layout</span>.fillWidth: <span class="number">true</span>
|
|
}
|
|
<span class="type">Button</span> {
|
|
<span class="name">id</span>: <span class="name">apply</span>
|
|
<span class="name">text</span>: <span class="string">'Apply'</span>
|
|
}
|
|
}</pre>
|
|
<p>And then in the Button clicked signal handler, we set the input value to the data engine.</p>
|
|
<pre class="qml"><span class="type">Button</span> {
|
|
<span class="name">id</span>: <span class="name">apply</span>
|
|
<span class="name">text</span>: <span class="string">'Apply'</span>
|
|
<span class="name">onClicked</span>: <span class="name">csdata</span>.<span class="name">setValue</span>(<span class="name">input</span>.<span class="name">text</span>)
|
|
}</pre>
|
|
<p>Now in you can simply use it like this elsewhere</p>
|
|
<pre class="qml"><span class="type">ApplyEdit</span> {
|
|
<span class="name">source</span>: <span class="string">'ao'</span>
|
|
}</pre>
|
|
<a name="add-it-to-the-components-library"></a>
|
|
<h2 id="add-it-to-the-components-library">Add it to the components library</h2>
|
|
<p>This new item is automatically available if you put it in your current directory. This is very convenient for prototyping and testing. Eventually you might decide it is ready to be shared by creating a components library, e.g. AwesomeItems.</p>
|
|
<p>First you create a directory named <i>AwesomeItems</i>, and place the <i>ApplyEdit.qml</i> file inside. Still inside the directory, create a file <a href="http://doc.qt.io/qt-5/qtqml-syntax-directoryimports.html#directory-listing-qmldir-files">qmldir</a> with the following content</p>
|
|
<pre class="cpp">module AwesomeItems
|
|
|
|
ApplyEdit <span class="number">1.0</span> ApplyEdit<span class="operator">.</span>qml</pre>
|
|
<p>By default the qml serarch path is limited to builtin paths. Extra paths can be incuded by setting <i>QML_IMPORT_PATH</i> environment variable. Suppose the full path is <i>/your/modules/repository/AwesomeItems</i>, then <i>QML_IMPORT_PATH</i> will be the containing path.</p>
|
|
<pre class="cpp"><span class="keyword">export</span> QML_IMPORT_PATH<span class="operator">=</span><span class="operator">/</span>your<span class="operator">/</span>modules<span class="operator">/</span>repository</pre>
|
|
<p>Now you can access <i>AwesomeItems</i> library as</p>
|
|
<pre class="cpp">import AwesomeItems <span class="number">1.0</span>
|
|
|
|
ApplyEdit {
|
|
source: <span class="char">'ao'</span>
|
|
}</pre>
|
|
<a name="make-it-available-in-designer"></a>
|
|
<h2 id="make-it-available-in-designer">Make it available in designer</h2>
|
|
<p>Create a directory <i>designer</i> under <i>AwesomeItems</i>, and within a file <i>awesomeitems.metainfo</i> with the following content:</p>
|
|
<pre class="cpp">MetaInfo {
|
|
Type {
|
|
name: <span class="string">"AwesomeItems.ApplyEdit"</span>
|
|
|
|
ItemLibraryEntry {
|
|
name: <span class="string">"ApplyEdit"</span>
|
|
category: <span class="string">"AwesomeItems"</span>
|
|
version: <span class="string">"1.0"</span>
|
|
requiredImport: <span class="string">"AwesomeItems"</span>
|
|
}
|
|
}
|
|
}</pre>
|
|
<p>The property editor panel could also be customized, create a file <i>ApplyEditSpecifics.qml</i>.</p>
|
|
<pre class="cpp">import <span class="type"><a href="http://doc.qt.io/qt-5/qtquick-qmlmodule.html">QtQuick</a></span> <span class="number">2.1</span>
|
|
import CSDataQuick<span class="operator">.</span>Components<span class="operator">.</span>designer <span class="number">1.0</span>
|
|
|
|
Column {
|
|
anchors<span class="operator">.</span>left: parent<span class="operator">.</span>left
|
|
anchors<span class="operator">.</span>right: parent<span class="operator">.</span>right
|
|
|
|
DataSourceSection {}
|
|
ColorSection {}
|
|
DynamicAttributeSection {}
|
|
}</pre>
|
|
<a name="further"></a>
|
|
<h2 id="further">Further</h2>
|
|
<p>The item is only made for demonstrating the process. To use it for real, there are still improvements to done. For example the text input and button background color, the input text color are not connected to the <a href="qml-csdataquick-components-cscontrol.html">CSControl</a> attributes, and the data value is not updated to text input field.</p>
|
|
</div>
|
|
<!-- @@@new-visual-item.html -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="footer">Copyright (C) 2012-2021 Xiaoqiang Wang, Paul Scherrer Institute.</div>
|
|
</body>
|
|
</html>
|