1

w3schools の XML チュートリアルを読んでいると、XSLT を使用した XML のスタイリングに関する次のページに出くわしました 。

そこには単純なコードがいくつかあります。2 つの包括的な食品カテゴリ<waffles>を<other> コードに追加しました。最小限の XSLT を使用して XML のスタイルを設定し、すべて<waffle> <food>の背景がオレンジ色になり、すべての背景<other><food>がシアン色になるようにするにはどうすればよいか考えていました。以下のようなコード。

上記のリンクで元のコードを確認できます。これが私のコードです。

XML:

    <?xml version="1.0" encoding="ISO-8859-1"?>
<!-- Edited by XMLSpy® -->
<breakfast_menu>
     <waffles>
    <food>
        <name>Belgian Waffles</name>
        <price>$5.95</price>
        <description>two of our famous Belgian Waffles with plenty of real maple syrup</description>
        <calories>650</calories>
    </food>
    <food>
        <name>Strawberry Belgian Waffles</name>
        <price>$7.95</price>
        <description>light Belgian waffles covered with strawberries and whipped cream</description>
        <calories>900</calories>
    </food>
    <food>
        <name>Berry-Berry Belgian Waffles</name>
        <price>$8.95</price>
        <description>light Belgian waffles covered with an assortment of fresh berries and whipped cream</description>
        <calories>900</calories>
    </food>
     </waffles>
     <other>
    <food>
        <name>French Toast</name>
        <price>$4.50</price>
        <description>thick slices made from our homemade sourdough bread</description>
        <calories>600</calories>
    </food>
    <food>
        <name>Homestyle Breakfast</name>
        <price>$6.95</price>
        <description>two eggs, bacon or sausage, toast, and our ever-popular hash browns</description>
        <calories>950</calories>
    </food>
     <other>
</breakfast_menu>

XSLT:

<?xml version="1.0" encoding="ISO-8859-1"?>
<!-- Edited by XMLSpy® -->
    <html xsl:version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns="http://www.w3.org/1999/xhtml">
      <body style="font-family:Arial;font-size:12pt;background-color:#EEEEEE">
    <xsl:for-each select="breakfast_menu/waffles">
        <div style="background-color:ORANGE;">
          <xsl:for-each select="food">
          <div style="background-color:teal;color:white;padding:4px">
            <span style="font-weight:bold"><xsl:value-of select="name"/></span>
            - <xsl:value-of select="price"/>
          </div>
          <div style="margin-left:20px;margin-bottom:1em;font-size:10pt">
            <xsl:value-of select="description"/>
            <span style="font-style:italic">
              <xsl:value-of select="calories"/> (calories per serving)
            </span>
          </div>
         </xsl:for-each>
       </div>    
    </xsl:for-each>

    <xsl:for-each select="breakfast_menu/other">
        <div style="background-color:CYAN;">
          <xsl:for-each select="food">
          <div style="background-color:teal;color:white;padding:4px">
            <span style="font-weight:bold"><xsl:value-of select="name"/></span>
            - <xsl:value-of select="price"/>
          </div>
          <div style="margin-left:20px;margin-bottom:1em;font-size:10pt">
            <xsl:value-of select="description"/>
            <span style="font-style:italic">
              <xsl:value-of select="calories"/> (calories per serving)
            </span>
          </div>
         </xsl:for-each>
       </div>    
    </xsl:for-each>

      </body>
    </html>
4

2 に答える 2

1

ここで、XSLT の最も基本的な概念の 1 つであるテンプレートの機能を利用できます。

朝ごはん_メニュー要素の子要素を探すことから始めることができます

<xsl:apply-templates select="breakfast_menu/*"/>

次に、そのような要素に一致するテンプレートがあります

<xsl:template match="breakfast_menu/*">

