デザイン構成

www.altova.com このトピックを印刷 前のページ 1つ上のレベル 次のページ

ホーム >  チュートリアル > サブページと可視性 >

デザイン構成

デザインファイルは、トップページ (名前の付けられたカスタマー) および サブページ (名前の付けられたオーダー) 含みます。 トップページ (カスタマー:下のスクリーンショットの最初のページ) は、データベースに現在保管されているすべてのカスタマーを表示します。エンドユーザー がトップページのカスタマー の詳細 をクリックすると、 サブページ (下のスクリーンショットの2番目のオーダー ページ) が開かれます。この ページは、カスタマーの現在のオーダーを表示します。  トップページは、サブページ、データベース内の現在のオーダー、すべてのカスタマーのオーダーを表示するオプションも表示します。

 

このデザインの主要なメカニズムは、トップページで選択された (サブページ内の) 特定のカスタマーのオーダーを表示することです。これは、現在のオーダーすべてを表示するデーブルのプロパティと共にアーカイブされています。 プロパティは、どの要素が可視されるかを指定し、また、表示フィルターとして振る舞います。 XPath 式を介して、選択されたカスタマーのそのオーダーのみが可視できるように指定します。 このフィルターされたテーブルは、選択されたカスタマーのオーダーのみを含むカスタマー固有のテーブルの作成の簡単および効果的な代替となります。

 

デザインステップ

デザインは、以下で説明されるとおり作成されます。  (スクリーンショットは、完成されたデザインのシミュレーションを表示しています。)

 

トップページ: カスタマー

 

トップページ および 2 つの ページソースの作成: $XML1 および $CUSTOMERS
$CUSTOMERS のカスタマー データを含む動的テーブルの作成 。 テーブルの各行は、 XML ページソース $CUSTOMERS 内のカスタマーに対応します。
サブページ 名前の付けられた オーダーの作成
アクショングループの作成 には以下を行います: (i) ユーザーがクリックするカスタマー ノードに関するデータを使用して、 $XML1 内のノードを更新する。 (ii)  オーダーと名前の付けられたサブページへ移動する。
カスタマーデータを含む各ラベルへのアクショングループ の割り当て この結果、カスタマーデータがクリックされると、アクショングループが実行されます。
すべての オーダーの作成を表示するラベル。この ラベル アクション(すべての オーダーの表示)は、他のサブページへ移動 アクションとは対照的に、選択された単一のカスタマーのオーダーを表示します。

MTDSPVSimCustomerTable

サブページ: オーダー

 

サブページのために 3 つの ページソース を作成する:(トップページと共有された) $XML1 (トップページと共有された) $CUSTOMERS 、および(トップページと共有された) $ORDERS。
データファイル内のオーダーの詳細を表示する動的テーブルを作成する (下のスクリーンショットは、テーブル (i) 選択されたカスタマー, および (ii) すべての カスタマーのオーダーを表示します )。 テーブルの各行は、 XML ページソース $ORDERS 内のオーダーに対応します。
繰り返し行グループのテーブルの可視性プロパティのセットアップ  を行い、以下の項目を表示します(i) トップページで選択されたカスタマーのみ、 または (ii) すべての カスタマー。
総額を生成するための XPath 式の作成 (i) 選択されたカスタマーのすべての オーダー、または (ii) 現在のすべてのオーダー。

MTDSPVOrderTableCustWithTotal

MTDSPVOrderTableAllWithTotal

 


(C) 2019 Altova GmbH