Spry 領域の作成

Spry フレームワークには 2 つのタイプの領域があります。1 つは、テーブルやリピートリストなどのデータオブジェクトを囲む Spry 領域です。もう 1 つは、Dreamweaver ページ上のデータの動的更新を可能にするマスターテーブルオブジェクトと共に使用される Spry 詳細領域です。

すべての Spry データオブジェクトは、Spry 領域に含まれる必要があります。 ページに Spry 領域を追加する前に Spry データオブジェクトを追加しようとすると、Spry 領域を追加するように求めるメッセージが Dreamweaver によって表示されます。 初期設定では、Spry 領域は HTML div コンテナ内に追加されます。Spry 領域は、テーブルを追加する前に追加することも、テーブルまたはリピートリストを挿入するときに自動で挿入することも、既存のテーブルまたはリピートリストオブジェクトを囲むように挿入することもできます。

詳細領域を追加する場合は、通常、最初にマスターテーブルオブジェクトを追加し、次に [詳細領域を更新] オプションを選択します (動的テーブルレイアウトを参照してください)。詳細領域に固有の値は、[Spry 領域の挿入] ダイアログボックスの [タイプ] オプションのみです。

  1. [挿入]-[Spry]-[Spry 領域] を選択します。
    [挿入] パネルの [Spry] カテゴリにある [Spry 領域] ボタンをクリックする方法もあります。
  2. オブジェクトコンテナの場合は、<div> または <span> オプションを選択します。 初期設定では <div> コンテナを使用します。
  3. 次のようなオプションがあります。

    • Spry 領域を作成する場合は、挿入する領域のタイプとして [領域] (初期設定) を選択します。

    • Spry 詳細領域を作成する場合は、[詳細領域] を選択します。 詳細領域を使用するのは、別の Spry 領域が変更されるのに合わせて更新される動的データをバインドする場合に限られます。

    重要： マスターテーブル領域から、別の <div> に詳細領域を挿入する必要があります。 コードビューを使用して、挿入ポイントを正確に置く必要がある場合があります。
  4. メニューから Spry データセットを選択します。
  5. オブジェクトに定義された領域を作成または変更する場合は、オブジェクトを選択して次のいずれかを選択します。
    選択範囲を囲む
    オブジェクトの周囲に新しい領域を配置します。

    選択範囲を置き換え
    オブジェクトの既存の領域を置き換えます。

  6. [OK] をクリックするとページに領域プレースホルダーが挿入され、「ここに Spry 領域のコンテンツを挿入」というテキストが Dreamweaver によって表示されます。 このプレースホルダーテキストは、テーブルやリピートリストなどの Spry データオブジェクトと置き換えることや、[バインディング] パネル ([ウィンドウ]-[バインディング]) から動的データと置き換えることができます。
    動的表示エレメントを表示する [バインディング] タブ
    [バインディング] パネルには、データセットから取得できるデータが表示されます。

    注意： [バインディング] パネルには、組み込みの Spry エレメントである ds_RowID、ds_CurrentRowID、および ds_RowCount も表示されています。 これらは、動的詳細領域の更新方法を定義するときにユーザーがクリックした行を定義するために使用されます。
  7. プレースホルダーテキストを Spry データオブジェクト (Spry テーブルなど) に置き換えるには、[挿入] パネルの [Spry] カテゴリの対応する Spry データオブジェクトのボタンをクリックします。
  8. プレースホルダーテキストを動的データと置き換えるには、次のいずれかの操作を行います。

    • [バインディング] パネルからエレメントを選択テキストの上部にドラッグします。

    • コードビューで、エレメントのコードを直接入力します。 {dataset-name::element-name} のフォーマットを使用します。たとえば、{ds1::category}. または {dsProducts::desc} のようにします。 ファイル内で 1 つのデータセットのみを使用している場合、またはその領域に対して定義した同じデータセットからのデータエレメントを使用している場合は、データセット名を省略して単に {category} または {desc} と書くことができます。

    領域のコンテンツを定義するために使用する方法にかかわらず、HTML コードには次の行が追加されます。

    <div spry:region="ds1">{name}{category}</div> 
<div spry:region="ds2">{ds1::name}{ds1::descheader}</div>