< 前へ | 次へ >

演習 1.4: XSL スタイル・シートの作成および編集

スタイル・シートとは、XML 文書を他の文書タイプに変換して、出力をフォーマット設定するのに使用できるファイルです。 この演習では、シンプルな XSL スタイル・シートを作成して、お客様の XML ファイルのデータをフォーマット設定して HTML ファイル内の表にする方法を学習します。

この演習を始める前に、 演習 1.3: XML ファイルの作成および編集を終了しておく必要があります。

スタイル・シートの作成

空の新規スタイル・シートを作成するには、次のステップに従ってください。
  1. 「ファイル」 > 「新規」 > 「その他」の順に選択します。 「新規」ウィンドウで、「XML」 > 「XSL」と選択します。 「次へ」をクリックします。
  2. 「MyProject」 ディレクトリーを選択します。
  3. 「ファイル名」フィールドに CDTitle.xsl と入力し、「次へ」をクリックします。
  4. 「XML ファイルの選択 (Select XML file)」ページで、CDTitle.xml ファイルを選択します。 これによって、CDTitle.xml ファイルが CDTitle.xsl ファイルに関連付けられます。
  5. 終了」をクリックします。
CDTitle.xsl ファイルが作成され、XSL エディターで自動的に開きます。

スタイル・シートの編集

XSL エディターは、スタイル・シート内のコンテンツを作成するのに役立ついくつかのウィザードを提供します。
  1. HTML 文書を作成するには、HTML ヘッダー情報を生成し、文書の出力方法を定義するテンプレートを追加します。
    1. XSL エディターで、CDTitle.xsl ファイルに含まれる <xsl:stylesheet> 要素の後ろの空白行にカーソルを置きます。
    2. 断片」タブをクリックして、「XSL」 ドロワーを開きます。
    3. 「デフォルト HTML ヘッダー」をダブルクリックします。 これによって、<xsl:output> 要素とテンプレートが作成されます。 この要素は、変換の結果 (つまり、CDTitle.xsl を CDTitle.xml に適用した結果) を HTML で出力し、 テンプレートは、CDTitle.xml ファイル内のすべての直接の子を 処理するための <xsl:apply templates> 規則付きの HTML ヘッダーを生成します。
  2. HTML 表を生成するテンプレートを作成するには、次のようにします。
    1. 前述のステップ 1 で作成された </xsl:template> 終了タグの後ろの空の行にカーソルを置きます。
    2. 「XSL」 ドロワーで、「XSL 内の HTML 表」をダブルクリックします。
    3. 最初の CD 要素を HTML 表を作成するためのコンテキスト・ノードとして選択します。
    4. 「テンプレートでの表のラップ」チェック・ボックスをクリックします。 これは、この表を新規テンプレートでラップしたいことを示します。
    5. 「ヘッダーの組み込み」チェック・ボックスをクリックして、この表にヘッダーを組み込みたいことを示します。「次へ」をクリックします。
    6. 「セル」間隔フィールドで、20 と入力します。 これは、表のセル間のスペース量を増やすことによって、表をより見やすくします。
    7. 終了」をクリックします。これで、お客様の CDTitle.xsl ファイル内に HTML 表を生成する新規テンプレートが作成されます。
  3. 「ファイル」 > 「保管」の順にクリックして、ファイルを保管します。

XML ファイルから HTML ファイルへの変換

  1. 「ナビゲーター」ビューで、Ctrl キーを押したまま、CDTitle.xml と CDTitle.xsl を選択します。
  2. 右クリックし、「実行」 > 「XSL 変換」 と選択します。
  3. 結果のファイル名は _CDTitle_transform.html です。このファイルは、Page Designer で自動的に開かれ、表内の XML ファイルのコンテンツを含んでいます。
  4. この表を Web ブラウザーで見るには、_CDTitle_transform.html ファイルを閉じてから、 「ナビゲーター」ビューで右クリックして、「アプリケーションから 開く」 > 「Web ブラウザー」と選択します。
以下のように表示されます。

Web ブラウザー

演習のチェックポイント

XSL エディターは、コンテンツを含んだスタイル・シートを作成する のに役立つ多くのウィザードを提供します。 また、そのスタイル・シートに基づいた HTML 表を作成するメソッドも提供します。

以上で、この演習は終了です。 この演習では、次のことを学習しました。
  • XSL スタイル・シートを作成する。
  • HTML 表を生成するスタイル・シートにコンテンツを含める。
  • XML ファイルを HTML に変換する。
< 前へ | 次へ >