Titanium自動生成的實例代碼分析
app.js
首先titanium將會打開名為app.js文件,這是程序的主文件,程序啟動將從該文件發起!
自動生成的代碼里所有代碼都寫在一個app.js文件里,但是在實際開發項目的時候,我們應該遵循MVC模式,這將有利于程序的架構!我們將在后面的文章里再做深入的探討
現在我們就來看看app.js文件里的內容是什么
代碼分析:
//設置UIView的背景顏色
Titanium.UI.setBackgroundColor('#000');
//創建選項組對象
vartabGroup=Titanium.UI.createTabGroup();
//創建一個window對象,并且賦予它兩個屬性分別是標題和背景顏色----
varwin1=Titanium.UI.createWindow({
title:'Tab1',
backgroundColor:'#fff'
});
//創建tab對象并賦予三個屬性,分別是圖標、標題、窗口
vartab1=Titanium.UI.createTab({
icon:'KS_nav_views.png',
title:'Tab1',
window:win1
});
//創建label對象賦予五個屬性分別是顏色、文本、字體、文字對齊方式和寬度
varlabel1=Titanium.UI.createLabel({
color:'#999',
text:'IamWindow1',
font:{fontSize:20,fontFamily:'HelveticaNeue'},
textAlign:'center',
width:'auto'
});
//在win1中添加label1
win1.add(label1);
//這是tab2和tab1一樣
varwin2=Titanium.UI.createWindow({
title:'Tab2',
backgroundColor:'#fff'
});
vartab2=Titanium.UI.createTab({
icon:'KS_nav_ui.png',
title:'Tab2',
window:win2
});
varlabel2=Titanium.UI.createLabel({
color:'#999',
text:'IamWindow2',
font:{fontSize:20,fontFamily:'HelveticaNeue'},
textAlign:'center',
width:'auto'
});
win2.add(label2);
//在tabGroup中添加tab1、tab2
tabGroup.addTab(tab1);
tabGroup.addTab(tab2);
//打開tabGroup在window中顯示
tabGroup.open();
仔細分析app.js文件代碼你會發現在titanium中所有內容是一層一層創建后最后實例化出來
tabgroup-->window-->label
我們再來看titanium的API文檔
Titanium.UI下有許多方法,在上面的代碼中首先使用到了
1、Titanium.UI.createTabGroup方法,創建tabGroup
2、Titanium.UI.createWindow方法,創建window
3、Titanium.UI.createTab方法,創建tab
4、Titanium.UI.createLabel方法,創建label
其實你發現讀JS寫的代碼非常費勁,你不仔細分析可能會看錯,所以校長建議大家像HTML一樣最好做一些代碼的間隔和縮進,這樣就好理解了。


試試你的身手仿照上面代碼我們再加一個tab看看效果咋樣
varwin3=Titanium.UI.createWindow({
title:'Tab3',
backgroundColor:'#fff'
});
vartab3=Titanium.UI.createTab({
icon:'KS_nav_ui.png',
title:'Tab3',
window:win3
});
varlabel3=Titanium.UI.createLabel({
color:'#999',
text:'IamWindow3',
font:{fontSize:20,fontFamily:'HelveticaNeue'},
textAlign:'center',
width:'auto'
});
win3.add(label3);
tabGroup.addTab(tab3);
