PSM Studio との連動

PSM Studio のプロジェクトで、UI Composer が出力したファイルを利用する際の注意点について説明します。

アプリケーションのプロジェクト構成

UI Composer が出力するソースファイル(下記の「*」の付いたファイル)、および追加したイメージアセットファイル(「**」の付いたファイル)を SampleApp.csproj に追加してビルドを行って下さい。:

SampleApp/
          SampleApp.csproj

          SampleApp.uic
          SampleApp_LanguageTable.csv

          AppMain.cs

          SampleA.cs
          SampleB.cs
          SampleC.cs

          SampleScene.cs             *
          SampleScene.composer.cs    *
          SamplePanel.cs             *
          SamplePanel.composer.cs    *
          SampleDialog.cs            *
          SampleDialog.composer.cs   *

          UIStringTable.cs           *

          assets/
                 AAA.png             **
                 BBB.png             **

クラス定義ファイル

UI Composer は、ユーザーがレイアウトした「画面」毎に、クラス定義を自動生成します。1つのクラスをxxx.composer.cs と xxx.cs に分けて partial class として自動生成します。

  • xxx.composer.cs には、配置したウィジェットのレイアウト情報(X,Y 座標) やプロパティの設定値を設定するメソッドが定義されます。常に上書きされます。
  • xxx.cs にはクラスのコンストラクタが定義され、その中で、xxx.composer.cs 内に定義されている初期化メソッド呼び出しが記述されます。既に存在する場合は生成されません。

例えば、2つの「画面」をレイアウトした場合、下記のファイルが出力されます。

  • SampleScene.composer.cs : レイアウト定義
  • SampleScene.cs : イベントハンドラやロジックの実装用ファイル
  • SamplePanel.composer.cs : レイアウト定義
  • SamplePanel.cs : イベントハンドラやロジックの実装用ファイル
  • UIStringTable.cs : 言語毎に「画面」に応じた文言を表示するための文言テーブル

出力された .cs ファイルを PSM Studio のプロジェクトに取り込むことで UI Composer で行った作業を利用することが可能です。UI Composer で「画面」レイアウトを手直しした場合、SampleScene.cs や SamplePanel.cs は上書きされませんが、 xxx.composer.cs は常に上書きされる ことに注意して下さい。このファイルは編集しないことを推奨します。イベントハンドラなどの実装は xxxxx.cs に対して行ってください。また、xxxxx.csが既に存在する場合は、このファイルは上書きされないため、途中で名前空間を変更した場合は手動でxxxxx.csの名前空間を変更する必要があります。

イメージアセットファイル

UI Composer で使用しているイメージアセットファイルは、PSM Studio のプロジェクトに「コンテンツ」として登録する必要があります。

  • イメージアセットファイルの登録方法
    • PSM Studio で対象のソリューションファイルを開きます。
    • ソリューションパネルで、対象のプロジェクトを右クリックし、[追加 (Add)] > [AddExistingFolder...] を選択します。
    • フォルダーの選択ダイアログで「assets」フォルダーを選択し、[開く (Open)」を押します。
    • ファイルの選択ダイアログでイメージアセットファイルを選択します。
    • ソリューションパネルの追加されたイメージアセットファイルを右クリックし、[ビルドアクション (Build Action)] > [コンテンツ (Content)] を選択します。(pngファイルはデフォルトでビルドアクションがコンテンツになります。)