ホームページ  >  記事  >  バックエンド開発  >  XML Spyサンプルコードの詳細説明(画像)

XML Spyサンプルコードの詳細説明(画像)

黄舟
黄舟オリジナル
2017-03-27 16:40:122922ブラウズ

この チュートリアル を読む前に、少なくとも XML に精通しており、XML、DTD、および XSLT ドキュメントを編集するためにメモ帳またはその他のツールを使用したことがあり、それらの構文と使用法に精通していることを確認する必要があります。それ以外の場合は、お願いします。まずはこのチュートリアルをもう一度読んでください。

XML Spy は、Icon Information System が開発した XML、XSL、XSLT、DTD、スキーマ、その他のファイル形式をサポートするエディタです。 XML を完全なツリー構造として表示でき、さまざまな HTML/XML/XSLT タグを簡単に使用できるため、開発時間を大幅に節約でき、コード入力に多くの時間を費やす必要がなくなります。映画情報を保存する例を通して、XML Spy の使用方法を学びましょう。

最初のステップ: saveit.xml、saveit.dtd、saveit.xslt の 3 つのファイルを設計する必要があります。saveit.xml は特定の映画コンテンツ データの保存を担当し、saveit.dtd は saveit.xml の検証を担当し、saveit .xslt これは、saveit.xml でスタイル変換を実行して、ブラウザーでの最終的な表示効果を決定します。まず、作成する必要がある 3 つのファイルのコードを見てみましょう:

----------saveit.xml------------------
<?xml version="1.0" encoding="GB2312"?>
<!DOCTYPE movies SYSTEM "G:\xmlspy\saveit.dtd">
<?xml-stylesheet type="text/xsl" href="G:\xmlspy\saveit.xslt"?>
<movies type="动作片">
<id>1</id>
<name>致命摇篮</name>
<brief>李连杰最新力作!</brief>
<time>2003</time>
</movies>
----------saveit.dtd------------------
<?xml version="1.0" encoding="GB2312"?>
<!ELEMENT movies (id, name, brief, time)>
<!ATTLIST movies type CDATA #REQUIRED>
<!ELEMENT id (#PCDATA)>
<!ELEMENT name (#PCDATA)>
<!ELEMENT brief (#PCDATA)>
<!ELEMENT time (#PCDATA)>
----------saveit.xslt------------------
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="xml" version="1.0" encoding="GB2312" indent="yes"/>
<xsl:template match="/">
<html>
<head>
<title>
:::凌云的XML Spy教程:::
</title>
</head>
<body>
<xsl:apply-templates></xsl:apply-templates>
</body>
</html>
</xsl:template>
<xsl:template match="movies">
第<xsl:value-of select="id"></xsl:value-of>部电影
<table>
<tbody>
<tr>
<td>名称</td>
<td>简介</td>
<td>时间</td>
<td>类型</td>
</tr>
<tr>
<td><xsl:value-of select="name"></xsl:value-of></td>
<td><xsl:value-of select="brief"></xsl:value-of></td>
<td><xsl:value-of select="time"></xsl:value-of></td>
<td><xsl:value-of select="@type"></xsl:value-of></td>
</tr>
</tbody>
</table>
</xsl:template>
</xsl:stylesheet>

ステップ 2: XML Spy を使用して saveit.dtd ドキュメントを作成します。

1) ルートノードムービーを作成します

メニューの「ファイル」->「新規」を選択して、「新規ドキュメントの作成」ダイアログボックスをポップアップ表示し、その中の dtd (ドキュメントタイプ定義) を選択すると、空の DTD ドキュメントが作成されます。図 1 に示すように、編集領域に移動します。左上隅の黒い三角形をクリックすると、図 2 のように表示されます。図 3 に示すように、エンコード方式項目のエンコーディングのデフォルト値を UTF-8 に設定し、それを GB2312 に変更しました。完了後、Elm をダブルクリックしてムービーを入力します。 Elm ムービーを選択状態のままにして、右側の要素ボックスのシーケンスをダブルクリックすると、結果が図 4 に示されています。このようにして、ルートノードムービーが構築される。

XML Spyサンプルコードの詳細説明(画像)
写真1

XML Spyサンプルコードの詳細説明(画像)
写真2

XML Spyサンプルコードの詳細説明(画像)
写真3

XML Spyサンプルコードの詳細説明(画像)
写真4

2)子ノードID、名前、概要、時間、属性タイプを追加します。

をクリックしてくださいのムービー シーケンスを選択し、[子の追加] -> [要素] を選択して 4 つの子ノードを追加します。図 5 に示すように。もう一度ムービー シーケンスを右クリックし、Append -> ATTLIST を選択し、図 6 に示すように名前をムービーに設定し、Name を type に、Type を CDATA に、Presence を #REQUIRED に設定します。

XML Spyサンプルコードの詳細説明(画像)
図 5

XML Spyサンプルコードの詳細説明(画像)
図 6

3) サブノード ID、名前、概要、時間を作成します。ムービー シーケンスを右クリックし、[追加] > [要素] を選択し、4 つのノード、データ型を追加します。図 7 に示すように、すべてを PCDATA に設定します。このようにして、DTDドキュメントが作成される。 saveit.dtd という名前を付けて、G:////xmlspy ディレクトリに保存します。 [表示] -> [テキスト ビュー] モードで編集して取得したソース コードを表示するには、[表示] -> [拡張グリッド ビュー] を選択して、ツリー編集 ビュー モードに戻ります。

XML Spyサンプルコードの詳細説明(画像)

ステップ 3: XML Spy を使用して saveit.xslt ドキュメントを作成します。

1) メニュー [ファイル] -> [新規] を選択して [新しいドキュメントの作成] ダイアログ ボックスをポップアップし、最後の項目 xslt (拡張スタイルシート Language) を選択します。作成された新しい xslt ファイルが図 8 に示されています。このとき、xslt を直接編集する方が便利なので、XML Spy はビューをコード編集ビューに自動的に転送します。図 9 に示すように、エンコード方式を GB2312 に変更します。

