Clever Geek Handbook

QMLのモデルビュー。 パートゼロ、入門

プログラムを設計するための最も一般的で効果的な手法の1つは、MVC（Model-View-Controller）プログラミングテンプレート-Model-View-Controlを使用することです。 MVCを使用すると、データの保存とアクセス、データの表示、およびユーザーとの対話を担当するプログラムの部分を別々の疎結合モジュールに分割できます。 この責任の分割により、プログラムの構造が簡素化され、残りの部分に影響を与えることなく、これらの部分の1つを変更できます。



このアプローチはQtで積極的に使用されており、一般にQMLでの基礎となります。 そのため、MVCの原則を理解し、QMLを勉強する人は、場違いになりません。



QMLのモデルビュー：

  1. QMLのモデルビュー。 パートゼロ、入門
  2. QMLのモデルビュー。 パート1：事前作成されたコンポーネントビュー
  3. QMLのモデルビュー。 パート2：カスタムビュー
  4. QMLのモデルビュー。 パート3：QMLおよびJavaScriptのモデル
  5. QMLのモデルビュー。 パート4：C ++モデル




MVCとは何ですか？


責任の分離は、プログラミングの基本原則の1つです。 その本質は、プログラムを機能ブロックに分割することであり、各機能ブロックは作業の一部を担当します。 これらのブロックは、関数、オブジェクト、モジュールなどです。 ブロックは、特定のインターフェイスを介して互いに通信します。 これにより、ブロックが相互にある程度独立し、システムの複雑さが軽減されます。



グラフィカルユーザーインターフェイス（GUI）の基本概念は、20世紀の70年代にゼロックス研究所で開発されました。 これらには、同じ責任区分を使用してGUIプログラムの複雑さを軽減し、アーキテクチャを簡素化するように設計されたMVC設計パターンが含まれます。



したがって、このテンプレートの本質は、プログラムを3つのコンポーネントに分割することです。







概略的に、モデルは次のように表すことができます。











これらのコンポーネント間には、それらを相互に分離できる特定のインターフェースがあります。 理想的には、これらのモジュールは一般に相互に独立しており、他のモジュールを変更せずに変更できるようにするか、モジュールを完全に置き換えることもできます。

グラフィカルインターフェイスの開発と、たとえばWebアプリケーションなどの新しいタイプのプログラムの出現により、この分離オプションはどこでも適切ではなくなりました。 そのため、MVVC、MVPなど、その種類が登場しました。 このモデルのすべての種類を総称してMVCと呼びます。



多くの最新のフレームワークはMVCを使用し、このテンプレートに従ってプログラムを分割する手段を備えています。 Qtの主な目的の1つはグラフィカルユーザーインターフェイスの開発であるため、MVCなしではできません。Qtには独自のバリエーションであるModel-Viewフレームワークが含まれています。



QtおよびQMLのMVC


Qtでこのテンプレートを使用する主なアイデアは、データとその表示の分離です。











ここでは、モデルがデータとデータへのアクセスを担当します。 グラフィカルインターフェイスでは、多くの場合、同じ要素が要素の表示とユーザーからの入力を担当するため、プレゼンテーションと制御を組み合わせるという考え方は非常に論理的です。 これはまさにQtが行ったことです。ビューはデータを表示するだけでなく、制御機能も実行し、ユーザーとの対話を担当します。 しかし、そのような組合のために柔軟性を失わないために、デリゲートの概念が導入されました。 デリゲートを使用すると、このデータの表示方法とユーザーによる変更方法を決定できます。 実際、ビューはデリゲートインスタンスのコンテナになりました。



QMLでは、この原則もはるかに大きな範囲で適用されます。 前述したように、Model-ViewはQMLの基本概念の1つです。 QMLの主な目的の1つは、プログラムインターフェイスを個別の部分に分離することです。この部分は非常に柔軟で、さまざまなニーズに簡単に適応できます。 たとえば、デスクトップアプリケーションには1つのインターフェイスオプションがあり、モバイルアプリケーションには別のインターフェイスオプションがある場合があります。 同時に、プログラム（モデル）のコアをC ++で記述し、変更しないままにすることができます。



また、QMLの一部のモデルでは、デリゲートはデータを表示することしかできず、編集することはできません。

インターフェイス部分がQMLアプリケーションの主要な場所であるという事実にもかかわらず、モデルを実装することもできます。これには適切なツールがあります。 必要に応じて、プログラムをほぼ完全にQML / JavaScriptで作成し、C ++コードの量を最小限に抑えることができます。 このようなプログラムを使用して開始します。



QMLの簡単なMVCの例


中央にテキストがある色付きの長方形のペアを表示するプログラムを考えます。 



