How to use scripting in Batik?


	イントロダクション

Batik 1.1はスタティックなSVGの実装であり、従ってスクリプティングがスクリーン上のSVG要素のレンダリングを変更することはありません。しかし、あなたは以下で、少しだけスクリプティングの基礎を見ることができます。例を通じて、それが以下に便利であるかを見て、少し先へ進むことができるでしょう。


	スクリプティングの基礎

もっともポピュラーなスクリプティング言語でもあり、SVG仕様でSVG準拠の実装がサポートすべきであると明記されているため、Batikでは、Rhinoと呼ばれるMozillaのECMAScriptインタープリタによって、ECMAScript (JavaScript)言語がサポートされています。Batikの標準ディストリビューションで提供されているスクリプティング言語はこれではあるが、PythonまたはTclといった、他の言語もサポートされます。このセクションの例では、全てECMAScriptを使用します。

SVGファイル中には、スクリプトを配置する場所が2箇所あります。

最初のひとつは、<script> 要素の中で、関数定義や要素が読み込まれた時に実行することができる一般的なコードの定義を置くことができる場所です。


	<svg width="100" height="100"> <script type="text/ecmascript"> // 実行されるECMAScriptコード </script> <!-- あなたの SVG 要素 --> </svg>

ユーザーイベントまたはドキュメントイベントに反応するスクリプトを、SVG要素の属性を用いて配置することも出来ます。上記の例に示されたように、スクリプティング言語は <script> 要素の中で設定されなければなりません。ただし、イベントハンドリングについては、デフォルトの言語タイプは "text/ecmascript" が既定となっています。もしこれを変更したければ、<svg> 要素のcontentScriptType 属性を使用することができます。

ほとんどの場合、イベント属性は <script> セクションで定義された関数を呼び出すだけでしょう。が、以下のように、通常のコードを含めることもできます。


	<svg width="100" height="100"> <rect x="0" y="0" width="10" height="10" onclick="evt.target.setAttribute('fill', 'blue')"/> <!-- あなたの SVG 要素 --> </svg>

SVGにおけるスクリプティングの利用に関する詳しい情報は、こちらを参照することができます:

SVGのスクリプティングに関する詳細情報はSVG 仕様のスクリプティングの章。

ECMAScript 言語に関する詳細情報はECMAScript仕様。


	Batikにおけるスクリプティングの利用

Batik リリース 1.1はスタティックなSVG実装であり、このバージョンでは、スクリプティングによってスクリーン上のグラフィックオブジェクトを移動したり変更したりするためにスクリプティングを利用することはできません。しかし、その他の目的については、これはなお便利なものです。

以下の、あなたのBatikディストリビューション上でも見ることが出来る簡潔な例では、ユーザーイベントに応じてシンプルなメッセージを表示します:

<svg width="450" height="500" viewBox="0 0 450 500">
    <script type="text/ecmascript">

    function showDialog(msg) {
        alert(msg);
    }

    <g>
        <circle cx="137.5" cy="110" r="20" style="fill:crimson" onmousedown="showDialog('onmousedown')"/>
        <circle cx="312.5" cy="110" r="20" style="fill:crimson" onmouseup="showDialog('onmouseup')"/>
    </g>
    <g transform="translate(0 80)">
        <circle cx="137.5" cy="110" r="20" style="fill:crimson" onmouseover="showDialog('onmouseover')"/>
        <circle cx="312.5" cy="110" r="20" style="fill:crimson" onmouseout="showDialog('onmouseout')"/>
    </g>
    <g transform="translate(0 160)">
        <circle cx="137.5" cy="110" r="20" style="fill:crimson" onmousemove="showDialog('onmousemove')"/>
        <circle cx="312.5" cy="110" r="20" style="fill:crimson" onclick="showDialog('onclick')"/>
    </g>
</svg>

単一の関数: showDialog の定義を含む <script> 要素が、上記の例で見られます。

この関数は、Batikのイベントハンドリング機構によって、ユーザーイベントに応じて呼び出されます。この関数はいくつもの <circle> 要素のマウスイベントに反応するように登録されています。


	さらに先へ

拡張可能なAPIとしてのBatikは、スクリプティングモジュールを、SVGファイルにおけるECMAScript言語のシンプルなサポートにカスタマイズする機能を提供しています。


	Rhino インタープリタのカスタマイズ

Rhinoインタープリタのカスタマイズの便利な例は、ECMAScript仕様が何らコンソールとインタラクトするI/Oの既定の機能を提供しないことから、作り出すことが出来ます。しかし、メッセージをコンソールに出力する print という名前の関数を提供することは、ECMAScript互換の言語にとっては、非常に一般的です。ここでは、Batik Rhinoインタープリタのカスタマイズの例として、このような機能の追加を書いてみましょう。

まず、BatikのデフォルトのECMAScriptインタープリタをサブクラス化し、以下のように、この機能を追加しなければなりません。


public class ExtendedRhinoInterpreter extends RhinoIntepreter {
    public ExtendedRhinoInterpreter() {
        super(); // RhinoInterpreterをビルドします
        final String[] names = { "print" }
        try {
            getGlobalObject().
	            defineFunctionProperties(names, 
	                          ExtendedRhinoIntepreter.class,
                                  ScriptableObject.DONTENUM);
        } catch (PropertyException e) {
            throw new Error(e.getMessage());
        }
    }
    
    public static void print(Context cx, Scriptable thisObj,
                             Object[] args, Function funObj) {
        for (int i=0; i < args.length; i++) {
            if (i > 0)
                System.out.print(" ");
	    
            // 任意のJavaScript値を文字列の形にコンバートします
            String s = Context.toString(args[i]);
	    
            System.out.print(s);
        }
        System.out.println();
    }
}

さて、次は、このインタープリタをデフォルトの代わりに使用することを、Batikに教えなければなりません。このため、あなたはまずファクトリを定義してあなたのインタープリタのインスタンスを生成するようにしなければなりません。


	public class ExtendedRhinoInterpreterFactory implements InterpreterFactory { public Interpreter createInterpreter() { return new ExtendedRhinoInterpreter(); } }

今度は、あなたはこのファクトリを使用する IntepreterPool をビルドして、あなたのアプリケーションの BridgeContext 上にあるプールにこれをセットしなければなりません。


org.apache.batik.bridge BridgeContext ctx = ...;
org.apache.batik.script.InterpreterPool pool =
    new org.apache.batik.script.InterpreterPool();
pool.putInterpreterFactory("text/ecmascript", 
                           new ExtendedRhinoInterpreterFactory());
ctx.setIntepreterPool(pool);

たとえばもしあながたBatik SVGBrowserアプリケーションを使用しているのであれば、あなたは createBridgeContext() メソッド中の JSVGCanvas クラスのサブクラスで、先のコードの断片を使用することができます。


	自分のインタープリタを使う

もしあなたがSVGファイルを自分のスクリプティング言語と共に使用したい場合は、Batikでそれが可能になります。あなたは自分の Interpreter のクラスを定義して、それを上記のように正しい言語のタイプとともに InterpreterPool に登録する必要があります。