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とのつながりを記述することにした。

view plainprint?

1. Titanium.UI.setBackgroundColor('#000');　//背景をセット  
2. var tabGroup = Ti.UI.createTabGroup();   //タググループセット  
3.   
4. // [tab_scan]タブの生成。 [win_scan]ウインドウを所有する。  
5. // 起動の初期画面。バーコードスキャンなど主業務を行う画面となる予定。  
6. var win_scan = Ti.UI.createWindow({  
7.  url: 'win_scan.js',            　// win_scanが記載されるソースファイル  
8.  title: 'SCAN',             　　  // cssに準拠しているらしい  
9.  backgroundColor:'#fff'  
10. });  
11.   
12. var tab_scan = Ti.UI.createTab({    //   
13.  window: win_scan,  
14.  icon:'KS_nav_ui.png',  
15.  title:'scan'  
16. });  
17.   
18. // タブ [list_tab]  
19. // スキャンしたコードを保管し、その一覧を表示する予定。  
20. var win_list = Ti.UI.createWindow({  
21.  url: 'win_list.js',  
22.  title: 'LIST',  
23.  backgroundColor:'#fff'  
24. });  
25.   
26. var tab_list = Ti.UI.createTab({  
27.  window: win_list,  
28.  icon:'KS_nav_ui.png',  
29.  title:'list'  
30. });  
31. tab_list.setBadge(52); // バッチ表示を試してみた。  
32.   
33. // タブ [tab_config]  
34. // 各種設定を行う画面の予定。  
35. var win_config = Ti.UI.createWindow({  
36.  url: 'win_config.js',  
37.  title: 'CONFIG',  
38.  backgroundColor:'#fff'  
39. });  
40.   
41. var tab_config = Ti.UI.createTab({  
42.  window: win_config,  
43.  icon:'KS_nav_ui.png',  
44.  title:'config'  
45. })  
46.   
47. // タブグループへの各タブの追加とスタート。  
48. // 初期は、tabs[0] になるらしい。addTabは、配列への追加イメージか。  
49. tabGroup.addTab(tab_scan);  
50. tabGroup.addTab(tab_list);  
51. tabGroup.addTab(tab_config);  
52. tabGroup.open();  

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

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

view plainprint?

1. // このファイルが呼ばれた時点で "current"  
2. var win = Ti.UI.currentWindow; // currentWindowは(appの)プロパティ。  
3.   
4. var label = Ti.UI.createLabel({  
5.  color:'#999',  
6.  text:'this is scan windows.',  
7.  font:{fontSize:20,fontFamily:'Helvetica Neue'}, // フォントは設定がこれ？  
8.  textAlign:'center',  
9.  top:10,  
10.  height:30　// 指定しないと autoになり、windowいっぱいの縦幅になる。  
11. });  
12. win.add(label);  
13.   
14. var scanButton = Ti.UI.createButton({  
15.  title:'Scan It',  
16.  top:80,  
17.  left:10,  
18.  width:300,  
19.  height:100  
20. });  
21. win.add(scanButton);  
22.   
23. var sendButton = Ti.UI.createButton({  
24.  title:'Send Data',  
25.  top:200,  
26.  left:10,  
27.  width:300,  
28.  height:100  
29. });  
30. win.add(sendButton);  
31.   
32. // ボタン[scanButton]がクリックされた場合のイベントを記載。  
33. // イベントの実際は、無名関数 function() で実装。  
34. scanButton.addEventListener('click', function(){  
35.  Ti.UI.createAlertDialog({  
36.   title: 'SCAN ...',  
37.   message: 'scan complete !'  
38.  }).show(); // オブジェクトを生成し、すぐ表示。イベント発生時になる。  
39. });  

// このファイルが呼ばれた時点で "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(); // オブジェクトを生成し、すぐ表示。イベント発生時になる。
});

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