HTML5 App实战(4)：秒表

秒表一个很常用的app，而且它的实现也是非常简单。这里我们用它来作为一个学习HTML5 app开发的例子，主要学习让app适应不同的密度的屏幕。

1.用支持HTML5的浏览器(Chrome/Firefox/Safari/IE9+)打开http://www.drawapp8.com/appedit.php。

选择”新建“创建一个新的app，缺省情况下的设备是iphone5（或者其它设备）。

2.现在我们把设备切换成FirefoxOS的手机。双击设备打开设备的属性对话框，在设备列表中选择firefoxOS的手机。

3.选择“确定”之后，我们就可以看到iphone5变成了FirefoxOS手机了。我们不需要上面的toolbar，把它删除掉。

4.现在我们向窗口上放一张图片和三个按钮。

5.为了方便界面排版，我们把三个按钮组合起来。

6.让三个按钮分别在分组控件的左中右，并垂直居中。

7.再向窗口中放入一个列表视图，用它来保存时间记录。

列表视图上列表项保留一个，其它的删除掉，并调整上的控件如下图。

8.现在我们先准备一些图片，并放在code.csdn.net上，如果你有自己的服务器，就放到自己的服务器上，图片分别放在mdpi，hdpi和xhdpi里，分别对应不同密度的屏幕。我把图片放在这里： https://code.csdn.net/absurd/FirefoxOS_Apps/tree/master/timer 。

我们来设置窗口的背景图片(code.csdn.net上不允许跨域访问里面的图片，我们还是要通过代理访问)。

我们来设置按钮的背景图片。

其它控件的背景图片一样设置，并把列表项的正常背景图片去掉。最后得下面的效果：

9.界面差不多了，我们开始写代码：

我们先在窗口的onOpen事件里写些代码：

var win = this;
var appInfo = {};

appInfo.STOPPED = 1;
appInfo.RUNNING = 2;
appInfo.PAUSED = 3;
appInfo.state = appInfo.STOPPED;
appInfo.timerCount = 0;

appInfo.reset = function() {
    this.timerCount = 0;
	this.laps = [];

	this.showTaps();
	win.findChildByName("ui-label-time", true).setText(appInfo.getTimeStr());

	return;
}

appInfo.getTimeStr = function() {
	var str = (appInfo.timerCount/10) + "";
	var dot = str.indexOf(".");
	if(dot < 0) {
		str = str + ".0";
	}

	return str;
}

appInfo.lap = function() {
	this.laps.push(this.getTimeStr());
	this.showTaps();
}

appInfo.showTaps = function() {
	var list = win.findChildByName("ui-list-view", true);

	var data = {children:[]};
	for(var i = this.laps.length-1; i >= 0; i--) {
	    var item = {children:[]};
		item.children.push({text:i+1+""});
		item.children.push({text:this.laps[i]});

		data.children.push(item);
	}

	list.bindData(data, "default", true);

	return;
}

appInfo.setState = function(state) {
	this.state = state;
	var startButton = win.findChildByName("ui-button-start", true);
	var stopButton = win.findChildByName("ui-button-stop", true);
	var resetButton = win.findChildByName("ui-button-reset", true);

	switch(state) {
		case appInfo.STOPPED: {
			startButton.setText("Start");
			stopButton.setEnable(false);
			resetButton.setText("Reset");
			break;
		}
		case appInfo.RUNNING: {
			startButton.setText("Pause");
			stopButton.setEnable(true);
			resetButton.setText("Lap");
			break;
		}
		case appInfo.PAUSED: {
			startButton.setText("Start");
			stopButton.setEnable(true);
			resetButton.setText("Reset");
			break;
		}
	}

	return;
}

this.appInfo = appInfo;

function onTimer() {
	if(appInfo.state === appInfo.RUNNING) {
		appInfo.timerCount = appInfo.timerCount + 1;
		
		win.findChildByName("ui-label-time", true).setText(appInfo.getTimeStr());
		win.postRedraw();
	}

	setTimeout(onTimer, 100);

	return;
}

setTimeout(onTimer, 100);

appInfo.reset();
appInfo.showTaps();

编写start按钮的事件处理代码：

var win = this.getWindow();
var appInfo = win.appInfo;

if(appInfo.state === appInfo.STOPPED) {
    appInfo.reset();
	appInfo.setState(appInfo.RUNNING);
}
else if(appInfo.state === appInfo.PAUSED) {
	appInfo.setState(appInfo.RUNNING);
}
else if(appInfo.state === appInfo.RUNNING) {
	appInfo.setState(appInfo.PAUSED);
}

编写stop按钮的事件处理代码：

var win = this.getWindow();
var appInfo = win.appInfo;

appInfo.setState(appInfo.STOPPED);

编写reset按钮的事件处理代码：

var win = this.getWindow();
var appInfo = win.appInfo;

if(appInfo.state === appInfo.STOPPED) {
    appInfo.reset();
}
else {
	appInfo.lap();
}

17.我们通过菜单"文件“/”在设备上预览“生成一个URL，在实际的设备上看看效果如何。

18.最后当然是生成安装包了，菜单“云编译”/"编译FirefoxOS安装包"。

这里有我们做好的，你可以直接参考：

在线编辑

在线运行