Titanium自動(dòng)生成的實(shí)例代碼分析
app.js
首先titanium將會(huì)打開(kāi)名為app.js文件,這是程序的主文件,程序啟動(dòng)將從該文件發(fā)起!
自動(dòng)生成的代碼里所有代碼都寫在一個(gè)app.js文件里,但是在實(shí)際開(kāi)發(fā)項(xiàng)目的時(shí)候,我們應(yīng)該遵循MVC模式,這將有利于程序的架構(gòu)!我們將在后面的文章里再做深入的探討
現(xiàn)在我們就來(lái)看看app.js文件里的內(nèi)容是什么
代碼分析:
//設(shè)置UIView的背景顏色
Titanium.UI.setBackgroundColor('#000');
//創(chuàng)建選項(xiàng)組對(duì)象
vartabGroup=Titanium.UI.createTabGroup();
//創(chuàng)建一個(gè)window對(duì)象,并且賦予它兩個(gè)屬性分別是標(biāo)題和背景顏色----
varwin1=Titanium.UI.createWindow({
title:'Tab1',
backgroundColor:'#fff'
});
//創(chuàng)建tab對(duì)象并賦予三個(gè)屬性,分別是圖標(biāo)、標(biāo)題、窗口
vartab1=Titanium.UI.createTab({
icon:'KS_nav_views.png',
title:'Tab1',
window:win1
});
//創(chuàng)建label對(duì)象賦予五個(gè)屬性分別是顏色、文本、字體、文字對(duì)齊方式和寬度
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);
//打開(kāi)tabGroup在window中顯示
tabGroup.open();
仔細(xì)分析app.js文件代碼你會(huì)發(fā)現(xiàn)在titanium中所有內(nèi)容是一層一層創(chuàng)建后最后實(shí)例化出來(lái)
tabgroup-->window-->label
我們?cè)賮?lái)看titanium的API文檔
Titanium.UI下有許多方法,在上面的代碼中首先使用到了
1、Titanium.UI.createTabGroup方法,創(chuàng)建tabGroup
2、Titanium.UI.createWindow方法,創(chuàng)建window
3、Titanium.UI.createTab方法,創(chuàng)建tab
4、Titanium.UI.createLabel方法,創(chuàng)建label
其實(shí)你發(fā)現(xiàn)讀JS寫的代碼非常費(fèi)勁,你不仔細(xì)分析可能會(huì)看錯(cuò),所以校長(zhǎng)建議大家像HTML一樣最好做一些代碼的間隔和縮進(jìn),這樣就好理解了。


試試你的身手仿照上面代碼我們?cè)偌右粋€(gè)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);
