Titanium自动生成的实例代码分析

移动开发
创建完工程后,titanium自动生成了一些文件,我们来分析下一下这些文件 ,这将有助于你理解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);

责任编辑:佚名
相关推荐

2012-02-13 14:41:50

Titanium架构分析

2012-04-20 11:07:12

Titanium

2012-04-19 10:52:52

2012-05-18 11:29:55

Titaniumpros

2012-05-18 11:34:03

Titaniumcons

2009-07-16 09:09:36

ibatis自动代码

2012-05-23 09:41:37

Titanium St卸载

2009-12-01 14:33:06

PHP生成html文件

2011-07-19 09:46:00

Oracle数据库递归查询

2023-11-09 09:28:09

Java代码

2009-07-15 17:31:08

iBATIS Ecli

2012-05-18 11:28:57

TitaniumCommunity W

2012-05-23 09:28:14

Titanium错误应对办法

2012-06-26 10:40:43

Titanium

2009-07-14 17:12:26

ibatis自动代码生

2009-07-20 14:30:38

jdbc连接数据库代码

2019-11-05 18:50:37

代码开发工具

2012-04-19 12:58:26

TitaniumJSS

2012-04-19 13:55:19

TitaniumTiMVC

2012-06-14 09:42:20

跨平台工具AppceleratoTitanium
点赞
收藏

51CTO技术栈公众号