タブウィジェット (テーマ指定可能)
タブウィジェットでは、マッシュアップコンテンツを個別のビューに整理できます。各ビューは 1 つのタブで、ウィジェットのプロパティを使用して定義できるラベルが付いています。ランタイムでは、一度に 1 つのタブだけが開き、現在のタブは下線を使用してハイライトされます。タブウィジェットは 1 つのレスポンシブウィジェットで、そのコンテナのサイズに基づいて拡大および縮小します。コンテナの寸法を制御するか、ウィジェットの Width および Height プロパティを使用して、ウィジェットを固定の幅または高さに設定できます。
 |
タブウィジェットは、プラットフォーム内の標準ウィジェットとして、および SDK からインポート可能な Web コンポーネントとして使用できます。
|
以下の方法でウィジェットを設定できます。
• タブとそのラベルの数を指定します。
• ランタイムにマッシュアップを表示するときに開くデフォルトのタブを指定します。
• タブラベルの最大幅を設定します。
• タブコンテナの遅延読み込みを有効化および設定します。
タブウィジェットでの遅延読み込みの使用
デフォルトでは、マッシュアップを開くとき、ウィジェット内のすべてのタブがロードされます。タブ上のウィジェットにバインドされているサービスは、マッシュアップの Loaded イベントなどのイベントがランタイムにトリガーされると実行されます。大規模なウィジェットのコレクションが含まれている複数の複雑なビジュアリゼーションがタブウィジェットに含まれている場合に、バックグラウンドのタブでサービスを実行し、ウィジェットをロードすると、パフォーマンスが低下する可能性があります。非表示のタブがランタイムに必要になるまで、これらのタブのロードが遅延されるように遅延読み込みを設定して、マッシュアップとネットワークのパフォーマンスを向上させることができます。ウィジェットで遅延読み込みを設定するとき、マッシュアップが開くとすぐに表示されるデフォルトのタブを遅延読み込みから除外してください。ウィジェット内のタブの遅延読み込みを有効にするには、次の手順を実行します。
1. Mashup Builder で、ウィジェットのタブを選択してそのコンテンツを表示します。
2. タブでコンテナを選択します。コンテナのプロパティは、「プロパティ」パネルにリストされています。
3. 「プロパティ」パネルで、LazyLoading プロパティを True に設定します。遅延読み込みの追加のプロパティ、サービス、およびイベントがリストされます。
遅延読み込みのプロパティ、サービス、およびイベントの詳細については、マッシュアップでの遅延読み込みの使用を参照してください。
4. コンテナの Loaded イベントをバインドして、遅延読み込みが行われたコンテナ内のウィジェットにバインドされているデータサービスを実行します。
|
|
遅延読み込みが行われたコンテナのサービスを実行するためにマッシュアップの Loaded イベントを使用することは避けてください。返されるサービスのデータは、タブが開かれるとき、または LoadContainer サービスを使用してコンテナがロードされるときにのみ表示されます。
|
5. 前の手順を繰り返して、ウィジェットのその他のタブの遅延読み込みを有効にします。
6. 「保存」をクリックし、「マッシュアップを表示」をクリックします。
ランタイムでは、遅延読み込みが行われたタブは、タブを開くと自動的にロードされます。タブコンテナに対して EnableContainerUnload プロパティが有効になっている場合、このコンテナは自動的にアンロードされるため、表示されていないときにシステムリソースが解放され、パフォーマンスが向上します。アンロードされたタブに切り替えると、そのタブが自動的に再ロードされます。タブの遅延読み込みサービスへの追加のバインドを作成することにより、マッシュアップ内のその他のイベント (ボタンウィジェットの Clicked イベントなど) を使用してコンテンツを手動でロードおよびアンロードできます。
タブのスタイルの設定
ウィジェットの TabStyle プロパティを使用して、タブのスタイルを設定できます。このプロパティは、次の 2 つのオプションをサポートしています。
フレームなし - タブ名が境界線なしで表示されます。(デフォルト)
フレーム付き - タブ名とコンテンツ領域を囲むように境界線が表示されます。コンテンツ領域の周りの境界線の表示を制御するには、HideContentAreaBorder プロパティを使用します。
タブ名へのアイコンの追加
フレーム付きタブを使用する場合、TabMode プロパティを使用して、タブ名の外観をカスタマイズできます。タブ名には、提供するコンテンツとユーザーエクスペリエンスに応じて、ラベル、アイコン、またはその両方を表示できます。タブごとに、テキストラベルを定義したり、メディアエンティティを参照したり、SVG アイコンを指定したりできます。
以下のイメージは、ラベルとアイコンの両方が表示される 2 つのタブを示しています。ラベルとアイコンの両方を使用すると、新規ユーザーが理解しやすくなります。
以下のイメージは、アイコンのみが表示されるタブを示しています。アイコンを使用すると、特に画面領域が限られている場合に、ユーザーが各タブの目的をすばやく特定できます。
アイコンのサイズをカスタマイズするには、ウィジェットの TabIconSize プロパティを使用します。
|
|
アイコンは、デフォルトのフレームなしタブスタイルではサポートされていません。
|
タブの位置の設定
フレーム付きタブを使用する場合、TabsPosition プロパティを使用して、タブを水平または垂直に表示するようにウィジェットを設定できます。タブは、コンテンツ領域の上部または下部に水平方向に表示することも、左側または右側に垂直方向に表示することもできます。垂直タブを使用するには、次の手順を実行します。
1. タブウィジェットをキャンバス上で選択するか、「エクスプローラ」パネルを使用して選択します。
2. 「プロパティ」パネルで、TabStyle プロパティを「フレーム付きタブ」に設定します。
|
|
垂直タブは、デフォルトのフレームなしタブスタイルではサポートされていません。
|
3. TabsPosition プロパティを「左」または「右」に設定します。
4. マッシュアップを保存して表示します。
次の例は、左側でタブが垂直方向に並べられたフレーム付きスタイルを示しています。
タブの幅の設定
デフォルトでは、タブは使用可能なスペースに応じてタブ名のコンテンツに合わせて拡大または縮小するように設定されています。使用可能なスペースをすべてのタブに均等に配分したり、固定幅を設定したりするには、TabWdithConfig プロパティを使用します。均等配分は、タブが水平方向に表示される場合にのみサポートされます。
ウィジェットのプロパティ
|
|
デフォルトでは、各タブで Tab1Name、Tab1Value、Tab1Visible、Tab1Disabled などのタブ関連のすべてのプロパティを使用できます。たとえば、1 つ目のタブには Tab1Name プロパティがあり、2 つ目のタブには Tab2Name プロパティがあり、3 つ目のタブには Tab3Name プロパティがあります。
|
|
プロパティ名
|
説明
|
ベースタイプ
|
デフォルト値
|
バインド可能か(Y/N)
|
ローカライズ可能か(Y/N)
|
||
|---|---|---|---|---|---|---|---|
|
SelectedTabValue
|
選択されたタブの値。
|
STRING
|
該当なし
|
Y
|
N
|
||
|
Disabled
|
このプロパティを使用して、マッシュアップ内のウィジェットを無効にします。ウィジェットはマッシュアップ内に表示されますが、クリックできません。
|
BOOLEAN
|
False
|
Y
|
N
|
||
|
SelectedTabName
|
選択されたタブの名前。
|
STRING
|
該当なし
|
Y
|
N
|
||
|
CustomClass
|
ウィジェットの最上位の div に CSS を定義できます。スペースで区切って、複数のクラスを入力できます。
|
STRING
|
該当なし
|
Y
|
N
|
||
|
TabSequence
|
ユーザーが Tab キーを押したときにウィジェットがハイライトされる順序。
|
NUMBER
|
該当なし
|
N
|
N
|
||
|
TabStyle
|
タブのスタイルを設定します。境界線と背景色があるフレーム付きスタイル、またはタブ名のみのフレームなしスタイルを選択できます。
|
STRING
|
フレームなしタブ
|
N
|
N
|
||
|
TabMode
|
タブ内に表示するコンテンツのタイプを制御します。フレーム付きタブでのみサポートされています。オプション: 「ラベル」、「アイコン」、「アイコン + ラベル」
|
STRING
|
ラベル
|
Y
|
N
|
||
|
TabWidthConfig
|
タブの幅の設定を制御します。オプション: 自動 - ラベルの幅に基づいて幅を動的に設定します。等間隔 - ウィジェットに使用可能な幅をタブ間で均等に配分します。固定 - TabWidth プロパティを使用して、各タブの固定幅を設定します。フレーム付きタブでのみサポートされています。
|
STRING
|
自動
|
N
|
N
|
||
|
TabsPosition
|
コンテンツ領域を基準にしたタブグループの位置を設定します。グループは、コンテンツ領域の上部または下部に水平方向に表示することも、左側または右側に垂直方向に表示することもできます。
|
STRING
|
上
|
N
|
N
|
||
|
TabIconPosition
|
ラベルを基準にしたタブアイコンの位置を設定します。
|
STRING
|
左
|
N
|
N
|
||
|
TabIconSize
|
タブ内のアイコンサイズを設定します。
|
NUMBER
|
24
|
N
|
N
|
||
|
TabSelected
|
タブが選択されたときにトリガーされるイベント。
|
STRING
|
イベント
|
Y
|
N
|
||
|
NumberOfTabs
|
タブの総数を設定します。
設定可能なタブの最大数は 16、最小数は 1 です。
|
NUMBER
|
2
|
N
|
N
|
||
|
DefaultTabNumber
|
そのマッシュアップが初めてロードされたときにランタイムに表示するタブを選択できます。2 回目以降にマッシュアップがロードされたときには、ランタイムに最後に選択したタブが表示されます。
|
NUMBER
|
該当なし
|
Y
|
N
|
||
|
TabMode
|
タブ名にラベル、アイコン、またはその両方を表示するかどうかを制御します。オプション: 「ラベル」、「アイコン」、「アイコン + ラベル」
|
STRING
|
ラベル
|
N
|
N
|
||
|
TabNameHeight
|
タブ名領域の高さを設定できます。タブ名領域を非表示にするには、このプロパティを 0 に設定します。
|
NUMBER
|
34px
|
Y
|
N
|
||
|
OverflowButtonLabel
|
タブ名がウィジェットで使用可能なスペースをオーバーフローしたときに表示される、メニューボタンのラベルを設定します。
|
STRING
|
その他
|
Y
|
Y
|
||
|
Tab1Name
|
1 つ目のタブの名前。
|
STRING
|
Tab Name 1
|
Y
|
Y
|
||
|
Tab1Icon
|
タブ 1 に表示するアイコンを設定します。フレーム付きタブでのみサポートされています。
|
メディアエンティティ
|
該当なし
|
N
|
N
|
||
|
Tab1SVGIcon
|
SVG アイコンライブラリから、タブ 1 に表示する SVG アイコンを設定します。フレーム付きタブでのみサポートされています。
|
SVG アイコン
|
該当なし
|
N
|
N
|
||
|
Tab1Value
|
1 つ目のタブの値。
|
STRING
|
Tab Value 1
|
Y
|
N
|
||
|
Tab1Visible
|
1 つ目のタブを表示するように設定します。
|
BOOLEAN
|
True
|
Y
|
N
|
||
|
Tab1Disabled
|
このプロパティを使用して、マッシュアップ内の 1 つ目のタブを無効にします。タブはマッシュアップ内に表示されますが、クリックできません。
|
BOOLEAN
|
False
|
Y
|
N
|
||
|
Tab2Name
|
2 つ目のタブの名前。
|
STRING
|
Tab Name 2
|
Y
|
Y
|
||
|
Tab2Icon
|
タブ 2 に表示するアイコンを設定します。フレーム付きタブでのみサポートされています。
|
メディアエンティティ
|
該当なし
|
N
|
N
|
||
|
Tab2SVGIcon
|
SVG アイコンライブラリから、タブ 2 に表示する SVG アイコンを設定します。フレーム付きタブでのみサポートされています。
|
SVG アイコン
|
該当なし
|
N
|
N
|
||
|
Tab2Value
|
2 つ目のタブの値。
|
STRING
|
Tab Value 2
|
Y
|
N
|
||
|
Tab2Visible
|
2 つ目のタブを表示するように設定します。
|
BOOLEAN
|
True
|
Y
|
N
|
||
|
Tab2Disabled
|
このプロパティを使用して、マッシュアップ内の 2 つ目のタブを無効にします。タブはマッシュアップ内に表示されますが、クリックできません。
|
BOOLEAN
|
False
|
Y
|
N
|
||
|
SelectDefaultTab
|
このウィジェットに設定されているデフォルトのタブを再選択する、バインド可能なサービス。
|
該当なし
|
該当なし
|
Y
|
N
|
||
|
HideContentAreaBorder
|
フレーム付きタブを使用しているときに、コンテンツ領域の周りの境界線を非表示にします。
|
BOOLEAN
|
False
|
N
|
N
|
||
|
ResetInputsToDefaultValue
|
含まれているすべてのウィジェットをデフォルト値にリセットします。
|
該当なし
|
該当なし
|
Y
|
N
|
||
|
TabNameMaxWidth
|
タブ名の最大幅を設定します。タブ名の超過した文字は切り捨てられます。
|
NUMBER
|
該当なし
|
Y
|
N
|
||
|
SwitchTabOnFocus
|
矢印キーを使用してフォーカスを変更すると、フォーカスされたタブに自動的に切り替わります。
|
BOOLEAN
|
False
|
Y
|
N
|