Hatena::ブログ(Diary)

box box box

 | 

2012-02-09

Titaniumで戻る/進む/リロード/アクションボタンがついたwebViewを作る

var win = createWebViewWithControl({
    url : "http://q.hatena.ne.jp",
    title : "人力検索はてな",
    showCloseBtn : false
})
Ti.UI.currentTab.open(win);

みたいに書くと、↓こんなウィンドウが表示されます。(図ではYouTubeのページを開いています)

f:id:chris4403:20120210004654p:image:w320

あと、戻るボタン(左向きの三角)がシステムアイコンとして用意されていないので、画像を用意する必要があります。

追記

craeteWebViewと言いながらwindow返してますね...

スナフキンスナフキン 2012/04/22 22:20 はじめまして。

webviewのアクションボタンについて調べていて
こちらのサイトにたどり着きました。

自分のTitaniumの環境で、デフォルトのResourcesの中のapp.jsに
上記gitのコードに続いて、
はてなのURLが書かれている、黒い背景のコードを書いて
シュミレーターを動かしてみたのですが、
下記ののエラーが返ってきたので、現在試行錯誤しているところです。

Script Error = Result of expression
'Ti.UI.currentTab' [undefined] is not an object. at app.js

Ti.UI.currentTabのundefinedというエラーについては
ググるといくつかそのような事例もあるようなのですが、

なんらかの方法でyoutubeの画面のように、表示出来る方法が
あれば、ご教授頂けると幸いです。

どうぞよろしくお願い致します。

chris4403chris4403 2012/04/22 22:27 スナフキンさん、コメントありがとうございます。
Ti.UI.currentTabは、名前の通り、Tabのアプリケーションを作成した時に利用できるものです。
スナフキンさんのコードがどのようになっているのか分からないので、推測でしか書けませんが、ためしに
Ti.UI.currentTab.open(win);

win.open({modal:ture});
と書き換えてみてください。

スナフキンスナフキン 2012/04/23 23:30 返信頂きありがとうございます!

win.open({modal:true});と
書き換えることで無事動きました。
(ちなみにバックボタンについても、iPhoneの場合に限り
アイコンが利用できるようでした。
参考:http://blog.mogya.com/2011/09/titanium-button-without-images.html)

ただ、「進む」「戻る」ボタンがグレーのままで、
そのままだと機能しなかったのですが、
なにかソースに書き加えたりすることが必要でしょうか?

当方のコードの内容は、デフォルトのプロジェクトに、
app.jsにそのまま
『上記のgitのコード』+『var win =〜 以降のコード』(最終行を win.open({modal:true});)
としています。

はてなのサイトと、youtubeのサイトの場合でそれぞれ試してみたのですが
戻る進むボタンを押した時には、エラー等は何も表示されておらず、
ただ機能していない状態のようです。
「Safariで開く、メール、リロード」は、それぞれしっかり機能している
ことを確認しました。

戻る進むボタンにの部分について
もしご存知でしたら教えて頂けると幸いです。
よろしくお願い致します。

junjun_iphonejunjun_iphone 2012/05/31 23:27 戻るボタンが機能しないといったコメントがありますが、私も同様の現象が発生しました。

とりあえず以下のようにソースを修正して、なんとか機能するようになりました。

webView.addEventListener('load', function() {
if (webView.canGoForward()) {
forwardBtn.setEnabled(true);
} else {
forwardBtn.setEnabled(false);
}
});
 ↓
webView.addEventListener('load', function() {
if (webView.canGoForward()) {
forwardBtn.setEnabled(true);
} else {
forwardBtn.setEnabled(false);
}
if (webView.canGoBack()) {
backBtn.setEnabled(true);
} else {
backBtn.setEnabled(false);
}
});

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

トラックバック - http://d.hatena.ne.jp/chris4403+tech/20120209/1328802761
 |