Titunium 新規プロジェクト始動

Titanium Studio 悪戦苦闘

いくつかチュートリアルをこなしたが、Titunium Studioは使いにくい。コード補完機能は日頃使っていなかったので、とても新鮮なのだが。
以下、気になったところ

• コンパイルに時間がかかりすぎると、sessionが切れる。
• 過去のコンパイル情報と矛盾した場合、エラーになる。
• 再度、コンパイル ＆ 実行すると上手くいく。
• subverion pluginは使いにくい。
• プロジェクトの削除の方法が不明だった。

Subversionの利用

新規プロジェクトを始める。ソース管理は、やっぱりsubversionを使うことにしたが、subversionもコマンドラインで使っていたので、Titunium Studioでの利用に随分と迷う。いろいろ試行錯誤したが、結果以下の手順にした。ある程度ソースが出来、SVN Pluginのインストールの後、

1. [clean ..] する。 build ディレクトリを空にする。(iphoneディレクトリも無くす)
2. command line で、import する。
3. command line で、export する。
4. buildフォルダの属性をignoreにする。
5. 元のプロジェクトのIDを変更する（import時にIDで同じかを判断しているらしい）。
6. 別のプロジェクトでimportする。
7. 元のプロジェクトは削除する。menuから。

なかなか、スタートアップが上手くいかないねえ。

subversionプラグインのインストールは、以下を参照。
http://wiki.appcelerator.org/display/tis/Subversion

$ cd /project/dir/
 $ svn import . -m "iPhone Titanium mobile app" http://xxx/svn/trunk/app 
 $ cd ..
 $ mv app _app
 $ svn co http://xxx/svn/trunk/app
 $ cd app
 $ svn propset svn:ignore "*" build/
 $ svn commit -m "set propset svn:ignore build/*"

最初のコード app.js

さて、今日のTitaniumの勉強は、棚卸業務プログラムの手始めとして、TabGroupの制御などを学習。

Resorces/app.jsは、アプリケーションの起動ファイル。このソースが最初に処理される。
ここでは、タブグループのセットと、他のviewとのつながりを記述することにした。

Titanium.UI.setBackgroundColor('#000');　//背景をセット
var tabGroup = Ti.UI.createTabGroup();   //タググループセット

// [tab_scan]タブの生成。 [win_scan]ウインドウを所有する。
// 起動の初期画面。バーコードスキャンなど主業務を行う画面となる予定。
var win_scan = Ti.UI.createWindow({
 url: 'win_scan.js',            　// win_scanが記載されるソースファイル
 title: 'SCAN',             　　  // cssに準拠しているらしい
 backgroundColor:'#fff'
});

var tab_scan = Ti.UI.createTab({    // 
 window: win_scan,
 icon:'KS_nav_ui.png',
 title:'scan'
});

// タブ [list_tab]
// スキャンしたコードを保管し、その一覧を表示する予定。
var win_list = Ti.UI.createWindow({
 url: 'win_list.js',
 title: 'LIST',
 backgroundColor:'#fff'
});

var tab_list = Ti.UI.createTab({
 window: win_list,
 icon:'KS_nav_ui.png',
 title:'list'
});
tab_list.setBadge(52); // バッチ表示を試してみた。

// タブ [tab_config]
// 各種設定を行う画面の予定。
var win_config = Ti.UI.createWindow({
 url: 'win_config.js',
 title: 'CONFIG',
 backgroundColor:'#fff'
});

var tab_config = Ti.UI.createTab({
 window: win_config,
 icon:'KS_nav_ui.png',
 title:'config'
})

// タブグループへの各タブの追加とスタート。
// 初期は、tabs[0] になるらしい。addTabは、配列への追加イメージか。
tabGroup.addTab(tab_scan);
tabGroup.addTab(tab_list);
tabGroup.addTab(tab_config);
tabGroup.open();

win_scan.js

ボタンの追加とボタンクリックの時のイベントリスナー処理を試してみた。

// このファイルが呼ばれた時点で "current"
var win = Ti.UI.currentWindow; // currentWindowは(appの)プロパティ。

var label = Ti.UI.createLabel({
 color:'#999',
 text:'this is scan windows.',
 font:{fontSize:20,fontFamily:'Helvetica Neue'}, // フォントは設定がこれ？
 textAlign:'center',
 top:10,
 height:30　// 指定しないと autoになり、windowいっぱいの縦幅になる。
});
win.add(label);

var scanButton = Ti.UI.createButton({
 title:'Scan It',
 top:80,
 left:10,
 width:300,
 height:100
});
win.add(scanButton);

var sendButton = Ti.UI.createButton({
 title:'Send Data',
 top:200,
 left:10,
 width:300,
 height:100
});
win.add(sendButton);

// ボタン[scanButton]がクリックされた場合のイベントを記載。
// イベントの実際は、無名関数 function() で実装。
scanButton.addEventListener('click', function(){
 Ti.UI.createAlertDialog({
  title: 'SCAN ...',
  message: 'scan complete !'
 }).show(); // オブジェクトを生成し、すぐ表示。イベント発生時になる。
});

イベントリスナーのテストをしたところ！