XML Spyサンプルコードの詳細説明(画像)
写真8

XML Spyサンプルコードの詳細説明(画像)
写真9

2) コードの残りの部分は、図 10 に示す [要素] パネルから編集領域に簡単に追加できます。追加が完了したら、対応するノードを各要素の属性値に設定して XSLT ドキュメントの作成が完了します。具体的な処理については詳しく説明しません。完了すると、図 11 のようになります。 saveit.xslt という名前を付けて、G:////xmlspy ディレクトリに保存します。

XML Spyサンプルコードの詳細説明(画像)
図 10

XML Spyサンプルコードの詳細説明(画像)
図 11

ステップ 4: XML Spy を使用して saveit.xml ドキュメントを作成します。

1) メニューの [ファイル] -> [新規] を選択して [新しいドキュメントの作成] ダイアログ ボックスをポップアップし、その中で [xml (XML ドキュメント)] を選択すると、XML ドキュメントの検証方法が DTD かスキーマかを選択するダイアログ ボックスが表示されます。図 12 に示すように、図 13 に示すように、DTD 検証方法を選択し、その検証ドキュメントとして作成したばかりの saveit.dtd を選択します。

XML Spyサンプルコードの詳細説明(画像)
図12

XML Spyサンプルコードの詳細説明(画像)
図13

2) [OK]をクリックすると、XML Spyはsaveit.dtd検証を満たす空のXMLドキュメントを自動的に構築します。図 14 に示すように。コンテンツデータを入力します。エンコード方式項目のエンコーディングを GB2312 に変更します。結果を図 15 に示します。

XML Spyサンプルコードの詳細説明(画像)
図14

XML Spyサンプルコードの詳細説明(画像)
図15

3) XSL->Assign XSLメニューを選択し、ポップアップウィンドウでG:////xmlspy////saveitを選択します(図を参照) 15).xslt ファイルを選択し、[OK] をクリックします。

XML Spyサンプルコードの詳細説明(画像)
図 16

4) これで、XML ドキュメントが編集されました。図 17 に示すように。これに saveit.xml という名前を付けて、G:////xmlspy ディレクトリに保存します。

XML Spyサンプルコードの詳細説明(画像)
図 17

ステップ 5: XSLT->XSL 変換を選択するか、クリックして XML Spy で直接 saveit.xml の最終的な表示効果を表示できます。 G:////xmlspy ディレクトリに移動し、ブラウザを使用して視聴することもできますが、ブラウザは IE6 以降である必要があります。変換結果ドキュメントを出力する場合は、クリックして変換後の結果ドキュメントを XML Spy に保存できます。最終的な表示効果を図 18 に示します。上記のコード debugs は XML Spy5 に渡されます。

XML Spyサンプルコードの詳細説明(画像)
写真18

以上がXML Spyサンプルコードの詳細説明(画像)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。