javascript原生移动云编程2 - 原生移动UI的起点

用javascript在码实的云平台上，可以在云里编写原生的移动应用。上次介绍了开发第一个应用Hello,world。由于码农花较多的时间耕耘UI用户界面，从这次开始，重点介绍如何制作UI，也就是如何利用好Titanium的UI库。Ti（Titanium的简称）把IOS和安卓的原生UI库整合成一个JS可以调用的、相对简洁的UI体系。

现在添加一个方框，把上次做的"超级码农”文字放到这个方框里。代码如下：

Class.create(Mash5.Widget, {
	initialize : function (config, params) {
		var container = Ti.UI.createView({
				width : Ti.UI.FILL,
				height : Ti.UI.FILL,
				backgroundColor : '#eee'
			});
		this.setContentView(container);

		var box = Ti.UI.createView({
				width : '80%',
				height : '100dip',
				borderRadius : dipToPx(20),
				backgroundColor : '#fff'
			});
		container.add(box);

		box.add(Ti.UI.createLabel({
				width : Ti.UI.SIZE,
				height : Ti.UI.SIZE,
				text : '超级码农',
				color : '#000',
				font : {
					fontSize : '50dip'
				}
		}));
	}
})

UI的最基本元素是矩形的View，Ti.UI.createView创建一个View。程序一开始，我们创建了一个充满全屏幕的containerView，通过this.setContentView(container)立刻把这个view设置到当前页面。然后又创建一个叫box的View，通过container.add(box)把box挂到container里面。box里面，我们用Ti.UI.createLabel创建了文字并同时把它挂到box的View里面。这样View的层层嵌套，就可以实现非常复杂的用户界面。

创建View的时候，通过设定属性来决定其大小、位置、颜色等等。在box的View里面，width宽度取屏幕宽度的80%，height高度设为100dip。注意dip是一个兼顾IOS和安卓的屏幕相对尺寸单位，手机的屏幕分辨率差异很大，用dip来统一。borderRadius把View做成圆边，圆角半径为20dip，用了dipToPx(20)来表达，圆角属性必须通过dipToPx把dip单位换算成屏幕的像素单位px。如果做一个正方形的View，圆角半径等于边长的一半，就可以画出一个圆。backgroundColor设定View的背景颜色为纯白色#fff，颜色取值和Web的CSS一样。View的位置，默认总是被摆放在正中。可以通过top, left, right, bottom, center等属性控制位置。还有，borderColor和borderWidth可以添加一个边框并设定线宽。

UI的详尽文档，请参见http://docs.appcelerator.com/titanium/latest/#!/api/Titanium.UI。代码编辑器的上方，有这个链接，方便码农随时查看。