WebViweに表示されているHTMLからTitaniumの処理を実行する
Objective-CではUIWebViewDelegateを使うとHTML内のリンクをクリックした時にアプリ内のネイティブな処理を実行する事ができた。
Titaniumでも同じ事ができる。
しかもかなり簡単に。
このおかげでHTMLでUIを作ることができるため、ウェブの経験が長い人間にとっては手軽にちょっとリッチなUIを作れるようになる。
手順
カスタムイベントを定義する
Ti.Appにカスタムイベントを追加する。
Ti.App.addEventListener("sample_custom_event", callback);
HTML内でイベントを発火させる
定義したカスタムイベントをTi.App.fireEventで発火させる。
<a href=\"#\" onClick=\"Ti.App.fireEvent('sample_custom_event', {}); return false;\">発火！</a>
リンクをクリックした時にJavaScriptで発火させていることから分かるように、クリックに限らずのほかのイベントから発火させることも可能。
またfireEventの二番目の引数にオブジェクトを渡すとカスタムイベント内でその内容にアクセスできる。
サンプルコード
リンクがクリックされたらアプリ内ブラウザで開くかSafariで開くか選択させてリンクを開くというもの。
app.js
Ti.App.addEventListener("selectOpenURL", function(e){
url = e.url
dialog = Ti.UI.createOptionDialog({options:["アプリ内で開く", "Safariで開く", "キャンセル"], cancel:2});
dialog.show();
dialog.addEventListener("click", function(e){
if (e.index === 0) {
window = Ti.UI.createWindow({modal:true});
buttonClose = Ti.UI.createButton({ systemButton: Ti.UI.iPhone.SystemButton.DONE });
buttonClose.addEventListener("click", function(e){ window.close();});
window.setRightNavButton(buttonClose);
window.add(Ti.UI.createWebView({url:url}));
window.open();
}
if (e.index === 1) {
Ti.Platform.openURL(url);
}
});
});
window = Ti.UI.createWindow();
webView = Ti.UI.createWebView();
webView.html = "<html><body><a href=\"#\" onClick=\"Ti.App.fireEvent('selectOpenURL', {url:'http://www.google.co.jp/'}); return false;\">ぐーぐる先生に聞け</a></body></html>";
window.add(webView);
window.open();
HTMLを外部ファイルから読み込むようにすればもっと実用的に。
注意点
onClickにTi.App.fireEventを設定するところでクォートによる囲みが二重三重になると、囲みを壊してしまいがち。
壊してしまうと特にエラーも出ず沈黙のまま動かないので原因が分かりづらい。
