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.
82 lines
34 KiB
82 lines
34 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: README.md Source File</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.1.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">README.md</div> </div>
|
|
</div><!--header-->
|
|
<div class="contents">
|
|
<div class="fragment"><div class="line"><a name="l00001"></a><span class="lineno"> 1</span> [TOC]</div><div class="line"><a name="l00002"></a><span class="lineno"> 2</span> </div><div class="line"><a name="l00003"></a><span class="lineno"> 3</span> A mvvm oriented library for Qt, to create Projects for Widgets and Quick Controls 2 in parallel.</div><div class="line"><a name="l00004"></a><span class="lineno"> 4</span> </div><div class="line"><a name="l00005"></a><span class="lineno"> 5</span> [](https://travis-ci.org/Skycoder42/QtMvvm)</div><div class="line"><a name="l00006"></a><span class="lineno"> 6</span> [](https://ci.appveyor.com/project/Skycoder42/qtmvvm)</div><div class="line"><a name="l00007"></a><span class="lineno"> 7</span> [](https://www.codacy.com/app/Skycoder42/QtMvvm)</div><div class="line"><a name="l00008"></a><span class="lineno"> 8</span> [](https://aur.archlinux.org/pkgbase/qt5-mvvm/)</div><div class="line"><a name="l00009"></a><span class="lineno"> 9</span> </div><div class="line"><a name="l00010"></a><span class="lineno"> 10</span> </div><div class="line"><a name="l00011"></a><span class="lineno"> 11</span> </div><div class="line"><a name="l00012"></a><span class="lineno"> 12</span> </div><div class="line"><a name="l00013"></a><span class="lineno"> 13</span> For more images, check the [Images page](https://skycoder42.github.io/QtMvvm/images_page.html)</div><div class="line"><a name="l00014"></a><span class="lineno"> 14</span> </div><div class="line"><a name="l00015"></a><span class="lineno"> 15</span> # Features {#qtmvvm_readme_label_0}</div><div class="line"><a name="l00016"></a><span class="lineno"> 16</span> The main feature of QtMvvm 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.</div><div class="line"><a name="l00017"></a><span class="lineno"> 17</span> </div><div class="line"><a name="l00018"></a><span class="lineno"> 18</span> The key features are:</div><div class="line"><a name="l00019"></a><span class="lineno"> 19</span> </div><div class="line"><a name="l00020"></a><span class="lineno"> 20</span> - Create ViewModels in the core application to prepare data for presentation without binding to any concret GUI</div><div class="line"><a name="l00021"></a><span class="lineno"> 21</span>  - Supports singleton ViewModels</div><div class="line"><a name="l00022"></a><span class="lineno"> 22</span>  - Supports automatic presentation of container ViewModels</div><div class="line"><a name="l00023"></a><span class="lineno"> 23</span> - Functions to show messageboxes (info, warning, error, etc.) from your core app</div><div class="line"><a name="l00024"></a><span class="lineno"> 24</span>  - Asynchronous, with result handling</div><div class="line"><a name="l00025"></a><span class="lineno"> 25</span>  - Supports input dialogs and native file dialogs out of the box</div><div class="line"><a name="l00026"></a><span class="lineno"> 26</span>  - Supports native file pickers on Android</div><div class="line"><a name="l00027"></a><span class="lineno"> 27</span>  - Supports color picker dialog</div><div class="line"><a name="l00028"></a><span class="lineno"> 28</span>  - Supports progress and busy indicator dialogs</div><div class="line"><a name="l00029"></a><span class="lineno"> 29</span>  - custom dialog types can be created</div><div class="line"><a name="l00030"></a><span class="lineno"> 30</span> - Methods to create Two-Way Bindings from C++ and QML</div><div class="line"><a name="l00031"></a><span class="lineno"> 31</span> - Macros and a ServiceRegistry to make Dependency Injection possible for Services and ViewModels</div><div class="line"><a name="l00032"></a><span class="lineno"> 32</span> - A generic Presenter Interface so you can create your own custom GUI implementations</div><div class="line"><a name="l00033"></a><span class="lineno"> 33</span>  - Widgets and Qt Quick Controls 2 are supported out of the box</div><div class="line"><a name="l00034"></a><span class="lineno"> 34</span> - Generic Edit-View factories to create simple edits for any kind of data from the core code</div><div class="line"><a name="l00035"></a><span class="lineno"> 35</span> - Supports an extensive "Settings GUI" via a simple XML format</div><div class="line"><a name="l00036"></a><span class="lineno"> 36</span> </div><div class="line"><a name="l00037"></a><span class="lineno"> 37</span> ## QtMvvm Datasync {#qtmvvm_readme_label_1}</div><div class="line"><a name="l00038"></a><span class="lineno"> 38</span> The QtMvvmDatasync modules help you to integrate [QtDataSync](https://github.com/Skycoder42/QtDataSync) (An easy and reliable synchronization library) into your projects. It adds ViewModels and Views to:</div><div class="line"><a name="l00039"></a><span class="lineno"> 39</span> </div><div class="line"><a name="l00040"></a><span class="lineno"> 40</span> - Monitor and control the connection and synchronization status</div><div class="line"><a name="l00041"></a><span class="lineno"> 41</span> - Manage your account and account devices</div><div class="line"><a name="l00042"></a><span class="lineno"> 42</span> - Easy file based import and exports, as well as a fronted for the local Network-Exchange</div><div class="line"><a name="l00043"></a><span class="lineno"> 43</span> </div><div class="line"><a name="l00044"></a><span class="lineno"> 44</span> ## The Mvvm Pattern {#qtmvvm_readme_label_2}</div><div class="line"><a name="l00045"></a><span class="lineno"> 45</span> If you don't know the Mvvm pattern already, you can read up on the links below. It's basically a clever seperation</div><div class="line"><a name="l00046"></a><span class="lineno"> 46</span> of logic (the models), presentation logic (the viewmodels) and the actual GUI (the views) that is very useful when</div><div class="line"><a name="l00047"></a><span class="lineno"> 47</span> creating applications that need to support different uis for the same data.</div><div class="line"><a name="l00048"></a><span class="lineno"> 48</span> </div><div class="line"><a name="l00049"></a><span class="lineno"> 49</span> [](https://msdn.microsoft.com/en-us/library/hh848246.aspx)</div><div class="line"><a name="l00050"></a><span class="lineno"> 50</span> </div><div class="line"><a name="l00051"></a><span class="lineno"> 51</span> Good links to get started:</div><div class="line"><a name="l00052"></a><span class="lineno"> 52</span> </div><div class="line"><a name="l00053"></a><span class="lineno"> 53</span> - https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93viewmodel</div><div class="line"><a name="l00054"></a><span class="lineno"> 54</span> - https://msdn.microsoft.com/en-us/library/hh848246.aspx</div><div class="line"><a name="l00055"></a><span class="lineno"> 55</span> </div><div class="line"><a name="l00056"></a><span class="lineno"> 56</span> # Download/Installation {#qtmvvm_readme_label_3}</div><div class="line"><a name="l00057"></a><span class="lineno"> 57</span> 1. Package Managers: The library is available via:</div><div class="line"><a name="l00058"></a><span class="lineno"> 58</span>  - **Arch-Linux:** AUR-Repository: [`qt5-qtmvvm`](https://aur.archlinux.org/pkgbase/qt5-mvvm/)</div><div class="line"><a name="l00059"></a><span class="lineno"> 59</span>  - **Ubuntu:** Launchpad-PPA: [ppa:skycoder42/qt-modules](https://launchpad.net/~skycoder42/+archive/ubuntu/qt-modules), package `libqt5mvvm[1/-dev]`</div><div class="line"><a name="l00060"></a><span class="lineno"> 60</span>  - **MacOs:**</div><div class="line"><a name="l00061"></a><span class="lineno"> 61</span>  - Tap: [`brew tap Skycoder42/qt-modules`](https://github.com/Skycoder42/homebrew-qt-modules)</div><div class="line"><a name="l00062"></a><span class="lineno"> 62</span>  - Package: `qtmvvm`</div><div class="line"><a name="l00063"></a><span class="lineno"> 63</span>  - **IMPORTANT:** Due to limitations of homebrew, you must run `source /usr/local/opt/qtmvvm/bashrc.sh` before you can use the module. Some goes for the `qtdatasync` dependency.</div><div class="line"><a name="l00064"></a><span class="lineno"> 64</span> 2. Simply add my repository to your Qt MaintenanceTool (Image-based How-To here: [Add custom repository](https://github.com/Skycoder42/QtModules/blob/master/README.md#add-my-repositories-to-qt-maintenancetool)):</div><div class="line"><a name="l00065"></a><span class="lineno"> 65</span>  1. Start the MaintenanceTool from the commandline using `/path/to/MaintenanceTool --addTempRepository <url>` with one of the following urls (GUI-Method is currently broken, see [QTIFW-1156](https://bugreports.qt.io/browse/QTIFW-1156)) - This must be done *every time* you start the tool:</div><div class="line"><a name="l00066"></a><span class="lineno"> 66</span>  - On Linux: https://install.skycoder42.de/qtmodules/linux_x64</div><div class="line"><a name="l00067"></a><span class="lineno"> 67</span>  - On Windows: https://install.skycoder42.de/qtmodules/windows_x86</div><div class="line"><a name="l00068"></a><span class="lineno"> 68</span>  - On Mac: https://install.skycoder42.de/qtmodules/mac_x64</div><div class="line"><a name="l00069"></a><span class="lineno"> 69</span>  2. A new entry appears under all supported Qt Versions (e.g. `Qt > Qt 5.11 > Skycoder42 Qt modules`)</div><div class="line"><a name="l00070"></a><span class="lineno"> 70</span>  3. You can install either all of my modules, or select the one you need: `Qt Mvvm`</div><div class="line"><a name="l00071"></a><span class="lineno"> 71</span>  4. Continue the setup and thats it! you can now use the module for all of your installed Kits for that Qt Version</div><div class="line"><a name="l00072"></a><span class="lineno"> 72</span> 3. Download the compiled modules from the release page. **Note:** 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.</div><div class="line"><a name="l00073"></a><span class="lineno"> 73</span> 4. Build it yourself! **Note:** 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 Qt installation, run:</div><div class="line"><a name="l00074"></a><span class="lineno"> 74</span>  - `qmake`</div><div class="line"><a name="l00075"></a><span class="lineno"> 75</span>  - `make qmake_all`</div><div class="line"><a name="l00076"></a><span class="lineno"> 76</span>  - `make` (If you want the tests/examples/etc. run `make all`)</div><div class="line"><a name="l00077"></a><span class="lineno"> 77</span>  - Optional steps:</div><div class="line"><a name="l00078"></a><span class="lineno"> 78</span>  - `make doxygen` to generate the documentation</div><div class="line"><a name="l00079"></a><span class="lineno"> 79</span>  - `make lrelease` to generate the translations</div><div class="line"><a name="l00080"></a><span class="lineno"> 80</span>  - `make install`</div><div class="line"><a name="l00081"></a><span class="lineno"> 81</span> </div><div class="line"><a name="l00082"></a><span class="lineno"> 82</span> ## Requirements {#qtmvvm_readme_label_4}</div><div class="line"><a name="l00083"></a><span class="lineno"> 83</span> The library only has a few dependencies. The main modules only depends on qtbase and qtquick respectively. However, the Datasync extensions need QtDataSync of course.</div><div class="line"><a name="l00084"></a><span class="lineno"> 84</span> </div><div class="line"><a name="l00085"></a><span class="lineno"> 85</span> - Custom Qt modules:</div><div class="line"><a name="l00086"></a><span class="lineno"> 86</span>  - [QtDataSync](https://github.com/Skycoder42/QtDataSync) (DataSync extensions only)</div><div class="line"><a name="l00087"></a><span class="lineno"> 87</span> - Additional stuff for building it yourself:</div><div class="line"><a name="l00088"></a><span class="lineno"> 88</span>  - perl</div><div class="line"><a name="l00089"></a><span class="lineno"> 89</span>  - [qpmx](https://github.com/Skycoder42/qpmx)</div><div class="line"><a name="l00090"></a><span class="lineno"> 90</span>  - [qpm](https://github.com/Cutehacks/qpm)</div><div class="line"><a name="l00091"></a><span class="lineno"> 91</span>  - Please note that you need the QtDataSync for building the datasync modules, but if you don't have it, the build wont fail. The datasync modules will simply be skipped.</div><div class="line"><a name="l00092"></a><span class="lineno"> 92</span> </div><div class="line"><a name="l00093"></a><span class="lineno"> 93</span> ## Modules {#qtmvvm_readme_label_5}</div><div class="line"><a name="l00094"></a><span class="lineno"> 94</span> - **QtMvvmCore:** The core part of QtMvvm</div><div class="line"><a name="l00095"></a><span class="lineno"> 95</span> - **QtMvvmWidgets:** The basic frontend for QtWidgets</div><div class="line"><a name="l00096"></a><span class="lineno"> 96</span> - **QtMvvmQuick:** The basic frontend for QtQuick Controls 2</div><div class="line"><a name="l00097"></a><span class="lineno"> 97</span> - **QtMvvmDataSyncCore:** The core part of the QtMvvm DataSync extension (requires QtDataSync)</div><div class="line"><a name="l00098"></a><span class="lineno"> 98</span> - **QtMvvmDataSyncWidgets:** The frontend extensions of QtMvvm DataSync for QtWidgets (requires QtDataSync)</div><div class="line"><a name="l00099"></a><span class="lineno"> 99</span> - **QtMvvmDataSyncQuick:** The frontend extensions of QtMvvm DataSync for QtQuick Controls 2 (requires QtDataSync)</div><div class="line"><a name="l00100"></a><span class="lineno"> 100</span> </div><div class="line"><a name="l00101"></a><span class="lineno"> 101</span> # Usage {#qtmvvm_readme_label_6}</div><div class="line"><a name="l00102"></a><span class="lineno"> 102</span> The following chapters will explain how to create a QtMvvm 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 QtMvvm 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 [Documentation](https://skycoder42.github.io/QtMvvm/) of the following classes:</div><div class="line"><a name="l00103"></a><span class="lineno"> 103</span> </div><div class="line"><a name="l00104"></a><span class="lineno"> 104</span> - CoreApp</div><div class="line"><a name="l00105"></a><span class="lineno"> 105</span> - ViewModel</div><div class="line"><a name="l00106"></a><span class="lineno"> 106</span> - ServiceRegistry</div><div class="line"><a name="l00107"></a><span class="lineno"> 107</span> - IPresenter</div><div class="line"><a name="l00108"></a><span class="lineno"> 108</span> </div><div class="line"><a name="l00109"></a><span class="lineno"> 109</span> The easiest way to create a QtMvvm 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.</div><div class="line"><a name="l00110"></a><span class="lineno"> 110</span> </div><div class="line"><a name="l00111"></a><span class="lineno"> 111</span> ## Add the custom wizard {#qtmvvm_readme_label_7}</div><div class="line"><a name="l00112"></a><span class="lineno"> 112</span> If you did install the module as module you can skip this part. To create a new QtMvvm 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 [`ProjectTemplate`](ProjectTemplate) folder to a location known by QtCreator (Pro Tip: Use [Kinolien's Gitzip](https://kinolien.github.io/gitzip/) to download that directory only). The locations can be found here: [Locating Wizards](https://doc.qt.io/qtcreator/creator-project-wizards.html#locating-wizards). If you are, for example, working on linux, create a new folder called `QtMvvm` inside of `$HOME/.config/QtProject/qtcreator/templates/wizards` and copy the contents there. After restarting QtCreator, the project template should appear in the `Applications` section of the new-dialog as `QtMvvm Application Project`.</div><div class="line"><a name="l00113"></a><span class="lineno"> 113</span> </div><div class="line"><a name="l00114"></a><span class="lineno"> 114</span> ## Create and initialize the QtMvvm Project {#qtmvvm_readme_label_8}</div><div class="line"><a name="l00115"></a><span class="lineno"> 115</span> 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.</div><div class="line"><a name="l00116"></a><span class="lineno"> 116</span> </div><div class="line"><a name="l00117"></a><span class="lineno"> 117</span> For more Details on these classes, check the [Documentation](https://skycoder42.github.io/QtMvvm/).</div><div class="line"><a name="l00118"></a><span class="lineno"> 118</span> </div><div class="line"><a name="l00119"></a><span class="lineno"> 119</span> ## Adding new ViewModels and Views {#qtmvvm_readme_label_9}</div><div class="line"><a name="l00120"></a><span class="lineno"> 120</span> The most important part is to know how to add new ViewModels and Views.</div><div class="line"><a name="l00121"></a><span class="lineno"> 121</span> </div><div class="line"><a name="l00122"></a><span class="lineno"> 122</span> ### Create the ViewModel {#qtmvvm_readme_label_10}</div><div class="line"><a name="l00123"></a><span class="lineno"> 123</span> - Add a new c++ class to your core project. Let it inherit from `QtMvvm::ViewModel`</div><div class="line"><a name="l00124"></a><span class="lineno"> 124</span> - Make shure the Constructor has the following signature: `Q_INVOKABLE MyClass(QObject *parent);`</div><div class="line"><a name="l00125"></a><span class="lineno"> 125</span> - See [`examples/mvvmcore/SampleCore/sampleviewmodel.h`](examples/mvvmcore/SampleCore/sampleviewmodel.h) for an example ViewModel</div><div class="line"><a name="l00126"></a><span class="lineno"> 126</span> </div><div class="line"><a name="l00127"></a><span class="lineno"> 127</span> ### Create the View for QtWidgets {#qtmvvm_readme_label_11}</div><div class="line"><a name="l00128"></a><span class="lineno"> 128</span> - Create a new widget class in your widgets gui project.</div><div class="line"><a name="l00129"></a><span class="lineno"> 129</span> - In order to use it as widget for a viewmodel, you should name it accordingly: If your viewmodel is named `MyCustomViewModel`, the widgets name must start with `MyCustom` as well (e.g. `MyCustomWindow`, `MyCustomDialog`, `MyCustomView`, etc.)</div><div class="line"><a name="l00130"></a><span class="lineno"> 130</span> - Modify the constructor to look like this: `Q_INVOKABLE MyCustomWindow(QtMvvm::ViewModel *viewModel, QWidget *parent = nullptr);`</div><div class="line"><a name="l00131"></a><span class="lineno"> 131</span> - Create a member variable with your viewmodel type, e.g. `MyCustomViewModel *_viewModel;`</div><div class="line"><a name="l00132"></a><span class="lineno"> 132</span> - In the constructors implementation, cast the `viewModel` to your viewmodel class and assign it to `_viewModel`</div><div class="line"><a name="l00133"></a><span class="lineno"> 133</span> - As final step, you need to register the widget. This can be done by adding the line `WidgetPresenter::registerView<MyCustomWindow>();` to your `main.cpp`, before calling `QApplication::exec`</div><div class="line"><a name="l00134"></a><span class="lineno"> 134</span> - See [`examples/mvvmwidgets/SampleWidgets/sampleview.h`](examples/mvvmwidgets/SampleWidgets/sampleview.h) for an example widget</div><div class="line"><a name="l00135"></a><span class="lineno"> 135</span> </div><div class="line"><a name="l00136"></a><span class="lineno"> 136</span> ### Create the quick ui {#qtmvvm_readme_label_12}</div><div class="line"><a name="l00137"></a><span class="lineno"> 137</span> - *Optional:* Register the viewmodel for qml. This way autocomplete will work. Add the line `qmlRegisterUncreatableType<MyCustomViewModel>("com.example.mvvmexample", 1, 0, "MyCustomViewModel", "ViewModels cannot be created!");` to your main cpp before creating the engine.</div><div class="line"><a name="l00138"></a><span class="lineno"> 138</span> - Create a new qml file inside of the folder `:/qml/views` (This is required to automatically find the view).</div><div class="line"><a name="l00139"></a><span class="lineno"> 139</span> - In order to use it as view for a viewmodel, you should name it accordingly: If your viewmodel is named `MyCustomViewModel`, the views name must start with `MyCustom` as well (e.g. `MyCustomView`, `MyCustomActivity`, etc.)</div><div class="line"><a name="l00140"></a><span class="lineno"> 140</span> - Add the following imports to the qml file:</div><div class="line"><a name="l00141"></a><span class="lineno"> 141</span> ```qml</div><div class="line"><a name="l00142"></a><span class="lineno"> 142</span> import QtQuick 2.10</div><div class="line"><a name="l00143"></a><span class="lineno"> 143</span> import QtQuick.Controls 2.3</div><div class="line"><a name="l00144"></a><span class="lineno"> 144</span> import de.skycoder42.QtMvvm.Core 1.1</div><div class="line"><a name="l00145"></a><span class="lineno"> 145</span> import de.skycoder42.QtMvvm.Quick 1.1</div><div class="line"><a name="l00146"></a><span class="lineno"> 146</span> import com.example.mvvmexample 1.0 //adjust to the module defined in your main.cpp</div><div class="line"><a name="l00147"></a><span class="lineno"> 147</span> ```</div><div class="line"><a name="l00148"></a><span class="lineno"> 148</span> - Add a property named viewmodel to the root element: `property MyCustomViewModel viewmodel: null` (If you did not register the viewmodel, use `var` instead of `MyCustomViewModel` as property type)</div><div class="line"><a name="l00149"></a><span class="lineno"> 149</span> - Add a presenter progress element to the root element. This way lazy loading views will show a progress: `PresenterProgress {}`</div><div class="line"><a name="l00150"></a><span class="lineno"> 150</span> - See [`examples/mvvmquick/SampleQuick/SampleView.qml`](examples/mvvmquick/SampleQuick/SampleView.qml) for an example view</div><div class="line"><a name="l00151"></a><span class="lineno"> 151</span> </div><div class="line"><a name="l00152"></a><span class="lineno"> 152</span> # Understanding how QtMvvm works {#qtmvvm_readme_label_13}</div><div class="line"><a name="l00153"></a><span class="lineno"> 153</span> 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.</div><div class="line"><a name="l00154"></a><span class="lineno"> 154</span> </div><div class="line"><a name="l00155"></a><span class="lineno"> 155</span> 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.</div><div class="line"><a name="l00156"></a><span class="lineno"> 156</span> </div><div class="line"><a name="l00157"></a><span class="lineno"> 157</span> 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.</div><div class="line"><a name="l00158"></a><span class="lineno"> 158</span> </div><div class="line"><a name="l00159"></a><span class="lineno"> 159</span> ## A side note on presenters {#qtmvvm_readme_label_14}</div><div class="line"><a name="l00160"></a><span class="lineno"> 160</span> To create a presenter, the `QtMvvm::IPresenter` must be implemented and provided via the `ServiceRegistry`. 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:</div><div class="line"><a name="l00161"></a><span class="lineno"> 161</span> </div><div class="line"><a name="l00162"></a><span class="lineno"> 162</span> - Widgets Presenter</div><div class="line"><a name="l00163"></a><span class="lineno"> 163</span>  - Present viewmodels as widgets (or windows, dialogs, depending on type and parent)</div><div class="line"><a name="l00164"></a><span class="lineno"> 164</span>  - 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</div><div class="line"><a name="l00165"></a><span class="lineno"> 165</span>  - Automatically detect QDockWidgets and place them as dock inside a parents QMainWindow</div><div class="line"><a name="l00166"></a><span class="lineno"> 166</span>  - Automatically detect QMdiSubWindows and place them in a parents QMdiArea</div><div class="line"><a name="l00167"></a><span class="lineno"> 167</span>  - Allows windows to implement `IPresentingWidget`. This way a window can handle the presentation of it's children without modifying the presenter</div><div class="line"><a name="l00168"></a><span class="lineno"> 168</span>  - Allows to register custom input widgets for input dialogs (and other parts, like the settings. See `InputWidgetFactory`)</div><div class="line"><a name="l00169"></a><span class="lineno"> 169</span> - Quick Presenter</div><div class="line"><a name="l00170"></a><span class="lineno"> 170</span>  - Consists of a c++ part and a qml part</div><div class="line"><a name="l00171"></a><span class="lineno"> 171</span>  - The c++ part is responsible for finding views for controls and creating them, but **not** for the actual presentation. This is done by the qml presenter</div><div class="line"><a name="l00172"></a><span class="lineno"> 172</span>  - Allows to register custom input views for input dialogs (and other parts, like the settings. See `InputViewFactory`)</div><div class="line"><a name="l00173"></a><span class="lineno"> 173</span>  - The qml presenter can be any qml type. It must provide the correct methods (as seen in `QtMvvmApp`) and register itself with `Component.onCompleted: QuickPresenter.qmlPresenter = self`</div><div class="line"><a name="l00174"></a><span class="lineno"> 174</span>  - The `QtMvvmApp` qml types automatically register themselves as presenter and perform the presentations</div><div class="line"><a name="l00175"></a><span class="lineno"> 175</span>  - Supports Items as new fullscreen pages inside a stack view, as drawer or as tabs</div><div class="line"><a name="l00176"></a><span class="lineno"> 176</span>  - Supports Popups as modal dialogs</div><div class="line"><a name="l00177"></a><span class="lineno"> 177</span> </div><div class="line"><a name="l00178"></a><span class="lineno"> 178</span> # Icons {#qtmvvm_readme_label_15}</div><div class="line"><a name="l00179"></a><span class="lineno"> 179</span> In many of the UI projects default icons are used for the views (if no icon theme is present). They are taken from:</div><div class="line"><a name="l00180"></a><span class="lineno"> 180</span> </div><div class="line"><a name="l00181"></a><span class="lineno"> 181</span> - Widgets: http://www.fatcow.com/free-icons</div><div class="line"><a name="l00182"></a><span class="lineno"> 182</span> - Quick: https://material.io/icons/</div></div><!-- fragment --></div><!-- contents -->
|
|
<!-- start footer part -->
|
|
<hr class="footer"/><address class="footer"><small>
|
|
Generated on Wed Aug 8 2018 19:15:45 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>
|
|
|