子アプレットと JavaScript サポート

Curl API では、ブラウザで実行される単一のアプレットや独立型アプレットよりも複雑な構造を持つアプリケーションを作成することが可能です。「HTML ページ内でのアプレットの埋め込み」で述べられているように、Curl のアプレットを HTML ページ内に埋め込むことができます。HTML ページ内の JavaScript から Curl のサブアプレットの関数を呼び出すことや、サブアプレットから JavaScript の関数を呼び出すことができます。

この方法で、HTML を使用してユーザーインターフェイスを作成し、埋め込まれた Curl のアプレットを使用してHTML にはない機能を実装する Web ページを作ることができます。この方法により、Curl のアプレットが JavaScript API を使用してデータソースへアクセスすることもできます。また、一部分を Curl アプレットで一部分を Web ブラウザで表示するコンテンツで構成される Web ページを作成することも可能です。例えば、サーバー上で動画ファイルを一覧化し、ユーザーが選択した動画ファイルを表示する動画ビューワと HTML ページを共有するアプレットなどがそれに当たります。

さらに、Curl アプレットは AppletData クラスを使用して、サブアプレットをプログラムによって作成し、管理することができます。この場合、サブアプレットはその親の関数を呼び出し、親はサブアプレットの関数を呼び出します。Web ブラウザ内でトップレベルのページとしてロードされた Curl アプレットには親がありません。この方法により、UI を持たず計算だけを行う子アプレットを読み込み、連携する親アプレットと子アプレットを作成することができます。

IDE のドキュメントでは、Curl および HTML の親を持つ Curl のサブアプレットについて説明するサンプルファイルを提供しています。このサンプルファイルの使用についての詳細は、「内容の充実したサンプルファイル」をご覧ください。

サンプルは次のパスにあります。

このアーカイブファイルには、シェイプにプロパティを設定する簡単な例を含む shape と呼ばれるディレクトリがあります。このセクションに含まれているコードはこのサンプルをもとにしています。google-map には、Google マップとCurl のレコードグリッド間の相互作用連携の高度なサンプルがあります。Google マップのサンプルを実行するためには、Google のアカウントが必要で、google-map.html で指定された URL にキーを挿入しなければなりません。key= を検索して [insert key here] をキーに置換します。http://www.google.com/apis/maps/signup.html を参照してください。

Curl のサブアプレット

shape ディレクトリの中のサンプルには、RectangleShape を作成する shape.curl と呼ばれるアプレットファイルがあります。shape-parent.curl ファイルは AppletData と AppletGraphic を使用してサブアプレットとしての shape.curl を作成し、実行します。

アプレットは次のコードで親からの呼び出し用のハンドラを登録します。

{{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}}
}

これは次のような機能を実行する Applet.register-applet-invoke-handler メソッドを呼び出します。

サブアプレットと通信するために、親は AppletData.applet-invoke-ready-callback をプロシージャに設定します。一度アプレットが Applet.register-applet-invoke-handler を呼び出すと、親からの呼び出しに応答する準備ができます。これは AppletData.applet-invoke-ready? プロパティを true に設定し、親の中で AppletData.applet-invoke-ready-callback を呼び出します。その後、親は AppletData.applet-invoke-async を使用してサブアプレットにコマンドを送ることができます。アプレットはこれらのコマンドを解釈するハンドラをアプレット内に呼び出します。

Shape の例では、次のコードのように applet-invoke-ready-callback を設定します。

set ad.applet-invoke-ready-callback =
    {proc {}:void
        {send-command ad, "set-random-color-list",
            {new {Array-of any}, "lightgreen", "skyblue", "orchid"},
            "random-color-change"
        }
        {send-command ad, "change-color", color-list.value asa String}
        {send-command ad, "change-size", size-list.value asa String}
   }

set-random-color-list、change-color および change-size 文字列はサブアプレット内の MyShape 上のメソッドを参照します。send-command プロシージャは、applet-invoke-async を使用して、次のサブアプレット内のメソッドを呼び出します。

