ボタンとラベルのサポートはほぼ完成 & プロパティ引き継ぎ機能
ボタンとラベルはSWTで表現できることはすべて表現できるようになりました。
たまには、ビジュアルに結果をお見せしましょう。
ラベルの描画例
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="labelRendererTest">
<window id="labelRendererTest" title="LabelRendererTest" x="center"
y="middle" layout="row"
layoutParam="type=HORIZONTAL; marginHeight=10; marginWidth=10; spacing=10">
<property name="fontSize" value="20" />
<composite type="box" layout="row" layoutParam="type=VERTICAL">
<control type="label">
<property name="text" value="ラベル" />
<property name="toolTip" value="ツールチップテキスト" />
</control>
<control type="label" style="BORDER">
<property name="text" value="枠付きラベル" />
</control>
<control type="label">
<property name="image" value="../template/container.gif" />
</control>
<control type="label" style="BORDER">
<property name="text" value="複数行テキスト1行目\n\t複数行テキスト2行目\n3行目" />
</control>
<control type="label" style="WRAP, BORDER">
<property name="text"
value="WRAPスタイルを適用することで、長い文字列は折り返して表示されます。" />
<property name="fontSize" value="12" />
<property name="width" value="200" />
<property name="height" value="100" />
</control>
</composite>
<composite type="box" layout="row" layoutParam="type=VERTICAL">
<property name="width" value="300" />
<control type="label" style="BORDER, LEFT">
<property name="text" value="左寄せ1" />
</control>
<control type="label" style="BORDER">
<property name="text" value="左寄せ2" />
<property name="alignment" value="LEFT" />
</control>
<control type="label" style="BORDER, CENTER">
<property name="text" value="中央1" />
</control>
<control type="label" style="BORDER">
<property name="text" value="中央2" />
<property name="alignment" value="CENTER" />
</control>
<control type="label" style="BORDER, RIGHT">
<property name="text" value="右寄せ1" />
</control>
<control type="label" style="BORDER">
<property name="text" value="右寄せ2" />
<property name="alignment" value="RIGHT" />
</control>
<control type="label" style="SEPARATOR, HORIZONTAL" />
<control type="label" style="SEPARATOR, VERTICAL">
<property name="height" value="100" />
</control>
<control type="label" style="BORDER, CENTER">
<property name="text" value="色・フォントを変更" />
<property name="font" value="ＭＳ 明朝" />
<property name="fontSize" value="15" />
<property name="fontStyle" value="BOLD, ITALIC" />
<property name="foregroundColor" value="yellow" />
<property name="backgroundColor" value="blue" />
</control>
</composite>
</window>
</template>
ボタンの描画例
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">
<window id="buttonRendererTest" title="ButtonRendererTest" x="center"
y="middle" layout="row"
layoutParam="type=HORIZONTAL; marginHeight=10; marginWidth=10; spacing=10">
<property name="fontSize" value="20" />
<composite type="box" layout="row"
layoutParam="type=VERTICAL; spacing=10">
<!-- styleを省略した場合、style="PUSH" となります -->
<control type="button">
<property name="text" value="プッシュボタン" />
<property name="toolTip" value="ツールチップテキスト" />
</control>
<control type="button" style="FLAT">
<property name="text" value="フラットボタン" />
</control>
<control type="button" style="RADIO">
<property name="text" value="ラジオボタン" />
</control>
<control type="button" style="CHECK">
<property name="text" value="チェックボタン" />
</control>
<control type="button" style="TOGGLE">
<property name="text" value="トグルボタン" />
</control>
<control type="button">
<property name="text" value="フォントを変更" />
<property name="font" value="ＭＳ 明朝" />
<property name="fontSize" value="15" />
<property name="fontStyle" value="BOLD, ITALIC" />
</control>
</composite>
<composite type="box" layout="row"
layoutParam="type=VERTICAL; spacing=10">
<property name="width" value="30" />
<property name="height" value="30" />
<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>
</window>
</template>いかがでしょう？ WTP付属のXMLエディタとか、DTDから補完してくれるエディタを使えば、人力でも結構サクサクと画面が作れてしまいます。
プロパティの引き継ぎ機能
S2JFaceでは、「手作業でXMLを書く場合もできるだけ最小コストで書ける」ことを目指しています。
そこで、「プロパティの引き継ぎ機能」という本来SWT/JFaceにはない機能をサポートしています。
たとえば、先ほどのボタンのサンプルでは、矢印ボタンが４個並んでいます。今回はサイズを指定しているので、本来ならば以下のようにそれぞれに対して width と height を指定しなくてはなりません。
<composite type="box" layout="row" layoutParam="type=VERTICAL; spacing=10">
<control type="button" style="ARROW, UP">
<property name="width" value="30" />
<property name="height" value="30" />
</control>
<control type="button" style="ARROW, RIGHT">
<property name="width" value="30" />
<property name="height" value="30" />
</control>
<control type="button" style="ARROW, DOWN">
<property name="width" value="30" />
<property name="height" value="30" />
</control>
<control type="button" style="ARROW, LEFT">
<property name="width" value="30" />
<property name="height" value="30" />
</control>
</composite>これはちょっと面倒ですね。
そこで、以下のように親要素に width と height を指定するだけで、すべての子要素に自動的に属性が適用されます。
<composite type="box" layout="row"
layoutParam="type=VERTICAL; spacing=10">
<property name="width" value="30" />
<property name="height" value="30" />
<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>かなりスッキリしました。
あとでサイズを変更したい場合も、一カ所修正すればよいので、メンテナンス性も格段に上がります。
引き継ぎの仕方についても、もう少し細かく制御できるのですが、大抵の場合は何も考えなくてもそれなりに引き継ぐようになっています。
細かい機能だけど、こういうところが使いやすさに直結するはずなんです。
