コンポーネント（キャラクターディスプレイ）

コンポーネント（キャラクターディスプレイ）

コンポーネントは、ビューポートに表示されるプリミティブな要素です。

コンポーネントの共通プロパティ

すべてのコンポーネントは、次のプロパティをサポートしています。

プロパティ 型 デフォルト 動的 説明
description 文字列 "" × （任意）このコンポーネントの説明です。
bind バインドの配列 [] × データバインディングコンテキストに追加する式です。
display 文字列 normal ◯ コンポーネントが画面に表示されるかどうかを制御します。
height ディメンション auto × コンポーネントに指定する高さです。
id 文字列 "" × コンポーネントの参照名です。ナビゲーションやイベントで使用されます。
maxHeight ディメンション <none> × このコンポーネントに許容される最大の高さです。
maxWidth ディメンション <none> × このコンポーネントに許容される最大の幅です。
minHeight ディメンション 0 × このコンポーネントに許容される最小の高さです。
minWidth ディメンション 0 × このコンポーネントに許容される最小の幅です。
onMount コマンドの配列 [] × コンポーネントが最初に表示されたときに実行するコマンドです。
paddingBottom 絶対ディメンション 0 × このコンポーネントの下部に追加するスペースです。
paddingLeft 絶対ディメンション 0 × このコンポーネントの左側に追加するスペースです。
paddingRight 絶対ディメンション 0 × このコンポーネントの右側に追加するスペースです。
paddingTop 絶対ディメンション 0 × このコンポーネントの上部に追加するスペースです。
type 文字列 必須 × コンポーネントの型です。
when ブール値 true × 評価結果がfalseの場合、このコンポーネントはインフレートされません。
width ディメンション auto × このコンポーネントに指定する幅です。

デフォルト列は、プロパティのデフォルト値を示します。「必須」のプロパティはすべて設定する必要があります。設定しない場合、コンポーネントは表示されません。

動的列は、動的に変更できるプロパティかどうかを示します（SetValueコマンドを参照）。SetValueを使用して動的プロパティを設定すると、スタイル値はすべて上書きされます。動的プロパティの設定を解除するメカニズムはありません。

bind

コンポーネントのbindプロパティは、コンポーネントとその子のデータバインディングコンテキストを拡張します。bindプロパティには、現在のコンテキストを拡張するデータバインディングの順序付きセットを指定します。バインディングには順序があり、前に定義されたバインディングを後のバインディングで使用できます。バインディング配列の各バインディングオブジェクトには、次のプロパティが含まれます。

プロパティ 型 デフォルト 説明
name 文字列 必須 このバインディングで使用する名前です。有効な名前を設定する必要があります。
value 任意 必須 このバインディングに割り当てる値です。
type 任意、ブール値、文字列、数値、ディメンション any プロパティの型です。

bindプロパティの評価は、whenプロパティの後、その他のプロパティの前に行われます。バインディングは、配列の順序でデータバインディングコンテキストに追加されます。後続のバインディングでは先行するバインディングの結果を使用できます。次に例を示します。

{
  "type": "Text",
  "bind": [
    {"name":"FirstName","value":"ジャスミン"},
    {"name":"LastName","value":"スミス"},
    {"name":"Title","value":"博士"},
    {"name":"FormalName","value":"${LastName}${Title}"}
  ],
  "text": "${FirstName}さんと${FormalName}のどちらでお呼びしますか？"
}

この例では、FormalNameの内容は、それより前に定義されたTitleとLastNameの値によって決まります。最終的なテキストは、「ジャスミンさんとスミス博士のどちらでお呼びしますか？」となります。この例は意図的に作り込まれたもので、実際には、FirstName、LastName、Titleの値は生データ内の要素にバインドするのが一般的です。

バインド値は、SetValueコマンドを使用して動的に変更できます。SetValueコマンドはコンポーネントのプロパティを変更する場合にも使用されるため、バインドされるプロパティの名前は、組み込みのコンポーネントのプロパティと競合しないように大文字を使用することをお勧めします。たとえば、「myCounter」ではなく、「MyCounter」や「MY_COUNTER」のような名前にします。

display

コンポーネントのdisplayプロパティは、そのコンポーネントが画面に表示されるかどうかと、レイアウトの計算にどのように影響するかを制御します。デフォルトの表示設定は「normal」で、コンポーネントは通常どおりに表示されます。表示設定が「invisible」の場合、コンポーネントは通常どおりにレイアウト内のスペースを占有しますが、描画は行われず、イベントにも応答しません。「none」の場合、コンポーネントは表示階層から完全に削除され、レイアウトに影響しなくなります。

名前 説明
invisible コンポーネントは描画されませんが、スペースを占有します。イベントには応答しません。
none コンポーネントを削除します。コンポーネントはレイアウトの一部ではなくなり、イベントに応答しません。
normal 通常どおりにコンポーネントを描画します。

heightとwidth

width、height、minWidth、minHeight、maxWidth、maxHeightはディメンション型のプロパティです。最小の幅と高さのデフォルト値は0であり、コンポーネントが見えなくなる場合があります。最大の幅と高さのプロパティのデフォルト値はnoneであり、コンポーネントが任意に拡大されることを示します。指定しない場合、幅と高さの値はコンポーネントの自然なサイズになります。

id

視覚階層で特定のコンポーネントを見つけられるように、開発者が割り当てる文字列値です。idに使用できる有効な文字は[_a-zA-Z0-9]+です。ほかのidと同じ値を使用しても構いませんが、一意の値を割り当てることをお勧めします。

onMount

このコンポーネントがコンポーネント階層から配置されるときに実行するコマンドです。マウントコマンドは、視覚的な画面切り替えを表示するために使用されます。マウント時には、event.source.valueは未設定のままになります。

onMountコマンドは、ドキュメントの読み込み時に実行されます。コンポーネント自体が非表示の場合や画面に表示されていない場合でも、コンポーネントのonMountコマンドは常に実行されます。

生成されるイベントの形式は次のようになります。

"event": {
  "source": {
    "source": NAME,
    "handler": "Mount",
    "id": ID,          // コンポーネントのID   
    "uid": UID,        // ランタイムで生成されたコンポーネントの一意のID
    "value": null      // 値は報告されません
  }
}

イベントのsourceプロパティには、コンポーネントの名前（「Pager」、「Container」など）が設定されます。

padding

paddingの値（paddingBottom、paddingTop、paddingLeft、paddingRight）は、コンポーネントの周りに追加するスペースを示すディメンションです。APL-Tでは、要素の全体の幅と高さにパディングと境界線を含めるborder-boxモデルが使用されます。パディング値では相対（パーセンテージ）ディメンションはサポートされません。パディングは絶対ディメンションで指定する必要があります。

type

インフレートする特定のコンポーネントを指定します。このセクションに記載したプリミティブコンポーネントのいずれか、または名前付きレイアウトを指定できます。typeプロパティの指定は必須です（唯一の必須プロパティです）。

when

trueの場合、コンポーネントをインフレートします。falseの場合、コンポーネントとすべての子コンポーネントが無視されます。

このページは役に立ちましたか？

最終更新日: 2025 年 12 月 17 日