このテンプレートでは、xsl:chooseを使用してスタイル属性を作成できます。

  <div>
     <xsl:attribute name="style">
        <xsl:choose>
           <xsl:when test="local-name() = 'waffles'">background-color:ORANGE;</xsl:when>
           <xsl:when test="local-name() = 'other'">background-color:CYAN;</xsl:when>
        </xsl:choose>
     </xsl:attribute>

この場合の完全な XSLT は次のとおりです。xsl:for-eachの使用を避けるために、テンプレートを使用してfood要素に一致させることにも注意してください。

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
   <xsl:output method="html" indent="yes"/>
   <xsl:template match="/">
      <html>
         <body style="font-family:Arial;font-size:12pt;background-color:#EEEEEE">
            <xsl:apply-templates select="breakfast_menu/*"/>
         </body>
      </html>
   </xsl:template>

   <xsl:template match="breakfast_menu/*">
      <div>
         <xsl:attribute name="style">
            <xsl:choose>
               <xsl:when test="local-name() = 'waffles'">background-color:ORANGE;</xsl:when>
               <xsl:when test="local-name() = 'other'">background-color:CYAN;</xsl:when>
            </xsl:choose>
         </xsl:attribute>
         <xsl:apply-templates select="food"/>
      </div>
   </xsl:template>

   <xsl:template match="food">
      <div style="background-color:teal;color:white;padding:4px">
         <span style="font-weight:bold">
            <xsl:value-of select="name"/>
         </span> - 
         <xsl:value-of select="price"/></div>
      <div style="margin-left:20px;margin-bottom:1em;font-size:10pt">
         <xsl:value-of select="description"/>
         <span style="font-style:italic">
            <xsl:value-of select="calories"/> (calories per serving) </span>
      </div>
   </xsl:template>
</xsl:stylesheet>

