XML定義ファイルの大変更で人に優しく

しばらくなりを潜めていたS2JFaceですが、水面下でちょっとずつ修正中です。

先日コミッタになった id:bskuroneko さんの提案でXML定義ファイルの仕様を大変更しました。

いままでは、

<control type="button" />

というように control 要素の type 属性でコントロールの種類を指定していたのですが、これだとXMLエディタ上でDTDによる補完が効きません。

そこで、

<button />

というように、コントロール毎にタグを用意するようにしました。これで、XMLエディタ上でもバンバン補完が効く上、全体としてもXMLの記述量が減りました。

以前紹介したボタンのサンプル画面を例に取ると・・・

これが以前のバージョンのXML。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE template PUBLIC "-//SEASAR//DTD S2JFace 0.1//EN" 
	"http://www.seasar.org/dtd/s2jface01.dtd">
<template name="buttonRendererTest" extends="RendererTest.xml">
  <extends id="buttonRendererTest" property="title">ButtonRendererTest</extends>
  <extends id="contents" />
  
  <window id="buttonRendererTest">
    <composite id="contents" type="box">
      <composite type="box" layout="row"
        layoutParam="type=VERTICAL; spacing=10">
        <!-- styleを省略した場合、style="PUSH" となります -->
        <control type="button">
          <property name="text">プッシュボタン</property>
          <property name="toolTip">ツールチップテキスト</property>
        </control>

        <control type="button" style="FLAT">
          <property name="text">フラットボタン</property>
        </control>

        <control type="button" style="RADIO">
          <property name="text">ラジオボタン</property>
        </control>

        <control type="button" style="CHECK">
          <property name="text">チェックボタン(OFF)</property>
        </control>

        <control type="button" style="CHECK">
          <property name="text">チェックボタン(ON)</property>
          <property name="selection">true</property>
        </control>

        <control type="button" style="TOGGLE">
          <property name="text">トグルボタン(OFF)</property>
        </control>

        <control type="button" style="TOGGLE">
          <property name="text">トグルボタン(ON)</property>
          <property name="selection">true</property>
        </control>

        <control type="button">
          <property name="text">フォントを変更</property>
          <property name="font">ＭＳ 明朝</property>
          <property name="fontSize">15</property>
          <property name="fontStyle">BOLD, ITALIC</property>
        </control>
      </composite>

      <composite type="box" layout="row"
        layoutParam="type=VERTICAL; spacing=10">
        <property name="width">30</property>
        <property name="height">30</property>

        <control type="button" style="ARROW, UP" />

        <control type="button" style="ARROW, RIGHT" />

        <control type="button" style="ARROW, DOWN" />

        <control type="button" style="ARROW, LEFT" />
      </composite>
    </composite>
  </window>
</template>

で、これが新しい方。全体的にHTMLに近い雰囲気でスッキリしました。記述量も67行→47行と、当社比３０％減です！！

<?xml version="1.0" encoding="UTF-8"?>
<template name="WindowRendererTest" xmlns="http://s2jface.sandbox.seasar.org">
  <window id="ButtonRendererTest" title="ButtonRendererTest"
    image="/images/component.gif" defaultButtonId="okButton">
    <gridLayout numColumns="1">
      <gridData horizontalAlignment="FILL" />
    </gridLayout>

    <composite id="contents">
      <rowLayout type="HORIZONTAL" marginWidth="10" marginHeight="10"
        spacing="10" />
      <commonAttributes fontHeight="20" />

      <composite>
        <rowLayout type="VERTICAL" spacing="10" />
        <button text="プッシュボタン" toolTipText="ツールチップテキスト" />
        <button style="FLAT" text="フラットボタン" />
        <button style="CHECK" text="チェックボタン(OFF)" />
        <button style="CHECK" text="チェックボタン(ON)" selection="true" />
        <button style="TOGGLE" text="トグルボタン(OFF)" />
        <button style="TOGGLE" text="トグルボタン(ON)" selection="true" />
        <button text="フォントを変更" fontName="ＭＳ 明朝" fontHeight="15"
          fontStyle="BOLD, ITALIC" />
      </composite>

      <composite>
        <rowLayout type="VERTICAL" spacing="10">
          <rowData width="30" height="30" />
        </rowLayout>

        <button style="ARROW, UP" />
        <button style="ARROW, RIGHT" />
        <button style="ARROW, DOWN" />
        <button style="ARROW, LEFT" />
      </composite>
    </composite>

    <label style="SEPARATOR, HORIZONTAL" />

    <composite>
      <fillLayout type="HORIZONTAL" spacing="5" />

      <button id="okButton" text="OK"></button>
      <button id="ngButton" text="NG"></button>
    </composite>
  </window>
</template>