ネイティブ側でイベント受け取り

ネイティブ側でイベント受け取り

Webview側のアプリ本体になる
app.js
にイベントハンドラーを設定

イベントハンドラーの設定では
Titanium.Appオブジェクトの
addEventListener()
を使う

addEventListener()の
第1引数に
作成したカスタムイベント名

第2引数に
イベントハンドラーを渡す

このイベントハンドラーの　
第1引数eには
fireEvent
の第2引数が渡される

今回は
イベントが受け取れているかどうかを
トーストで確認

トースト通知は
TI.UIオブジェクトの
createNotification()
で生成

引数には
表示する時間を
durationプロパティ
でミリ秒単位で指定します
ちなみに、ミリ秒は
1000ms=1秒です
1.5秒表示したいなら
duration: 1500
となります

表示するテキストについては
messageプロパティで設定
これも
message : '表示したいメッセージ'
というように書きます
文字列を'で囲むのを忘れずに

作ったトーストは
show()
で画面に表示します

titanium mobile で占いアプリ作成

今回は日経Linux 2012 8月号の
サンプルを使いました




最初に
cp -p /media/LIN201208/article/rensai_android/app.js .
で
ファイルをコピー

次にの
gedit app.js
をコピーするため

Titanium Studio パッケージエクスプローラで
プロジェクト名 > Resources > app.js
でファイルを開きます

ファイル拡張子をみたまま、
java　script です

このファイルの中身をすべて削除し
app.js をコピペします

titanium mobile のUI部品生成は
Titanium.UI.create部品名
という関数を作成します

もし、ボタンを作るなら
Titanium.UI.createButton({
設定
})

というかんじです

ボタンを押したときの処理は
addEventListener を使います

このあたりも
java script に近いかも

具体的には
button.addEventListener('click',function(){
//クリックしたときの処理
});

となります

'click'
はイベント名

function(){ ...}
の部分は
イベントが発生したときに実行される関数
通称イベントハンドラー
です

今回使用した関数もメモしてみました

Math.random()
0以上1未満の数をランダムにかえす

Math.floor()
小数点以下の数を切り下げて整数をえる
これで、
０から「配列の長さ-1」
までの範囲の整数を乱数で得られる

titanium project 作成

./Titanium_Studio/TitaniumStudio
で
Titanium Studio を起動

File > new > Titanium Mobile Project
で設定画面を開きます

ただし、起動したときにネット接続していないと
このTitanium studio がログイン画面になり
使えません


起動したら
Project name : FirstProj
ここへはプロジェクト名

App Id
は
java でいうパッケージ
メルアドかドメインを反対から
入力します

[e-mail],jp
なら
jp.ne.example.test
というように書きます

Company/Personal URL
ここには自分のweb site URl
もしなければ
http://localhost

これで、helloworld のように
もとが完成です

あとは
プロジェクトを右クリックして
Run As > Android Emulator
でエミュレータが起動します

CPUの性能によりかなり時間差がありますが
無事に成功すると
アプリが起動します

Titanium Studio で Android エミュレータ

すでに過去にインストールできているなら

端末で
Titanium_Studio/TitaniumStudio
を実行すれば起動します

まずは設定が必要なので
windows > preference
で設定画面を開き

Aptana Studio > Titanium
の
Android SDK Home
に
Android SDK をインストールしたディレクトリ
を指定します

Titanium studio でプロジェクトを作成するには
File > New > Titanium Mobile Project
を選択します

エミュレータで動作確認するには
Run > Run As >
Mobile Web Preview in Emulator
を選択すると
Android エミュレータで動作確認できます

ただしエミュレータはとても重いので
あらかじめ起動しておくことをおすすめします

Tltanium Mobile について

TItanium Mobile について少しまとめてみました

Titanium Mobile で作成されたアプリは、
Resourcesディレクトリの下にある
app.js
というjavas script が読み込まれて実行されるとのことです

この app.js を改造することで、アプリを簡単に改造できるようです

通常、ブラウザの java script で外部からデータを取得するには
XML HttpRequest
を使いますが

Titanium Mobile では
Ti.NetWork.createHTTPCrient
を使うことで、外部データの取得ができるようです

これを使えば、twitter API から情報を取得できるようです

参考に、日経 Linux 2011-05 を使いましたが、なぜかうまくいかず
理解できないこともあったため、やめました

まず、念のため、バックアップをとります
/home/wiki/Test1/Resources/app.js
を失敗したときに戻せるように
cp Test1/Resources/app.js app.js_back
でバックアップ作成

次に
vi Test1/Resources/app.js
でファイルを開き

var window = Titanium.Ui.createWindow({backgrounColor: "#000"});
var tableView = Titanium.Ui.createTableView({
data: [{title: "Test1"},{title: "Test2"}]
});
window.add(tableView);
window.show()
を記述するようなのですが、
どこを書き換えるのかもわからず、一旦すべて削除してから
追記してもエラーになります

このため、参考サイト第2回　TitaniumでTwitterクライアント
をベースに、以下のように記述することで
起動することができました

Titanium.UI.setBackgroundColor('#000');
var tabGroup = Titanium.UI.createTabGroup({});
var win1 = Titanium.UI.createWindow({
title:'Tab 1',
backgroundColor:'#fff'
});
var tab1 = Titanium.UI.createTab({
window:win1 //前回，必要な引数まで削除していました。すいません!
});


var window = Ti.UI.createWindow({backgroundColor: "#000"});

var tableView = Ti.UI.createTableView({
data: [{title: "Test1"},{title: "Test2"}]
});
win1.add(tableView);

win1.hideTabBar();
tabGroup.addTab(tab1);
tabGroup.open();