カスタム UI コンポーネントの作成によるアプリのモジュール化

スクリプトを開く

アプリのサイズと複雑度が増すにつれ、アプリをモジュール化すれば、コードを整理して管理するのに役立ちます。1 つのモジュール化手法として、共通した機能をもつアプリのレイアウトの自己完結した部分をカスタム UI コンポーネントとして分離することができます。

この手法の利点は次のとおりです。

再利用性 — 最小限の作業で、単一のアプリ内または複数のアプリでカスタム UI コンポーネントを再利用できます。
保守性 — 同様の機能を実行するアプリのレイアウトの部分をコンポーネント化することで、重複したコードを削減できます。
スケーラビリティ — コードが複数の自己完結部分に整理されていると、アプリ機能をより簡単に拡張できます。

R2022a 以降では、App Designer を使用してカスタム UI コンポーネントを作成し、そのコンポーネントをアプリで使用できます。詳細については、Create a Simple Custom UI Component in App Designerを参照してください。

例の概要

この例では、ユーザーがラボの手続きに関する情報を保存および変更できるアプリについて説明します。アプリのユーザーは手続きのステータスまたは日付の更新、手続きに関連したデータのインポート、およびタイトル、ステータス、または日付に基づいた手続きの並べ替えを行うことができます。

この例には、App Designer でアプリを作成する次の 2 つの異なる方法が含まれています。

1. すべてのレイアウトおよび動作のコードが単一のアプリファイルに含まれている自己完結型のアプリ

2. アプリ内のそれぞれのラボの手続きが、App Designer でカスタム UI コンポーネントとして作成された LabProcedure オブジェクトによって表されたモジュール型のアプリ

例には次のファイルが含まれています。

LabProcedureApp_WithoutComponent.mlapp — 自己完結型のアプリのファイル
LabProcedure.mlapp — カスタム UI コンポーネントのファイル
LabProcedureApp_WithComponent.mlapp — モジュラー型のアプリのファイル

以下の手順では、LabProcedure カスタム UI コンポーネントを作成して使用することで、自己完結型のアプリを取得し、よりモジュール化する方法について説明します。

カスタム UI コンポーネントの作成

カスタム UI コンポーネントを作成してアプリをモジュール化するには、まず、別個のコンポーネントファイルに抽出できるアプリの部分を特定します。たとえば、アプリ内のすべてのラボの手続きで共通している特定の特性があります。そうした側面を LabProcedure カスタム UI コンポーネントに取り込みます。

コンポーネントコードを調べるには、App Designer で LabProcedure.mlapp ファイルを開きます。

コンポーネントのレイアウト

[設計ビュー] で、アプリ内のすべてのラボの手続きで共通している以下の特徴を追加して LabProcedure コンポーネントをレイアウトします。

ラボの手続きのタイトルのラベル
オプション Not started、Running、Succeeded、および Failed とステータスラベルを含むステータスドロップダウンコンポーネント
日付ピッカーコンポーネントと日付ラベル
データをインポートするためのボタン
データを表示するためのボタン

基となるコンポーネントの動作のプログラミング

[コードビュー] で、基となるコンポーネントのコールバックを追加することで、アプリ内のすべてのラボの手続きで共通している動作をプログラミングします。たとえば、アプリのユーザーがボタンをクリックしてファイルを選択できるようにする [データのインポート] ボタンに ButtonPushedFcn コールバックを追加します。

パブリックプロパティの作成

アプリではそれぞれのラボの手続きに関する特定の情報にアクセスできる必要があります。たとえば、手続きをステータス別に並べるために、アプリではステータスにアクセスできる必要があります。このようにアクセスできるようにするには、パブリックプロパティを作成します。

コンポーネントの以下のパブリックプロパティを作成します。

Title
Status
Date

次に、プロパティを LabProcedure コンポーネントの外観および動作に関連付けるコードを記述します。

詳細については、Create Public Properties for Custom UI Components in App Designerを参照してください。

パブリックコールバックの作成

アプリではユーザーがラボの手続きを操作したときに応答を実行する必要があります。たとえば、ステータスに基づいて手続きの背景色を更新するために、アプリではアプリのユーザーがドロップダウンリストでステータスを変更したときに応答を実行する必要があります。アプリの作成者がアプリのコンテキストにおける操作に対する応答をプログラミングできるようにするには、イベントとパブリックコールバックのペアを作成します。

LabProcedure コンポーネント用にイベントと以下の関連付けられたパブリックコールバックを作成します。

StatusChangedFcn
DateChangedFcn

次に、ドロップダウンコンポーネントの値が変更されたときにイベントをトリガーしてコールバックを実行するコードを記述します。

詳細については、Create Callbacks for Custom UI Components in App Designerを参照してください。

アプリで使用するコンポーネントの構成

LabProcedure コンポーネントを [コンポーネントライブラリ] に追加するために、[デザイナー] タブの [アプリ用の構成] ボタンをクリックし、[カスタム UI コンポーネントの App Designer メタデータ] ダイアログボックスに入力します。

詳細については、App Designer 用のカスタム UI コンポーネントの構成を参照してください。

アプリでのカスタム UI コンポーネントの使用

カスタム UI コンポーネントを作成して構成したら、そのコンポーネントをアプリに組み込みます。

LabProcedure コンポーネントを使用するアプリのコードを確認するには、App Designer で LabProcedureApp_WithComponent.mlapp ファイルを開きます。

アプリのレイアウト

ラボの手続きを表すアプリのレイアウトの部分を LabProcedure コンポーネントに置き換えます。[コンポーネントライブラリ] の [Example Components (Custom)] セクションの LabProcedure コンポーネントをアプリのキャンバスにドラッグします。

プロパティインスペクターを使用して、アプリ内の各手続きの外観をカスタマイズします。たとえば、それぞれのラボの手続きの Title プロパティを更新します。

アプリのコードの更新

LabProcedure コンポーネントを参照して、必要に応じてそのパブリックプロパティをクエリおよび設定するようにアプリのコードを更新します。

たとえば、元のサンプルアプリには updateBackgroundColor という名前の補助関数が含まれています。ステータスが変更されたときに LabProcedure コンポーネントの背景色を変更するようにこの補助関数のコードを更新します。LabProcedure コンポーネントに Status パブリックプロパティと継承された BackgroundColor パブリックプロパティが含まれているため、更新された補助関数のコードはシンプルで読みやすくなっています。

function updateBackgroundColor(app,lp)
    switch lp.Status
        case "Not started"
            lp.BackgroundColor = [0.94 0.94 0.94];
        case "Running"
            lp.BackgroundColor = [0.76 0.84 0.87];
        case "Succeeded"
            lp.BackgroundColor = [0.75 0.87 0.75];
        case "Failed"
            lp.BackgroundColor = [0.87 0.76 0.75];
    end
end

コンポーネントのコールバックの追加

コンポーネントを右クリックして [コールバック]、[StatusChangedFcn コールバックの追加] を選択することで、StatusChangedFcn コールバックを各 LabProcedure コンポーネントに追加します。アプリのユーザーがラボの手続きのステータスを変更したときに補助関数 updateBackgroundColor および updateProcedureOrder を呼び出してアプリを更新します。

アプリを実行するには、[実行] をクリックします。

カスタム UI コンポーネントの作成によるアプリのモジュール化

例の概要

カスタム UI コンポーネントの作成

アプリでのカスタム UI コンポーネントの使用

関連するトピック