さて、少し時間が空いてしまいました。

Table や Tree については id:dkameya さんがレンダラの実装をガリガリすすめてくれているので、私の方は XML 記述の省力化に取り組んでいきます。

実システムでは似たような画面を大量に作ることが多いため、作業の省力化とデザインの統一化のため、XMLのインクルードや継承といった機能が必要になってきます。これは、S2JSFMayaaでも実現されています。

S2JFace でも、この機能の実現を考えていきます。(当初は、Mayaa をそのまま使うことも考えたのですが、.mayaa ファイルを別途作らなければならないのが嫌だったのと、今回はそもそも純粋な HTML にこだわる必要もないので、S2JFace の機能として実装した方が最終的には使いやすいのではないかと思っています)

画面定義 XML の継承

たとえば、以下のような画面定義XML(commonWindow.xml)を、共通レイアウトとして使用し、コメントを入れた①の部分を継承先のXMLで記述するような使い方を考えます。

つまり、ウィンドウのガラやレイアウトの指定を共通化したいわけです。

<template name="commonWindow">
  <window id="commonWindow" title="commonWindow" x="center"
    y="middle" minButton="false" maxButton="false" closeButton="false"
    resizable="false" layout="grid" layoutParam="numColumns=1">
    <property name="defaultButton" value="okButton" />

    <composite id="contentPosition" type="box" layout="row"
      layoutParam="type=HORIZONTAL; marginHeight=10; marginWidth=10; spacing=10">
        
      <!--
        ① この部分中身を継承先で記述
      -->
        
    </composite>

  </window>
</template>

継承先(buttonRendererTest.xml)では、Template 要素の extends 属性で継承元のXMLファイル名を指定します。

さらに、Template 要素の子として新たに作る extends 要素を指定して、具体的な継承の方法を指定します。

  <extends id="contentPosition" replace="false"/>

まず、上のような指定で、継承元の contentPosition という id を持つ要素に対して、継承先と置き換えることを指定します。これにより、buttonRendererTest.xml で id=contentPosition を持つ composite の中身(最後に示す XML の②の部分)が継承元(①の部分)と置き換えられます。

このとき、replace="false" となっているため、composite 要素自体は置き換えられません。つまり、contentPosition に指定されたレイアウトは継承元が有効になります。

逆に、replace="true" の場合は、composite 要素そのものが継承先で置き換えられます。


次に、ウインドウタイトルなど、特定要素の属性を置き換えたい場合は以下のように attr 属性で属性名を指定して置き換えます。

  <extends id="commonWindow" attr="title"/>buttonRendererTest</extends>

これで、継承元の commonWindow という id を持つ要素(つまり、Window要素) の title 属性が buttonRendererTest に置き換えられます。

ここまでをまとめると、継承先のXMLはこんな感じになります。

<template name="buttonRendererTest" extends="commonWindow.xml">
  <!-- id="contentPosition" の要素の内部を上書きする(要素自体は上書きしない) -->
  <extends id="contentPosition" replace="false"/>
  
  <!-- id="commonWindow" の要素の title 属性を buttonRendererTest に上書きする -->
  <extends id="commonWindow" attr="title"/>buttonRendererTest</extends>
  
  <window id="buttonRendererTest" />

    <composite id="contentPosition">
        
      <!--
        ② この部分が、commonWindow.xml の①部分にはめ込まれる
      -->
        
    </composite>

  </window>
</template>

継承に関する情報は、Template 要素内にのみ表示し、Window 要素より下は従来通りの書き方でよいわけです。(Mayaa における .mayaa の記述内容を template 要素に書いているイメージかな)

さて、初期アイデアがまとまったので、実装してみるか。