Xojo日本語ブログ

マルチプラットフォーム対応アプリが開発できるXojoのブログです。

面倒なWeb UIの操作はJavaScriptで行ってみましょう

XojoではWebアプリケーションであってもUI操作周りを含め、Xojoだけで記述ができます。しかし中にはクライアントサイドだけで行った方が早い処理もあるかも知れません。そんな時には無理せずJavaScriptを使うことも考えてみてはいかがでしょうか。

jQueryを使ってみる

今回はJavaScriptのライブラリとして有名なjQueryを使ってみたいと思います。まず App のインスペクタを表示し、HTML Headerを編集します。

f:id:moongift:20160718112656p:plain

例えば次のようにします。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="/public.js"></script>

ここでjQueryについては外部CDNのもの、public.jsについてはこれから編集するものを指定しておきます。

JavaScriptファイルの追加

次にJavaScriptファイルを追加します。Xojoのプロジェクト外にあるファイル(例えばpublic.js)をXojoのプロジェクトにドラッグ&ドロップします。今回は分かりやすいようにResourcesというフォルダを作成し、その中に追加しました。名前がpublic1となっているのを確認します。

f:id:moongift:20160718112803p:plain

HandleURLの設定

AppのイベントハンドラとしてHandleURLを追加します。そして、次のように記述します。

if Request.Path = "public.js" then
  Request.MIMEType = "application/json"
  request.Status = 200
  Request.Print public1
  return true
end if

これは、リクエストされたパスが public.js だったら(/public.jsではないので注意してください)、リソースとして追加したpublic1の内容を返却するという指定です。最近のWebブラウザではmime-typeが正しく設定されていないと動かないこと、HTTPステータスを正しく返さないといけない点に注意してください。

JavaScriptイベントの設定

通常、jQueryであればDOM構築されたタイミングのイベントを使って次のようの記述するでしょう。

$(function() {
  
});

しかしXojoの場合、このタイミングではまだ周りのガワの部分しか描画されていません。この状態でDOMイベントを設定しても動きません。

そこで、JavaScriptを使用するWebPageのイベントハンドラとして Shownイベント(描画完了)を追加し、次のように記述します。

ExecuteJavaScript("XojoPageLoaded();")

これでJavaScriptを実行します。最後にpublic.jsの内容を次のようにします。関数名は自由に決めてもらって構いません。

function XojoPageLoaded() {
  // 例
  $("input[name='AddButton']").on('click', function(e) {
    alert("処理を開始します");
  })
}

注意点

Xojoで描画されるWebアプリケーションのコンポーネントはIDがランダムな文字列となっています。そのため、name属性を使ってCSSセレクタを記述するのが良いでしょう。


処理が開始したらインジケータを表示したり、フローティングメッセージを出す、キーボードの入力制御を行うといった仕組みはJavaScriptの方が簡単に実現できるでしょう。XojoとJavaScript、お互いの良さを使い分けてみてください。