xsl:chooseの使用を避けるためのもう 1 つの少し異なるアプローチは、ワッフルと他の要素に合わせて個別のテンプレートを用意することです。「breakfast_menu/*」に一致する現在のテンプレートを次の 2 つのテンプレートに置き換えるだけです。

<xsl:template match="breakfast_menu/waffles">
  <div style="background-color:ORANGE;">
     <xsl:apply-templates select="food"/>
  </div>
</xsl:template>

<xsl:template match="breakfast_menu/other">
  <div style="background-color:CYAN;">
     <xsl:apply-templates select="food"/>
  </div>
</xsl:template>

そして、たくさんの子要素があり、デフォルトの「値」が必要な場合は、次のようにすることができます

<xsl:template match="breakfast_menu/waffles" priority="2">
  <div style="background-color:ORANGE;">
     <xsl:apply-templates select="food"/>
  </div>
</xsl:template>

<xsl:template match="breakfast_menu/*" priority="1">
  <div style="background-color:CYAN;">
     <xsl:apply-templates select="food"/>
  </div>
</xsl:template>

この場合、 priority属性の使用に注意してください。それ以外の場合、両方のテンプレートがwaffleに一致するためです。一方の優先順位が他方よりも高いことを XSLT プロセッサに通知しない限り、これはエラーになります。

于 2012-09-14T08:00:45.127 に答える
0

この変換:

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
 xmlns:my="my:my" exclude-result-prefixes="my">
 <xsl:output omit-xml-declaration="yes" indent="yes"/>
 <xsl:strip-space elements="*"/>

 <my:colors>
  <color>ORANGE</color>
  <color>CYAN</color>
 </my:colors>

 <xsl:variable name="vColors" select="document('')/*/my:colors/*"/>

 <xsl:template match="/">
    <html xsl:version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns="http://www.w3.org/1999/xhtml">
      <body style="font-family:Arial;font-size:12pt;background-color:#EEEEEE">
      <xsl:apply-templates/>
      </body>
    </html>
 </xsl:template>

 <xsl:template match="*[food]">
        <div style="background-color:{$vColors[2 -(name(current())='waffles')]};">
          <xsl:for-each select="food">
          <div style="background-color:teal;color:white;padding:4px">
            <span style="font-weight:bold"><xsl:value-of select="name"/></span>
            - <xsl:value-of select="price"/>
          </div>
          <div style="margin-left:20px;margin-bottom:1em;font-size:10pt">
            <xsl:value-of select="description"/>
            <span style="font-style:italic">
              <xsl:value-of select="calories"/> (calories per serving)
            </span>
          </div>
         </xsl:for-each>
       </div>
 </xsl:template>
</xsl:stylesheet>

提供された XML ドキュメントに適用した場合:

<breakfast_menu>
     <waffles>
    <food>
        <name>Belgian Waffles</name>
        <price>$5.95</price>
        <description>two of our famous Belgian Waffles with plenty of real maple syrup</description>
        <calories>650</calories>
    </food>
    <food>
        <name>Strawberry Belgian Waffles</name>
        <price>$7.95</price>
        <description>light Belgian waffles covered with strawberries and whipped cream</description>
        <calories>900</calories>
    </food>
    <food>
        <name>Berry-Berry Belgian Waffles</name>
        <price>$8.95</price>
        <description>light Belgian waffles covered with an assortment of fresh berries and whipped cream</description>
        <calories>900</calories>
    </food>
     </waffles>
     <other>
    <food>
        <name>French Toast</name>
        <price>$4.50</price>
        <description>thick slices made from our homemade sourdough bread</description>
        <calories>600</calories>
    </food>
    <food>
        <name>Homestyle Breakfast</name>
        <price>$6.95</price>
        <description>two eggs, bacon or sausage, toast, and our ever-popular hash browns</description>
        <calories>950</calories>
    </food>
     </other>
</breakfast_menu>

必要な正しい結果が生成されます。

<html xmlns="http://www.w3.org/1999/xhtml">
   <body style="font-family:Arial;font-size:12pt;background-color:#EEEEEE">
      <div xmlns="" style="background-color:ORANGE;">
         <div style="background-color:teal;color:white;padding:4px">
            <span style="font-weight:bold">Belgian Waffles</span>
            - $5.95</div>
         <div style="margin-left:20px;margin-bottom:1em;font-size:10pt">two of our famous Belgian Waffles with plenty of real maple syrup<span style="font-style:italic">650 (calories per serving)
            </span>
         </div>
         <div style="background-color:teal;color:white;padding:4px">
            <span style="font-weight:bold">Strawberry Belgian Waffles</span>
            - $7.95</div>
         <div style="margin-left:20px;margin-bottom:1em;font-size:10pt">light Belgian waffles covered with strawberries and whipped cream<span style="font-style:italic">900 (calories per serving)
            </span>
         </div>
         <div style="background-color:teal;color:white;padding:4px">
            <span style="font-weight:bold">Berry-Berry Belgian Waffles</span>
            - $8.95</div>
         <div style="margin-left:20px;margin-bottom:1em;font-size:10pt">light Belgian waffles covered with an assortment of fresh berries and whipped cream<span style="font-style:italic">900 (calories per serving)
            </span>
         </div>
      </div>
      <div xmlns="" style="background-color:CYAN;">
         <div style="background-color:teal;color:white;padding:4px">
            <span style="font-weight:bold">French Toast</span>
            - $4.50</div>
         <div style="margin-left:20px;margin-bottom:1em;font-size:10pt">thick slices made from our homemade sourdough bread<span style="font-style:italic">600 (calories per serving)
            </span>
         </div>
         <div style="background-color:teal;color:white;padding:4px">
            <span style="font-weight:bold">Homestyle Breakfast</span>
            - $6.95</div>
         <div style="margin-left:20px;margin-bottom:1em;font-size:10pt">two eggs, bacon or sausage, toast, and our ever-popular hash browns<span style="font-style:italic">950 (calories per serving)
            </span>
         </div>
      </div>
   </body>
</html>

説明:

以下の適切な使用:

  1. テンプレートマッチング。

  2. AVT (属性値テンプレート)。

于 2012-09-14T13:08:40.843 に答える