{define-proc public {send-command
                        ad:AppletData,
                        command:String, ...:any
                    }:void
    {ad.applet-invoke-async
        finish-proc =
            {proc {ex:#Exception, result:any}:void
                {popup-message
                    title = "Finishing applet-invoke-async",
                    {if-non-null ex then
                        "Command: " & command & " Error: " & ex
                     else
                        "Command: " & command & " Result: " & result
                    }
                }
            },
        command,
        {splice ...}
    }
}

従って、アプレットが準備できると、親はサブアプレットに色のリストをセットアップし、長方形の色とサイズを変更するように指示します。

color-list と size-list 上のイベントハンドラもまた send-command を通じて applet-invoke-async を使用し、親アプレット上でのユーザーの選択に呼応してサブアプレット内の長方形のサイズと色を変更します。

HTML 内に埋め込まれた Curl のアプレット

shape ディレクトリには shape-parent.html と呼ばれるファイルもあり、これは OBJECT タグを使用して shape.curl アプレットを埋め込みます。HTML 内のドロップダウンリストでシェイプのサイズと色を選択することができます。

JavaScript の関数 onLoad は applet_invoke_ready_callback プロパティを関数に設定します。この動作は Curl の親アプレットの AppletData.applet-invoke-ready-callback 設定に似ていて、このコールバック関数は埋め込まれたアプレットがアプレット呼び出しハンドラを登録した後に呼び出されます。applet_invoke_ready プロパティは AppletData.applet-invoke-ready? と同等です。親は埋め込まれたオブジェクト上の applet_invoke メソッドを呼び出す前に changeColor、changeSize および onLoad関数内でこのプロパティをチェックします。

親アプレット内での呼び出し

Curl のサブアプレットがその親と交信する方法は、親からサブアプレットに交信する方法と似ています。親アプレットは AppletData.parent-invoke-handler プロパティをプロシージャに設定することによりサブアプレットからの呼び出しを受け入れる準備をします。親はサブアプレットがするようにこのハンドラを登録することはしません。

親が子アプレットに親の存在を知らせると Applet.parent-invoke-ready? が true になります。親のないアプレットでは、これは常に false です。サブアプレットは Applet.parent-invoke-async を呼び出す前に Applet.parent-invoke-ready? をチェックします。サブアプレットは親の準備ができたときに呼び出される Applet.parent-invoke-ready-callback を設定することができます。

この例では、サブアプレットが RectangleShape の色を 10 秒間隔で無作為に選んだ色に変更し、親に知らせます。親はこの情報を使用して color-list の値を更新します。

Shape の例では、次のコードのように parent-invoke-handler へセットされます。

set ad.parent-invoke-handler =
    {proc {method-name:String, ...:any}:any
        {switch method-name
         case "random-color-change" do
            let color-name:#String
            {for a in ... do
                set color-name = a asa String
                {break}
            }
            let i:int = 0
            {for li in color-list.list-items do
                {if li.value == color-name then
                    {color-list.select-index i}
                    {return null}
                }
                {inc i}
            }
            {return null}
         else
            {error "Unknown parent-invoke method name."}
        }
    }

セキュリティの問題

既定では、アプレットは applet-invoke 呼び出しを受け入れません。Applet.register-applet-invoke-handler の中で検証をしないと、アプレットは Applet.default-applet-invoke-verifier を使用します。これは applet-invoke 呼び出しの送信を http: または https: から始まる URL からの親と、同じ Web サーバーからの親しか許可しません。アプレットはカスタム検証を指定して、任意の親に呼び出しをさせたり特定の URL の親にのみ呼び出しをさせたりすることができ、その後ハンドラの Applet.parent-url をチェックして特定の呼び出しを許可するかどうかを決定します。

applet-invoke 呼び出しについては慎重に考慮しなくてはなりません。いくつかのアプレットは、単に情報を表示するだけのアプレットのようにどのような親によっても安全に操作することができます。アプレットが親が使用可能なデータを作成する場合、あるいはパスワードについての情報にアクセスできる場合は、アプレットは親の識別を慎重に確認する必要があります。

多数のアプレットによって指定された applet-invoke メソッドはセキュリティの問題について不安がないかもしれません。しかし、アプレットが起こす動作のセキュリティチェックはアプレットの URL に基づいており、アプレットがある Web サーバーから操作され、親は別の Web サーバーからホストされる場合、本来許されない許可を親に与えてしまうということを忘れないでください。

Parent-invoke 呼び出しは親が HTML ページであれば常に許可されます。Curl の親アプレットは、AppletData.parent-invoke-handler をインストールしないか、あるいは特定の子からの特定の呼び出しだけを許可するハンドラを指定することにより、parent-invoke 呼び出しを制限することができます。

API の概要

JavaScript Object Notation (JSON) サポート

Curl API では、JavaScript Object Notation (JSON) のサポートを提供しています。JSON についての詳細は、http://json.org/ のJSON の Web サイトをご覧ください。

CURL.IO.JSON パッケージは、JSON への、あるいは JSON からの変換に使用される配列とハッシュテーブルの略記法を提供するいくつかのクラスを定義します。また、JsonValue-parse、JsonValue-write および JsonValue-to-Stringの各プロシージャを定義します。

IDE ドキュメントは Web サイトから JSON フォーマットを操作する方法のサンプルを提供します。サンプルファイルの使用についての詳細は内容の充実したサンプルファイルをご覧ください。

サンプルは次のファイルにあります。

このアーカイブファイルには、JSON 形式のデータのソースとしてソーシャルブックマークの Web サイト http://del.icio.us を使用する JSON-feed.curl と呼ばれるアプレットファイルがあります。この Web サイトでは、関連するテキストタグとともにインターネットのサイトにブックマークを保存することができます。

アプレットはサイトに載せたブックマークを含む JSON 形式のオブジェクトを取得し、ブックマークをタグとともに Curl のテーブルに URL として表示します。このデータソースについての詳細は、「JSON Post Feeds」を参照してください。

また、アプレットは、定義したすべてのタグをそれぞれ使用した回数とともに含む、別のオブジェクトも取得します。タグフィードについての詳細は、「JSON Tag Feeds」を参照してください。

この例を実行するためには、http://del.icio.us にユーザーアカウントを作成し、アプレット内の [your-user-name] にユーザー名を入れなければなりません。

JsonValue-parse プロシージャは、http://del.icio.usによって指定された JSON オブジェクトを Curl で操作可能な構造に変換します。JsonValue-parse は JsonValue を返します。JsonValue は any のシノニムなので、この情報は結果として得られたオブジェクトを扱うには十分ではありません。JsonValue-parse によって戻り値オブジェクトの正確な構造はデータソースに依存します。この場合、http://del.icio.us サイトは明確に JavaScript に適したこれらのデータ構造について説明しており、データ構造についての便利な情報を与えてくれます。また、Curl のデバッガを使用して、返されたオブジェクトの構造を調べることができます。

このコードはタグ情報を Curl の JsonValue に変換します。

||--Get the tags
{let post-tags:JsonValue = 
    {JsonValue-parse
        {url "http://del.icio.us/feeds/json/tags/[your-user-name]"}
    }
}

戻り値のオブジェクトは JsonObject で、これは HashTable-of String, JsonValue のサブクラスです。文字列キーはタグで、関連づけられた値はそれぞれのタグを使用した回数です。

このコードは公開情報を Curl の JsonValue に変換します。

||--Get the posts
{let posts:JsonValue = 
    {JsonValue-parse
        {url "http://del.icio.us/feeds/json/[your-user-name]"}
    }
}

この場合に返された JsonValue は、より複雑です。これは Array-of JsonValue で、配列の各要素が JsonObject です。それぞれの HashTable のキーはに記述された文字で関連付けられた値の型を識別します。

JSON 形式のデータを Curl で扱う際には、多くの場合ハッシュテーブルを扱うことを意味します。従ってそれらについて述べているセクションを参照したい場合は、「ハッシュテーブル」をご覧ください。

Copyright © 1998-2019 SCSK Corporation. All rights reserved.
Curl, the Curl logo, Surge, and the Surge logo are trademarks of SCSK Corporation. that are registered in the United States. Surge Lab, the Surge Lab logo, and the Surge Lab Visual Layout Editor (VLE) logo are trademarks of SCSK Corporation.