Client Mobile Hello World
在这个教程里,将指导你创建一个客户端移动HelloWorld应用,这里用到以下3个控件:
- 一个 text field 用于输入姓名。
- 一个 label 用于显示信息。 to display a message.
- 一个 button 当你点击时,label上将会显示“Hello Html5Builber!”,Html5Builder 是在text field里输入的内容。
目录 |
1、创建一个应用
你可以在【Home】视图(见下图)下【New】里创建新的文件和项目。左边的树形视图选【HTML5 Builder Projects】,然后在右边双击【Client Mobile Application】
一个新的空白的client mobile page 将被创建,并打开【Design】 视图(如下)
2、添加一些控件
移动鼠标到【Tool Palette】(在右上角)并点击(+)【Mobile】展开,选择【MEdit】并拖到【Mobile Designer】,一个Medit控件就创建成功了。
重复这个步骤,再增加【 MLabel】和【MButton】 控件。
现在【Mobile Designer】上有3个控件,用鼠标点击其中一个控件。
你可以在【Object Inspector】查看和改变控件的属性。
接下来,修改【MButton】的【Caption】属性为【Say Hello】,【ButtonType】修改为【btNormal】。
清空【MLabel】的【Caption】属性,清空【MEdit】的【Text】属性。
3、编写按钮点击事件代码
在移动应用里,任何用户的动作都用事件来实现。
对于【MButton】最典型的事件就是click事件,双击【Mbotton】Html5Builder就会创建一个按钮的click事件。
输入以下代码,实现点击按钮在Mlabel上显示“Hello <Medit输入的姓名>”。
$('#MLabel1').html("Hello, " + $('#MEdit1').val() + "!");
jQuery的 html()方法定位Mlabel,val()获取Medit的值,在Javascript里,字符串用单引号‘’或双引号“”,字符串的连接用(.)句号。
当你输入代码时会有一些自动提示说明。
4、在Web浏览器里测试
点击【main toolbar】上的Run按钮就可以测试一下你的Hello World!应用了。
在Medit上输入一些文本比如Html5builder,然后点【Say Hello】按钮,Mlabel上就会显示Hello Html5builder!
5、发布应用
【Home】视图的【Deploy to Mobile】可以发布你的应用。支持的平台有 iOS, Android, BlackBerry,和 Windows Phone.