タブ

全般

[タブ] コントロールを使用すると、アプリ内の情報をタブで分割できます。タブ コントロールの動作は、選択したモード ( 静的 または 動的) によって異なります。

静的タブ

[タブ] コントロールを追加すると、既定で 3 つのタブ ([Tab 1]、[Tab 2]、[Tab 3]) が表示されます。コントロール内の各タブを展開すると、以下のプロパティが表示されます。

• タブ名 - タブの表示名です。
• ページ - このタブ内にインポートする Apps のページです。
• 非表示 - true の場合、実行時にコントロールが非表示になります。
• 無効化 - true の場合、実行時にコントロールを無効化します。

以下のプロパティは、[タブ] コントロール全体に適用されます。

• 新しいタブを追加—プラス記号「+」アイコンをクリックして、データに新しいタブを追加します。
• アクティブなタブのインデックス - このプロパティを使用して、特定のタブに移動します。インデックスは 0 から開始します。たとえば、「Tab1」、「Tab2」、「Tab3」、「Tab4」という 4 つの連続したタブがある場合、「Tab1」はインデックス 0を持ち、「Tab2」はインデックス 1を持ち、「Tab3」はインデックス 2を持ち、「Tab4」はインデックス 3を持ちます。
• 非表示 - true の場合、実行時にコントロールが非表示になります。
• 無効化 - true の場合、実行時にコントロールを無効化します。

動的タブ

動的タブは、実行時にリストのデータ ソースから生成されます。この機能を使用するには、タブの [動的 ] モードを選択します。これは、必要なタブの数がリスト内の項目によって異なる場合に便利です。

次のプロパティを設定できます。

• リストのソース - タブとして表示する項目のソースです。有効なデータ型は、String、Integer、DateTime、DataTable、または Object の配列の配列です。
• 列 - リストのソースが DataTable 型またはオブジェクトの配列の場合は、特定の列 (DataTable データ型の場合) または特定のプロパティ (オブジェクト配列の場合) を選択します。
• ページ ソース - すべての動的タブで使用するアプリ ページです。
• アクティブなタブのインデックス - このプロパティを使用して、特定のタブに移動します。インデックスは 0 から開始します。たとえば、「Tab1」、「Tab2」、「Tab3」、「Tab4」という 4 つの連続したタブがある場合、「Tab1」はインデックス 0を持ち、「Tab2」はインデックス 1を持ち、「Tab3」はインデックス 2を持ち、「Tab4」はインデックス 3を持ちます。

たとえば、Data Service のエンティティで次のような動的タブを使用できます。

• 動的タブの [ リストのソース ] プロパティが Data Service のエンティティです。たとえば、「Department」です。

  Fetch(of TPDepartment)(Nothing, Nothing, Nothing, Nothing, New ExpansionFieldOption(){addExpansionFieldOption("CreatedBy", New String(){"Id","Name"}), addExpansionFieldOption("UpdatedBy", New String(){"Id","Name"})})

• 動的タブの [列 ] プロパティは、選択した Data Service エンティティのフィールドです (例: "Name")。
  注: 実行時には、選択したエンティティ フィールドのレコード数と同じ数のタブが表示されます。このコントロールは、エンティティの 50 件のレコードを表示するよう制限されています。レコードが 50 件を超える場合は、最初の 50 件が表示されます。
• [ ページ ソース] で、選択したタブに基づいて更新される表を表示するページを設定できます。

実行時に表示されるタブは、Department エンティティの [Name] フィールドのレコードです。タブを切り替えると、表の内容が更新されます。

イベント

• 値の変更時 - 値が変更された際の挙動を設定します。

スタイル

• コントロールの配置 - 既定では [画面に合わせて伸縮] に設定されています。別の配置を設定することもできます。

  注: 配置は、親に対して選択したレイアウト ([縦方向]/[横方向]) によって異なります。
• スタイル - アクティブなタブと非アクティブなタブのスタイルです。
  • 既定 - タブのスタイルはクラシック ブラウザー タブです。
  • ピル - タブの両端が丸みを帯びており、ピルの形に似ています。
  • タブの色 - 非アクティブなタブのテキストの色です。
  • アクティブなタブの色 - アクティブなタブのテキストの色です。
  • タブの背景 - 非アクティブなピルタブの背景色。
  • アクティブなタブの背景 - アクティブなピルタブの背景色。
  • 大きいタブ - 選択すると、タブが拡大されます。

