単純なテーブルプロジェクトに UI ツールルールを追加する

UIPartMixin を追加する

このテーブルプロジェクトでは、3 つすべての デザイン が UIPartMixin にミックスされるように、UI に表示されます。単に各コンポーネント(TableUI、TableTopUI、LegUI)の "UI" Mixin に移動し、右端の デザイン として UIPartMixin でミックスされます。

Design TableUI : TableDesigns UIPartMixin

Design TableTopUI : TableTopDesigns UIPartMixin

Design LegUI : LegDesigns UIPartMixin

この時点で、UI ツールを使用するために必要な最低限は終わっています。ただし、まだ UIProperties または UIMessages を追加していないため、UIParts は空になります。UIName 値の既定は、正確には UI に表示したいものではない場合がある、Intent からの DisplayName を返します。

UICategory を追加する

任意の UIProperty の子を追加する前に、UIProperties のカテゴリを設定する必要があります。ここでは、単に 1 つのカテゴリ "General" を使用するので、TableUI mixin に次を追加します。

   Child GeneralCategory As :UICategory
      CategoryName = "General"
      CategorySeq = 1
   End Child

Intent モデルブラウザ

既定では、UICategory および UIProperty に基づくパーツは Intent モデルブラウザツリーに表示されません。これは、 パーツ にはかなりの数の UIProperties があるため、モデルブラウザにそれらをすべて表示すると treeview インタフェースが煩雑になるためです。すべての UICategory、UIProperty、および UIPartMixin デザイン 上に存在しているルックアップ ルール があり、モデルブラウザで UIProperties と UICategories の表示を切り替えます。この ルール は ShowPropertiesInBrowser? です。

Lookup Parameter Rule ShowPropertiesInBrowser? As Boolean = False

単にこの ルール を True に設定するとその UIPart の下に UIProperties と UICategories が表示されます。

UIName 値を設定する

UIPartMixin でミックスされる各 パーツ には UIName ルールが含まれ、この ルール は パーツ の UI に表示する文字列を指定します。既定では、UIName は DisplayName ルール と同じ値に設定されています。ただし、多くの場合、より分かりやすい パーツ の説明となるようにオーバーライドします。この例では、"A Simple Table" にする TableUI デザイン の UIName を設定します。

<%%category("Ui")> Parameter Rule UIName As String = "A Simple Table"

TableTopUI のデザインは、UIName を "Table Top" にオーバーライドします。

<%%category("Ui")> Parameter Rule UIName As String = "Table Top"

LegUI は、"Leg" を返すように UIName をオーバーライドし、leg のインデックスをスペースで区切ります。

<%%category("Ui")> _
Parameter Rule UIName As String = "Leg " + format("%d",index)

テーブルに UIProperties を追加する

ここで、height、length、width の UIProperty の子を追加します。height には、ユーザ選択可能な共通の選択肢のセットを指定しますが、任意の値を指定することもできます。

   Rule Height As Number = uiHeight.value
   Child uiHeight As :NumberProperty
      BaseName = "Height"
      CategoryPart = GeneralCategory
      choiceListValues = {6,12,18,24,36}
   End Child

dvHeight の代わりに uiHeight.value が見えるように Height ルール がオーバーライドされることにも注意してください。または、前述のように既定値の "dv" 略語システムに準拠したため、uiHeight の DefaultValue パラメータに値を渡す必要はありません。最後に、このケースでは、基本の UIProperty の代わりに NumberProperty を使用していることがわかります。これは、UIProperty にミックスされ、整形機能およびコンバータ値をオーバーライドし、他のいくつかの共通の検証(最小値、最大値など)を提供する特殊な UIProperty デザイン です。一般的に、基本の UIProperty の代わりに、特殊な UIProperty に基づいた デザイン の 1 つを使用することをお勧めします。プロジェクトに UIProperty のカスタムタイプが必要な場合は、一般的にそのプロジェクト用にカスタム UIProperty を派生させて、それを使用するのが最適です。次に、UI ツールの標準に付属する特殊な UIProperties の一覧を示します。

BooleanProperty
DateProperty
IntegerProperty
ListProperty
MoneyProperty
NameProperty
NumberProperty
StringProperty (1 行 文字列 用)
TextProperty (テキストの大きなブロックに使用)

これらの特殊な UIProperty デザイン は、実際にはそれぞれ BasicUIProperty デザイン にミックスされ、次に UIProperty デザイン にミックスされると知っておくことが重要です。これは既定値の "dv" 略語法を提供する BasicUIProperty デザイン です。

width と length は、ユーザが入力できる数字になります。Height ルール と同様に、これらのそれぞれの UI プロパティを参照するように、Width と Length ルール をオーバーライドしています。

   Rule Width As Number = uiWidth.value
   Child uiWidth As :NumberProperty
      BaseName = "Width"
      CategoryPart = GeneralCategory
   End Child

   Rule Length As Number = uiLength.value
   Child uiLength As :NumberProperty
      BaseName = "Length"
      CategoryPart = GeneralCategory
   End Child

TableTop に UIProperties を追加する

TableTop パーツ には、width、length、thickness の UIProperties があります。ただし、width と length の値は、親テーブルアセンブリから渡されるため、これらの UIProperties は読み取り専用としてタグ付けされます。また、以前テーブルに追加された "General" UICategory を単に参照します。したがって、TableTopUI mixin で以下を追加します。

   Rule Width As Number = uiWidth.value
   Child uiWidth As :NumberProperty
      BaseName = "Width"
      CategoryPart = GeneralCategory
      IsReadOnly? = True
   End Child

   Rule Length As Number = uiLength.value
   Child uiLength As :NumberProperty
      BaseName = "Length"
      CategoryPart = GeneralCategory
      IsReadOnly? = True
   End Child

   Rule Thickness As Number = uiThickness.value
   Child uiThickness As :NumberProperty
      BaseName = "Thickness"
      CategoryPart = GeneralCategory
   End Child

Leg に UIProperties を追加する

Leg パーツ には、width および height の UIProperties があります。脚の高さはテーブルから渡されるので読み取り専用プロパティになりますが、脚の幅の値はユーザが編集できるようになります。LegUI mixin に次を追加します。

   Rule Width As Number = uiWidth.value
   Child uiWidth As :NumberProperty
      BaseName = "Width"
      CategoryPart = GeneralCategory
   End Child

   Rule Height As Number = uiHeight.value
   Child uiHeight As :NumberProperty
      BaseName = "Height"
      CategoryPart = GeneralCategory
      IsReadOnly? = True
   End Child

テーブルにメッセージを追加する

多くの場合、開発者はモデルの現在の状態に基づく UI にメッセージを表示したいと考えます。これは UIPartMixin にミックスされる デザイン に UIMessage の子を追加することによって実現できます。簡単なテーブルのプロジェクトでは、選択肢の一覧に表示されていない高さの値を選択した場合は、標準仕様に適合しない高さを使用しているユーザに通知する警告メッセージがテーブルに表示されます。また、選択した高さの値が最小許容高さ未満である場合、この警告は、最小より大きい高さを選択する必要があることをユーザに通知するエラーメッセージに変更されます。この UIMessage の子は、次のように TableUI デザイン に追加されます。

   Child HeightMessage As :UIMessage
      severity = (If Height < MinimumHeight Then :Error Else :Warning)
      message = (If Height < MinimumHeight Then _
                   "Below minimum height of " + format("%d",MinimumHeight) _
                 Else _
                   "The user has entered a nonstandard table height")
   End Child

単純なテーブル プロジェクトに UI ツール ルールを追加する