XMLデータをHTMLに変換するサンプルコードの詳細な紹介

単純な XSL スタイルシートを使用して、XMLデータを HTML に変換します。 XML 仕様は進化し続けるため、新しいバージョンではすべてのニーズを満たす必要があると思われます。ページのコンテンツを表す XML データがあり、そのコンテンツをレイアウトに変換するとします。変換する XML は次のとおりです:

<?xmlversion=&#39;1.0&#39;?> 
<?xml-stylesheettype="text/xsl"href="article.xsl"?> 
<xml> 
<folders> 
<folder> 
<text>Folder1</text> 
<files> 
<file> 
<text>File1</text> 
<fields> 
<field> 
<data> 
<type>string</type> 
<length>50</length> 
<value>somedata</value> 
</data> 
</field> 
</fields> 
</file> 
</files> 
</folder> 
</folders> 
</xml>

このコンテンツは、フォルダー、ファイル、およびフィールドのセットを表します。各フォルダー にはファイル が含まれており、各ファイルには入力データのフィールドが含まれています。フォルダー グループ内の各フォルダーは、TABLE の最初の行の TR 要素と TD 要素によって表されます。ファイル グループ内の各ファイルは、フォルダー TR 要素内にネストされた TABLE 要素の最初の行にある TR 要素および TD 要素として表されます。ドメイン グループ内の各ドメインは、関連ファイルの INPUT として表示されます。
以下は、この変換に使用される XSL です:

<?xmlversion="1.0"?> 
<xsl:stylesheet 
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"version="1.0" 
xmlns:msxsl="urn:schemas-microsoft-com:xslt" 
xmlns:fn=http://www.aaa.com/aaa> 
<xsl:outputmethod="html"/> 
<msxsl:scriptlanguage="JScript"implements-prefix="fn"> 
functiongetElementCount(nodelist,what){ 
varrtrn=0; 
rtrn=nodelist[0].parentNode.selectNodes(what).length; 
return(rtrn 1);//1isaddedforfillerTD 
} 
</msxsl:script> 
<xsl:templatematch="/"> 
<TABLECELLSPACING="0"CELLPADDING="0" 
WIDTH="100%"BORDER="0"ID="tblRoot"NAME="tblRoot" 
style="table-layout:fixed;"> 
<TR> 
<xsl:for-eachselect="xml/folders/folder"> 
<xsl:elementname="TD"> 
<xsl:attributename="style">width:55px</xsl:attribute> 
<xsl:value-ofselect="text"/> 
</xsl:element> 
</xsl:for-each> 
<TD></TD> 
</TR> 
<xsl:for-eachselect="xml/folders/folder"> 
<TR> 
<xsl:elementname="TD"> 
<xsl:attributename="colspan"> 
<xsl:value-ofselect="fn:getElementCount(.,&#39;folder&#39;)"/> 
</xsl:attribute> 

<TABLECELLSPACING="0"CELLPADDING="0" 
WIDTH="100%"BORDER="0"style="table-layout:fixed;"> 
<TR> 
<xsl:for-eachselect="files/file"> 
<xsl:elementname="TD"> 
<xsl:attributename="style">width:55px;</xsl:attribute> 
<xsl:value-ofselect="text"/> 
</xsl:element> 
</xsl:for-each> 
<TD></TD> 
</TR> 
<xsl:for-eachselect="files/file"> 
<TR> 
<xsl:elementname="TD"> 
<xsl:attributename="colspan"> 
<xsl:value-ofselect="fn:getElementCount(.,&#39;file&#39;)"/> 
</xsl:attribute> 
<xsl:for-eachselect="fields/field"> 
<xsl:elementname="INPUT"> 
<xsl:attributename="type">text</xsl:attribute> 
<xsl:attributename="maxlength"> 
<xsl:value-ofselect="data/length"/> 
</xsl:attribute> 
<xsl:attributename="value"> 
<xsl:value-ofselect="data/value"/> 
</xsl:attribute> 
</xsl:element><BR/> 
</xsl:for-each> 
</xsl:element> 
</TR> 
</xsl:for-each> 
</TABLE> 
</xsl:element> 
</TR> 
</xsl:for-each> 
</TABLE> 
</xsl:template> 
</xsl:stylesheet>

stylesheet タグでは、すべての xsl 変換タグの xsl 名前空間の定義を含む、いくつかの 名前空間 が設定されます。 msxml 名前空間を使用すると、スタイルシートで使用できるユーザー 関数 を作成できます。これを使用して、TD タグの COLSPAN 属性 のセットを取得するために、すべての子要素を取得します。 msxml:script 要素によって作成されたユーザー定義関数のセットを結合するために使用される fn 名前空間。 次に、外側の TABLE と最初の TR を作成します。 TR では、XML で指定されたフォルダーごとに TD を作成します。 xsl:element タグが使用されるのは、カスタム属性を追加したり、別の TD 要素の COLSPAN 属性のプロパティを設定する関数を実行したりできるためです。
各フォルダーに必要な TD を作成したら、フォルダーごとに TR の作成を開始します。この TR には TD を 1 つだけ追加しますが、その COLSPAN 属性をフォルダー グループ内のフォルダー タグの数に 1 を加えたものに設定します。余分なものは、固定レイアウトの TABLE 内のスペースを埋めるために使用されます。
COLSPAN を取得するには、現在のコンテキスト (ここでは「.」で指定) と計算するノードの名前を渡します。この関数では、現在のコンテキスト、paraentNode、
XPath query で指定されたノードの数を取得します。次に、関数は、TD を満たすためにこの量に 1 を加えた値を返します。 この TD を使用して、ファイル グループ内の各ファイルを含む別の TABLE を埋め込みます。この時点からのプロセスは、外部 TABLE 変換の場合と同じです。最後のステップは、各ファイルにフィールドを追加することです。
一般的なレイアウトが完了したら、ユーザーが関連するタブをクリックするまで
他のフォルダーやファイル行を非表示にする など、ユーザー インターフェイス機能の追加を開始できます。この機能は、この機能をサポートするスクリプトを作成し、onclick xsl:attribute 要素をフォルダーおよびファイルの TD 要素に追加し、その値をスクリプト関数の名前に設定することで実現できます。 最後に、共通の機能が完了したら、クラス xsl:attributes を追加し、関連する classNames を STYLE または CSS に追加して、希望する外観を得ることができます。 この例では、Web データ ソリューションのデプロイに使用されるファイル フォルダー フィールド view
の基礎を作成します。 Microsoft の XML 仕様の詳細については、MSDN にアクセスしてください。

以上がXMLデータをHTMLに変換するサンプルコードの詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。