ブログ@kaorun55

HoloLensやKinectなどのDepthセンサーを中心に書いています。

XSL でコンボボックスコンポーネント

XML・XSL

次はコンボボックス

こんなの作った

XML

<?xml version="1.0" encoding="utf-8" ?>
<?xml-stylesheet href="comboBox.xsl" type="text/xsl" ?>

<root>
  <element>
    <address>
      <selected>3</selected>
      <label>都道府県</label>
      <option>
        <text>東京都</text>
        <text>千葉県</text>
        <text>神奈川県</text>
        <text>茨城県</text>
        <text>栃木県</text>
        <text>群馬県</text>
      </option>
    </address>
  </element>
</root>

XSL

  • comboBox.xsl
<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet
  version="1.0"
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
  xmlns:exslt="http://exslt.org/common"
  xmlns:msxsl="urn:schemas-microsoft-com:xslt"
  exclude-result-prefixes="exslt msxsl">

  <!--
  Smart trick - exslt:node-set() in Internet Explorer
  http://www.tkachenko.com/blog/archives/000704.html
  -->

  <msxsl:script language="JScript" implements-prefix="exslt">
    this['node-set'] =  function (x) {
    return x;
    }
  </msxsl:script>

  <xsl:template match="/">
    <HTML>
      <head>
        <title>test</title>
      </head>
      <body>
        <!--都道府県を表示-->
        <xsl:call-template name="comboBox">
          <xsl:with-param name="node">
            <xsl:copy-of select="root/element/address"/>
          </xsl:with-param>
        </xsl:call-template>
        <br/>
      </body>
    </HTML>
  </xsl:template>

  <!--テキストボックス-->
  <xsl:template name="comboBox">
    <xsl:param name ="node"/>

    <!--フォーカス移動のための固有ID-->
    <xsl:variable name="id" select="generate-id(exslt:node-set($node)/child::node()[1])"/>

    <!--ノードセットからラベルと初期選択番号を抽出-->
    <xsl:variable name="label" select="exslt:node-set($node)/node()[1]/label"/>
    <xsl:variable name="selected" select="exslt:node-set($node)/node()[1]/selected"/>

    <!--テキストの前のラベル-->
    <xsl:if test="$label">
      <label>
        <xsl:attribute name="for">
          <xsl:value-of select="$id" />
        </xsl:attribute>
        <xsl:value-of select="$label"/>
      </label>
    </xsl:if>

    <!--コンボボックス-->
    <!--コンボボックスの表示-->
    <select>
      <xsl:attribute name="id">
        <xsl:value-of select="$id"/>
      </xsl:attribute>
      <xsl:attribute name="name">
        <xsl:value-of select="$id"/>
      </xsl:attribute>

      <!--要素を追加-->
      <xsl:apply-templates select="exslt:node-set($node)/node()[1]/option/text">
        <xsl:with-param name="selected" select="$selected"/>
      </xsl:apply-templates>
    </select>
  </xsl:template>

  <!--コンボボックスの要素を追加-->
  <xsl:template match="text">
    <xsl:param name="selected"/>

    <option>
      <xsl:attribute name="value">
        <xsl:value-of select="." />
      </xsl:attribute>
      <!--初期選択番号-->
      <xsl:if test="$selected = position()">
        <xsl:attribute name="selected"/>
      </xsl:if>
      
      <xsl:value-of select="." />
    </option>
  </xsl:template>
</xsl:stylesheet>