|
|
Spry データセットの作成
Spry HTML データセットの作成データセットのみを作成する場合は、挿入ポイントについて心配する必要はありません。データセットを作成してレイアウトも挿入する場合は、ページにレイアウトを挿入する挿入ポイントを確認します。
[挿入]-[Spry]-[Spry データセット] を選択します。
[データソースの指定] 画面で、次の操作を行います。
[データタイプの選択] ポップアップメニューから [HTML] を選択します。このオプションは初期設定で選択されています。
新しいデータセットの名前を指定します。新規作成するデータセットの初期設定名は「ds1」になります。データセット名には、文字、数値、下線を使用できますが、先頭文字を数値にすることはできません。
Dreamweaver で検出するデータソース内の HTML エレメントを指定します。たとえば、データを div タグ内で構成し、Dreamweaver でテーブルの代わりに div タグを検出する場合は、[検出] ポップアップメニューから [DIV] を選択します。[カスタム] オプションでは、検出する任意のタグ名を入力できます。
HTML データソースを含むファイルへのパスを指定します。パスは、サイトのローカルファイルへの相対パス (data/html_data.html など) とするか、HTTP または HTTPS を使用してライブ Web ページへの絶対 URL とすることができます。[参照] ボタンをクリックすると、ローカルファイルを探して選択できます。
HTML データソースが [データ選択] ウィンドウに表示され、データセットのコンテナとして適格なエレメントがビジュアルマーカーで示されます。使用するエレメントには、一意な ID が割り当てられている必要があります。ID が割り当てられていないと、エラーメッセージが表示されます。この場合は、データソースファイルに戻って一意な ID を割り当てる必要があります。また、データソースファイル内の適格なエレメントは Spry 領域内に含めることはできず、他のデータ参照を含むこともできません。
データソースとして、デザインタイムフィードを指定することもできます。詳細については、デザインタイムフィードの使用を参照してください。
[データ選択] ウィンドウに表示される黄色の矢印のいずれかをクリックするか、[データコンテナ] ポップアップメニューから ID を選択して、データコンテナのエレメントを選択します。
長いファイルの場合は、[データ選択] ウィンドウの下部の [展開/折りたたむ] 矢印をクリックして残りのデータを表示できます。
データセットのコンテナエレメントを選択すると、[データプレビュー] ウィンドウにデータセットのプレビューが表示されます。
(オプション) データセットの CSS データセレクタを指定する場合は、[詳細データ選択] を選択します。たとえば、[行セレクタ] テキストボックスに .product を指定し、[列セレクタ] テキストボックスに .boximage を指定すると、データセットには .product クラスが割り当てられた行と .boximage クラスが割り当てられた列のみが含まれます。
テキストボックスに複数のセレクタを入力する場合は、セレクタ間をカンマ (,) で区切ります。
詳細については、Spry データセレクタについてを参照してください。
[データソースの指定] 画面での操作が終了したら、[終了] をクリックしてデータセットを作成するか、[次へ] をクリックして [データオプションの設定] 画面に進みます。[終了] をクリックすると、データセットが [バインディング] パネル ([ウィンドウ]-[バインディング]) で使用可能になります。
[データオプションの設定] 画面では、次の操作を行います。
(オプション) 列を選択し、[タイプ] ポップアップメニューから列タイプを選択して、データセットの列タイプを設定します。たとえば、データセットの列に数字を含む場合は、その列を選択して [タイプ] ポップアップメニューから数字を選択します。このオプションは、その列でデータをソートできるようにする場合にのみ意味があります。
データセットの列を選択するには、その列名をクリックするか、[列名] ポップアップメニューから列名を選択するか、画面の左上隅の左方向と右方向の矢印を使用して選択先の列名に移動します。
(オプション) [列のソート] ポップアップメニューからソートする列を選択し、データをソートする方法を指定します。列を選択すると、ソート順として昇順または降順を指定できます。
(オプション、テーブルのみ) HTML データソースに指定した列名を使用せずに一般的な列名 (column0、column1、column 2 など) を使用する場合は、[最初の行をヘッダとして使用] を選択解除します。 注意： データセットのコンテナエレメントとしてテーブル以外を選択した場合は、このオプションと次のオプションは使用できません。テーブル以外のデータセットには、列名として column0、column1、column2 などが自動的に使用されます。
(オプション、テーブルのみ) データセットのデータの水平と垂直の向きを逆にするには、[列を行として使用] を選択します。このオプションを選択すると、列が行として使用されます。
(オプション) データセットから重複するデータ行を除外するには、[重複する行の除去] を選択します。
(オプション) データセットの最新データを常に利用するには、[データキャッシュを無効にする] を選択します。データを自動更新する場合は、[データの自動更新] を選択して更新間隔をミリ秒単位で指定します。
[データオプションの設定] 画面での操作が終了したら、[終了] をクリックしてデータセットを作成するか、[次へ] をクリックして [挿入オプションの選択] 画面に進みます。[終了] をクリックすると、データセットが [バインディング] パネル ([ウィンドウ]-[バインディング]) で使用可能になります。
[挿入オプションの選択] 画面では、次の操作を行います。
新しいデータセットのレイアウトを選択し、対応する設定オプションを指定します。詳細については、データセットのレイアウトの選択を参照してください。
[HTML を挿入しない] を選択します。このオプションを選択すると、データセットは作成されますが、ページには HTML が追加されません。データセットが [バインディング] パネル ([ウィンドウ]-[バインディング]) で使用可能になり、データセットからページにデータを手動でドラッグすることができます。
[終了] をクリックします。
データセットが作成されます。レイアウトオプションを選択した場合は、そのレイアウトとデータプレースホルダがページに表示されます。コードビューを確認すると、SpryData.js ファイルと SpryHTMLDataSet.js ファイルへの参照がヘッダーに追加されています。これらのファイルは、ページと連動する重要な Spry アセットです。このコードをページから削除しないでください。削除すると、データセットは機能しません。ページをサーバーにアップロードする場合は、これらのファイルも依存ファイルとしてアップロードする必要があります。
Spry XML データセットの作成データセットのみを作成する場合は、挿入ポイントについて心配する必要はありません。データセットを作成してレイアウトも挿入する場合は、ページにレイアウトを挿入する挿入ポイントを確認します。
[挿入]-[Spry]-[Spry データセット] を選択します。
[データソースの指定] 画面で、次の操作を行います。
[データタイプの選択] ポップアップメニューから [XML] を選択します。
新しいデータセットの名前を指定します。新規作成するデータセットの初期設定名は「ds1」になります。データセット名には、文字、数値、下線を使用できますが、先頭文字を数値にすることはできません。
XML データソースを含むファイルへのパスを指定します。パスは、サイトのローカルファイルへの相対パス (datafiles/data.xml など) とするか、HTTP または HTTPS を使用して Web ページへの絶対 URL とすることができます。[参照] ボタンをクリックすると、ローカルファイルを探して選択できます。
XML データソースが [行エレメント] ウィンドウに表示され、選択可能なデータエレメントの XML ツリーが示されます。繰り返しエレメントにはプラス (+) 記号が付き、子エレメントはインデントされます。
データソースとして、デザインタイムフィードを指定することもできます。詳細については、デザインタイムフィードの使用を参照してください。
表示するデータを含むエレメントを選択します。通常、このエレメントは <menu_item> などの繰り返しエレメントで、<item>、<link>、<description> などの複数の子エレメントを持ちます。
データセットのコンテナエレメントを選択すると、[データプレビュー] ウィンドウにデータセットのプレビューが表示されます。[XPath] テキストボックスに、選択したノードに対応する XML ソースファイル内の位置を示す式が表示されます。
注意： XPath (XML Path Language) は、XML ドキュメントの一部に対応するシンタックスです。 SQL 言語がデータベースのクエリーに使用されるように、ほとんどの場合、XPath は XML データのクエリー言語として使用されます。 XPath の詳細については、W3C Web サイト ( www.w3.org/TR/xpath) の XPath 言語仕様を参照してください。
[データソースの指定] 画面での操作が終了したら、[終了] をクリックしてデータセットを作成するか、[次へ] をクリックして [データオプションの設定] 画面に進みます。[終了] をクリックすると、データセットが [バインディング] パネル ([ウィンドウ]-[バインディング]) で使用可能になります。
[データオプションの設定] 画面では、次の操作を行います。
(オプション) 列を選択し、[タイプ] ポップアップメニューから列タイプを選択して、データセットの列タイプを設定します。たとえば、データセットの列に数字を含む場合は、その列を選択して [タイプ] ポップアップメニューから数字を選択します。このオプションは、その列でデータをソートできるようにする場合にのみ意味があります。
データセットの列を選択するには、その列名をクリックするか、[列名] ポップアップメニューから列名を選択するか、画面の左上隅の左方向と右方向の矢印を使用して選択先の列名に移動します。
(オプション) [列のソート] ポップアップメニューからソートする列を選択し、データをソートする方法を指定します。列を選択すると、ソート順として昇順または降順を指定できます。
(オプション) データセットから重複するデータ行を除外するには、[重複する行の除去] を選択します。
(オプション) データセットの最新データを常に利用するには、[データキャッシュを無効にする] を選択します。データを自動更新する場合は、[データの自動更新] を選択して更新間隔をミリ秒単位で指定します。
[データオプションの設定] 画面での操作が終了したら、[終了] をクリックしてデータセットを作成するか、[次へ] をクリックして [挿入オプションの選択] 画面に進みます。[終了] をクリックすると、データセットが [バインディング] パネル ([ウィンドウ]-[バインディング]) で使用可能になります。
[挿入オプションの選択] 画面では、次の操作を行います。
新しいデータセットのレイアウトを選択し、対応する設定オプションを指定します。詳細については、データセットのレイアウトの選択を参照してください。
[HTML を挿入しない] を選択します。このオプションを選択すると、データセットは作成されますが、ページには HTML が追加されません。データセットが [バインディング] パネル ([ウィンドウ]-[バインディング]) で使用可能になり、データセットからページにデータを手動でドラッグすることができます。
[終了] をクリックします。
データセットが作成されます。レイアウトオプションを選択した場合は、そのレイアウトとデータプレースホルダがページに表示されます。コードビューを確認すると、xpath.js ファイルと SpryData.js ファイルへの参照がヘッダーに追加されています。これらのファイルは、ページと連動する重要な Spry アセットです。このコードをページから削除しないでください。削除すると、データセットは機能しません。ページをサーバーにアップロードする場合は、これらのファイルも依存ファイルとしてアップロードする必要があります。
データセットのレイアウトの選択[挿入オプションの選択] 画面を使用すると、ページにデータセットの値を表示する方法を様々な表示オプションから選択できます。データの表示方法として、動的 Spry テーブル、マスター / 詳細レイアウト、スタックコンテナ (1 つの列) レイアウト、またはスポットライト領域付きスタックコンテナ (2 つの列) レイアウトを使用できます。[挿入オプションの選択] 画面には、各レイアウトがサムネールとして表示されます。
動的テーブルレイアウトデータを動的 Spry テーブルに表示する場合は、このオプションを選択します。Spry テーブルでは、動的な列のソートなどのインタラクティブな動作が可能です。
このオプションを選択した場合は、[セットアップ] ボタンをクリックして [テーブルの挿入] ダイアログボックスを表示し、以下の手順に従います。
[列] パネルで次の操作を行い、テーブルの列を調整します。
列をソート可能にするには、[列] パネルで列を選択し、[ヘッダーがクリックされたときに列をソート] を選択します。初期設定では、すべての列がソート可能です。
列をソートできないようにするには、[列] パネルで列を選択し、[ヘッダーがクリックされたときに列をソート] を選択解除します。
ページに CSS スタイルが、添付されたスタイルシートや HTML ページ内の個別スタイルのセットとして関連付けられている場合は、次のオプションで CSS クラスを適用できます。
- 奇数行クラス
- 選択したクラススタイルに従って動的テーブルの奇数行の表示方法を変更します。
- 偶数行クラス
- 選択したクラススタイルに従って動的テーブルの偶数行の表示方法を変更します。
- Hover クラス
- 選択したクラススタイルに従ってマウスをテーブル上に移動したときの表示方法を変更します。
- 選択クラス
- 選択したクラススタイルに従ってテーブル行をクリックしたときの表示方法を変更します。
注意： スタイルシート内の奇数行クラス、偶数行クラス、Hover クラス、および選択クラスの順序は重要です。上の順序 (奇数行、偶数行、Hover、選択) を厳密に守る必要があります。スタイルシートで選択ルールの前に Hover ルールがあると、Hover エフェクトはユーザーがマウスを別の行に移動するまで表示されません。スタイルシートで偶数行ルールと奇数行ルールの上に Hover ルールと選択ルールがあると、偶数行と奇数行のエフェクトはまったく機能しません。[CSS] パネルでルールをドラッグして正しい順序にするか、CSS コードを直接操作することができます。
作成するテーブルを動的 Spry マスターテーブルとする場合は、[行がクリックされたときに詳細領域を更新] を選択します。詳細については、動的 Spry マスターテーブルと詳細領域の更新についてを参照してください。
[OK] をクリックしてダイアログボックスを閉じ、[挿入オプションの選択] 画面の [終了] をクリックします。
デザインビューで作業をしている場合は、ヘッダーの行とデータ参照の行を持つテーブルが表示されます。データ参照はハイライト表示され、波カッコ ({}) で囲まれます。
マスター / 詳細レイアウトマスター / 詳細レイアウトを使用してデータを表示する場合は、このオプションを選択します。マスター / 詳細レイアウトでは、マスター領域 (左) のアイテムをクリックすると、詳細領域 (右) の情報が更新されます。通常、マスター領域には製品名などの名前の一覧が表示されます。ユーザーが製品名のいずれかをクリックすると、選択した項目に関する詳細情報が詳細領域に表示されます。
このオプションを選択した場合は、[セットアップ] ボタンをクリックして [マスター/詳細レイアウトの挿入] ダイアログボックスを表示し、以下の手順に従います。
[マスター列] パネルで次の操作を行い、マスター領域の内容を調整します。
列名を選択し、マイナス (-) 記号をクリックしてマスター領域から列を削除します。プラス (+) 記号をクリックし、列名を選択して新しい列をマスター領域に追加します。初期設定では、マスター領域にはデータセットの先頭列のデータが表示されます。
列名を選択し、上向き矢印または下向き矢印をクリックして列を移動します。ページのマスター領域に表示するデータの順序は、[マスター列] パネルで列を上下に移動して設定します。
上と同じ手順を [詳細列] パネルで繰り返します。初期設定では、詳細領域にはマスター領域に表示されるデータ以外のすべてのデータ (つまりデータセットの先頭列を除いたすべての列のデータ) が表示されます。
(オプション) 詳細領域のデータ別のコンテナタイプを設定します。コンテナタイプを設定するには、詳細列の名前を選択し、そのコンテナを [コンテナタイプ] ポップアップメニューから選択します。コンテナタイプとして、DIV タグ、P タグ、SPANタグ、または H1-H6 タグを使用できます。
[OK] をクリックしてダイアログボックスを閉じ、[挿入オプションの選択] 画面の [終了] をクリックします。
デザインビューで作業をしている場合は、選択したデータ参照が入力されたマスター / 詳細領域が表示されます。データ参照はハイライト表示され、波カッコ ({}) で囲まれます。
スタックコンテナレイアウトページで繰り返しコンテナ構造を使用してデータを表示する場合は、このオプションを選択します。たとえば、データセットに 4 つのデータ列がある場合、各コンテナに 4 つすべての列を含めると、そのコンテナ構造はデータセットの行ごとに自動的に繰り返されます。
このオプションを選択した場合は、[セットアップ] ボタンをクリックして [スタックコンテナの挿入] ダイアログボックスを表示し、以下の手順に従います。
[列] パネルで次の操作を行い、スタックコンテナの内容を調整します。
列名を選択し、マイナス (-) 記号をクリックしてスタックコンテナから列を削除します。プラス (+) 記号をクリックし、列名を選択して新しい列をコンテナに追加します。初期設定では、スタックコンテナにはデータセットの各列のデータが表示されます。
列名を選択し、上向き矢印または下向き矢印をクリックして列を移動します。ページのスタックコンテナに表示されるデータの順序は、[列] パネルで列を上下に移動して設定します。
(オプション) スタックコンテナのデータ別のコンテナタイプを設定します。コンテナタイプを設定するには、データセットの列名を選択し、そのコンテナを [コンテナタイプ] ポップアップメニューから選択します。コンテナタイプとして、DIV タグ、P タグ、SPANタグ、または H1-H6 タグを使用できます。
[OK] をクリックしてダイアログボックスを閉じ、[挿入オプションの選択] 画面の [終了] をクリックします。
デザインビューで作業をしている場合は、選択したデータ参照が入力されたコンテナが表示されます。データ参照はハイライト表示され、波カッコ ({}) で囲まれます。
スポットライト領域付きスタックコンテナレイアウトページでコンテナごとにスポットライト領域がある繰り返しコンテナ構造を使用してデータを表示する場合は、このオプションを選択します。通常、スポットライト領域にはピクチャが表示されます。スポットライト領域付きスタックコンテナレイアウトはスタックコンテナレイアウトに似ていますが、スポットライト領域付きスタックコンテナレイアウトではデータ表示が同じコンテナ内の 2 つの独立した列に分かれる点が異なります。
このオプションを選択した場合は、[セットアップ] ボタンをクリックして [スポットライト領域付きスタックコンテナの挿入] ダイアログボックスを表示し、以下の手順に従います。
[スポットライト列] パネルで次の操作を行い、スポットライト領域の内容を調整します。
列名を選択し、マイナス (-) 記号をクリックしてスポットライト領域から列を削除します。プラス (+) 記号をクリックし、列名を選択して新しい列をスポットライト領域に追加します。初期設定では、スポットライト領域にはデータセットの先頭列のデータが表示されます。
列名を選択し、上向き矢印または下向き矢印をクリックして列を移動します。ページのスポットライト領域に表示されるデータの順序は、[スポットライト列] パネルで列を上下に移動して設定します。
(オプション) スポットライト領域のデータ別のコンテナタイプを設定します。コンテナタイプを設定するには、データセットの列名を選択し、そのコンテナを [コンテナタイプ] ポップアップメニューから選択します。コンテナタイプとして、DIV タグ、P タグ、SPANタグ、または H1-H6 タグを使用できます。
上と同じ手順を [スタック列] パネルで繰り返します。初期設定では、スタック列にはスポットライト領域に表示されるデータ以外のすべてのデータ (つまりデータセットの先頭列を除いたすべての列のデータ) が表示されます。
[OK] をクリックしてダイアログボックスを閉じ、[挿入オプションの選択] 画面の [終了] をクリックします。
デザインビューで作業をしている場合は、選択したデータ参照が入力されたスポットライト領域とスタックコンテナが表示されます。データ参照はハイライト表示され、波カッコ ({}) で囲まれます。
HTML を挿入しないデータセットを作成するが、データセットの HTML レイアウトを挿入しない場合は、このオプションを選択します。データセットは [バインディング] パネル ([ウィンドウ]-[バインディング]) で使用可能になり、データセットからページにデータを手動でドラッグすることができます。
レイアウトを挿入せずにデータセットを作成した場合でも、使用可能な HTML レイアウトのいずれかをいつでも挿入できます。レイアウトを挿入するには、[バインディング] パネルでデータセットの名前をダブルクリックします。[挿入オプションの選択] 画面に進み、レイアウトを選択して [終了] をクリックします。 注意： データセットの名前を [バインディング] パネルからページの挿入ポイントにドラッグすることもできます。[挿入オプションの選択] 画面が表示されます。レイアウトを選択して [終了] をクリックします。
データセットの編集Spry データセットを作成した後では、それをいつでも編集できます。
 [バインディング] パネル ([ウィンドウ]-[バインディング]) でデータセットの名前をダブルクリックし、必要な編集を行います。
