TabbedView Web コンポーネントは、以前のバージョンから移行したナレッジベースで作業する場合や、互換性のためにのみ使用します。
GeneXus X Evolution 3 (および以前のバージョン) では、TabbedView Web コンポーネントは、ナレッジベースで初めて GeneXus Work With for Web パターンを Transaction オブジェクトに適用するときに自動的に生成され、データをタブに整理するために、生成されるすべての 'View' Web パネルで使用されていました。
最終的には、TabbedView Web コンポーネントを独自の実装に再利用することができました。

例

以下では、TabbedView Web コンポーネントを 'View' Web パネルで使用する、GeneXus によって自動生成される実装について説明します。
'View' Web パネルを生成せずに同様のケースを実装する必要がある場合は、この例を参照してください。
次の Transaction オブジェクトがあるとします:

Customer
{
  CustomerId*
  CustomerName
  CustomerLastName
  CustomerAddress  
}

Invoice
{ 
   InvoiceId*
   InvoiceDate
   CustomerId
   CustomerName
   CustomerLastName
   InvoiceDescription
   InvoiceAmount
}

Payment
{ 
   PaymentId*
   PaymentDate
   CustomerId
   CustomerName
   CustomerLastName
   PaymentDescription
   PaymentAmount
}

顧客データを次のようにタブに整理して表示する画面を定義する必要があるとします:

• General: 顧客の全般的な情報を表示します。
• Invoices: 顧客の請求書を表示します。
• Payments: 顧客の支払いを表示します。

まず、それぞれのタブ用の Web Component オブジェクトを作成します (この場合、CustomerGeneral、CustomerInvoices、CustomerPayments という名前にします)。これは、一度に 1 つのタブだけが読み込まれるようにして、ページが重くなりすぎるのを防ぐために必要なことです。
次に、'ViewCustomer' という名前の Web Panel オブジェクトを作成し、Web コンポーネントコントロールを [ ツールボックス ] からこの Web パネルの [ Web Layout ] にドラッグします (この例では、Web コンポーネントの名前は WebComp1 です)。 

次に、Web コンポーネントコントロール (WebComp1) を TabbedView Web Component オブジェクト (ナレッジベースで作成されていると仮定します) に関連付けます。
TabbedView Web コンポーネントには以下の 2 つのパラメーターがあります:

• 使用可能なタブを表す SDT
• アクティブなタブを示す識別子

SDT は、次に示すような構造のコレクションです:

TabOptionsItem  [ IsCollection ] 
{
   Code
   Description
   Link
   WebComponent
}

そのため、'ViewCustomer' Web パネルで以下の Start イベントを定義します:

Event Start
 
   &TabOptions = new()
   
   &TabOptionsItem= new()
   &TabOptionsItem.Code         = 'General'
   &TabOptionsItem.Description  = 'General info'
   &TabOptionsItem.Link         = ViewCustomerProcedural.Link(CustomerId, 'General')
   &TabOptionsItem.WebComponent = WCGeneralProcedural.Link(CustomerId)
   &TabOpions.add(&TabOptionsItem)
 
   &TabOptionsItem= new()
   &TabOptionsItem.Code         = 'Invoices'
   &TabOptionsItem.Description  = 'Invoices info'
   &TabOptionsItem.Link         = ViewCustomerProcedural.Link(CustomerId, 'General')
   &TabOptionsItem.WebComponent = WCInvoicesProcedural.Link(CustomerId)
   &TabOptions.add(&TabOptionsItem)
    
   &TabOptionsItem= new()
   &TabOptionsItem.Code         = 'Payments'
   &TabOptionsItem.Description  = 'Payments info'
   &TabOptionsItem.Link         = ViewCustomerProcedural.Link(CustomerId, 'General')
   &TabOptionsItem.WebComponent = WCPaymentsProcedural.Link(CustomerId)
   &TabOptions.add(&TabOptionsItem)
    
   WebComp1.Object = TabbedView.Create(&TabOptions, &TabCode)
Endevent

実行時には以下のように表示されます:

よりシンプルなコードについては、「Data Provider の使用例: TabbedView の使用方法」を参照してください。

サンプルファイル

「TabbedView Web Component sample」の XPZ ファイルをダウンロードしてください (GeneXus 18 Upgrade 8)。