titanium/Android対応
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
単語検索
|
最終更新
|
ヘルプ
]
開始行:
[[FrontPage]]
#contents
2011/08/08からのアクセス回数 &counter;
** Projectファイルの再作成 [#ef518133]
Android SDKをインストールする前に作成したTitaniumのプロジ...
Resoruceファイル以下をバックアップして、作り直す必要があ...
** iPhoneとAndroidの違い [#t153348e]
TitaniumのAPIでデバイス依存するもの（「iOSのみ」と表記）...
特に
- NavigationGroup
- TableViewRowの削除等のSwipeイベントに対応する機能
- HTTPClient（実装が全く異なるためiPhoneとAndroidでの動作...
には、デバイス毎に対応する必要があります。
*** NavigationGroupの対応 [#ree50459]
iPhoneでよく使われるナビゲーションバーの左右のボタンは、A...
実装がことなります。
そこで、以下のnavigation.jsファイルにデバイスの違いを吸収...
#pre{{
var Navigation = function() {
this.setup = function(nav) {
if (Ti.Platform.osname === 'android') {
var android = nav.android;
var activitiy = Ti.Android.currentActivity;
if (activitiy) {
activitiy.onCreateOptionsMenu = function(e) {
var menu = e.menu;
if (android && android.leftButton) {
var leftMenuItem = menu.add(android.leftButton);
leftMenuItem.setIcon(android.leftButton.icon);
leftMenuItem.addEventListener('click', android.left...
}
if (android && android.rightButton) {
var rightMenuItem = menu.add(android.rightButton);
rightMenuItem.setIcon(android.rightButton.icon);
rightMenuItem.addEventListener('click', android.rig...
}
};
}
}
else {
var win = Ti.UI.currentWindow;
var iPhone = nav.iPhone;
if (iPhone && iPhone.leftButton) {
var leftButton = Ti.UI.createButton(iPhone.leftButton);
leftButton.addEventListener('click', iPhone.leftButto...
win.leftNavButton = leftButton;
}
if (iPhone && iPhone.rightButton) {
var rightButton = Ti.UI.createButton(iPhone.rightButt...
rightButton.addEventListener('click', iPhone.rightBut...
win.rightNavButton = rightButton;
}
}
};
};
}}
使用する場合には、各ボタンのコールバック関数を別途定義し...
table_view.jsへの変更
#pre{{
var addCallback = function(e) {
var at = new Date();
var recordWindow = Ti.UI.createWindow({
url: 'record_window.js',
record: {weight:'', at: at.toDateString()},
func: 'insert_row',
backgroundColor:'#fff'
});
Ti.UI.currentTab.open(recordWindow);
};
var grpahCallback = function(e) {
if (records.length > 0) {
var weights = "[";
var ticks = "[";
for (i = records.length-1; i >= 0; i--) {
var at = new Date(records[i].at);
weights = weights + "[" + at.getTime() +","+records[i]...
ticks = ticks + at.getTime() + ",";
}
weights = weights + "]"; ticks = ticks + "]";
var graphWindow = Ti.UI.createWindow({
url: 'plot_window.js',
weights: weights,
ticks: ticks
}
);
Ti.UI.currentTab.open(graphWindow);
}
};
var navi = new Navigation();
navi.setup({
iPhone: {
leftButton: {title: 'Graph', callback: grpahCallback},
rightButton: {systemButton: Titanium.UI.iPhone.SystemBu...
},
android: {
leftButton: {title: 'Graph', icon: 'dark_stats-bars.png...
rightButton: {title: 'Add', icon: 'dark_add.png', callb...
}
});
}}
setup関数で、iPhone、androidで使用するボタンのタイトル、...
Androidシミュレータでメニューボタンを押すと、以下のように...
&ref(android-navigator.png);
*** テーブル項目の削除 [#qc1ec1c1]
iPhoneでのTableViewRowでのSwipeで削除する機能が使えないた...
record_window.jsの追加
#pre{{
var deleteCallback = function(e) {
Ti.App.fireEvent('delete_row', win.record);
win.close();
};
Ti.include('navigation.js');
var navi = new Navigation();
navi.setup({
android: {
rightButton: {title: 'Delete', icon: 'dark_x.png', call...
}
});
}}
次にtable_view.jsでdelete_rowイベントを処理する部分を追加...
table_view.jsの変更（deleteCallbackも変更しました）
#pre{{
function deleteCallback(record) {
db.deleteOne(record);
records = db.findAll();
updateRecord(records);
}
tableView.addEventListener('delete', function(e){
deleteCallback(records[e.index]);
});
Ti.App.addEventListener('delete_row', function(record) {
Titanium.API.debug("delete_row");
deleteCallback(record);
});
}}
record_window.jsの画面は、以下のようになります。
&ref(android-delete.png);
*** WebViewのログイン処理 [#mb9db28c]
iPhoneでは、すべてのアプリケーションでCookieを共有するた...
FoodLogでは、
- FoodLogではjQueryを使用しているので、evalJSを使って認証...
- /account/loginページで認証をすると、/myfood/listに画面...
- 既に認証が終わっていたら、/に画面遷移します
これで、iPhone、Androidのどちらの場合も動作します。
foodlog_window.jsを以下のように変更します。
#pre{{
// FoodLogのWebページを表示
win = Ti.UI.currentWindow;
var webView = Ti.UI.createWebView({
url: 'http://www.foodlog.jp/account/login/'
}
);
webView.visible = false;
win.add(webView);
webView.addEventListener('load', function(){
var href = webView.evalJS('window.location.href');
// ログイン処理
if (href == 'http://www.foodlog.jp/account/login/') {
webView.evalJS('$(login_account_code).val("あなたのユー...
webView.evalJS('$(login_password).val("あなたのパスワー...
webView.evalJS('$("input[name=commit]").click();');
}
// /calendarに移動
else if (href == 'http://www.foodlog.jp/myfood/list' || ...
webView.evalJS('window.location="http://www.foodlog.jp/...
}
// ウィンドウを表示
else {
webView.visible=true;
}
});
}}
最後にAndroidでのFoodLogのカレンダー画面をご覧頂きます。
&ref(android-foodlog.png);
*** プログラムソース [#m9814161]
ここまでのプログラムソースは、
- &ref(Demo.zip);
にまとめてあります。
** コメント [#i2644573]
#vote(おもしろかった[2],そうでもない[0],わかりずらい[1])
皆様のご意見、ご希望をお待ちしております。
- navigation.jsのiPhone, android変数チェック漏れのバグを...
#comment_kcaptcha
終了行:
[[FrontPage]]
#contents
2011/08/08からのアクセス回数 &counter;
** Projectファイルの再作成 [#ef518133]
Android SDKをインストールする前に作成したTitaniumのプロジ...
Resoruceファイル以下をバックアップして、作り直す必要があ...
** iPhoneとAndroidの違い [#t153348e]
TitaniumのAPIでデバイス依存するもの（「iOSのみ」と表記）...
特に
- NavigationGroup
- TableViewRowの削除等のSwipeイベントに対応する機能
- HTTPClient（実装が全く異なるためiPhoneとAndroidでの動作...
には、デバイス毎に対応する必要があります。
*** NavigationGroupの対応 [#ree50459]
iPhoneでよく使われるナビゲーションバーの左右のボタンは、A...
実装がことなります。
そこで、以下のnavigation.jsファイルにデバイスの違いを吸収...
#pre{{
var Navigation = function() {
this.setup = function(nav) {
if (Ti.Platform.osname === 'android') {
var android = nav.android;
var activitiy = Ti.Android.currentActivity;
if (activitiy) {
activitiy.onCreateOptionsMenu = function(e) {
var menu = e.menu;
if (android && android.leftButton) {
var leftMenuItem = menu.add(android.leftButton);
leftMenuItem.setIcon(android.leftButton.icon);
leftMenuItem.addEventListener('click', android.left...
}
if (android && android.rightButton) {
var rightMenuItem = menu.add(android.rightButton);
rightMenuItem.setIcon(android.rightButton.icon);
rightMenuItem.addEventListener('click', android.rig...
}
};
}
}
else {
var win = Ti.UI.currentWindow;
var iPhone = nav.iPhone;
if (iPhone && iPhone.leftButton) {
var leftButton = Ti.UI.createButton(iPhone.leftButton);
leftButton.addEventListener('click', iPhone.leftButto...
win.leftNavButton = leftButton;
}
if (iPhone && iPhone.rightButton) {
var rightButton = Ti.UI.createButton(iPhone.rightButt...
rightButton.addEventListener('click', iPhone.rightBut...
win.rightNavButton = rightButton;
}
}
};
};
}}
使用する場合には、各ボタンのコールバック関数を別途定義し...
table_view.jsへの変更
#pre{{
var addCallback = function(e) {
var at = new Date();
var recordWindow = Ti.UI.createWindow({
url: 'record_window.js',
record: {weight:'', at: at.toDateString()},
func: 'insert_row',
backgroundColor:'#fff'
});
Ti.UI.currentTab.open(recordWindow);
};
var grpahCallback = function(e) {
if (records.length > 0) {
var weights = "[";
var ticks = "[";
for (i = records.length-1; i >= 0; i--) {
var at = new Date(records[i].at);
weights = weights + "[" + at.getTime() +","+records[i]...
ticks = ticks + at.getTime() + ",";
}
weights = weights + "]"; ticks = ticks + "]";
var graphWindow = Ti.UI.createWindow({
url: 'plot_window.js',
weights: weights,
ticks: ticks
}
);
Ti.UI.currentTab.open(graphWindow);
}
};
var navi = new Navigation();
navi.setup({
iPhone: {
leftButton: {title: 'Graph', callback: grpahCallback},
rightButton: {systemButton: Titanium.UI.iPhone.SystemBu...
},
android: {
leftButton: {title: 'Graph', icon: 'dark_stats-bars.png...
rightButton: {title: 'Add', icon: 'dark_add.png', callb...
}
});
}}
setup関数で、iPhone、androidで使用するボタンのタイトル、...
Androidシミュレータでメニューボタンを押すと、以下のように...
&ref(android-navigator.png);
*** テーブル項目の削除 [#qc1ec1c1]
iPhoneでのTableViewRowでのSwipeで削除する機能が使えないた...
record_window.jsの追加
#pre{{
var deleteCallback = function(e) {
Ti.App.fireEvent('delete_row', win.record);
win.close();
};
Ti.include('navigation.js');
var navi = new Navigation();
navi.setup({
android: {
rightButton: {title: 'Delete', icon: 'dark_x.png', call...
}
});
}}
次にtable_view.jsでdelete_rowイベントを処理する部分を追加...
table_view.jsの変更（deleteCallbackも変更しました）
#pre{{
function deleteCallback(record) {
db.deleteOne(record);
records = db.findAll();
updateRecord(records);
}
tableView.addEventListener('delete', function(e){
deleteCallback(records[e.index]);
});
Ti.App.addEventListener('delete_row', function(record) {
Titanium.API.debug("delete_row");
deleteCallback(record);
});
}}
record_window.jsの画面は、以下のようになります。
&ref(android-delete.png);
*** WebViewのログイン処理 [#mb9db28c]
iPhoneでは、すべてのアプリケーションでCookieを共有するた...
FoodLogでは、
- FoodLogではjQueryを使用しているので、evalJSを使って認証...
- /account/loginページで認証をすると、/myfood/listに画面...
- 既に認証が終わっていたら、/に画面遷移します
これで、iPhone、Androidのどちらの場合も動作します。
foodlog_window.jsを以下のように変更します。
#pre{{
// FoodLogのWebページを表示
win = Ti.UI.currentWindow;
var webView = Ti.UI.createWebView({
url: 'http://www.foodlog.jp/account/login/'
}
);
webView.visible = false;
win.add(webView);
webView.addEventListener('load', function(){
var href = webView.evalJS('window.location.href');
// ログイン処理
if (href == 'http://www.foodlog.jp/account/login/') {
webView.evalJS('$(login_account_code).val("あなたのユー...
webView.evalJS('$(login_password).val("あなたのパスワー...
webView.evalJS('$("input[name=commit]").click();');
}
// /calendarに移動
else if (href == 'http://www.foodlog.jp/myfood/list' || ...
webView.evalJS('window.location="http://www.foodlog.jp/...
}
// ウィンドウを表示
else {
webView.visible=true;
}
});
}}
最後にAndroidでのFoodLogのカレンダー画面をご覧頂きます。
&ref(android-foodlog.png);
*** プログラムソース [#m9814161]
ここまでのプログラムソースは、
- &ref(Demo.zip);
にまとめてあります。
** コメント [#i2644573]
#vote(おもしろかった[2],そうでもない[0],わかりずらい[1])
皆様のご意見、ご希望をお待ちしております。
- navigation.jsのiPhone, android変数チェック漏れのバグを...
#comment_kcaptcha
ページ名:
SmartDoc
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
