APLコンポーネント
（これはAPLの最新バージョンではありません。APLの最新バージョンの資料を参照するには、その他のバージョンオプションをクリックしてください）
コンポーネントは、viewportに表示されるプリミティブな要素です。
APLでは、コンポーネントとは、クライアントで表示されるプリミティブな視覚コンポーネントのことを指します。APLファイルを保存して別のAPLに読み込むことで新しいテンプレートの定義を追加することはできますが、新しく追加した下位レベルのコンポーネントを認識させてデバイス上のネイティブなユーザーインターフェースコントロールに変換するには、クライアントの更新が必要になります。
プロパティ
コンポーネントに含まれる標準的なプロパティは以下のとおりです。通常、ディメンションに関連するプロパティをコンポーネントのパディングに利用することはできません。
| プロパティ | 型 | 必須 | スタイル設定 | 動的 | 説明 |
|---|---|---|---|---|---|
bind |
バインドの配列 | ✕ | ✕ | ✕ | データバインディングコンテキストに追加する式です。 |
entity (entities) |
実体の配列 | ✕ | ✕ | ✕ | Alexaでリファレンスの明確化に使用されるOpaqueデータです。 |
高さ |
ディメンション | ✕ | ✕ | 読み取り専用 | コンポーネントに指定する高さです。デフォルトはautoです。 |
id |
文字列 | ✕ | ✕ | ✕ | ナビゲーションおよびイベントに使用する、コンポーネントの参照名です。コンポーネントが標準ビルトインインテントと共に使用される場合に必要です。 |
inheritParentState |
ブール値 | ✕ | ✕ | ✕ | trueを指定した場合、親の状態が使用されます。 |
maxHeight |
ディメンション | ✕ | ✕ | ✕ | このコンポーネントの高さの上限です。デフォルトはnoneです。 |
maxWidth |
ディメンション | ✕ | ✕ | ✕ | このコンポーネントの幅の上限です。デフォルトはnoneです。 |
minHeight |
ディメンション | ✕ | ✕ | ✕ | このコンポーネントの高さの下限です。デフォルトは0です。 |
minWidth |
ディメンション | ✕ | ✕ | ✕ | このコンポーネントの幅の下限です。デフォルトは0です。 |
paddingBottom |
ディメンション： プロパティ | ✕ | ✕ | ✕ | このコンポーネントの下側に追加するスペースです。デフォルトは0です。 |
paddingLeft |
ディメンション： プロパティ | ✕ | ✕ | ✕ | このコンポーネントの左側に追加するスペースです。デフォルトは0です。 |
paddingRight |
ディメンション： プロパティ | ✕ | ✕ | ✕ | このコンポーネントの右側に追加するスペースです。デフォルトは0です。 |
paddingTop |
ディメンション： プロパティ | ✕ | ✕ | ✕ | このコンポーネントの上側に追加するスペースです。デフォルトは0です。 |
style |
スタイル | ✕ | ✕ | ✕ | 適用するスタイル（複数可）の名前です。 |
type |
文字列 | ◯ | ✕ | ✕ | コンポーネントの型です。必須です。 |
when |
ブール値 | ✕ | ✕ | ✕ | When式の評価結果がfalseの場合、このコンポーネントはインフレートされず、選択もされません。デフォルトはtrueです。 |
幅 |
ディメンション： プロパティ | ✕ | ✕ | 読み取り専用 | このコンポーネントに指定する幅です。デフォルトはautoです。 |
bind
コンポーネントのbindプロパティは、コンポーネントおよびその子のデータバインディングコンテキストを展開するためのものです。また、bindプロパティは、現在のコンテキストを展開するデータバインディングを順序付きで指定します。バインディングには順序があり、以前のバインディングの定義を、それ以降のバインディングで使用できます。
bindのプロパティ
バインディング配列の各バインディングオブジェクトには、次のプロパティを使用できます。
| プロパティ | 型 | 必須 | 説明 |
|---|---|---|---|
name |
文字列 | ◯ | このバインディングで使用する名前です。有効な名前を設定する必要があります。 |
value |
任意 | ◯ | このバインディングに割り当てる値です。文字列の場合、データバインディングは文字列のコンテンツに対して行われます。 |
type |
型 | ✕ | プロパティの型です。デフォルトはanyです。 |
bindの評価
bindプロパティの評価は、whenプロパティとその他のプロパティとの間に行われます。このため、when式で新しいバインディングを利用することはできませんが、このコンポーネントの他のプロパティではバインディングを利用できます。次に例を示します：
{
"type": "Text",
"bind": [
{ "name": "foo", "value": "27" },
{ "name": "bar", "value": "${foo + 23}" }
],
"text": "barの値は${bar}です"
}
上記の例では、fooとbarがデータバインディングコンテキストの引数になります。文字列と整数を足し算すると型は暗黙的に文字列に変換されるため、最終的なテキストは「barの値は2723です」になります。
entity
Opaqueのentityデータです。Alexaデバイスは実体データをコンテキストとしてスキルに返します。
heightおよびwidth
width、height、minWidth、minHeight、maxWidth、maxHeightはすべてディメンション型のプロパティです。
最小幅および最小高のデフォルト値は0であり、コンポーネントは表示されない場合があります。最大幅および最大高のプロパティのデフォルト値はnoneであり、コンポーネントは自由に拡大縮小できます。widthおよびheightの値を指定しない場合は、コンポーネントの元のサイズになります。
id
階層表示で特定のコンポーネントを見つけられるように開発者が割り当てる値です。他のIDと同じ値を使用してもかまいませんが、一意の値を割り当てることをお勧めします。
inheritParentState
コンポーネントの状態を、コンポーネントの親の状態に置き換えます。コンポーネントの見た目を親の状態に合わせて変更する必要があるときに使用します。たとえば、TouchWrapperが押されたときに、TouchWrapperの内側にあるTextコンポーネントの色を変更する場合を考えます。TextコンポーネントのinheritParentStateを設定することで、TouchWrapperの状態が変わると、このコンポーネントの状態も変わるようになります。
paddingBottom、paddingLeft、paddingRight、paddingTop
paddingの値はディメンション型であり、コンポーネントの周りに追加するスペースを指定します。APLでは、パディングと境界線を含めて要素の全幅と全高を計算します。それぞれのデフォルトは0です。
style
styleには、名前付きのスタイルを指定します。スタイルを割り当てない場合、コンポーネントではプラットフォームで定義された内部スタイルが使用されます。
type
インフレートするコンポーネントを指定します。このセクションに記載したプリミティブコンポーネントのいずれか、または名前付きレイアウトを指定できます。
when
whenの式がtrueの場合、コンポーネントをインフレートします。falseの場合は、コンポーネントとすべての子コンポーネントが無視されます。
