HTML5 App实战(1)：简单计算器

“画app吧”是一个非常好用的HTML5App开发工具，这里我们以一个简单的计算器为例，介绍一下用“画app吧”来开发FirefoxOSApp的方法。

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

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

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

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

4.现在我们向设备中放入一个label控件，用它来显示计算器的表达式。

5.选中label控件，打开它的属性对话框，修改它的位置与大小相关属性（如下图）。

6.然后设置label控件的名称和其它属性（如下图）。

7.现在我们向设备放入一个grid控件，用它来放计算器的一些按键。

8.选中grid控件，打开它的属性对话框，修改它的行数和列数（如下图）。

9.通过copy/paste在grid中控件中放满按键，修改它们的文本和颜色（如下图）。

10.你可以根据自己的喜好调整界面。界面差不多了，现在我们开始写代码,选择对应的按键，打开它的事件处理编辑器。

对于数字，运算符，括号和小数点的按键，点击时只要把文本追加到表达式label控件里就好了。

1 2	varexpr =this.getWindow().findChildByName("ui-label-expr",true); expr.setText(expr.getText() +this.getText());

对于清除按键，只要把表达式label控件里的文本内容清除就好了。

1 2	varexpr =this.getWindow().findChildByName("ui-label-expr",true); expr.setText("");

对于回退按键，只要把表达式label控件里的文本最后一个字符清除就好了。

1 2 3 4 5 6

varexpr =this.getWindow().findChildByName("ui-label-expr",true); vartext = expr.getText(); if(text) { text = text.substr(0, text.length-1); expr.setText(text); }

对于等号按键，我们就计算表达式label控件里的表达式，并把结果设置到表达式label控件里就好了。

1 2 3 4 5 6

varexpr =this.getWindow().findChildByName("ui-label-expr",true); try{ expr.setText(eval(expr.getText())); }catch(e) { alert(e.message); }

11.OK,大功告成，点击设备上的“预览”按钮，就可以使用计算器了。

现在我们把手机横过来看看效果如何：

12.我们还要在实际设备中测试一下，选择菜单“文件”/”在设备中预览“，这时会弹出一个对话框，在你的FirefoxOS手机上打开这个URL吧。

测试没有问题，就可以生成安装包了。选择菜单”云编译“/"编译FirefoxOS安装包"。

这里有我们做好的:

你也可以直接[编辑]:http://www.drawapp8.com/appedit.php?url=https://code.csdn.net/absurd/FirefoxOS_Apps/blob/master/calculators/firefoxos_calc1.jso

也可以在线[运行]:http://www.drawapp8.com/apprun.php?url=https://code.csdn.net/absurd/FirefoxOS_Apps/blob/master/calculators/firefoxos_calc1.jso