XSLT を使用して XML データを HTML に変換する

単純な XSL スタイルシートを使用して、XML データを HTML に変換します。 XML 仕様が進化し続けるにつれて、新しいバージョンですべての人のニーズを満たす必要があるようですが、残念なことに、単純な変換を行うことが常に仕様を悩ませてきました。

ページのコンテンツを表す XML データがあり、そのコンテンツをレイアウトに変換したいとします。変換したい XML は次のとおりです:

<?xml version=&#39;1.0&#39;?>
<?xml-stylesheet type="text/xsl" href="article.xsl"?>
<xml>
    <folders>
        <folder>
            <text>Folder 1</text>
            <files>
                <file>
                    <text>File 1</text>
                    <fields>
                        <field>
                            <data>
                                <type>string</type>
                                <length>50</length>
                                <value>some data</value>
                            </data>
                        </field>
                    </fields>
                </file>
            </files>
        </folder>
    </folders>
</xml>

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

このアイデアを実装するには、XML を走査し、XSL に基づいてテーブルを構築する必要があります。

この変換に使用される XSL は次のとおりです:

<?xml version="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.mycompany.com/mynamespace">
<xsl:output method="html"/>
<msxsl:script language="JScript" implements-PRefix="fn">
    function getElementCount(nodelist, what) {
        var rtrn = 0;
        rtrn = nodelist[0].parentNode.selectNodes(what).length;
        return (rtrn + 1); //1 is added for filler TD
    }
</msxsl:script>
<xsl:template match="/">
<TABLE CELLSPACING="0" CELLPADDING="0"
    WIDTH="100%" BORDER="0" ID="tblRoot" NAME="tblRoot"
    style="table-layout:fixed;">
    <TR>
        <xsl:for-each select="xml/folders/folder">
        <xsl:element name="TD">
            <xsl:attribute name="style">width:55px</xsl:attribute>
            <xsl:value-of select="text"/>
        </xsl:element>
        </xsl:for-each>
        <TD> </TD>
    </TR>
    <xsl:for-each select="xml/folders/folder">
    <TR>
        <xsl:element name="TD">
            <xsl:attribute name="colspan">
                <xsl:value-of select="fn:getElementCount(., &#39;folder&#39;)"/>
            </xsl:attribute>
                
            <TABLE CELLSPACING="0" CELLPADDING="0"
                WIDTH="100%" BORDER="0" style="table-layout:fixed;">
                <TR>
                    <xsl:for-each select="files/file">
                    <xsl:element name="TD">
                        <xsl:attribute name="style">width:55px;</xsl:attribute>
                        <xsl:value-of select="text"/>
                    </xsl:element>
                    </xsl:for-each>
                    <TD> </TD>
                </TR>
                <xsl:for-each select="files/file">
                    <TR>
                        <xsl:element name="TD">
                            <xsl:attribute name="colspan">
                                <xsl:value-of select="fn:getElementCount(., &#39;file&#39;)"/>
                            </xsl:attribute>
                        <xsl:for-each select="fields/field">
                        <xsl:element name="INPUT">
                            <xsl:attribute name="type">text</xsl:attribute>
                            <xsl:attribute name="maxlength">
                                <xsl:value-of select="data/length"/>
                            </xsl:attribute>
                            <xsl:attribute name="value">
                                <xsl:value-of select="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 クエリで指定されたノードの数を取得します。次に、関数は、TD を満たすためにこの量に 1 を加えた値を返します。

この TD では、ファイル グループ内の各ファイルを含む別の TABLE をその中に埋め込みます。この時点からのプロセスは、外部 TABLE 変換の場合と同じです。最後のステップは、各ファイルにフィールドを追加することです。今回は、埋め込みテーブルを再度作成せず、現在の TD にフィールドを追加しただけです。

一般的なレイアウトが完成したら、ユーザーが関連するタブをクリックするまで他のフォルダーやファイル行を非表示にするなど、ユーザー インターフェイス機能の追加を開始できます。この機能を実現するには、この機能をサポートするスクリプトを作成し、onclick xsl:attribute 要素をフォルダーおよびファイルの TD 要素に追加し、その値をスクリプト関数の名前に設定します。

最後に、共通の機能が完了したら、クラス xsl:attributes を追加し、関連する classNames を STYLE または CSS に追加して、希望する外観を得ることができます。

この例では、Web データ ソリューションのデプロイに使用されるファイル - フォルダー - フィールド ビューの基礎を作成します。 Microsoft の XML 仕様の詳細については、MSDN にアクセスしてください。

上記は、XSLT を使用して XML データを HTML に変換する内容です。さらに関連する内容については、PHP 中国語 Web サイト (www.php.cn) に注目してください。