javascript原生移动云编程5 - 如何做互动按钮和页面跳转

用javascript在码实云平台上，可以在云里编写原生的移动应用。移动应用必然涉及到用户的互动。下面实例中，做了两个按钮。按下第一个按钮“秘密机关”会显示隐藏的第二个按钮“紧急逃生”，而“紧急逃生”按钮按下会跳转页面。

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

		var button1 = Ti.UI.createView({
		    top: '50%',
		    width: '160dip',
		    height: '40dip',
		    backgroundColor : '#44f',
		    borderRadius: dipToPx(20),
		});
		container.add(button1);
		button1.add(Ti.UI.createLabel({
			text : '秘密机关在此',
			color : '#fff',
			font : {
				fontSize : '20dip',
				fontWeight: 'bold'
			},
		}));
		
		var button2 = Ti.UI.createView({
		    top: '30%',
		    width: '160dip',
		    height: '40dip',
		    backgroundColor : '#f44',
		    borderRadius: dipToPx(20),
		    visible: false, // 初始设为不可见
		});
		container.add(button2);
		button2.add(Ti.UI.createLabel({
			text : '紧急逃生',
			color : '#fff',
			font : {
				fontSize : '20dip',
				fontWeight: 'bold'
			},
		}));
		
		// 按钮button1的交互事件处理，实现用户互动
		button1.addEventListener('click', function() {
		    if (button2.visible)
		        button2.hide();
		    else
		        button2.show();
		});
		
		// 按钮button2的交互事件处理，实现页面跳转
		var context = this.getContext();
		button2.addEventListener('click', function() {
			context.startPage({
				nameSpace: 'mashDeveloper.views.BasicView.zhinengxiaoche_1406856699707'
			});
		});
	}
})

显然，按钮也是用View做出来的，按钮上面用Label写有文字。博客的内容框是content_box1。做第二个按钮时，注意View里面的属性visible: false，这个View初始不显示。第一个按钮的互动实现用个事件处理器button1.addEventListener，侦听的事件是'click'，也就是点击事件。一旦手机屏幕点击了这个按钮的View，就会执行function()里面的代码。动作就是判断button2.visible，如果第二个按钮已经可见，让它隐藏，否则，让它显示。

第二个按钮的动作是跳转页面。页面跳转用context.startPage的实现非常简单，参数里面的nameSpace是一个页面的全名，即命名空间。这个长名字可以在“页面”工具栏里看到。码实平台里，所有的构件都用命名空间来标识，以后详细介绍。