Ajax連携（JavascriptからCurlのメソッドをコール）

Curl6.0からAjax相互運用性という機能が追加されました。これはJavascriptからCurlのメソッドをコールしたり、またはその逆でCurlからJavascriptの関数をコールすることができます。この機能を用いれば、GoogleMapのAPIをコールしてGoogleMapと組み合わせたアプリケーションなどを作成することができます。この機能をサンプルコードを元に説明していきます。

JavascriptからCurlのメソッドをコールする

Javascriptから、sharp.curlというCurlアプレットの中にあるMySharpクラスのchange-colorメソッドを実行するという例を紹介していきます。

まずは、Curl側のサンプルコード（sharp.curl）から説明していきます。以下のサンプルは、単純にRectangleSharpクラスを継承して四角形の図を表示するMySharpクラスを作っています。そのMySharpクラスの中に色を変更するchange-colorメソッドを作成し、このメソッドを後述するJavascriptから呼び出すこととします。

また、このオブジェクトを生成した後、Javascriptから実行可能なオブジェクトとして登録するために、自アプレットのハンドラとして登録する必要があります。これにはregister-applet-invoke-handlerメソッドを利用します。この行が存在しませんとJavascriptから実行することはできません。

{curl 6.0 applet}

{import * from CURL.GUI.SHAPES}

{define-class MyShape
{inherits RectangleShape}

{constructor {default …}
    {construct-super …}
}

{method public {change-color color:String}:#String
    set self.color = color
    {return “changed-color”}
}
}

{value
    let shape =
        {MyShape
            {GRect 1cm, 1cm, 1cm, 1cm},
            color = “orange”,
            border-color = “silver”,
            border-width = 5px
        }

    {{get-the-applet}.register-applet-invoke-handler
        {Applet.applet-invoke-handler-for-object shape},
        || Allow ANY page to host this applet and send it commands.
        verifier = {proc {}:bool {return true}}
    }

    shape
}

次にHTML側を説明します。まずは、CurlのアプレットをHTML内に埋め込む場合は、objectタグを利用します。objectタグをサポートしていないブラウザの場合は、embedを利用します。

このJavascriptオブジェクトのapplet_invoke関数を使って先ほど登録したCurlオブジェクトのメソッドを呼びます。

var shape = document.getElementById(“shape“);
shape.applet_invoke(“change-color”, color);

また、その他に用意されているJavascriptオブジェクトの関数・フィールドとして、Curlアプレットの呼び出し準備が整っているか否かをチェックするためのapplet_invoke_readyフィールドと、アプレットの呼び出し準備が整った際に実行されるapplet_invoke_ready_callback関数があります。具体的な使い方を見せるためにすべてのコードを以下に載せておきます。

<html><head><title>Javascript sample</title>

// change color
function changeColor(color) {
var shape = document.getElementById(“shape”);
if (shape.applet_invoke_ready)
{
alert(shape.applet_invoke(“change-color”, color) + ‘ to ‘ + color);
}
else
{
alert(“not ready”);
}
}

</script></head>
<body onload=”setTimeout(‘onLoad()’, 0)”
onpageshow=”if (event.persisted) setTimeout(‘onLoad()’, 0);”>
<object id=”shape” type=”text/vnd.curl”
data=”sharp.curl” height=”200″ width=”200″>
</object>

<p>
Color
<select id=”color” onchange=”changeColor(value)”>
<option value=”red”>red</option>
<option value=”orange” selected=”selected”>orange</option>
<option value=”yellow”>yellow</option>
<option value=”pink”>pink</option>
<option value=”lightsalmon”>lightsalmon</option>
<option value=”orchid”>gray</option>
</select>
</p><p>

</p></body></html>

CurlからJavascript関数をコールする

CurlからJavascriptの関数を呼び出す場合、AppletDataクラスのapplet-invoke-asyncメソッドを実行します。以下に呼び出し方のサンプルコードを載せておきます。

let ad:AppletData = {AppletData …}
{ad.applet-invoke-async
    finish-proc =
        {proc {ex:#Exception, result:any}:void
             || 終了処理
        },
    “change-color”, || 呼び出すjavascriptの関数
    “green”         || 呼び出すJavascriptの関数の引数
}

CURL DEVELOPER CENTER

Ajax連携（JavascriptからCurlのメソッドをコール）

JavascriptからCurlのメソッドをコールする

CurlからJavascript関数をコールする

関連サンプル