Files
gitea-pages/software/CSDataQuick/docs/qml-csdataquick-components-csrelateddisplay.html
T
2025-07-08 08:18:09 +02:00

192 lines
11 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" />
<!-- CSRelatedDisplay.qml -->
<title>CSRelatedDisplay QML Type | 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><a href="csdataquick-qmlmodules.html">QML Types</a></li>
<li>CSRelatedDisplay QML Type</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="qml-csdataquick-components-csrelateddisplay.html#properties">Properties</a></li>
<li class="level1"><a href="qml-csdataquick-components-csrelateddisplay.html#details">Detailed Description</a></li>
</ul>
</div>
<div class="sidebar-content" id="sidebar-content"></div></div>
<div class="context">
<h1 class="title">CSRelatedDisplay QML Type</h1>
<span class="subtitle"></span>
<!-- $$$CSRelatedDisplay-brief -->
<p>Brings up more displays. <a href="qml-csdataquick-components-csrelateddisplay.html#details">More...</a></p>
<!-- @@@CSRelatedDisplay -->
<div class="table"><table class="alignedsummary">
<tr><td class="memItemLeft rightAlign topAlign"> Import Statement:</td><td class="memItemRight bottomAlign"> import CSDataQuick.Components 1.0</td></tr><tr><td class="memItemLeft rightAlign topAlign"> Inherits:</td><td class="memItemRight bottomAlign"> <p><a href="qml-csdataquick-components-baseitem.html">BaseItem</a></p>
</td></tr></table></div><ul>
<li><a href="qml-csdataquick-components-csrelateddisplay-members.html">List of all members, including inherited members</a></li>
</ul>
<a name="properties"></a>
<h2 id="properties">Properties</h2>
<ul>
<li class="fn"><b><b><a href="qml-csdataquick-components-csrelateddisplay.html#font-prop">font</a></b></b> : font</li>
<li class="fn"><b><b><a href="qml-csdataquick-components-csrelateddisplay.html#fontSizeMode-prop">fontSizeMode</a></b></b> : int</li>
<li class="fn"><b><b><a href="qml-csdataquick-components-csrelateddisplay.html#label-prop">label</a></b></b> : string</li>
<li class="fn"><b><b><a href="qml-csdataquick-components-csrelateddisplay.html#model-prop">model</a></b></b> : var</li>
<li class="fn"><b><b><a href="qml-csdataquick-components-csrelateddisplay.html#visual-prop">visual</a></b></b> : int</li>
</ul>
<!-- $$$CSRelatedDisplay-description -->
<a name="details"></a>
<h2 id="details">Detailed Description</h2>
<p>The Related Display provides a means of bringing up more displays. It is by default a menu button that has a graphic consisting of two overlapping squares and a label. But it can also be a group of buttons layout in a row or column. This visual reprsentation is set by property <a href="qml-csdataquick-components-csrelateddisplay.html#visual-prop">visual</a>.</p>
<p>The <a href="qml-csdataquick-components-csrelateddisplay.html#model-prop">model</a> denote the related displays that can be displayed. If there is only one related display specified in the menu, then the two overlapping squares and/or label appear in the middle of the button, and the related display is activated immediately without bringing up a menu.</p>
<p>It is not activated until the button is released, so you can depress the button to check if there is more than one menu item or not, then abort by releasing the button away from the Related Display. If there is more than one item on the menu, the squares and/or label are at the left of the button.</p>
<p>The new display can be configured by &quot;replace&quot; property to always replace the parent. When the parent display is replaced by the new display, its upper-left corner should be at the former position of the parent, unless the new display was already in existence. In that case the existing display is popped up, and its position is not changed.</p>
<pre class="qml"><span class="type"><a href="http://doc.qt.io/qt-5/qml-qtquick-row.html">Row</a></span> {
<span class="name">spacing</span>: <span class="number">10</span>
<span class="type"><a href="qml-csdataquick-components-csrelateddisplay.html">CSRelatedDisplay</a></span> {
<span class="name">width</span>: <span class="number">100</span>
<span class="name">height</span>: <span class="number">25</span>
<span class="name">label</span>: <span class="string">'More ...'</span>
<span class="name">model</span>: <span class="name">ListModel</span> {
<span class="type"><a href="http://doc.qt.io/qt-5/qml-qtqml-models-listelement.html">ListElement</a></span> {<span class="name">label</span>:<span class="string">'Monitors'</span>; <span class="name">file</span>: <span class="string">'monitors.adl'</span>; <span class="name">replace</span>: <span class="number">true</span>;}
<span class="type"><a href="http://doc.qt.io/qt-5/qml-qtqml-models-listelement.html">ListElement</a></span> {<span class="name">label</span>:<span class="string">'Graphics'</span>; <span class="name">file</span>: <span class="string">'graphics.adl'</span>; <span class="name">replace</span>: <span class="number">true</span>;}
}
}
<span class="type"><a href="qml-csdataquick-components-csrelateddisplay.html">CSRelatedDisplay</a></span> {
<span class="name">width</span>: <span class="number">100</span>
<span class="name">height</span>: <span class="number">60</span>
<span class="name">visual</span>: <span class="name">RelatedDisplayVisual</span>.<span class="name">Column</span>
<span class="name">model</span>: [
{&quot;label&quot;:<span class="string">&quot;Monitors&quot;</span>, &quot;file&quot;:<span class="string">&quot;monitor.adl&quot;</span>, &quot;macro&quot;:<span class="string">&quot;&quot;</span>, &quot;replace&quot;:<span class="number">true</span>},
{&quot;label&quot;:<span class="string">&quot;Controls&quot;</span>, &quot;file&quot;:<span class="string">&quot;control.adl&quot;</span>, &quot;macro&quot;:<span class="string">&quot;&quot;</span>, &quot;replace&quot;:<span class="number">true</span>}
]
}
}</pre>
<p class="centerAlign"><img src="images/relateddisplay.png" alt="" /></p><!-- @@@CSRelatedDisplay -->
<h2>Property Documentation</h2>
<!-- $$$font -->
<div class="qmlitem"><div class="qmlproto">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="font-prop">
<td class="tblQmlPropNode"><p>
<a name="font-prop"></a><span class="name">font</span> : <span class="type"><a href="qml-csdataquick-components-csrelateddisplay.html#font-prop">font</a></span></p></td></tr>
</table></div>
</div><div class="qmldoc"><p>The text font.</p>
</div></div><!-- @@@font -->
<br/>
<!-- $$$fontSizeMode -->
<div class="qmlitem"><div class="qmlproto">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="fontSizeMode-prop">
<td class="tblQmlPropNode"><p>
<a name="fontSizeMode-prop"></a><span class="name">fontSizeMode</span> : <span class="type">int</span></p></td></tr>
</table></div>
</div><div class="qmldoc"><p>This property specifies how the font size of the displayed text is determined.</p>
<p><b>See also </b><a href="http://doc.qt.io/qt-5/qml-qtquick-text.html#fontSizeMode-prop">fontSizeMode</a>.</p>
</div></div><!-- @@@fontSizeMode -->
<br/>
<!-- $$$label -->
<div class="qmlitem"><div class="qmlproto">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="label-prop">
<td class="tblQmlPropNode"><p>
<a name="label-prop"></a><span class="name">label</span> : <span class="type">string</span></p></td></tr>
</table></div>
</div><div class="qmldoc"><p>This property holds the text displayed on the button.</p>
<p>Normally there are two overlapping squares on the button to denote a Related Display control. However, if the label text begins with &quot;-&quot; (for example &quot;-My Label&quot;), the overlapping squares will not appear.</p>
</div></div><!-- @@@label -->
<br/>
<!-- $$$model -->
<div class="qmlitem"><div class="qmlproto">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="model-prop">
<td class="tblQmlPropNode"><p>
<a name="model-prop"></a><span class="name">model</span> : <span class="type"><a href="http://doc.qt.io/qt-5/qml-var.html">var</a></span></p></td></tr>
</table></div>
</div><div class="qmldoc"><p>This property holds the related display list model</p>
<p>The model contains entries to display files. It can be <a href="http://doc.qt.io/qt-5/qml-qtqml-models-listmodel.html">ListModel</a> or JSON object array. In either case, each entry contains the following.</p>
<ul>
<li>label: text description</li>
<li>file: display file name</li>
<li>macro: macro substitution</li>
<li>replace: replace the parent display if true</li>
</ul>
<p><i>Note: Only in the form of JSON object array, it can be used in Qt Quick Designer</i></p>
</div></div><!-- @@@model -->
<br/>
<!-- $$$visual -->
<div class="qmlitem"><div class="qmlproto">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="visual-prop">
<td class="tblQmlPropNode"><p>
<a name="visual-prop"></a><span class="name">visual</span> : <span class="type">int</span></p></td></tr>
</table></div>
</div><div class="qmldoc"><ul>
<li>RelatedDisplayVisual.Menu: Use a pull down menu for the choices.</li>
<li>RelatedDisplayVisual.Row: Use a row of buttons for the choices.</li>
<li>RelatedDisplayVisual.Column: Use a column of buttons for the choices.</li>
</ul>
</div></div><!-- @@@visual -->
<br/>
</div>
</div>
</div>
</div>
</div>
<div class="footer">Copyright (C) 2012-2021 Xiaoqiang Wang, Paul Scherrer Institute.</div>
</body>
</html>