🤰🏼 🙎🏼 👨🏼‍🚒 Grid Control ...続き1 🐈 🙌🏾 👍🏼

最初の投稿では、グリッドの機能をいくつかのクラスに分割しました。もう一度簡単に説明しましょう。

行-列または行のセットを表します。
範囲-セルのコレクションを記述します。
レイアウト-セル内にデータを配置できます。
モデル-ビューとコントローラーのデータアクセスインターフェイスを定義します。
表示-セル内の情報を表示します。
コントローラー-ユーザーはデータを変更できます。
CacheCell-表示されているセルのデータをキャッシュします。
CacheGrid-グリッドの表示部分のデータをキャッシュします。
GridWindow-特別なコントロール。

また、テキストデータ（ModelText、ModelTextCallback、ViewText）のモデルとビューについても説明しました。グリッドを作成して、テキストデータをバインドしてみましょう。標準グリッドが特別なモデル/ビュー/コントローラーの形式で動作するために必要な新しい機能を追加します。

簡潔にするために、コード内のポインター、shared_ptrなどは省略します。さあ行こう...

int main() { Application app; //   GridWindow grid_window("Demo"); //    ModelTextCallback m; m.getCallback = [](CellID cell)->String { return String.Format("Item[%d, %d]", cell.row, cell.column); }; //   ,     grid_window.AddData(RangeAll(), ViewText(m), LayoutAll()); //      grid_window.SetRows(10); grid_window.SetColumns(10); //   grid_window.Show(100, 100, 300, 300); app.run(); }

悪くはありませんが、セルを何とか分離したいだけです：スルーストリップまたはメッシュのいずれかを描画します。 1つ実装してから、別のオプションを実装しましょう。コードがそれ自体を物語っていると思います。

 class ViewOddRowBackground: public View { public: void Draw(DrawContext& dc, Rect rect, CellID cell) const override { //  ,    if (cell.row%2 == 0) dc.FillRect(rect, ColorRGB(200, 200, 255)); } }; void plugOddRowBackgroud(Grid& grid) { grid.AddData(RangeAll(), ViewOddRowBackground(), LayoutAll(Transparent)); }

TransparentパラメーターをLayoutAllに渡したことに注意してください。このレイアウトはセルの四角形を変更しません。デフォルトでは、LayoutAllはセルの空き領域全体を「ピックアップ」してゼロにします。透過モードでは、これは行われず、次のViewTextは同じ元の長方形を取得します。

mainに新しい関数呼び出しを追加します

  GridWindow grid_window("Demo"); plugOddRowBackgroud(grid_window.GetGrid());

次に、グリッドを実装します。

 class ViewCellBounds: public View { public: void Draw(DrawContext& dc, Rect rect, CellID cell) const override { //     dc.Line(rect.BottomLeft(), rect.BottomRight()); //       dc.Line(rect.TopRight(), rect.BottomRight()); } }; void plugCellBounds(Grid& grid) { grid.AddData(RangeAll(), ViewCellBounds(), LayoutAll(Transparent)); } ... GridWindow grid_window("Demo"); plugCellBounds(grid_window.GetGrid());

すべてのグリッドの次の共通の場所は、選択されたセルの概念-選択です。以前のビューはデータを保存しなかったため、それらのモデルを作成しませんでした。ここでは、状況はもう少し複雑です。 ModelSelectionには何を含める必要がありますか？まず、選択されたセルのセット、次にアクティブなセルの座標（これは通常、フレームで強調表示されているセルであり、キーボードを使用してこのセルを操作します）。コードを書きます：

 class ModelSelection: public Model { public: Range GetSelectedRange() const { return m_selected_range; } void SetSelectedRange(Range new_selected_range) { m_selected_range = new_selected_range; changed.invoke(*this); } CellID GetActiveCell() const { return m_active_cell; } void SetActiveCell(CellID new_active_cell) { m_active_cell = new_active_cell; changed.invoke(*this); } private: Range m_selected_range; CellID m_active_cell; }; class ViewSelection: public View { public: ViewSelection(ModelSelection selection) : m_selection(selection) {} void Draw(DrawContext& dc, Rect rect, CellID cell) const override { //    ->   if (m_selection.GetActiveCell() == cell) dc.DrawFrame(rect); //    ->   //       if (m_selection.GetSelectedRange().HasCell(cell)) { dc.FillRect(rect, ColorSelectedBackground); dc.SetTextColor(ColorSelectedText); } } private: ModelSelection m_selection; }; ModelSelection plugSelection(Grid& grid) { ModelSelection selection; grid.AddData(RangeAll(), ViewSelection(selection), LayoutAll(Transparent)); return selection; } ... GridWindow grid_window("Demo"); plugCellBounds(grid_window.GetGrid()); plugSelection(grid_window.GetGrid());

コントローラーの実装を省いてスペースを節約します。私を信じて、すべてがそこでも簡単です：マウスの左ボタンを押すことにより、アクティブなセルをマウスの下のセルに変更します。マウスを移動して左キーを離すと、アクティブなボタン（ボタンを押した場所）から現在のセルまでのセルの長方形ブロックを表す特別なRangeを作成します。この範囲を選択に設定します。 ShiftキーとCtrlキーの状態も考慮する必要がありますが、これらは詳細です。その結果、次の図が得られます。

ユーザーが行と列のサイズを変更できるようにするには、セルの端近くでマウスボタンを押すことでマウスの位置を記憶し、マウスを押すと列幅を最初の正確な値と現在の値の差に変更する特別なコントローラーを実装する必要があります。アイデアが明確であることを願っています。コントローラーがビュー内で「ライブ」であることに注意してください。したがって、何も描画せず、コントローラーをアクティブにする長方形を定義するだけの架空のビューを作成する必要があります。

多くの場合、グリッドにはタイトルがあります。これは、常にウィンドウの上部に残るグリッドの一部です。左側にも同様の構造がある場合があります（通常、そこに行番号を記述します）。スクロールすると、これらの領域はそのまま残ります。タイトルがどのように見えるかを見てみましょう。

元のグリッドと同じ行数と列数で構成されるグリッドに非常に似ています。次に、ヘッダーはグリッドであり、その列は元のグリッドの列と同期していると言えます（実際、2つのグリッドは列にLinesの同じコピーを使用します）。このグリッドはウィンドウの上部にあり、水平方向にのみスクロールします。左側の固定部分についても同様の声明を発することができますが、そこでは行が同期されます。したがって、GridWindowクラスでは、1つではなく4つのCacheGridがライブになります。

さらに進んで、固定領域はどの側にでもあることができると言いましょう。

そのため、GridWindowクラスはより複雑になりました。1つのCacheGridではなく、9つのCacheGridがあります。レンダリング、スクロール、マウスイベントの処理の機能も複雑になります。ここで、最後の図面を停止して慎重に検討することをお勧めします。遠くからは、3行3列の9つのサブエリアに分割されたエリアのように見えます。これは、3つの行と列を持つグリッドのように見え、そのセルには他のグリッドが表示されます。定義上、Viewは非常に普遍的であるため、任意のエンティティを表示できます。それでは、セルにグリッドを表示するビューを作成しましょう。 9つのグリッドを使用した場合、おおよそ次のクラスを取得します。

 class ModelGrid: public Model { public: ModelGrid(); CacheGrid GetGrid(CellID cell) const { return m_grids[cell.row][cell.column]; } private: CacheGrid m_grids[3][3]; }; class ViewGrid: public View { public: ViewGrid(ModelGrid model) :m_model(model) {} void Draw(DrawContext& dc, Rect rect, CellID cell) const override { CacheGrid cacheGrid = m_model.GetGrid(cell); cacheGrid.Draw(dc); } };

9つのCacheGridオブジェクトがModelGridコンストラクターで作成され、行と列が同期されます。コントローラを実装することも難しくありません。 CacheGridオブジェクトが1つしかない古いGridWindowクラスにViewGridを追加する場合、新しいGridWindowタイプを作成する必要はありません。唯一の違いは、スクロールバーの位置をサブグリッドに転送する必要があることです：スクロールバーの位置を無視すると、コーナーグリッド（上/左、上/右、ボタン/右、下/左）、上と下のグリッドを水平にスクロール、垂直-左右。さて、中央のクライアントグリッドはすべての面でスクロールされます。この場合、レンダリングとマウスとの対話のコードは同じままです。

ここでもう一度立ち止まって、どのような操作を行ったのかを確認しますか？初めに、ステートメントがありました-グリッドはセルのセットであり、セルは何かが表示される場所です。これで、セルがグリッドを含むすべてを表示できることがわかりました。チェーンは閉じています-グリッドはセルを描画し、セルはグリッドを描画します。これは、鶏と卵の哲学的問題を提起します。プライマリとは何ですか？セルで構成されるグリッド、またはグリッドを含むあらゆるものを表すことができるセル。セルの概念はより普遍的であるようです。最初の記事のCellCacheクラスを覚えておいてください-最初にトリプル<Range、View、Layout>がRangeによってフィルターされました、つまり、実際にはセルはトリプルを保存するべきではありませんが、<View、Layout> deuces-セルの内容と場所を説明します描画します。 CellCacheはマウスイベントを描画および処理（目的のコントローラーに渡す）できますが、グリッドはどこにも言及されていません。

しかし、CacheGridではなくCacheCellを描画するウィンドウクラスを作成するとどうなりますか？次に、グリッドウィンドウクラスではなく、より普遍的なコントロールを取得します。2つの<View、Layout>の形式で、何に、どこに描画するかを設定します。たとえば、{<ViewCheck、LayoutLeft>、<ViewText、LayoutAll>}の組み合わせは、チェックボックスコントロールの標準コントロールを提供します。他の組み合わせは他のタイプのコントロールを提供し、異なるレイアウトは任意の構成でビューを配置する機能を提供します。たとえば、テキストの右、下、上などのチェックボックス。

このウィンドウをItemWindowと呼びましょう（セルはグリッドに密接に関連する概念であり、アイテムはより中立です）。私は3つのクラスの階層を得ました：

ItemWindow-ユニバーサルコントロール。CacheCellの1つのインスタンスが含まれます。実際、ウィンドウ全体は単一のセルです。
ListWindowはItemWindowの子孫です。 CacheCellはViewGridをインスタンスに追加し、セルに単一のグリッドを描画します。このオプションは、固定領域（タイトルなど）のない単純なリストに適しています
GridWindowはListWindowの子孫です。 ListWindowで3つの行と列を持つグリッドを宣言します。このグリッドで別のViewGridを定義し、9つのサブグリッドを描画します。これは、見出しが必要な人のためのコントロールです。

原則として、ビジュアルコンポーネントのライブラリを開発する場合、最初に単純なタイプのウィンドウを決定し、次により複雑なウィンドウ（アイテムベース）に進みます。この時点で、ウィンドウの基本概念は既に修正されており、アイテムベースのウィンドウの詳細は考慮されていません。そのため、ウィンドウの基本概念とはまったく関係のない他の抽象化をいくつか考え出します。その結果、単純なコントロールと複雑なコントロールを有機的に一緒に使用することはできません。複雑なコントロールから抜け出し、シンプルなウィンドウになりました。しかし、それらの構造は、従来のウィンドウフレームワークよりも少し複雑です。しかし、普遍性が得られます-ビューとレイアウトは、単純なコントロール（ItemWindow）とより複雑なコントロールの両方で使用されます。 ViewCheckを実装すると、単純なコントロールとして、またグリッドのサブ要素として使用できるようになります。

記事は非常に長く複雑であることが判明したため、今のところは終了します。あなたにとって何かが理解できないか間違っていると思われる場合は、コメントを書いてください、私は記事を編集します。したがって、この記事は誰にとっても簡単で明確になります。

次の記事では、ウィンドウのイントロスペクションを行う方法について説明します。ウィンドウにメッセージを送信し、バイトシーケンスを解釈できるツールは、グリッドと「通信」できます。これにより、Pythonでグリッドにバインドし、コントロールの自動テストを実行できます。また、devexpressのあらゆる種類の「おいしいもの」が私のスキームでどのように実装されているかを説明します。先ほど言ったように、このアーキテクチャの実際のプロトタイプはすでに存在しているため、オープンソースで実装することは難しくありません。

Grid Control ...続き1

More articles: