フォームを開発しているときに、そのデータをタブに分類しなければならないことがよくあります。たとえば、Web 用 Work With パターンのビューパネルでは、タブ付きのビューを使っています。これまではビューパネルごとにタブを処理するコードが必要でしたが、GeneXus ではこれらのコードをすべて、単一の Web コンポーネントにカプセル化できるようになっています。GeneXus の Work With パターンには、ほかのオブジェクトで使用できる、TabbedView という Web コンポーネントがあります。
たとえば、次のタブを持つタブビューを Customer トランザクションに実装するとします:
- [ General ] : 名前や住所などの一般的な情報のみを表示します。
- [ Invoices ] : 顧客の請求書を表示します。
- [ Payments ] : 顧客の支払を表示します。
まず、それぞれのタブ用の Web コンポーネントを作成します(ここでは、CustomerGeneral、CustomerInvoices、CustomerPayments という名前です)。この処理が必要な理由は、タブビューではページが非常に重くなるのを避けるため、一度に 1 つのタブのみを読み込むようにする必要があるからです。
次に、ViewCustomer Web パネルを作成して、WebForm の TabbedView Web コンポーネント (Work With パターンに付属しているので、1 つ作成してナレッジベースに組み込みます) にドラッグします。TabbedView Web コンポーネントには 2 つのパラメーターがあります。使用可能なタブを示す SDT と、アクティブなタブを示す識別子です。SDT は、次に示すような構造のコレクションです。
TabOptionsItem [ IsCollection ]
{
Code
Description
Link
WebComponent
}
コレクションは、すべての使用可能なタブについて、TabbedView を呼び出す前に読み込む必要があります。コレクション内のアイテムを読み込むには、メンバーに次の情報が必要です:
- Code = 一意のアイテム識別子です。アイテムを、コレクション内にあるほかのすべてのアイテムと区別します。
- Description = タブの目的についての短い説明です。
- Link = タブが選択された場合に呼び出す URL です (通常、Web オブジェクトの Link メソッドを使用して取得するもの)。
- WebComponent = アイテムが選択されたときに表示する必要がある Web コンポーネントの URL です。
たとえば、上記の ViewCustomer オブジェクトでは、次のように SDT をロードします:
Rules:
Parm(in:CustomerId, in:&TabCode);
Event Start
...
&Tabs = new()
&TabsItem.Code = 'General'
&TabsItem.Description = 'General info'
&TabsItem.Link = ViewCustomer.Link(CustomerId, 'General')
&TabsItem.WebComponent = CustomerGeneral.Link(CustomerId)
&Tabs.add(&TabsItem)
...
TabWC.Object = TabbedView.Create(&Tabs, &TabCode)
Endevent
TabbedView を呼び出すと、タブ (選択と選択解除、図の表示などが可能) が構築されます。アクティブなタブでは、WebComponent メンバーの情報を使用してアクティブな Web コンポーネントが作成されます。
(シンプルなコードについては、データプロバイダーの使用例: 「TabbedView の使用方法」を参照してください)。
TabbedView Web コンポーネントは、GeneXus の機能を使用してタブ処理用のコードをカプセル化した、GeneXus の標準の Web コンポーネントです。この機能では、次に示すように、コンポーネントへのリンクを指定して実行時に Web コンポーネントを作成できます。
&WebComponentUrl = &Tab.WebComponent
Control.Object = CreateFromURL(&WebComponentUrl)
|