コンポーネントプロパティのリスナー設定

#プロパティのリスナー
コンポーネントを作成するときには、プロパティを追加すると思います。
プロパティは、ユーザーにデザイナー上で値を設定してもらうことになります。
デザイナーで値が変更されるときに、何らかの処理を行いたい場合に設定するのがプロパティのリスナーになります。

#PropertyListener
リスナーはデザイナーで動作しますので、xscファイルへ記述します。

```
<PropertyListener class="クラス" target="対象プロパティ名"/>
```
ここで指定するクラスは、com.infoteria.asteria.gui.property.event.PropertyChangeListener を実装したクラスである必要があります。

ちょっと面倒な感じですね。

そこで出てくるのが、SimplePropertyController です。このクラスはPropertyChangeListenerを実装してあり、xscへ記述するだけで使用できるようになっています。

さっそく使い方を見てみます。

#XSCサンプル

以下は、JavaInterpreterコンポーネントで出力したカスタムコンポーネントのxscファイルを修正したものです。

```
<?xml version="1.0" encoding="UTF-8"?>
<ComponentDefine>
	<xsc lang="ja" xmlns="http://www.infoteria.com/asteria/flowengine/definition">
		<Component category="その他" icon="P1.png" name="Prop1Component"  displayName="プロパティ１"  toolTip="">
			<Class>com.asteria.qa.component.Prop1Component</Class>
			<Property mapping="false" name="Exception" type="exception"/>
			
			<Property name="propVisible" displayName="プロパティVisible" type="choice">
			  <ChoiceItem>
			    <Include name="All" displayName="全て表示"/>
			    <Include name="A" displayName="Aだけ表示"/>
			    <Include name="B" displayName="Bだけ表示"/>
			  </ChoiceItem>
			</Property>

			<Property name="propA" displayName="プロパティA" type="string"></Property>
			<Property name="propB" displayName="プロパティB" type="string"></Property>
			
			<PropertyListener class="com.infoteria.asteria.flowbuilder2.plugin.SimplePropertyController" target="propVisible">
				<Case value="A">
					<Target name="propA" visible="true"/>
					<Target name="propB" visible="false"/>
				</Case>
				<Case value="B">
					<Target name="propA" visible="false"/>
					<Target name="propB" visible="true"/>
				</Case>
				<Default>
					<Target name="propA" visible="true"/>
					<Target name="propB" visible="true"/>
				</Default>
			</PropertyListener>
			
			<Input accept="Text" default="Text"/>
			<Output accept="Text" default="Text"/>
		</Component>
	</xsc>
</ComponentDefine>

```
プロパティを３つ「propVisible、propA、propB」追加しています。
propVisibleプロパティで選択した値によって、他の２つのプロパティを表示したり、隠したりするように定義してあります。

詳しく見てみると

PropertyListenerエレメントでSimplePropertyControllerを指定しています。

```
<PropertyListener class="com.infoteria.asteria.flowbuilder2.plugin.SimplePropertyController" target="propVisible">
```
target="propVisible"とは、propVisibleプロパティが変更されたりしたらSimplePropertyControllerで何か処理をしてね！ということです。

PropertyListenerエレメントの子エレメントにCase、Defaultエレメントが定義されています。
switch分みたいですよね、まさにそのとおりです。

```
        <Case value="A">
            <Target name="propA" visible="true"/>
            <Target name="propB" visible="false"/>
        </Case>
　　　　　　　　　...
        <Default>
            <Target name="propA" visible="true"/>
            <Target name="propB" visible="true"/>
        </Default>
```
propVisibleプロパティの値が「A」のときは、propAプロパティを表示して、propBプロパティを隠してね。いつもは両方表示してね！っということです。

#値の操作
propAとpropBの値を操作するプロパティ「propValue」を追加してみます。

```
        <Property name="propValue" displayName="プロパティValue" type="choice">
            <ChoiceItem>
                <Include name="Clear" displayName="全てクリア"/>
                <Include name="A100" displayName="A値100"/>
                <Include name="B200" displayName="B値200"/>
            </ChoiceItem>
        </Property>
```
propAに値１００を設定するか、propBに値２００を設定するか、両方クリアするかを指定できるようにします。プロパティの設定としては選択肢があるだけです。

リスナーを追加します。
今回もclassに同じ「SimplePropertyController」を指定していますが、targetが「propValue」となっています。

```
        <PropertyListener class="com.infoteria.asteria.flowbuilder2.plugin.SimplePropertyController" target="propValue">
                <Case value="A100">
                        <Target name="propA" set="100"/>
                </Case>
                <Case value="B200">
                        <Target name="propB" set="200"/>
                </Case>
                <Default>
                        <Target name="propA" setNull="true"/>
                        <Target name="propB" setNull="true"/>
                </Default>
        </PropertyListener>
```
今回は Case/Target エレメントへ「set」アトリビュートが指定してあります。表示/非表示の場合は「visible」でした。

```
        <Target name="propA" set="100"/>
```
上記は、propAプロパティへ値「100」を設定するということです。

```
        <Target name="propA" setNull="true"/>
```
この場合は、propAプロパティへ値「null」を設定するということです。

#動作確認
実際にコンポーネントをデザイナーで配置してプロパティペインを見てみます。
４つのプロパティがあるのがわかります。
![1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180278/47ce8202-ae91-e306-e41b-322476a96d91.png)

プロパティVisibleで「Aだけ表示」を選択してみます。
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180278/999beb4f-c383-2844-3cab-816cbf390d95.png)

プロパティBが見えなくなりました。
![3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180278/0e765532-2418-f7fd-92e3-4e858b2577f1.png)

プロパティValueで「A値100」を選択してみます。
![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180278/3173e669-8d24-acdf-396e-0ecb86175a8e.png)

プロパティAの値に「100」が設定されました。
![5.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180278/fb8b97fe-9ead-41fb-a7c8-f173c1d32d38.png)
動いてますね。

#まとめ
今回はPropertyListenerの一番簡単な使い方としてxscファイルで「SimplePropertyController」を使って、プロパティの表示/非表示、値を変更してみました。

他にも使い方がいろいろありますので、詳しくは[コンポーネント／マッパー関数定義ファイル書式ガイド](https://help.asteria.com/documentation/warp/ja/1906/flow/sdk/guide/ConfReference.html#h7.1)を参照してください。