• 枠線 - コントロールの枠線です。枠線の 太さ、 色、 半径を設定できます。

• フォント - タブのテキストのフォント属性 (フォント ファミリ、サイズ、色など) です。既定では、このコントロールの直接の親コンテナーのフォント ファミリが継承されます。その場合、フォントに「Inherited」と表示されます。

• マージン - コントロールのマージンです。既定では 4px のマージンが設定されています。[上/下] および [左/右] のプロパティがそれぞれ組み合わされています。[上]、[ 下]、[ 左]、[ 右] に別々の値を設定するには、[ マージン] セクションの右側にある[リンク] ボタンを選択します。

• サイズ - コントロールの幅と高さです。既定では、サイズは [ auto] に設定されています。最小値または最大値を設定するには、3 点リーダー (...) を選択します。コントロールのサイズがオプションよりも小さい場合は、スクロール バーが表示されます。

キーボード ショートカット

アクセシビリティを向上するために、設定パネルの [全般] タブのタブ リストで、以下のキーボード ショートカットを使用できます。

• ↑ キーと ↓ キーを使用して選択中のタブを変更
• Alt + ↑ キーを使用して選択したタブを上に移動
• Alt + ↓ キーを使用して、選択したタブを下に移動

例: 次のタブに移動する

この例では、[タブ] コントロールの次のタブに移動する方法を説明します。

1. アプリで [タブ] コントロールを追加し、[静的] に設定します。「Tab 1」、「Tab 2」、「Tab 3」の 3 つのタブが自動的に作成されます。
2. 新しいページを 2 つ追加し、それぞれに [ボタン] コントロールを追加します。ボタンにそれぞれ「Tab 1 -> Next」および「tab 2 -> Next」という名前を付けます。
3. 「Tab 1」の場合、[ページ ソース] フィールドで、「Tab 1 -> Next」ボタンのある、追加済みのページを参照します。
4. 「Tab 2」の場合、[ページ ソース] フィールドで、「Tab 2 -> Next」ボタンのある、追加済みのページを参照します。アプリは次の画像のようになります。
   
5. 各 [ボタン] コントロールに対してルールを作成します。このルールは、ボタンをクリックしたときに次のタブに移動するようアプリに指示します。
6. Int32 型のアプリ変数を作成し、「var_tab_index」という名前を付けます。
7. [タブ] コントロールを選択し、[アクティブなタブのインデックス] フィールドに var_tab_index 変数を割り当てます。
   
8. [タブ] コントロールを含むメイン ページを選択し、[イベント] タブに移動して、[読み込み時] イベントのルールを作成します。
   1. [値を設定] ルールを追加し、次のように設定します。
      • 設定する項目 - var_tab_index
      • 値 - 0 (Tab 1 のインデックス)
9. 「Tab 1-> Next」という名前の [ボタン] コントロールが含まれるページを選択し、[イベント] タブに移動して、[クリック時] イベントのルールを作成します。
   1. [値を設定] ルールを追加し、次のように設定します。
      • 設定する項目 - var_tab_index
      • 値 - 1 (Tab 2 のインデックス)
10. 「Tab 2-> Next」という名前の [ボタン] コントロールが含まれるページを選択し、[イベント] タブに移動して、[クリック時] イベントのルールを作成します。
    1. [値を設定] ルールを追加し、次のように設定します。
       • 設定する項目 - var_tab_index
       • 値 - 2 (Tab 3 のインデックス)

アプリをプレビューするときに、「Tab 1」のボタンをクリックすると「Tab 2」に移動します。以降も同様です。

VB のプロパティ

VB のプロパティ	データ型	説明
ActiveTabIndex	Integer	現在アクティブなタブのインデックスです。
ActiveTabName	文字列	現在アクティブなタブの名前です。
Hidden	Boolean	true の場合、実行時にコントロールが非表示になります。
Disabled	Boolean	true の場合、実行時にコントロールを無効化します。