“画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
|
var expr
= this .getWindow().findChildByName( "ui-label-expr" , true );
expr.setText(expr.getText()
+ this .getText());
|
对于清除按键,只要把表达式label控件里的文本内容清除就好了。
1
2
|
var expr
= this .getWindow().findChildByName( "ui-label-expr" , true );
expr.setText( "" );
|
对于回退按键,只要把表达式label控件里的文本最后一个字符清除就好了。
1
2
3
4
5
6
|
var expr
= this .getWindow().findChildByName( "ui-label-expr" , true );
var text
= expr.getText();
if (text)
{
text
= text.substr(0, text.length-1);
expr.setText(text);
}
|
对于等号按键,我们就计算表达式label控件里的表达式,并把结果设置到表达式label控件里就好了。
1
2
3
4
5
6
|
var expr
= 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
分享到:
相关推荐
1、该资源包括项目的全部源码,下载可以直接使用! 2、本项目适合作为计算机、数学、电子信息等专业的课程设计、期末大作业和毕设项目,作为参考资料学习借鉴。 3、本资源作为“参考资料”如果需要实现其他功能,...
小白的Python入门教程实战篇:网站+iOS App源码 小白的Python入门教程实战篇:网站+iOS App源码 小白的Python入门教程实战篇:网站+iOS App源码 小白的Python入门教程实战篇:网站+iOS App源码 小白的Python入门教程...
王家林的面向Web Cloud的HTML5 App开发实战:Browser&HTML5;&CSS3;&PhoneGap;&jQuery; Mobile& WebSocket&Node;.js(2天)
资源名称:精通引动APP测试实战:技术、工具和案例内容简介:本书全面讲解了移动平台测试方面的技术、技巧、工具和测试用例等实战知识。内容涵盖主流的测试工具,包括JUnit、Monkey、MonkeyRunner、Robotium、...
《App Inventor移动终端应用开发》教学课件04简易计算器.pdf《App Inventor移动终端应用开发》教学课件04简易计算器.pdf《App Inventor移动终端应用开发》教学课件04简易计算器.pdf《App Inventor移动终端应用开发》...
Android实战内容:TestApp1
Android实战内容:TestApp
MIT App Inventor 计算器 两个计算器页面可进行切换,分别实现混合计算与普通计算
1、设计App的界面,可以输入2个操作数和操作符(加减乘除),还有等号; 2、编写好App的行为,能正常实现数字的加减乘除计算,对除零情况有提示。 *注:自己做的课堂作业,给大家做个参考,不希望有人直接拿去交哦~...
本系列将会用vue.js2制作一个移动端的webapp单页面,页面不多,大概在7,8个左右,不过麻雀虽小,五脏俱全,常用的效果如轮播图,下拉刷新,上拉加载,图片懒加载都会用到。css方面也会有一些描述,像不同分辨率的...
基于MATLAB-GUI的简易计算器设计,基于MATLAB GUI的计算器设计是利用GUIDE创建图形用户界面进行计算器设计。设计计算器时,主要是考虑到计算器的易用性、功能的常用程度进行计算器界面与功能的设计。通过调整控件和...
1.1 数字键盘按钮 selector 文件 numbtn_set.xml 1.1.1 数字按钮半透明样式文件 numbtn.xml 1.2 功能按钮及运算符按
简单App计算器实现(js+html+css_hbuilder)
本计算器仅支持+ - * / 一次性运算,如只能输入1+2 1*2 1/2 1-2 等,支持负数,不支持如1+2-3的非一次性运算。除数为0时或运算符号非这四种时提示WRONG
Android APP开发、初学者开发、JAVA开发,简易计算器应用,入门级代码
Android上机实验:⾝⾼计算器的实现 2.对控件进⾏定义(或者导包) 3.对Button控件进⾏代码编译,实现计算的算法 @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate...
Android实战内容:TestApp2
Android开发之简易计算器