Titanium Studio中文翻译视频教程:UI Fundamentals

移动开发
本文为翻译在titanium studio开始页面的视频教程第三部分:UI Fundamentals。系列教程志在为国内Titanium初级开发者更好地了解Titanium开发,因为是视频教程所以会有截图,以图文并茂的方式展现,相信有助于大家的理解。

下面的视频为

下面中文翻译

议程

1、基本titanium的用户界面结构

2、titanium视图层次

3、布局和定位

4、事件处理

对于web开发者来说

1、一个“window”是类似于一个“page”

2、“view”是类似于一个“div”

3、ti.ui命名空间提供了许多专门的控制(按钮,文本字段,采摘,滚动的意见)

4、UI对象在JavaScript中同样的DOM片段组成

查看层次结构和定位

相对母公司定位意见

布局选项:

1,绝对

2,垂直

3,水平(android1.6.0)

百分比高度/宽度(android1.6.0)

事件处理

类似在浏览器中的JavaScript

可以使用几乎所有的JS对象的addEventListener

可以以编程方式触发对象的事件,以及

演示:简单的事件处理程序在默认的项目

创建一个titanium工程,不改动任何代码噢!

在win1.add(label1);前面加这段代码

label1.addEventListener('click',function(){

label1.color='red',

label1.text='我是文本点击事件,点击我会边红色噢!'

});

运行程序后点击“IamWindow1”

就会变成'我是文本点击事件,点击我会边红色噢!'

执行上下文

应用程序的默认类似JS线程一个执行上下文

在浏览器

可以创造更多的通过:

窗口的URL

后台服务

每个人都有uinque符号空间-在一个上下文中另一个不可声明的变量

演示:在默认应用程序的执行上下文

接着刚才那个工程,

我们把以下代码剪切出来!是剪切噢!!

varlabel2=Titanium.UI.createLabel({

color:'#999',

text:'IamWindow2',

font:{fontSize:20,fontFamily:'HelveticaNeue'},

textAlign:'center',

width:'auto'

});

win2.add(label2);

接着在Resources目录下新建一个js文件!名为win2.js

把上面的代码复制到该文件里

并在该段代码上面再加一句代码

varwin2=Ti.UI.currentWindow;

运行程序后你会发现和你把所有代码都写在app.js中一样的效果了!

我们再来添加一段代码

在app.js中的加入加粗的代码

varwin2=Titanium.UI.createWindow({

title:'Tab2',

backgroundColor:'#fff',

url:"win2.js",

myLabel:"这是在app.js设置的"

});

再在win2.js中修改加粗的代码

varlabel2=Titanium.UI.createLabel({

color:'#999',

text:win2.myLabel,

font:{fontSize:20,fontFamily:'HelveticaNeue'},

textAlign:'center',

width:'auto'

});

运行程序就会显示

我们再在win2.js中加入一段代码:

label2.addEventListener('click',function(){

Ti.App.fireEvent('app:labelclicked',{newlabel:"来自第二级上下文"})

});

然后在app.js中的win1.add(label1);上面加入这段代码

Ti.App.addEventListener('app:labelclicked',function(e){

label1.text=e.newlabel;

});

运行程序可以看到

当你点击tab2中的文本的时候,回到tab1看到tab1的文本已经变成了

“来自第二级上下文”

执行上下文

通常情况下,我们建议只使用一个上下文

使用仅当“清白”所需的倍数

如果在使用多个上下文,它往往是必要的,在它们之间共享数据

对于这一点,使用应用程序级事件

...

应用程序级事件

有用的发送JSON序列化的数据,在各方面

有用的应用程序事件发布和订阅

即使在一个上下文

在面向构件的应用程序关键的API

演示:在默认应用程序的跨上下文的消息

撰写您的应用程序的UI

50%或更多的工作是U​​I组件建设

其余大部分是事件移交逻辑

将您的应用程序更易于维护,如果你打破它

