XMLデータをHTMに変換する
2022-02-05 19:20:43
を使い、シンプルな
XSL
スタイルシートで、XMLデータを
HTML
. XMLの仕様が進化し続けているため、新しいバージョンでみんなのニーズを満たすことが必要だと思われます。あるページの内容を表すXMLデータがあり、今その内容をレイアウトに変換したいとします。以下は、変換したいXMLです。
<?xmlversion='1.0'? >
<?xml-stylesheettype="text/xsl"href="article.xsl"? >
<xml>
<folders>
<folder>
<text>Folder1</text>
<files>
<ファイル>
<text>File1</text>
<fields>
<fields>
<data>
<type>string</type>
<length>50</length>
<value>somedata</value>
</data>
</field>
</fields>
</file>
</files>
</folder>
</folders>
</xml>
このコンテンツは、フォルダ、ファイル、フィールドの集合を表しています。各フォルダにはファイルが含まれ、各ファイルには入力データ用のドメインが含まれます。フォルダグループの各フォルダは、TABLEの最初の行のTR要素とTD要素として表現されます。ファイルグループの各ファイルは,フォルダのTR要素にネストされたTABLE要素の1行目の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:msxsl="urn:schemas-microsoft-com:xslt"
xmlns:fn=http://www.aaa.com/aaa>
<xsl:outputmethod="html"/>
<msxsl:scriptlanguage="JScript"implementations-prefix="fn">
function getElementCount(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(. ,'folder')"/>
</xsl:attribute>
<TABLECELLSPACING="0"CELLPADDING="0"
WIDTH="100%"BORDER="0"style="table-layout:fixed;">.BORDER="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(. ,'file')"/>
</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を加えた数と同じに設定します。余分な1つは、固定レイアウトスタイルのTABLEのスペースを埋めるために使用されます。
COLSPAN を取得するには、現在のコンテキスト(ここでは "." で指定)と計算ノードの名前を渡します。この関数では、現在のコンテキスト、paraentNode、および XPath クエリで指定されたノードの数が取得されます。そして、この関数では、この数に 1 を加えて TD に入力するように返します。
このTDには、ファイルグループ内の各ファイルが含まれる別のTABLEが埋め込まれます。ここからは、外部TABLEの変換と同じ処理になります。最終的には、各ファイルのフィールドを追加することになります。
一般的なレイアウトが完成したら、ユーザーが関連するタブをクリックするまで、他のフォルダやファイルの行を隠すなど、ユーザー・インターフェースの機能を追加しましょう。これは、この機能をサポートするスクリプトを記述し、フォルダとファイルのTD要素にonclick xsl:attribute要素を追加し、その値をスクリプト関数の名前に設定することで実現できます。
最後に、汎用的な機能が完成したら、クラスxsl:属性を追加し、STYLEやCSSで関連するclassNamesを追加することで、好みの外観にすることができます。
この例は、Web データソリューションの展開に使用される File-Folder-Field ビューの基礎を作成するものです。Microsoft の XML 仕様についての詳細は、MSDN を参照してください。
<?xmlversion='1.0'? >
<?xml-stylesheettype="text/xsl"href="article.xsl"? >
<xml>
<folders>
<folder>
<text>Folder1</text>
<files>
<ファイル>
<text>File1</text>
<fields>
<fields>
<data>
<type>string</type>
<length>50</length>
<value>somedata</value>
</data>
</field>
</fields>
</file>
</files>
</folder>
</folders>
</xml>
このコンテンツは、フォルダ、ファイル、フィールドの集合を表しています。各フォルダにはファイルが含まれ、各ファイルには入力データ用のドメインが含まれます。フォルダグループの各フォルダは、TABLEの最初の行のTR要素とTD要素として表現されます。ファイルグループの各ファイルは,フォルダのTR要素にネストされたTABLE要素の1行目の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:msxsl="urn:schemas-microsoft-com:xslt"
xmlns:fn=http://www.aaa.com/aaa>
<xsl:outputmethod="html"/>
<msxsl:scriptlanguage="JScript"implementations-prefix="fn">
function getElementCount(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(. ,'folder')"/>
</xsl:attribute>
<TABLECELLSPACING="0"CELLPADDING="0"
WIDTH="100%"BORDER="0"style="table-layout:fixed;">.BORDER="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(. ,'file')"/>
</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を加えた数と同じに設定します。余分な1つは、固定レイアウトスタイルのTABLEのスペースを埋めるために使用されます。
COLSPAN を取得するには、現在のコンテキスト(ここでは "." で指定)と計算ノードの名前を渡します。この関数では、現在のコンテキスト、paraentNode、および XPath クエリで指定されたノードの数が取得されます。そして、この関数では、この数に 1 を加えて TD に入力するように返します。
このTDには、ファイルグループ内の各ファイルが含まれる別のTABLEが埋め込まれます。ここからは、外部TABLEの変換と同じ処理になります。最終的には、各ファイルのフィールドを追加することになります。
一般的なレイアウトが完成したら、ユーザーが関連するタブをクリックするまで、他のフォルダやファイルの行を隠すなど、ユーザー・インターフェースの機能を追加しましょう。これは、この機能をサポートするスクリプトを記述し、フォルダとファイルのTD要素にonclick xsl:attribute要素を追加し、その値をスクリプト関数の名前に設定することで実現できます。
最後に、汎用的な機能が完成したら、クラスxsl:属性を追加し、STYLEやCSSで関連するclassNamesを追加することで、好みの外観にすることができます。
この例は、Web データソリューションの展開に使用される File-Folder-Field ビューの基礎を作成するものです。Microsoft の XML 仕様についての詳細は、MSDN を参照してください。
関連
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン