titanium/はじめの一歩
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
単語検索
|
最終更新
|
ヘルプ
]
開始行:
[[FrontPage]]
#contents
2011/07/31からのアクセス回数 &counter;
** Titanium mobileを知って [#z7e4a7c3]
技評のWeb版で紹介されている
[[Titanium Mobileで作る！ iPhone／Androidアプリ>http://gi...
ですが、Titanium Studioのフリー版でdebug機能も使えるよう...
((javascriptはあまり馴染みがないので、デバッガが使えない...
*** Titanium Studioのインストール [#n91ca592]
Titanium Studioのインストールは、
[[Get Started Guide>http://developer.appcelerator.com/get...
に従ってインストールします。
Titanium Studioのダウンロードには、ユーザ登録が必要です！
** プロジェクトの作成 [#oe05f8fb]
Titanium Studioは、EclipseベースのAptanaStudioが元になっ...
File->New->Titanium mobile projectを選択し、新規プロジェ...
- Project name: Demo
- App Id: jp.co.pwv.Titanium.Demo ← 各自の環境に合わせて...
- URL: http://www.pwv.co.jp ← 各自の環境に合わせて変更し...
と入力すると、自動的に２つのタグウィンドウを持つ、アプリ...
ここで、左のApp ExplorerのResourcesを右クリックし、Debug ...
１分ほどでiPhoneシミュレータが起動し、以下の画面が表示さ...
&ref(iPhoneSimulator.png);
これから作るデモプログラムは、日々の体重、体脂肪、万歩計...
機能を持ったものです。
&ref(tableview.png); &ref(foodlog.png);
** WebViewでWEBページを表示する [#b3b7fb50]
最初に、Tab2のウィンドウにFoodlogのWEBページを表示してみ...
app.jsの
#pre{{
var label2 = Titanium.UI.createLabel({
color:'#999',
text:'I am Window 2',
font:{fontSize:20,fontFamily:'Helvetica Neue'},
textAlign:'center',
width:'auto'
});
win2.add(label2);
}}
を以下のように書き替えます。
#pre{{
var webView = Ti.UI.createWebView({
url: 'http://www.foodlog.jp/'
}
);
win2.add(webView);
}}
urlに表示したいWebページのURLを指定するだけです（とても簡...
iPhoneシミュレータが起動したら、画面右下のTab 2をクリック...
以下の画面が表示されます。
&ref(WebView.png);
** Windowの定義を別ファイルにする [#oed4f4cf]
Titaniumでは、Windowの定義を別ファイルにすることができる...
画面の管理が楽になり、画面の再利用も楽になります。
先ほどのFoodlogのWebページ画面をfoodlog_window.jsに分けて...
foodlog_window.jsを次のようにします。
#pre{{
win = Ti.UI.currentWindow;
var webView = Ti.UI.createWebView({
url: 'http://www.foodlog.jp/'
}
);
win.add(webView);
}}
app.jsのwin2の定義では、先ほど入れ替えた部分を削除して、c...
win2の定義は、以下のようになります。
#pre{{
var win2 = Titanium.UI.createWindow({
url: 'foodlog_window.js',
title:'Tab 2',
backgroundColor:'#fff'
});
var tab2 = Titanium.UI.createTab({
icon:'KS_nav_ui.png',
title:'Tab 2',
window:win2
});
}}
** 自動ログインを追加する [#w232b3a3]
FoodLogのサイトにユーザ登録し、Sign inするとマイフード画...
しかし、foodlog_windowの画面では、ログインしていないので...
そこで、foodlog_window.jsに自動ログインの機能を追加します。
Titaniumには、WebサーバにアクセスするためのHTTPClientが用...
HTTP要求を送ります。
foodlog_window.jsを以下のように変更します。
FoodLogのurlもマイページを表示するようにhttp://www.foodlo...
#pre{{
// 自動ログインの処理
var xhr = Ti.Network.createHTTPClient();
xhr.onload = function(e) { //handle response
Ti.API.debug("Login OK");
};
xhr.onerror = function(e) {
Ti.API.debug("Error:" + e.toString);
};
xhr.open('POST','http://www.foodlog.jp/account/login', fa...
xhr.send({
'login[account_code]': 'あなたのユーザID',
'login[password]': 'あなたのパスワード'
});
// FoodLogのWebページを表示
win = Ti.UI.currentWindow;
var webView = Ti.UI.createWebView({
url: 'http://www.foodlog.jp/calendar/'
}
);
win.add(webView);
}}
タブからTab 2をクリックしてください。無事FoodLogのマイペ...
&ref(FoodCalendar.png);
もし、iPhoneシミュレータが原因不明の障害で異常終了したら、
ProjectメニューからCleanを選択し、Demoプロジェクトを一度...
再度実行してみてください。
*** プログラムソース [#u1b70512]
ここまでのプログラムソースは、
- &ref(Demo.zip);
にまとめてあります。
** コメント [#g4e6f9e0]
#vote(おもしろかった[4],そうでもない[0],わかりずらい[0])
皆様のご意見、ご希望をお待ちしております。
#comment_kcaptcha
終了行:
[[FrontPage]]
#contents
2011/07/31からのアクセス回数 &counter;
** Titanium mobileを知って [#z7e4a7c3]
技評のWeb版で紹介されている
[[Titanium Mobileで作る！ iPhone／Androidアプリ>http://gi...
ですが、Titanium Studioのフリー版でdebug機能も使えるよう...
((javascriptはあまり馴染みがないので、デバッガが使えない...
*** Titanium Studioのインストール [#n91ca592]
Titanium Studioのインストールは、
[[Get Started Guide>http://developer.appcelerator.com/get...
に従ってインストールします。
Titanium Studioのダウンロードには、ユーザ登録が必要です！
** プロジェクトの作成 [#oe05f8fb]
Titanium Studioは、EclipseベースのAptanaStudioが元になっ...
File->New->Titanium mobile projectを選択し、新規プロジェ...
- Project name: Demo
- App Id: jp.co.pwv.Titanium.Demo ← 各自の環境に合わせて...
- URL: http://www.pwv.co.jp ← 各自の環境に合わせて変更し...
と入力すると、自動的に２つのタグウィンドウを持つ、アプリ...
ここで、左のApp ExplorerのResourcesを右クリックし、Debug ...
１分ほどでiPhoneシミュレータが起動し、以下の画面が表示さ...
&ref(iPhoneSimulator.png);
これから作るデモプログラムは、日々の体重、体脂肪、万歩計...
機能を持ったものです。
&ref(tableview.png); &ref(foodlog.png);
** WebViewでWEBページを表示する [#b3b7fb50]
最初に、Tab2のウィンドウにFoodlogのWEBページを表示してみ...
app.jsの
#pre{{
var label2 = Titanium.UI.createLabel({
color:'#999',
text:'I am Window 2',
font:{fontSize:20,fontFamily:'Helvetica Neue'},
textAlign:'center',
width:'auto'
});
win2.add(label2);
}}
を以下のように書き替えます。
#pre{{
var webView = Ti.UI.createWebView({
url: 'http://www.foodlog.jp/'
}
);
win2.add(webView);
}}
urlに表示したいWebページのURLを指定するだけです（とても簡...
iPhoneシミュレータが起動したら、画面右下のTab 2をクリック...
以下の画面が表示されます。
&ref(WebView.png);
** Windowの定義を別ファイルにする [#oed4f4cf]
Titaniumでは、Windowの定義を別ファイルにすることができる...
画面の管理が楽になり、画面の再利用も楽になります。
先ほどのFoodlogのWebページ画面をfoodlog_window.jsに分けて...
foodlog_window.jsを次のようにします。
#pre{{
win = Ti.UI.currentWindow;
var webView = Ti.UI.createWebView({
url: 'http://www.foodlog.jp/'
}
);
win.add(webView);
}}
app.jsのwin2の定義では、先ほど入れ替えた部分を削除して、c...
win2の定義は、以下のようになります。
#pre{{
var win2 = Titanium.UI.createWindow({
url: 'foodlog_window.js',
title:'Tab 2',
backgroundColor:'#fff'
});
var tab2 = Titanium.UI.createTab({
icon:'KS_nav_ui.png',
title:'Tab 2',
window:win2
});
}}
** 自動ログインを追加する [#w232b3a3]
FoodLogのサイトにユーザ登録し、Sign inするとマイフード画...
しかし、foodlog_windowの画面では、ログインしていないので...
そこで、foodlog_window.jsに自動ログインの機能を追加します。
Titaniumには、WebサーバにアクセスするためのHTTPClientが用...
HTTP要求を送ります。
foodlog_window.jsを以下のように変更します。
FoodLogのurlもマイページを表示するようにhttp://www.foodlo...
#pre{{
// 自動ログインの処理
var xhr = Ti.Network.createHTTPClient();
xhr.onload = function(e) { //handle response
Ti.API.debug("Login OK");
};
xhr.onerror = function(e) {
Ti.API.debug("Error:" + e.toString);
};
xhr.open('POST','http://www.foodlog.jp/account/login', fa...
xhr.send({
'login[account_code]': 'あなたのユーザID',
'login[password]': 'あなたのパスワード'
});
// FoodLogのWebページを表示
win = Ti.UI.currentWindow;
var webView = Ti.UI.createWebView({
url: 'http://www.foodlog.jp/calendar/'
}
);
win.add(webView);
}}
タブからTab 2をクリックしてください。無事FoodLogのマイペ...
&ref(FoodCalendar.png);
もし、iPhoneシミュレータが原因不明の障害で異常終了したら、
ProjectメニューからCleanを選択し、Demoプロジェクトを一度...
再度実行してみてください。
*** プログラムソース [#u1b70512]
ここまでのプログラムソースは、
- &ref(Demo.zip);
にまとめてあります。
** コメント [#g4e6f9e0]
#vote(おもしろかった[4],そうでもない[0],わかりずらい[0])
皆様のご意見、ご希望をお待ちしております。
#comment_kcaptcha
ページ名:
SmartDoc
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
