You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
318 lines
29 KiB
318 lines
29 KiB
<!-- HTML header for doxygen 1.8.13-->
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/xhtml;charset=UTF-8"/>
|
|
<meta http-equiv="X-UA-Compatible" content="IE=9"/>
|
|
<meta name="generator" content="Doxygen 1.8.14"/>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
|
<title>QtMvvm: Main Page</title>
|
|
<link href="tabs.css" rel="stylesheet" type="text/css"/>
|
|
<script type="text/javascript" src="jquery.js"></script>
|
|
<script type="text/javascript" src="dynsections.js"></script>
|
|
<link href="search/search.css" rel="stylesheet" type="text/css"/>
|
|
<script type="text/javascript" src="search/searchdata.js"></script>
|
|
<script type="text/javascript" src="search/search.js"></script>
|
|
<link href="doxygen.css" rel="stylesheet" type="text/css" />
|
|
</head>
|
|
<body>
|
|
<div id="top"><!-- do not remove this div, it is closed by doxygen! -->
|
|
<div id="titlearea">
|
|
<table cellspacing="0" cellpadding="0" style="display: inline;">
|
|
<tbody>
|
|
<tr style="height: 56px;">
|
|
<td id="projectalign" style="padding-left: 0.5em;">
|
|
<div id="projectname">QtMvvm
|
|
 <span id="projectnumber">1.0.0</span>