成小部件

建议:使用app.js启动您的应用程序

创建/显示/打开您的应用程序从一个单一的UI组件

迭代UI编程

UI编程可以归结为推像素

需要以最快的周期,但还需要从一开始测试的跨平台!

IOS模拟器的开发速度快,设备周期是缓慢的

Android模拟器慢运行

Android设备更快(更好的开发)

实验室的目标

谱写了两个基本“选项卡应用

要求:

显示逃犯名单(虚拟数据)

向下钻取到一个细节窗口

提供一个窗口,添加一个逃犯

演示

以上工程完整代码如下你可以直接复制到你的工程里

app.js

//设置主UIView的背景颜色。(在没有任何窗口或者标签组的时候)

//thissetsthebackgroundcolorofthemasterUIView(whentherearenowindows/tabgroupsonit)

Titanium.UI.setBackgroundColor('#000');

//创建标签组

vartabGroup=Titanium.UI.createTabGroup();

//

//创建基本的UI标签和根窗口

//

varwin1=Titanium.UI.createWindow({

title:'Tab1',

backgroundColor:'#fff'

});

vartab1=Titanium.UI.createTab({

icon:'KS_nav_views.png',

title:'Tab1',

window:win1

});

varlabel1=Titanium.UI.createLabel({

color:'#999',

text:'IamWindow1',

font:{fontSize:20,fontFamily:'HelveticaNeue'},

textAlign:'center',

width:'auto'

});

label1.addEventListener('click',function(){

label1.color='red',

label1.text='我是文本点击事件,点击我会边红色噢!'

});

Ti.App.addEventListener('app:labelclicked',function(e){

label1.text=e.newlabel;

});

win1.add(label1);

//

//createcontrolstabandrootwindow

//

varwin2=Titanium.UI.createWindow({

title:'Tab2',

backgroundColor:'#fff',

url:"win2.js",

myLabel:"这是在app.js设置的"

});

vartab2=Titanium.UI.createTab({

icon:'KS_nav_ui.png',

title:'Tab2',

window:win2

});

//

//addtabs

//

tabGroup.addTab(tab1);

tabGroup.addTab(tab2);

//opentabgroup

tabGroup.open();

win2.js

varwin2=Ti.UI.currentWindow;

varlabel2=Titanium.UI.createLabel({

color:'#999',

text:win2.myLabel,

font:{fontSize:20,fontFamily:'HelveticaNeue'},

textAlign:'center',

width:'auto'

});

win2.add(label2);

label2.addEventListener('click',function(){

Ti.App.fireEvent('app:labelclicked',{newlabel:"来自第二级上下文"})

});

责任编辑:佚名 来源: 移动web开发社区
相关推荐

2012-04-19 16:41:24

Titanium视频实现页面跳转

2012-04-20 13:59:41

Titanium视频window

2012-04-19 16:55:48

Titanium视频jQuery Mobi

2011-06-29 18:02:58

Qt 中文 翻译

2012-04-19 16:33:03

Titanium视频更改默认图片

2012-05-09 09:38:23

2009-03-22 18:16:04

CCNA视频教程

2009-04-10 18:16:19

CCNP视频

2013-06-18 02:39:29

CocoStudio工Cocos2d-x

2012-05-23 09:41:37

Titanium St卸载

2011-12-30 15:21:38

PhoneGap视频

2011-06-14 16:13:48

Dalvik系统架构Android

2011-06-14 15:49:45

Android视频教程

2011-06-14 16:33:21

Android视频教程

2012-05-23 09:33:37

TitaniumStudioAndroid APK

2009-03-23 18:03:26

CCNA视频教程

2011-06-14 14:54:02

Android视频教程

2009-06-04 08:53:57

struts2视频教程

2012-03-28 09:40:55

安卓开发入门教程视频

2011-06-14 16:23:03

SDK安装和配置Android视频教程
点赞
收藏

51CTO技术栈公众号