ボタンウィジェット (テーマ指定可能)
ウィジェットをマッシュアップに追加してデータサービスにバインドする方法については、以下のビデオをご覧ください。新しいタブでビデオを開くには、プレーヤーのタイトルをクリックします。
ボタンウィジェットを使用することで、マッシュアップにボタンを追加し、ボタンがクリックされたときにイベントを発生させることができます。
 |
ボタンウィジェットは、プラットフォーム内の標準ウィジェットとして、および SDK からインポート可能な Web コンポーネントとして使用できます。
|
ボタンのバリエーション
• プライマリ - ユーザーがマッシュアップで実行できるプライマリ操作 (「削除」ボタンなど)。通常、マッシュアップまたはダイアログには、ユーザーが実行できるプライマリ操作が 1 つ含まれている必要があります (確認ダイアログの「適用」ボタンなど)。
• セカンダリ - ユーザーがプライマリ操作に加えてマッシュアップで実行できるセカンダリ操作 (確認ダイアログの「キャンセル」ボタンなど)。
• ターシャリ - ワークフローで必須ではない独立した操作に使用します。
• 危険 - 保存されているデータに影響を与えたり、元に戻せない変更が生じる可能性のある危険な操作に使用します。1 つのマッシュアップに複数の危険ボタンを追加しないでください。
• 透明 - すべてのユーザーには関連しない、マッシュアップのメインフォーカスエリアにない操作に使用します。透明ボタンの外観はリンクに似ています。
マッシュアップスタイルテーマの「スタイル」タブでこれらのボタンタイプのデフォルトスタイルをカスタマイズできます。
ボタンコンテンツの設定
ウィジェット内にラベルと複数のタイプのアイコンを表示できます。
ボタンサイズの設定
次のいずれかの方法で、ボタンのサイズを設定できます。
• コンテンツに基づいて調整されるレスポンシブウィジェットとして。
ウィジェットの ButtonSize プロパティを使用して、定義済みサイズのいずれかを選択します。オプション: 「標準」、「中」、「大」、「特大」。ボタンサイズを変更すると、ラベルのフォントサイズと、ボタンのラベルとアイコンの周囲のパディングに影響があります。タッチスクリーンデバイスのマッシュアップを設計する際には、「中」以上のボタンサイズを使用することをお勧めします。
• コンテナの幅に合わせて調整されるレスポンシブウィジェットとして。
レイアウト内のレスポンシブ配置の Flexbox コンテナにボタンを追加し、ウィジェットの ButtonSize プロパティを「幅に合わせて調整」に設定します。このボタンは、コンテナ内の唯一のウィジェットである場合、使用可能なスペース全体に表示されます。このオプションは、タッチスクリーンデバイス用のマッシュアップを設計する際に使用できます。「幅に合わせて調整」に設定されているボタンのサイズを設定するには、「レイアウト」パネルでその親コンテナに使用可能なレイアウトオプションを使用します。たとえば、ボタンコンテナのパディングまたはマージンの値を設定することで、ボタンの間隔を広げることができます。
次の例では、ButtonSize プロパティを「幅に合わせて調整」に変更したときに、デザインタイムで左側の標準ボタンが拡大してそのコンテナ全体に表示されています。
以下のレイアウトにはレスポンシブ配置のコンテナが 2 つあり、両方のコンテナでパディングの値を 10 ピクセルに設定して、ボタンの間隔を広げています。ランタイムで、コンテナに使用可能なスペースに基づいてボタンウィジェットのサイズが調整されます。
|
|
「特大」または「幅に合わせて調整」を選択した場合、デフォルトのアイコンサイズが 18 x 18 ピクセルから 24 x 24 ピクセルに大きくなります。
|
• 固定サイズのウィジェットとして。
ウィジェットプロパティとスタイルプロパティを使用して、ボタンを固定サイズに設定します。デフォルトでは、ボタンサイズはコンテンツの幅に合わせて調整されます。固定サイズが適用されている場合、ボタンのコンテンツが使用可能なスペースを超えると、コンテンツが切り捨てられます。
ボタンウィジェットのプロパティ
ボタンウィジェットのプロパティを以下に示します。
Icon
• ボタンウィジェットでアイコンイメージを設定できます。
• ベースタイプ: 該当なし
• デフォルト値: 該当なし
• バインド可能か(Y/N): N
• ローカライズ可能か(Y/N): N
IconPosition
• ラベルを基準にしてアイコンの位置を設定します。オプション: 「左」、「右」、「上」、「下」
• ベースタイプ: STRING
• デフォルト値: 左
• バインド可能か(Y/N): N
• ローカライズ可能か(Y/N): N
Label
• ボタンウィジェットのラベルに表示されるテキスト。
• ベースタイプ: STRING
• デフォルト値: ボタン
• バインド可能か(Y/N): Y
• ローカライズ可能か(Y/N): Y
Disabled
• このプロパティを使用して、マッシュアップ内のウィジェットを無効にします。ウィジェットはマッシュアップ内に表示されますが、クリックできません。
• ベースタイプ: BOOLEAN
• デフォルト値: 偽
• バインド可能か(Y/N): Y
• ローカライズ可能か(Y/N): N
CustomClass
• ウィジェットの最上位の div に CSS を定義できます。スペースで区切って、複数のクラスを入力できます。
• ベースタイプ: STRING
• デフォルト値: 該当なし
• バインド可能か(Y/N): Y
• ローカライズ可能か(Y/N): N
ContextID
• ウィジェットの ID を設定できます。
• ベースタイプ: STRING
• デフォルト値: 該当なし
• バインド可能か(Y/N): Y
• ローカライズ可能か(Y/N): N
LabelAlignment
• ウィジェット内のラベルを左、右、または中央に整列できます。
• ベースタイプ: STRING
• デフォルト値: 中央
• バインド可能か(Y/N): N
• ローカライズ可能か(Y/N): N
MaxWidth
• ボタンウィジェットの最大幅を設定できます。
• 最大幅より長い場合、ボタンラベルは切り捨てられます。
• 注記: MaxWidth および Width プロパティを一緒に使用することはできません。
• ベースタイプ: NUMBER
• デフォルト値: 該当なし
• バインド可能か(Y/N): N
• ローカライズ可能か(Y/N): N
MaxHeight
• プロパティ MultiLine が True に設定されている場合のボタンの最大高さを設定します。
• ベースタイプ: NUMBER
• デフォルト値: 該当なし
• バインド可能か(Y/N): Y
• ローカライズ可能か(Y/N): N
MultiLine
• ラベルテキストを別の行に続けて表示するように設定します。
• ベースタイプ: BOOLEAN
• デフォルト値: 偽
• バインド可能か(Y/N): N
• ローカライズ可能か(Y/N): N
SVGIcon
• ボタンウィジェット内に表示する SVG アイコンを選択できます。メディアエンティティを表示するには、標準のプロパティ Icon を使用します。
• 注記: プロパティ Icon の設定がプロパティ SVGIcon よりも優先されます。つまり、ユーザーがプロパティ Icon を使用してアイコンを設定している場合、それがボタンに表示されます。
• ベースタイプ: メディアエンティティ
• デフォルト値: 該当なし
• バインド可能か(Y/N): N
• ローカライズ可能か(Y/N): N
サイズ
• ボタンウィジェットのサイズを設定します。オプション: 「標準」、「中」、「大」、「特大」、「幅に合わせて調整」。このプロパティが「幅に合わせて調整」に設定されている場合、ボタンサイズはレイアウト内のコンテナに収まるように拡大または縮小します。
• ベースタイプ: STRING
• デフォルト値: 標準
• バインド可能か(Y/N): N
• ローカライズ可能か(Y/N): N
ButtonType
• ボタンタイプを設定できます。
• ボタンタイプには「プライマリ」、「セカンダリ」、「ターシャリ」、「危険」、「透明」があります。ボタンタイプによってスタイルが異なります。
• ベースタイプ: STRING
• デフォルト値: プライマリ
• バインド可能か(Y/N): Y
• ローカライズ可能か(Y/N): N
TabSequence
• ユーザーが TAB キーを押したときにウィジェットがハイライトされる順序。
• ベースタイプ: NUMBER
• デフォルト値: 該当なし
• バインド可能か(Y/N): N
• ローカライズ可能か(Y/N): N
Clicked
• ボタンウィジェットがクリックされるとイベントがトリガーされます。
• ベースタイプ: 該当なし
• デフォルト値: 該当なし
• バインド可能か(Y/N): Y
• ローカライズ可能か(Y/N): N
TriggerClick
• ボタンクリックをトリガーするバインド可能なサービス。
• ベースタイプ: 該当なし
• デフォルト値: 該当なし
• バインド可能か(Y/N): Y
• ローカライズ可能か(Y/N): N
Width
• ウィジェットの幅。デフォルトでは、この幅はラベルの幅に設定されます。幅を固定にするには、プロパティパネルで値を入力するか、キャンバスでウィジェットのサイズを変更します。
• 注記: MaxWidth および Width プロパティを一緒に使用することはできません。
• ベースタイプ: NUMBER
• デフォルト値: 該当なし
• バインド可能か(Y/N): N
• ローカライズ可能か(Y/N): N
Height
• ウィジェットの高さ。デフォルトでは、この高さはラベルの最大幅に設定されます。高さを固定にするには、プロパティパネルで値を入力するか、キャンバスでウィジェットのサイズを変更します。
• ベースタイプ: NUMBER
• デフォルト値: 該当なし
• バインド可能か(Y/N): N
• ローカライズ可能か(Y/N): N
TooltipField
• ウィジェットにカーソルを合わせたときに表示されるツールヒントテキストを設定します。
• ベースタイプ: STRING
• デフォルト値: 該当なし
• バインド可能か(Y/N): Y
• ローカライズ可能か(Y/N): Y
TooltipIcon
• ウィジェットのツールヒントのアイコンイメージを設定します。
• イメージを追加したり、イメージの URL パスを指定したりできます。
• ベースタイプ: メディアエンティティ
• デフォルト値: 該当なし
• バインド可能か(Y/N): N
• ローカライズ可能か(Y/N): N