|
|
</div>
|
|
<div id="projectbrief">A mvvm oriented library for Qt, to create Projects for Widgets and Quick in parallel</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<a style="float: right;" target="_blank" href="https://github.com/Skycoder42/QtMvvm">
|
|
<img style="padding: 10px;" src="GitHub_Logo.png"/>
|
|
</a>
|
|
</div>
|
|
<!-- end header part -->
|
|
<!-- Generated by Doxygen 1.8.14 -->
|
|
<script type="text/javascript">
|
|
/* @license magnet:?xt=urn:btih:cf05388f2679ee054f2beb29a391d25f4e673ac3&dn=gpl-2.0.txt GPL-v2 */
|
|
var searchBox = new SearchBox("searchBox", "search",false,'Search');
|
|
/* @license-end */
|
|
</script>
|
|
<script type="text/javascript" src="menudata.js"></script>
|
|
<script type="text/javascript" src="menu.js"></script>
|
|
<script type="text/javascript">
|
|
/* @license magnet:?xt=urn:btih:cf05388f2679ee054f2beb29a391d25f4e673ac3&dn=gpl-2.0.txt GPL-v2 */
|
|
$(function() {
|
|
initMenu('',true,false,'search.php','Search');
|
|
$(document).ready(function() { init_search(); });
|
|
});
|
|
/* @license-end */</script>
|
|
<div id="main-nav"></div>
|
|
</div><!-- top -->
|
|
<!-- window showing the filter options -->
|
|
<div id="MSearchSelectWindow"
|
|
onmouseover="return searchBox.OnSearchSelectShow()"
|
|
onmouseout="return searchBox.OnSearchSelectHide()"
|
|
onkeydown="return searchBox.OnSearchSelectKey(event)">
|
|
</div>
|
|
|
|
<!-- iframe showing the search results (closed by default) -->
|
|
<div id="MSearchResultsWindow">
|
|
<iframe src="javascript:void(0)" frameborder="0"
|
|
name="MSearchResults" id="MSearchResults">
|
|
</iframe>
|
|
</div>
|
|
|
|
<div class="header">
|
|
<div class="headertitle">
|
|
<div class="title">QtMvvm Documentation</div> </div>
|
|
</div><!--header-->
|
|
<div class="contents">
|
|
<div class="toc"><h3>Table of Contents</h3>
|
|
<ul><li class="level1"><a href="#qtmvvm_readme_label_0">Features</a><ul><li class="level2"><a href="#qtmvvm_readme_label_1">QtMvvm Datasync</a></li>
|
|
<li class="level2"><a href="#qtmvvm_readme_label_2">The Mvvm Pattern</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="level1"><a href="#qtmvvm_readme_label_3">Download/Installation</a><ul><li class="level2"><a href="#qtmvvm_readme_label_4">Requirements</a></li>
|
|
<li class="level2"><a href="#qtmvvm_readme_label_5">Modules</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="level1"><a href="#qtmvvm_readme_label_6">Usage</a><ul><li class="level2"><a href="#qtmvvm_readme_label_7">Add the custom wizard</a></li>
|
|
<li class="level2"><a href="#qtmvvm_readme_label_8">Create and initialize the QtMvvm Project</a></li>
|
|
<li class="level2"><a href="#qtmvvm_readme_label_9">Adding new ViewModels and Views</a><ul><li class="level3"><a href="#qtmvvm_readme_label_10">Create the ViewModel</a></li>
|
|
<li class="level3"><a href="#qtmvvm_readme_label_11">Create the View for QtWidgets</a></li>
|
|
<li class="level3"><a href="#qtmvvm_readme_label_12">Create the quick ui</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class="level1"><a href="#qtmvvm_readme_label_13">Understanding how QtMvvm works</a><ul><li class="level2"><a href="#qtmvvm_readme_label_14">A side note on presenters</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="level1"><a href="#qtmvvm_readme_label_15">Icons</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="textblock"><p>A mvvm oriented library for <a class="elRef" target="_blank" doxygen="/home/sky/Qt/Docs/Qt-5.10.1/qtcore/qtcore.tags:https://doc.qt.io/qt-5/" href="https://doc.qt.io/qt-5/qt.html">Qt</a>, to create Projects for Widgets and Quick Controls 2 in parallel.</p>
|
|
<p><a href="https://travis-ci.org/Skycoder42/QtMvvm"></a> <a href="https://ci.appveyor.com/project/Skycoder42/qtmvvm"></a> <a href="https://www.codacy.com/app/Skycoder42/QtMvvm"></a> <a href="https://aur.archlinux.org/pkgbase/qt5-mvvm/"></a></p>
|
|
<div class="image">
|
|
<img src="sample_basic_widgets.gif" alt="sample_basic_widgets.gif"/>
|
|
<div class="caption">
|
|
Demo Animation Widgets</div></div>
|
|
<div class="image">
|
|
<img src="sample_basic_quick.gif" alt="sample_basic_quick.gif"/>
|
|
<div class="caption">
|
|
Demo Animation Quick</div></div>
|
|
<p> For more images, check the <a href="https://skycoder42.github.io/QtMvvm/images_page.html">Images page</a></p>
|
|
<h1><a class="anchor" id="qtmvvm_readme_label_0"></a>
|
|
Features</h1>
|
|
<p>The main feature of <a class="el" href="namespace_qt_mvvm.html" title="The primary namespace of the QtMvvm library. ">QtMvvm</a> is the seperation between ui and logic. With this library, you can create a core library, containing your application logic, as well as ui controllers (called "ViewModels"), and create multiple ui projects on top of it. This way you can for example provide both, a widgets and a qt quick based application, or create different uis for different devices, without having to code anything twice.</p>
|
|
<p>The key features are:</p>
|
|
<ul>
|
|
<li>Create ViewModels in the core application to prepare data for presentation without binding to any concret GUI</li>
|
|
<li>Functions to show messageboxes (info, warning, error, etc.) from your core app<ul>
|
|
<li>Asynchronous, with result handling</li>
|
|
<li>Supports input dialogs and native file dialogs out of the box<ul>
|
|
<li>Supports native file pickers on Android</li>
|
|
</ul>
|
|
</li>
|
|
<li>custom dialog types can be created</li>
|
|
</ul>
|
|
</li>
|
|
<li>Methods to create Two-Way Bindings from C++ and QML</li>
|
|
<li>Macros and a ServiceRegistry to make Dependency Injection possible for Services and ViewModels</li>
|
|
<li>A generic Presenter Interface so you can create your own custom GUI implementations<ul>
|
|
<li>Widgets and <a class="elRef" target="_blank" doxygen="/home/sky/Qt/Docs/Qt-5.10.1/qtcore/qtcore.tags:https://doc.qt.io/qt-5/" href="https://doc.qt.io/qt-5/qt.html">Qt</a> Quick Controls 2 are supported out of the box</li>
|
|
</ul>
|
|
</li>
|
|
<li>Generic Edit-View factories to create simple edits for any kind of data from the core code</li>
|
|
<li>Supports an extensive "Settings GUI" via a simple XML format</li>
|
|
</ul>
|
|
<h2><a class="anchor" id="qtmvvm_readme_label_1"></a>
|
|
QtMvvm Datasync</h2>
|
|
<p>The QtMvvmDatasync modules help you to integrate <a href="https://github.com/Skycoder42/QtDataSync">QtDataSync</a> (An easy and reliable synchronization library) into your projects. It adds ViewModels and Views to:</p>
|
|
<ul>
|
|
<li>Monitor and control the connection and synchronization status</li>
|
|
<li>Manage your account and account devices</li>
|
|
<li>Easy file based import and exports, as well as a fronted for the local Network-Exchange</li>
|
|
</ul>
|
|
<h2><a class="anchor" id="qtmvvm_readme_label_2"></a>
|
|
The Mvvm Pattern</h2>
|
|
<p>If you don't know the Mvvm pattern already, you can read up on the links below. It's basically a clever seperation of logic (the models), presentation logic (the viewmodels) and the actual GUI (the views) that is very useful when creating applications that need to support different uis for the same data.</p>
|
|
<p><a href="https://msdn.microsoft.com/en-us/library/hh848246.aspx"></a></p>
|
|
<p>Good links to get started:</p>
|
|
<ul>
|
|
<li><a href="https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93viewmodel">https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93viewmodel</a></li>
|
|
<li><a href="https://msdn.microsoft.com/en-us/library/hh848246.aspx">https://msdn.microsoft.com/en-us/library/hh848246.aspx</a></li>
|
|
</ul>
|
|
<h1><a class="anchor" id="qtmvvm_readme_label_3"></a>
|
|
Download/Installation</h1>
|
|
<ol type="1">
|
|
<li><a class="elRef" target="_blank" doxygen="/home/sky/Qt/Docs/Qt-5.10.1/qtqml/qtqml.tags:https://doc.qt.io/qt-5/" href="https://doc.qt.io/qt-5/qml-package.html">Package</a> Managers: The library is available via:<ul>
|
|
<li><b>Arch-Linux:</b> AUR-Repository: <a href="https://aur.archlinux.org/pkgbase/qt5-mvvm/"><code>qt5-qtmvvm</code></a></li>
|
|
<li><b>Ubuntu:</b> Launchpad-PPA: <a href="https://launchpad.net/~skycoder42/+archive/ubuntu/qt-modules">ppa:skycoder42/qt-modules</a>, package <code>libqt5mvvm[1/-dev]</code></li>
|
|
<li><b>MacOs:</b><ul>
|
|
<li>Tap: <a href="https://github.com/Skycoder42/homebrew-qt-modules"><code>brew tap Skycoder42/qt-modules</code></a></li>
|
|
<li><a class="elRef" target="_blank" doxygen="/home/sky/Qt/Docs/Qt-5.10.1/qtqml/qtqml.tags:https://doc.qt.io/qt-5/" href="https://doc.qt.io/qt-5/qml-package.html">Package</a>: <code>qtmvvm</code></li>
|
|
<li><b>IMPORTANT:</b> Due to limitations of homebrew, you must run <code>source /usr/local/opt/qtmvvm/bashrc.sh</code> before you can use the module. Some goes for the <code>qtdatasync</code> dependency.</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li>Simply add my repository to your <a class="elRef" target="_blank" doxygen="/home/sky/Qt/Docs/Qt-5.10.1/qtcore/qtcore.tags:https://doc.qt.io/qt-5/" href="https://doc.qt.io/qt-5/qt.html">Qt</a> MaintenanceTool (Image-based How-To here: <a href="https://github.com/Skycoder42/QtModules/blob/master/README.md#add-my-repositories-to-qt-maintenancetool">Add custom repository</a>):<ol type="a">
|
|
<li>Open the MaintenanceTool, located in your <a class="elRef" target="_blank" doxygen="/home/sky/Qt/Docs/Qt-5.10.1/qtcore/qtcore.tags:https://doc.qt.io/qt-5/" href="https://doc.qt.io/qt-5/qt.html">Qt</a> install directory (e.g. <code>~/Qt/MaintenanceTool</code>)</li>
|
|
<li>Select <code>Add or remove components</code> and click on the <code>Settings</code> button</li>
|
|
<li>Go to <code>Repositories</code>, scroll to the bottom, select <code>User defined repositories</code> and press <code>Add</code></li>
|
|
<li>In the right column (selected by default), type:<ul>
|
|
<li>On Linux: <a href="https://install.skycoder42.de/qtmodules/linux_x64">https://install.skycoder42.de/qtmodules/linux_x64</a></li>
|
|
<li>On Windows: <a href="https://install.skycoder42.de/qtmodules/windows_x86">https://install.skycoder42.de/qtmodules/windows_x86</a></li>
|
|
<li>On Mac: <a href="https://install.skycoder42.de/qtmodules/mac_x64">https://install.skycoder42.de/qtmodules/mac_x64</a></li>
|
|
</ul>
|
|
</li>
|
|
<li>Press <code>Ok</code>, make shure <code>Add or remove components</code> is still selected, and continue the install (<code>Next ></code>)</li>
|
|
<li>A new entry appears under all supported <a class="elRef" target="_blank" doxygen="/home/sky/Qt/Docs/Qt-5.10.1/qtcore/qtcore.tags:https://doc.qt.io/qt-5/" href="https://doc.qt.io/qt-5/qt.html">Qt</a> Versions (e.g. <code><a class="elRef" target="_blank" doxygen="/home/sky/Qt/Docs/Qt-5.10.1/qtcore/qtcore.tags:https://doc.qt.io/qt-5/" href="https://doc.qt.io/qt-5/qt.html">Qt</a> > <a class="elRef" target="_blank" doxygen="/home/sky/Qt/Docs/Qt-5.10.1/qtcore/qtcore.tags:https://doc.qt.io/qt-5/" href="https://doc.qt.io/qt-5/qt.html">Qt</a> 5.10 > Skycoder42 <a class="elRef" target="_blank" doxygen="/home/sky/Qt/Docs/Qt-5.10.1/qtcore/qtcore.tags:https://doc.qt.io/qt-5/" href="https://doc.qt.io/qt-5/qt.html">Qt</a> modules</code>)</li>
|
|
<li>You can install either all of my modules, or select the one you need: <code><a class="elRef" target="_blank" doxygen="/home/sky/Qt/Docs/Qt-5.10.1/qtcore/qtcore.tags:https://doc.qt.io/qt-5/" href="https://doc.qt.io/qt-5/qt.html">Qt</a> Mvvm</code></li>
|
|
<li>Continue the setup and thats it! you can now use the module for all of your installed Kits for that <a class="elRef" target="_blank" doxygen="/home/sky/Qt/Docs/Qt-5.10.1/qtcore/qtcore.tags:https://doc.qt.io/qt-5/" href="https://doc.qt.io/qt-5/qt.html">Qt</a> Version</li>
|
|
</ol>
|
|
</li>
|
|
<li>Download the compiled modules from the release page. <b>Note:</b> You will have to add the correct ones yourself and may need to adjust some paths to fit your installation! In addition to that, you will have to download the modules this one depends on as well. See Section "Requirements" below.</li>
|
|
<li>Build it yourself! <b>Note:</b> This requires all build an runtime dependencies to be available (See Section "Requirements" below). If you don't have/need cmake, you can ignore the related warnings. To automatically build and install to your <a class="elRef" target="_blank" doxygen="/home/sky/Qt/Docs/Qt-5.10.1/qtcore/qtcore.tags:https://doc.qt.io/qt-5/" href="https://doc.qt.io/qt-5/qt.html">Qt</a> installation, run:<ul>
|
|
<li><code>qmake</code></li>
|
|
<li><code>make qmake_all</code></li>
|
|
<li><code>make</code> (If you want the tests/examples/etc. run <code>make all</code>)</li>
|
|
<li>Optional steps:<ul>
|
|
<li><code>make doxygen</code> to generate the documentation</li>
|
|
<li><code>make lrelease</code> to generate the translations</li>
|
|
</ul>
|
|
</li>
|
|
<li><code>make install</code></li>
|
|
</ul>
|
|
</li>
|
|
</ol>
|
|
<h2><a class="anchor" id="qtmvvm_readme_label_4"></a>
|
|
Requirements</h2>
|
|
<p>The library only has a few dependencies. The main modules only depends on qtbase and qtquick respectively. However, the Datasync extensions need <a class="elRef" target="_blank" doxygen="/home/sky/Qt/Docs/Qt-5.10.1/qtdatasync/qtdatasync.tags:https://skycoder42.github.io/QtDataSync/" href="https://skycoder42.github.io/QtDataSync/namespace_qt_data_sync.html">QtDataSync</a> of course.</p>
|
|
<ul>
|
|
<li>Custom <a class="elRef" target="_blank" doxygen="/home/sky/Qt/Docs/Qt-5.10.1/qtcore/qtcore.tags:https://doc.qt.io/qt-5/" href="https://doc.qt.io/qt-5/qt.html">Qt</a> modules:<ul>
|
|
<li><a href="https://github.com/Skycoder42/QtDataSync">QtDataSync</a> (DataSync extensions only)</li>
|
|
</ul>
|
|
</li>
|
|
<li>Additional stuff for building it yourself:<ul>
|
|
<li>perl</li>
|
|
<li><a href="https://github.com/Skycoder42/qpmx">qpmx</a></li>
|
|
<li><a href="https://github.com/Cutehacks/qpm">qpm</a></li>
|
|
<li>Please note that you need the <a class="elRef" target="_blank" doxygen="/home/sky/Qt/Docs/Qt-5.10.1/qtdatasync/qtdatasync.tags:https://skycoder42.github.io/QtDataSync/" href="https://skycoder42.github.io/QtDataSync/namespace_qt_data_sync.html">QtDataSync</a> for building the datasync modules, but if you don't have it, the build wont fail. The datasync modules will simply be skipped.</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
<h2><a class="anchor" id="qtmvvm_readme_label_5"></a>
|
|
Modules</h2>
|
|
<ul>
|
|
<li><b>QtMvvmCore:</b> The core part of <a class="el" href="namespace_qt_mvvm.html" title="The primary namespace of the QtMvvm library. ">QtMvvm</a></li>
|
|
<li><b>QtMvvmWidgets:</b> The basic frontend for QtWidgets</li>
|
|
<li><b>QtMvvmQuick:</b> The basic frontend for QtQuick Controls 2</li>
|
|
<li><b>QtMvvmDataSyncCore:</b> The core part of the <a class="el" href="namespace_qt_mvvm.html" title="The primary namespace of the QtMvvm library. ">QtMvvm</a> DataSync extension (requires <a class="elRef" target="_blank" doxygen="/home/sky/Qt/Docs/Qt-5.10.1/qtdatasync/qtdatasync.tags:https://skycoder42.github.io/QtDataSync/" href="https://skycoder42.github.io/QtDataSync/namespace_qt_data_sync.html">QtDataSync</a>)</li>
|
|
<li><b>QtMvvmDataSyncWidgets:</b> The frontend extensions of <a class="el" href="namespace_qt_mvvm.html" title="The primary namespace of the QtMvvm library. ">QtMvvm</a> DataSync for QtWidgets (requires <a class="elRef" target="_blank" doxygen="/home/sky/Qt/Docs/Qt-5.10.1/qtdatasync/qtdatasync.tags:https://skycoder42.github.io/QtDataSync/" href="https://skycoder42.github.io/QtDataSync/namespace_qt_data_sync.html">QtDataSync</a>)</li>
|
|
<li><b>QtMvvmDataSyncQuick:</b> The frontend extensions of <a class="el" href="namespace_qt_mvvm.html" title="The primary namespace of the QtMvvm library. ">QtMvvm</a> DataSync for QtQuick Controls 2 (requires <a class="elRef" target="_blank" doxygen="/home/sky/Qt/Docs/Qt-5.10.1/qtdatasync/qtdatasync.tags:https://skycoder42.github.io/QtDataSync/" href="https://skycoder42.github.io/QtDataSync/namespace_qt_data_sync.html">QtDataSync</a>)</li>
|
|
</ul>
|
|
<h1><a class="anchor" id="qtmvvm_readme_label_6"></a>
|
|
Usage</h1>
|
|
<p>The following chapters will explain how to create a <a class="el" href="namespace_qt_mvvm.html" title="The primary namespace of the QtMvvm library. ">QtMvvm</a> Project and how to correctly implement applications with it. A Mvvm Project always consists of one core project, with the application logic, and one or more gui projects with the View implementations. In the following section it is explained how to use <a class="el" href="namespace_qt_mvvm.html" title="The primary namespace of the QtMvvm library. ">QtMvvm</a> without going into the depths. For more details you can check the sample projects. If you want to go deeper on how the Framework works and what detailed steps are needed, check out the <a href="https://skycoder42.github.io/QtMvvm/">Documentation</a> of the following classes:</p>
|
|
<ul>
|
|
<li>CoreApp</li>
|
|
<li>ViewModel</li>
|
|
<li>ServiceRegistry</li>
|
|
<li>IPresenter</li>
|
|
</ul>
|
|
<p>The easiest way to create a <a class="el" href="namespace_qt_mvvm.html" title="The primary namespace of the QtMvvm library. ">QtMvvm</a> Project is to use the provided project template. If you did not install via a package manager or the repository, follow the steps below to add the wizard.</p>
|
|
<h2><a class="anchor" id="qtmvvm_readme_label_7"></a>
|
|
Add the custom wizard</h2>
|
|
<p>If you did install the module as module you can skip this part. To create a new <a class="el" href="namespace_qt_mvvm.html" title="The primary namespace of the QtMvvm library. ">QtMvvm</a> project, you can use a custom wizard for QtCreator. You will have to add it to your computer once. To do this, you will have to copy the contents of the [<code>ProjectTemplate</code>](ProjectTemplate) folder to a location known by QtCreator (Pro Tip: Use <a href="https://kinolien.github.io/gitzip/">Kinolien's Gitzip</a> to download that directory only). The locations can be found here: <a href="https://doc.qt.io/qtcreator/creator-project-wizards.html#locating-wizards">Locating Wizards</a>. If you are, for example, working on linux, create a new folder called <code><a class="el" href="namespace_qt_mvvm.html" title="The primary namespace of the QtMvvm library. ">QtMvvm</a></code> inside of <code>$HOME/.config/QtProject/qtcreator/templates/wizards</code> and copy the contents there. After restarting QtCreator, the project template should appear in the <code>Applications</code> section of the new-dialog as <code><a class="el" href="namespace_qt_mvvm.html" title="The primary namespace of the QtMvvm library. ">QtMvvm</a> Application Project</code>.</p>
|
|
<h2><a class="anchor" id="qtmvvm_readme_label_8"></a>
|
|
Create and initialize the QtMvvm Project</h2>
|
|
<p>Follow the setup to create the project. You can select the GUI-frontends you want to use, as well as additional features. After that you get a basic project skeleton with a simple CoreApp and a ViewModel, as well as the corresponding views.</p>
|
|
<p>For more Details on these classes, check the <a href="https://skycoder42.github.io/QtMvvm/">Documentation</a>.</p>
|
|
<h2><a class="anchor" id="qtmvvm_readme_label_9"></a>
|
|
Adding new ViewModels and Views</h2>
|
|
<p>The most important part is to know how to add new ViewModels and Views.</p>
|
|
<h3><a class="anchor" id="qtmvvm_readme_label_10"></a>
|
|
Create the ViewModel</h3>
|
|
<ul>
|
|
<li>Add a new c++ class to your core project. Let it inherit from <code><a class="el" href="class_qt_mvvm_1_1_view_model.html" title="The base class for all viewmodels. ">QtMvvm::ViewModel</a></code></li>
|
|
<li>Make shure the Constructor has the following signature: <code>Q_INVOKABLE MyClass(QObject *parent);</code></li>
|
|
<li>See <a href="examples/mvvmcore/SampleCore/sampleviewmodel.h"><code>examples/mvvmcore/SampleCore/sampleviewmodel.h</code></a> for an example ViewModel</li>
|
|
</ul>
|
|
<h3><a class="anchor" id="qtmvvm_readme_label_11"></a>
|
|
Create the View for QtWidgets</h3>
|
|
<ul>
|
|
<li>Create a new widget class in your widgets gui project.</li>
|
|
<li>In order to use it as widget for a viewmodel, you should name it accordingly: If your viewmodel is named <code>MyCustomViewModel</code>, the widgets name must start with <code>MyCustom</code> as well (e.g. <code>MyCustomWindow</code>, <code>MyCustomDialog</code>, <code>MyCustomView</code>, etc.)</li>
|
|
<li>Modify the constructor to look like this: <code>Q_INVOKABLE MyCustomWindow(<a class="el" href="class_qt_mvvm_1_1_view_model.html" title="The base class for all viewmodels. ">QtMvvm::ViewModel</a> *viewModel, <a class="elRef" target="_blank" doxygen="/home/sky/Qt/Docs/Qt-5.10.1/qtautoupdater/qtautoupdater.tags:https://doc.qt.io/qt-5/" href="https://doc.qt.io/qt-5/class_q_widget.html">QWidget</a> *parent = nullptr);</code></li>
|
|
<li>Create a member variable with your viewmodel type, e.g. <code>MyCustomViewModel *_viewModel;</code></li>
|
|
<li>In the constructors implementation, cast the <code>viewModel</code> to your viewmodel class and assign it to <code>_viewModel</code></li>
|
|
<li>As final step, you need to register the widget. This can be done by adding the line <code>WidgetPresenter::registerView<MyCustomWindow>();</code> to your <code>main.cpp</code>, before calling <code><a class="elRef" target="_blank" doxygen="/home/sky/Qt/Docs/Qt-5.10.1/qtwidgets/qtwidgets.tags:https://doc.qt.io/qt-5/" href="https://doc.qt.io/qt-5/qapplication.html#exec">QApplication::exec</a></code></li>
|
|
<li>See <a href="examples/mvvmwidgets/SampleWidgets/sampleview.h"><code>examples/mvvmwidgets/SampleWidgets/sampleview.h</code></a> for an example widget</li>
|
|
</ul>
|
|
<h3><a class="anchor" id="qtmvvm_readme_label_12"></a>
|
|
Create the quick ui</h3>
|
|
<ul>
|
|
<li><em>Optional:</em> Register the viewmodel for qml. This way autocomplete will work. Add the line <code>qmlRegisterUncreatableType<MyCustomViewModel>("com.example.mvvmexample", 1, 0, "MyCustomViewModel", "ViewModels cannot be created!");</code> to your main cpp before creating the engine.</li>
|
|
<li>Create a new qml file inside of the folder <code>:/qml/views</code> (This is required to automatically find the view).</li>
|
|
<li>In order to use it as view for a viewmodel, you should name it accordingly: If your viewmodel is named <code>MyCustomViewModel</code>, the views name must start with <code>MyCustom</code> as well (e.g. <code>MyCustomView</code>, <code>MyCustomActivity</code>, etc.)</li>
|
|
<li>Add the following imports to the qml file: <div class="fragment"><div class="line"><span class="keyword">import</span> <a class="code" href="namespace_qt_quick.html">QtQuick</a> 2.10</div><div class="line">import <a class="code" href="namespace_qt_quick.html">QtQuick</a>.Controls 2.3</div><div class="line">import <a class="code" href="namespacede.html">de</a>.<a class="code" href="namespacede_1_1skycoder42.html">skycoder42</a>.<a class="code" href="namespacede_1_1skycoder42_1_1_qt_mvvm.html">QtMvvm</a>.<a class="code" href="namespacede_1_1skycoder42_1_1_qt_mvvm_1_1_core.html">Core</a> 1.0</div><div class="line">import <a class="code" href="namespacede.html">de</a>.<a class="code" href="namespacede_1_1skycoder42.html">skycoder42</a>.<a class="code" href="namespacede_1_1skycoder42_1_1_qt_mvvm.html">QtMvvm</a>.<a class="code" href="namespacede_1_1skycoder42_1_1_qt_mvvm_1_1_quick.html">Quick</a> 1.0</div><div class="line">import com.example.mvvmexample 1.0 <span class="comment">//adjust to the module defined in your main.cpp</span></div></div><!-- fragment --></li>
|
|
<li>Add a property named viewmodel to the root element: <code>property MyCustomViewModel viewmodel: null</code> (If you did not register the viewmodel, use <code>var</code> instead of <code>MyCustomViewModel</code> as property type)</li>
|
|
<li>Add a presenter progress element to the root element. This way lazy loading views will show a progress: <code>PresenterProgress {}</code></li>
|
|
<li>See <a href="examples/mvvmquick/SampleQuick/SampleView.qml"><code>examples/mvvmquick/SampleQuick/SampleView.qml</code></a> for an example view</li>
|
|
</ul>
|
|
<h1><a class="anchor" id="qtmvvm_readme_label_13"></a>
|
|
Understanding how QtMvvm works</h1>
|
|
<p>The general idea is the following: You create viewmodels in your core project, which represent uis. They typically contain all the properties relevant for the ui, methods (slots) that can be called (e.g. on a button click) and signals to inform the ui about changes and other events. Thus, you can use the as ui "placeholders". Of course, They only contain the ui logic, not the actual uis.</p>
|
|
<p>The CoreApp is what's reponsible for managing those viewmodels. Showing a viewmodel, as well as messages (alert dialogs) are all controlled by the coreapp. The coreapp uses a so called presenters to create the actual uis. The presenters are located in the ui projects and they are the most complicated part. Their main task is to find ui implementations for viewmodel (called views), and manage the life cycle as well as the presentation of those real views. The presenters are where the decision is made, how a specific view should be shown.</p>
|
|
<p>The views are whatever you need to create actual uis. This depends on the presenter used, since the presenter selects the views. Each ui type has their own way to create those views, but they all have in commmon that the views themselves do not control the application. When a viewmodel gets shown, a new view is created and the viewmodel passed to it. Once the views was closed, the view and the viewmodel get deleted again. Views and ViewModels are temporary and should only use the viewmodel to interact with other parts of the application.</p>
|
|
<h2><a class="anchor" id="qtmvvm_readme_label_14"></a>
|
|
A side note on presenters</h2>
|
|
<p>To create a presenter, the <code><a class="el" href="class_qt_mvvm_1_1_i_presenter.html" title="The interface for a GUI view presenter. ">QtMvvm::IPresenter</a></code> must be implemented and provided via the <code>ServiceRegistry</code>. Presenters can become quite complicated, but they are the thing you need to modify if you want to present views in a different way from the ones supported. Currently, the presenters can do the following:</p>
|
|
<ul>
|
|
<li>Widgets Presenter<ul>
|
|
<li>Present viewmodels as widgets (or windows, dialogs, depending on type and parent)</li>
|
|
<li>Parent-Aware: If your viewmodel has a parent and shows a ui, the childs ui will be a child of the parents ui as well</li>
|
|
<li>Automatically detect QDockWidgets and place them as dock inside a parents <a class="elRef" target="_blank" doxygen="/home/sky/Qt/Docs/Qt-5.10.1/qtwidgets/qtwidgets.tags:https://doc.qt.io/qt-5/" href="https://doc.qt.io/qt-5/qmainwindow.html">QMainWindow</a></li>
|
|
<li>Automatically detect QMdiSubWindows and place them in a parents <a class="elRef" target="_blank" doxygen="/home/sky/Qt/Docs/Qt-5.10.1/qtwidgets/qtwidgets.tags:https://doc.qt.io/qt-5/" href="https://doc.qt.io/qt-5/qmdiarea.html">QMdiArea</a></li>
|
|
<li>Allows windows to implement <code>IPresentingWidget</code>. This way a window can handle the presentation of it's children without modifying the presenter</li>
|
|
<li>Allows to register custom input widgets for input dialogs (and other parts, like the settings. See <code>InputWidgetFactory</code>)</li>
|
|
</ul>
|
|
</li>
|
|
<li>Quick Presenter<ul>
|
|
<li>Consists of a c++ part and a qml part</li>
|
|
<li>The c++ part is responsible for finding views for controls and creating them, but <b>not</b> for the actual presentation. This is done by the qml presenter<ul>
|
|
<li>Allows to register custom input views for input dialogs (and other parts, like the settings. See <code>InputViewFactory</code>)</li>
|
|
</ul>
|
|
</li>
|
|
<li>The qml presenter can be any qml type. It must provide the correct methods (as seen in <code>QtMvvmApp</code>) and register itself with <code>Component.onCompleted: QuickPresenter.qmlPresenter = self</code><ul>
|
|
<li>The <code>QtMvvmApp</code> qml types automatically register themselves as presenter and perform the presentations</li>
|
|
<li>Supports Items as new fullscreen pages inside a stack view, as drawer or as tabs</li>
|
|
<li>Supports Popups as modal dialogs</li>
|
|
<li></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
<h1><a class="anchor" id="qtmvvm_readme_label_15"></a>
|
|
Icons</h1>
|
|
<p>In many of the UI projects default icons are used for the views (if no icon theme is present). They are taken from:</p>
|
|
<ul>
|
|
<li>Widgets: <a href="http://www.fatcow.com/free-icons">http://www.fatcow.com/free-icons</a></li>
|
|
<li>Quick: <a href="https://material.io/icons/">https://material.io/icons/</a> </li>
|
|
</ul>
|
|
</div></div><!-- contents -->
|
|
<!-- start footer part -->
|
|
<hr class="footer"/><address class="footer"><small>
|
|
Generated on Wed Mar 14 2018 16:19:59 for QtMvvm by  <a href="http://www.doxygen.org/index.html">
|
|
<img class="footer" src="doxygen.png" alt="doxygen"/>
|
|
</a> 1.8.14
|
|
</small></address>
|
|
</body>
|
|
</html>
|
|
|