JS开发指南

Steven.Lu

标准：ECMAScript5

范围:

       (1)自定义控件中的JS的作用域在自定义控件内。

       (2)每个控件的JS的为函数级。不同的自定义控件中使用var定义的相同变量名称不会被污染。

this对象：

       this对象是指当前自定义控件本身【即定义JS属性的控件】。同时this对象也是控件对象。

方法：

       (1)this.find("[controlName]") 查找子控件：

              从当前控件的子控件中查找指定名称的子控件对象。并返回控件对象，若controlName对应的dom对象不存在，返回undefined。

       (2) on([eventName],function) 控件事件绑定：

              a) eventName: 控件的事件名称，对应服务端控件事件类型。

              b) function: 事件回调函数。函数参数对应UI事件列表中的        事件参数。

              c) return：返回值用于控制是否向服务端提交事件。

                     true：触发服务端事件

                     false：不触发服务端事件（如果没有返回值，默认返回false）

ui对象：

       ui.flush() 渲染界面。

       在控件的布局和外观修改后，需要使用ui.flush方法来刷新界面显示。

UI事件列表：

组件类别	事件名称	事件参数	说明
TextBox	TextChanged	{ "value" : <string> }	value为输入的文本，on中的function使用function(value)
Button	Press	null	press事件，on中的function使用function()
Button	LongPress	null	press长按事件，on中的function使用function()
TouchPanel/TouchUserControl	Press	null	press事件，on中的function使用function()
TouchPanel/TouchUserControl	LongPress	null	press长按事件，on中的function使用function()
Switch	CheckedChanged	{ "value" : <bool> }	value为选择状态，on中的function使用function(value)
CheckBox	CheckedChanged	{ "value" : <bool> }	value为选择状态，on中的function使用function(value)
Picker	SlectedIndexChanged	{ "value" : <number> }	value为选择索引，on中的function使用function(value)
Slider	ValueChanged	{ "value" : <number> }	value为选择值，on中的function使用function(value)
SegmentedControl	SelectedIndexChanged	{ "value" : <number> }	value为选择索引，on中的function使用function(value)
PageView	PageIndexChanged	{ "value" : <number> }	value为选择索引，on中的function使用function(value)
TabPageView	PageIndexChanged	{ "value" : <number> }	value为选择索引，on中的function使用function(value)
DatePicker	ValueChanged	{ "value" : <string> }	value为选择的日期时间，on中的function使用function(value)
Calendar	DateChanged	{ "value" : <string> }	value为选择的日期，on中的function使用function(value)
MapTagView	Press	null	press事件，on中的function使用function()

示例：

       实现效果：在一个自定义控件中，分别添加1个Button，1个TextBox和1个Label，点击Button时，修改Button的文本的水平方向。焦点进入TextBox时，隐藏Button，离开TextBox时，显示Button，在TextBox的文本改变时，把改变的文本显示在Label上。

       (1)新创建一个自定义控件(MobileUserControl)，使用相对布局，添加一个是Button，Name为Button1，一个是TextBox，Name为TextBox1，一个Label，Name为Label1。

       (2)在新创建的自定义控件(MobileUserControl)中的JS属性写入以下代码：

1. var btn = this.find("Button1");
   
2.        btn.on("Press", function () {
   
3.                if (btn.HorizontalAlignment == HorizontalAlignment.Left) {
   
4.                    btn.HorizontalAlignment = HorizontalAlignment.Center;
   
5.                }
   
6.                else {
   
7.                    btn.HorizontalAlignment = HorizontalAlignment.Left;
   
8.                }
   
9.                ui.flush();
   
10.            }
    
11.        );
    
12.        var txt = this.find("TextBox1");
    
13.        var lab = this.find("Label1");
    
14.        txt.on("TouchEnter", function () {
    
15.                    btn.Visible = false;
    
16.                    ui.flush();
    
17.        });
    
18.        txt.on("TouchLeave", function () {
    
19.                    btn.Visible = true;
    
20.                    ui.flush();
    
21.        });
    
22.        txt.on("TextChanged", function (value) {
    
23.                    lab.Text = value;
    
24.                    ui.flush();
    
25.                    return true;
    
26.        })

复制代码