単純なテーブル プロジェクトに 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 の一覧を示します。

これらの特殊な 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 ツール