import QtQuick 2.0 Rectangle { width: 360 height: 360 ListModel { id: dataModel ListElement { color: "orange" text: "first" } ListElement { color: "skyblue" text: "second" } } ListView { id: view anchors.margins: 10 anchors.fill: parent spacing: 10 model: dataModel delegate: Rectangle { width: view.width height: 100 color: model.color Text { anchors.centerIn: parent renderType: Text.NativeRendering text: model.text } } } }


ここでのモデルは、ListModel型のオブジェクトです。 モデル要素として、特別なListElement型の2つの子が使用されます。この子では、2つのプロパティcolorとtextを定義しました。



表示には、ListView型のオブジェクトを使用し、ListModel型のオブジェクトのIDをモデルとして指定します。 ビュー自体は、データを表示する対象を知らないため、デリゲートにも問い合わせる必要があります。 QMLのデリゲートは、モデルの各要素でインスタンス化されるオブジェクトのタイプです。 次に、ListViewはこれらのオブジェクトを作成し、リストの形式で表示し、ナビゲーションを提供します。



中央にテキストがある長方形は、デリゲートとして機能します。 長方形の色とテキストはモデルから取得されます。 デリゲート内では、モデル要素のすべてのプロパティが表示されます-いわゆる 「ロール」。 それらは、特別なモデルオブジェクトを介して、および直接アクセスできます。 色だけを書くことができます。 データがどこから来たのか、デリゲートが同じ名前のプロパティを持っている場合、競合がないように、より明確に完全に書くことを好みます。



実行の結果は次のようになります。











モデルビューのダイナミクス


MVCでは、モデルはパッシブまたはアクティブのいずれかです。



パッシブは、単にデータを保存するだけのモデルであり、コントローラーやプレゼンテーションには一切影響しません。 したがって、モデル内のデータを変更する場合、それについてアイデアを伝えることはできません。 この場合、コントローラーはモデルへのすべての変更を監視し、情報を更新する必要があることをビューに伝えます。



アクティブなモデルは、データが変更されたことを通知できます。 次に、ビューはこれらの変更を表示できます。 このオプションは、MVCの古典的な実装と見なされます。



QtとQMLはアクティブモデルを使用します。 これにより、モデル内のデータを変更する機会が与えられ、更新されたデータの表示について心配する必要はありません-プレゼンテーションはすべてを行います。



前の例を大幅に変更します。クリックするとモデルに要素を追加するボタンを追加します。 



 import QtQuick 2.0 Rectangle { width: 360 height: 360 ListModel { id: dataModel } Column { anchors.margins: 10 anchors.fill: parent spacing: 10 ListView { id: view width: parent.width height: parent.height - button.height - parent.spacing spacing: 10 model: dataModel clip: true delegate: Rectangle { width: view.width height: 40 color: "skyblue" Text { anchors.centerIn: parent renderType: Text.NativeRendering text: model.index } } } Rectangle { id: button width: 100 height: 40 anchors.horizontalCenter: parent.horizontalCenter border { color: "black" width: 1 } Text { anchors.centerIn: parent renderType: Text.NativeRendering text: "Add" } MouseArea { anchors.fill: parent onClicked: dataModel.append({}) } } } }


最初は、モデルには要素が含まれていません。 ボタンがクリックされると、プロパティのない空の要素がモデルに追加されます。 モデルは、新しい要素が追加されたという考えを通知します。 ビューは、新しい要素ごとに、デリゲートとして指定したタイプのオブジェクトを作成します。 モデル要素で説明するプロパティに加えて、別のオプションがデリゲートで利用可能になります-インデックス（またはmodel.index）には、モデルとそれに応じて表示内の要素のインデックスが含まれます。 そのため、モデルに空の要素を追加しているという事実にもかかわらず、そこにはまだ1つのプロパティがあり、それはテキストとして使用するインデックスです。



プログラムを実行してボタンをクリックすると、次のような結果が得られます。











メロンの分離と表示、およびデータの表示方法を制御するデリゲートの使用を説明する2つの簡単な例を示しました。 次のテキストでは、これらの2つの例を参照して、コード全体を説明しません。



小さな結論


30年以上前に開発されたMVCテクノロジーは、その関連性を失っていません。 そして今日まで、それはグラフィカルインターフェースを備えたプログラムの設計の基礎となっています。 現在、MVCを使用しないこのようなプログラムを想像するのは困難です。

グラフィカルインターフェイスを作成するために開発されたテクノロジーとして、Qt、特にQMLはMVCを完全にサポートしています。 必要なツールはライブラリの一部であり、さらにQt自体では、このテンプレートのイデオロギーは非常に明確に追跡されています。

したがって、ここでのMVCの使用は自然であり、これはまさに開発者が意図したものであり、このビジョンでフレームワークが設計されました。



これについては、導入部分は完全であると見なすことができます。次の記事では、プレゼンテーションの詳細を検討します。


More articles:


All Articles