Amazon
2012年5月19日土曜日
TitaniumのaddEventListenerでハマる
TitaniumでTableViewRowにテキストや写真を追加して、各要素をクリックするとそれぞれのアクションを起こしたいとする。
このとき、各要素にaddEventListenerを追加することでアクションを拾ってもらうようにコードを書いてしまいがちだが、上手く行かない。
例えば、以下のコードでは、TableViewRowである変数rowに、photo, name, updateTime, textを追加しており、TableViewの行およびphotoをクリックすると、それぞれのJavaScriptファイルが別Windowで読み込まれるというもの。
この時、ハマったのはrowのaddEventListenerでpost.idを別Windowのwinに渡そうとしても上手く渡らなかった
このとき、各要素にaddEventListenerを追加することでアクションを拾ってもらうようにコードを書いてしまいがちだが、上手く行かない。
例えば、以下のコードでは、TableViewRowである変数rowに、photo, name, updateTime, textを追加しており、TableViewの行およびphotoをクリックすると、それぞれのJavaScriptファイルが別Windowで読み込まれるというもの。
この時、ハマったのはrowのaddEventListenerでpost.idを別Windowのwinに渡そうとしても上手く渡らなかった
var win = Ti.UI.currentWindow;
var tableView = Ti.UI.createTableView({
top : 50
});
win.add(tableView);
Ti.Facebook.requestWithGraphPath('me/home?date_format=r&limit=5', {}, 'GET', function(e) {
if(e.success) {
var result = JSON.parse(e.result);
var data = result.data;
tableView.setData([]);
for(var i = 0; i < data.length; i++) {
var post = data[i];
var row = Titanium.UI.createTableViewRow({
layout : 'vertical',
height : 'auto',
postId : post.id,
});
row.addEventListener('click', function(e) {
var win = Titanium.UI.createWindow({
postId : this.postId,
url:'./row.js',
});
Titanium.UI.currentTab.open(win, {
animated : true
});
});
var photo = Titanium.UI.createImageView({
image : 'http://graph.facebook.com/' + post.from.id + '/picture?type=square',
width : 50,
height : 50,
top : 5,
left : 5,
borderRadius : 5,
postId : post.id,
});
photo.addEventListener('click', function(e) {
var win = Titanium.UI.createWindow({
postId : this.postId,
url:'./photo.js',
});
Titanium.UI.currentTab.open(win, {
animated : true
});
});
var name = Titanium.UI.createLabel({
text : post.from.name,
top : -50,
width : 200,
height : 30,
});
var updateTime = Titanium.UI.createLabel({
text : Date.parse(post.created_time),
width : 200,
height : 25,
});
var text = Titanium.UI.createLabel({
text : post.message,
top : 'auto',
height : 'auto',
});
row.add(photo, name, updateTime, text);
tableView.appendRow(row);
}
}
});
みたいなコードを書いてしまうが、どうもEventListnerが複数あると、上手くイベントをハンドルできなくなるようです。
そんなわけで、EventListenerはTableViewに一つ登録しておき、TableViewのイベントで、クリックされた行を検知して、その行にセットしておいた変数(ここではextというオブジェクトリテラルを各要素に定義)別に処理を返るという方法を採用した。
var win = Ti.UI.currentWindow;
var tableView = Ti.UI.createTableView({
top : 50
});
tableView.addEventListener('click', function(e) {
var postId = e.rowData.postId;
var type = (e.source.ext) ? e.source.ext.type : "";
if(type === "photo") {
var win = Titanium.UI.createWindow({
url:'./photo,js',
postId : postId,
});
Titanium.UI.currentTab.open(win, {
animated : true
});
} else {
var win = Titanium.UI.createWindow({
url:'./row.js',
postId : postId,
});
Titanium.UI.currentTab.open(win, {
animated : true
});
}
});
win.add(tableView);
Ti.Facebook.requestWithGraphPath('me/home?date_format=r&limit=5', {}, 'GET', function(e) {
if(e.success) {
var result = JSON.parse(e.result);
var data = result.data;
tableView.setData([]);
for(var i = 0; i < data.length; i++) {
var post = data[i];
var row = Titanium.UI.createTableViewRow({
layout : 'vertical',
height : 'auto',
postId : post.id,
});
var photo = Titanium.UI.createImageView({
image : 'http://graph.facebook.com/' + post.from.id + '/picture?type=square',
width : 50,
height : 50,
top : 5,
left : 5,
borderRadius : 5,
postId : post.id,
ext:{
type:'photo',
},
});
var name = Titanium.UI.createLabel({
text : post.from.name,
top : -50,
width : 200,
height : 30,
});
var updateTime = Titanium.UI.createLabel({
text : Date.parse(post.created_time),
width : 200,
height : 25,
});
var text = Titanium.UI.createLabel({
text : post.message,
top : 'auto',
height : 'auto',
});
row.add(photo, name, updateTime, text);
tableView.appendRow(row);
}
}
});
こちらを参考にしました。2012年4月15日日曜日
Titanium MobileでiPhoneアプリを作ってAdmob広告を入れる
こちらから引用
Adombに登録して、適当なアプリ名でアプリを登録してパブリッシャーIDは予め取得しておくこと。
Appceleratorが公開しているadmobのモジュール
https://github.com/appcelerator/titanium_modules/tree/master/admob/mobile/ios
ここにあるti.admob-iphone-xx.zip
をダウンロード。
<modules></modules>
の部分を
<modules><module version="1.0">ti.admob</module></modules>に、app.jsにTitanium.Admob = require('ti.admob');
var adview = Titanium.Admob.createView({top:0,testing:true,adBackgroundColor:'black',primaryTextColor:'blue',secondaryTextColor:'green',publisherId:'<< your ID>>' // Replace this string with your own API key!});win.add(adview);を追加。publisherIdにadMobの管理画面のアプリケーションの設定管理のページに表示されているパブリッシャーIDを入れれば完了。これだけ。
[その他参考]
http://d.hatena.ne.jp/d_sea/20120124/1327375488
2012年1月15日日曜日
"Titanium Mobileで作る! iPhone/Androidアプリ"でハマった点
gihyo.jpでTitaniumの実践トレーニングの記事
Titanium Mobileで作る! iPhone/Androidアプリ
があるのだけど、この記事かなり良い。
Titanium Mobileが分かっていない人でも記事を読み進めて行けばJavaScriptでiPhone/Androidアプリを作成できてしまうのだ。
こういう記事書ける人すごいですね。
さて、執筆時点よりいくつかupdateがあるせいか、
記事通りでは上手く行かなかった点をまとめておきます。
第1回 まずはTitaniumを体験してみよう
にて
プロジェクトをTitaniumMobileSampleというプロジェクト名で作成。
特に変更も加えないままiphone Simulatorで実行
[ERROR] xcodebuild: error: The project 'TitaniumMobile.xcodeproj' does not contain a target named 'TitaniumMobile-universal'.
[ERROR]
[ERROR] Error: Traceback (most recent call last):
上記のようなエラーが表示される。
どうやらプロジェクト名にTitaniumが含まれるとダメらしい。Titaniumを含まない新しくプロジェクトを作り直してみたところ、無事動く
第3回 TitaniumでTwitterクライアント──レイアウトの調整
にて
var win1 = Titanium.UI.createWindow({
url: 'table_view.js', //ここに注意!
title:'Tab 1',
backgroundColor:'#fff'
});
とあるけれどこのurl: 'table_view.js', //ここに注意!
が曲者。以下がプロジェクトのファイル配置
ProjectName
-Resources
--android
--iphone
--xxx
--app.js
-build.log
-xxx
-tiapp.xml
ここで、table_view.jsはどこに置くべきか。
通常ならばapp.jsと同じResourcesフォルダの下に置こうとするが、これは間違い。
実行した段階でtable_view.jsが見つからないというエラーが出る。
"...sample.app/table_vie.js, NSUnderlyingError=0x8cdb470 "The operation couldn’t be completed. No such file or directory"}”
この場合、いったんtable_view.jsファイルをビルドするデバイスのフォルダ(ex.iphone)に移動してRunするとちゃんと読み込んでくれる。
どうもビルドする際に、キャッシュをしているようで、Resourcesフォルダにファイルが追加されてもキャッシュが更新されないようで、
強制的にiphone/androidフォルダに変更を加えてキャッシュを更新している、ということをやってる。
第4回 TitaniumでTwitterクライアント──OAuthを使ったAPI呼び出し
結構正念場のOAuthの内容。ここではTwitterのUIが変わったことを受けて、本文にも書いてあるけどこの第四回のコードでは動かない。ということで、テストはひとまず置いておいて第五回、第六回まで進める。で、第六回の記事に書いてあるけど、oauthのライブラリはtm_twitter_apiを使用する。Resourcesフォルダのiphoneフォルダにlibフォルダを作って、oauth.js, oauth_adapter.js, sha1.js, twitter_api.jsをコピー。
oauth_adapter.jsの冒頭を
Ti.include(path_lib + 'sha1.js'); -> Ti.include('sha1.js');
Ti.include(path_lib + 'oauth.js'); -> Ti.include('oauth.js');
へ変更。もしTwitterの個人設定で"HTTPSを常時使用する"にチェックが入っている場合、twitter_api.jsのhttp://xxxをhttps://xxxに変更する必要がある。
位置情報のPostは上手く行かないけど、米国でのみサービスを提供しているため、日本のアカウントでははじかれるのだろうか。。。
ラベル:
Androidアプリ,
iPhoneアプリ,
Titanium
登録:
投稿 (Atom)