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);