<commit_before>===================
Model-View-Delegate
===================

.. sectionauthor:: `e8johan <https://bitbucket.org/e8johan>`_
	
.. index:: GridView, ListElement, ListModel, ListView, PathView, Repeater, XmlListModel

.. issues:: ch06

.. note::

    Last Build: |today|

    The source code for this chapter can be found in the `assets folder <../assets>`_.



In QtQuick, data is separated from the presentation through a model-view separation. For each view, the visualization of each data element is separated into a delegate. QtQuick comes with a set of predefined models and views. To utilize the system, one must understand these classes and know how to create appropriate delegates to get the right look and feel.


Concept
=======

.. issues:: ch06

One of the most important aspects when developing user interfaces, is to keep the representation of the data separate from the visualization. For instance, a phonebook could be arranged as a vertical list of text entries or a grid of pictures of the contacts. In both cases, the data is identical: the phonebook, but the visualization differs. This division is commonly referred to as the model-view pattern. In this pattern the data is referred to as the model, while the visualization is handled by the view.

In QML, the model and view are joined by the delegate. The responsibility are divided as follows. The model provides the data. For each data item, there might be multiple values. In the example above, each phonebook entry has a name, a picture and a number. The data is arranged in a view, in which each item is visualized using a delegate. The task of the view is to arrange the delegates, while each delegate shows the values of each model item to the user.

.. digraph:: model_view_delegate_roles

    View -> Model [label="Visualizes Model"]
    Delegate -> Model [label="Visualizes Model Rows"]
    View -> Delegate [label="Creates and Places"]
    

Basic Models
============

.. issues:: ch06

The most basic way to separate the data from the presentation is to use the ``Repeater`` element. It is used to instantiate an array of items, and is easy to combine with a positioner to populate a part of the user interface. A repeater uses a model, which can be anything from the number of items to instantiate, to a fully blown model gathering data from the Internet.

In the most basic for, the repeater can be used to instantiate a specified number of items. Each item will have access to an attached property, the variable ``index``, that can be used to tell the items apart. In the example below, a repeater is used to create 10 instances of an item. The number of items are controlled using the ``model`` property. For each item, the ``Rectangle`` containing a ``Text`` element found inside the ``Repeater`` item, is instantiated. As you can tell, the ``text`` property is set to the ``index`` value, thus the items are numbered from zero to nine.<commit_msg>typo - qt5-cadaques/issues/111<commit_after>===================
Model-View-Delegate
===================

.. sectionauthor:: `e8johan <https://bitbucket.org/e8johan>`_
	
.. index:: GridView, ListElement, ListModel, ListView, PathView, Repeater, XmlListModel

.. issues:: ch06

.. note::

    Last Build: |today|

    The source code for this chapter can be found in the `assets folder <../assets>`_.



In QtQuick, data is separated from the presentation through a model-view separation. For each view, the visualization of each data element is separated into a delegate. QtQuick comes with a set of predefined models and views. To utilize the system, one must understand these classes and know how to create appropriate delegates to get the right look and feel.


Concept
=======

.. issues:: ch06

One of the most important aspects when developing user interfaces, is to keep the representation of the data separate from the visualization. For instance, a phonebook could be arranged as a vertical list of text entries or a grid of pictures of the contacts. In both cases, the data is identical: the phonebook, but the visualization differs. This division is commonly referred to as the model-view pattern. In this pattern the data is referred to as the model, while the visualization is handled by the view.

In QML, the model and view are joined by the delegate. The responsibility are divided as follows. The model provides the data. For each data item, there might be multiple values. In the example above, each phonebook entry has a name, a picture and a number. The data is arranged in a view, in which each item is visualized using a delegate. The task of the view is to arrange the delegates, while each delegate shows the values of each model item to the user.

.. digraph:: model_view_delegate_roles

    View -> Model [label="Visualizes Model"]
    Delegate -> Model [label="Visualizes Model Rows"]
    View -> Delegate [label="Creates and Places"]
    

Basic Models
============

.. issues:: ch06

The most basic way to separate the data from the presentation is to use the ``Repeater`` element. It is used to instantiate an array of items, and is easy to combine with a positioner to populate a part of the user interface. A repeater uses a model, which can be anything from the number of items to instantiate, to a fully blown model gathering data from the Internet.

In its simplest form, the repeater can be used to instantiate a specified number of items. Each item will have access to an attached property, the variable ``index``, that can be used to tell the items apart. In the example below, a repeater is used to create 10 instances of an item. The number of items are controlled using the ``model`` property. For each item, the ``Rectangle`` containing a ``Text`` element found inside the ``Repeater`` item, is instantiated. As you can tell, the ``text`` property is set to the ``index`` value, thus the items are numbered from zero to nine.
{'fraction_non_alphanumeric': 0.07572684246112238, 'fraction_numerical': 0.004056795131845842, 'mean_word_length': 4.190350877192983, 'pattern_counts': {'":': 0, '<': 7, '<?xml version=': 0, '>': 13, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '294077', 'n_tokens_mistral': 1481, 'n_tokens_neox': 1393, 'n_words': 909}