Mashup Builder > ウィジェット > 標準ウィジェット > タブウィジェット (テーマ指定可能)
タブウィジェット (テーマ指定可能)
タブウィジェットでは、マッシュアップコンテンツを個別のビューに整理できます。各ビューは 1 つのタブで、ウィジェットのプロパティを使用して定義できるラベルが付いています。ランタイムでは、一度に 1 つのタブだけが開き、現在のタブは下線を使用してハイライトされます。タブウィジェットは 1 つのレスポンシブウィジェットで、そのコンテナのサイズに基づいて拡大および縮小します。コンテナの寸法を制御するか、ウィジェットの Width および Height プロパティを使用して、ウィジェットを固定の幅または高さに設定できます。
* 
タブウィジェットは、プラットフォーム内の標準ウィジェットとして、および SDK からインポート可能な Web コンポーネントとして使用できます。
以下の方法でウィジェットを設定できます。
タブとそのラベルの数を指定します。
ランタイムにマッシュアップを表示するときに開くデフォルトのタブを指定します。
タブラベルの最大幅を設定します。
タブコンテナの遅延読み込みを有効化および設定します。
タブウィジェットでの遅延読み込みの使用
デフォルトでは、マッシュアップを開くとき、ウィジェット内のすべてのタブがロードされます。タブ上のウィジェットにバインドされているサービスは、マッシュアップの Loaded イベントなどのイベントがランタイムにトリガーされると実行されます。大規模なウィジェットのコレクションが含まれている複数の複雑なビジュアリゼーションがタブウィジェットに含まれている場合に、バックグラウンドのタブでサービスを実行し、ウィジェットをロードすると、パフォーマンスが低下する可能性があります。非表示のタブがランタイムに必要になるまで、これらのタブのロードが遅延されるように遅延読み込みを設定して、マッシュアップとネットワークのパフォーマンスを向上させることができます。ウィジェットで遅延読み込みを設定するとき、マッシュアップが開くとすぐに表示されるデフォルトのタブを遅延読み込みから除外してください。ウィジェット内のタブの遅延読み込みを有効にするには、次の手順を実行します。
1. Mashup Builder で、ウィジェットのタブを選択してそのコンテンツを表示します。
2. タブでコンテナを選択します。コンテナのプロパティは、「プロパティ」パネルにリストされています。
3. 「プロパティ」パネルで、LazyLoading プロパティを True に設定します。遅延読み込みの追加のプロパティ、サービス、およびイベントがリストされます。
遅延読み込みのプロパティ、サービス、およびイベントの詳細については、マッシュアップでの遅延読み込みの使用を参照してください。
4. コンテナの Loaded イベントをバインドして、遅延読み込みが行われたコンテナ内のウィジェットにバインドされているデータサービスを実行します。
* 
遅延読み込みが行われたコンテナのサービスを実行するためにマッシュアップの Loaded イベントを使用することは避けてください。返されるサービスのデータは、タブが開かれるとき、または LoadContainer サービスを使用してコンテナがロードされるときにのみ表示されます。
5. 前の手順を繰り返して、ウィジェットのその他のタブの遅延読み込みを有効にします。
6. 「保存」をクリックし、「マッシュアップを表示」をクリックします。
ランタイムでは、遅延読み込みが行われたタブは、タブを開くと自動的にロードされます。タブコンテナに対して EnableContainerUnload プロパティが有効になっている場合、このコンテナは自動的にアンロードされるため、表示されていないときにシステムリソースが解放され、パフォーマンスが向上します。アンロードされたタブに切り替えると、そのタブが自動的に再ロードされます。タブの遅延読み込みサービスへの追加のバインドを作成することにより、マッシュアップ内のその他のイベント (ボタンウィジェットの Clicked イベントなど) を使用してコンテンツを手動でロードおよびアンロードできます。
ウィジェットのプロパティ
* 
デフォルトでは、各タブで Tab1NameTab1ValueTab1VisibleTab1Disabled などのタブ関連のすべてのプロパティを使用できます。たとえば、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
NumberOfTabs
タブの総数を設定します。
設定可能なタブの最大数は 16、最小数は 1 です。
NUMBER
2
N
N
DefaultTabNumber
そのマッシュアップが初めてロードされたときにランタイムに表示するタブを選択できます。2 回目以降にマッシュアップがロードされたときには、ランタイムに最後に選択したタブが表示されます。
NUMBER
該当なし
Y
N
TabNameHeight
タブ名領域の高さを設定できます。タブ名領域を非表示にするには、このプロパティを 0 に設定します。
NUMBER
34px
Y
N
Tab1Name
1 つ目のタブの名前。
STRING
Tab Name 1
Y
Y
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
Tab2Value
2 つ目のタブの値。
STRING
Tab Value 2
Y
N
Tab2Visible
2 つ目のタブを表示するように設定します。
BOOLEAN
True
Y
N
Tab2Disabled
このプロパティを使用して、マッシュアップ内の 2 つ目のタブを無効にします。タブはマッシュアップ内に表示されますが、クリックできません。
BOOLEAN
False
Y
N
SelectDefaultTab
このウィジェットに設定されているデフォルトのタブを再選択する、バインド可能なサービス。
該当なし
該当なし
Y
N
ResetInputsToDefaultValue
含まれているすべてのウィジェットをデフォルト値にリセットします。
該当なし
該当なし
Y
N
TabNameMaxWidth
タブ名の最大幅を設定します。タブ名の超過した文字は切り捨てられます。
NUMBER
該当なし
Y
N
SwitchTabOnFocus
矢印キーを使用してフォーカスを変更すると、フォーカスされたタブに自動的に切り替わります。
BOOLEAN
False
Y
N
これは役に立ちましたか?