注意： データセットを編集して [挿入オプションの選択] 画面で新しいレイアウトを選択すると、ページの既存のレイアウトは置き換えられずに、新しいレイアウトが挿入されます。
デザインタイムフィードの使用まだ作成中のデータで作業する場合は、デザインタイムフィードが役立つことがあります。 たとえば、サーバーデベロッパーがデータベースをまだ仕上げており、XML データファイルの進行に追い付いていない場合、テストバージョンのファイルを使用することにより、データベースの作成から独立してページをデザインできます。
デザインタイムフィードを使用すると、そのフィードからのデータのみが作業環境に表示されます。ページコード内のデータソースへの参照は、実際に使用するデータソースへの参照として残ります。
Spry データセットの作成を開始します。その方法については、前の手順を参照してください。
[データソースの指定] 画面で、デザインタイムフィードのリンクをクリックします。
[参照] ボタンをクリックしてデザインタイムフィードを見つけ、[OK] をクリックします。
Spry データセレクタについてDreamweaver を使用して Spry データセットを作成すると、初期設定では、選択されたコンテナにすべてのデータが格納されます。CSS データセレクタを使用すると、データの選択範囲を指定できます。CSS データセレクタを使用すると、CSS ルールを指定することにより、データソース内でそのルールに対応するデータ部分のみを格納できます。たとえば、[データソースの指定] 画面の [行セレクタ] テキストボックスで .product を指定すると、.product クラスが割り当てられた行のみのデータセットが作成されます。
データセレクタボックスを有効にするには、[データソースの指定] 画面で [詳細データ選択] オプションを選択します。データセレクタを入力して、このオプションを選択解除すると、ボックスに入力した内容は保持されますが、その入力はデータセットのフィルタとしては使用されません。
動的 Spry マスターテーブルと詳細領域の更新についてSpry データの最も一般的な使用法の 1 つは、ユーザーの操作に反応して他のページデータを動的に更新する HTML テーブルを作成することです。 たとえば、ページを製品一覧の領域と製品別の詳細情報の領域に分け、ユーザーが製品一覧から別の製品を選択したときに、製品別の詳細情報を即座に更新することができます。Spry を使用すると、この更新を行うためにページ全体を更新する必要はありません。
ページ内の独立した領域は、マスター領域および詳細領域と呼ばれます。通常、ページの 1 つの領域 (マスター領域) には分類項目の一覧 (製品一覧など) が表示され、別の領域 (詳細領域) には選択された項目に関する詳細情報が表示されます。
各データセットでは「現在の行」が機能し、初期設定では現在の行にデータセットの先頭行のデータが反映されます。ユーザーがマスター領域で選択項目を変更した場合 (たとえば、製品一覧で別の製品を選択した場合)、Spry で実際に変更されるのはデータセットの現在の行です。詳細領域はマスター領域に依存するため、マスター領域でのユーザー操作に伴う変更 (別の製品の選択など) に応じて詳細領域でのデータが変更されます。
マスター / 詳細レイアウトは自動的に作成され、マスター領域と詳細領域は最初から関連付けられた状態で表示されます。ただし、動的なマスターテーブルを独自に作成する場合は、マスター領域と詳細領域を後で関連付けることができます。[テーブルの挿入] ダイアログボックスで [行がクリックされたときに詳細領域を更新] オプションを選択すると、動的テーブルの繰り返し行のタグ内に spry:setrow タグが挿入されます。この属性を使用して作成したテーブルは、ユーザーがテーブルを操作したときにデータセットの現在の行を再設定できるマスターテーブルになります。
|
