自定义界面脚本引擎XModeEngine-(三)变量与函数

摘要:本文描述自定义界面脚本引擎XModeEngine变量与函数。

  XModeEngine执行脚本时需要考虑引擎环境下的脚本变量、函数问题。

1. 变量

  变量分为系统变量、元素属性变量、脚本变量,分别由XModeEngine引擎、XModeDocument布局、XModeScript脚本中声明。变量关系如下:
变量关系图

1.1 系统变量

  系统变量用来表示系统的某个状态,例如当前时间、屏幕宽高等。

1.2 元素属性变量

  对于布局文件中的每一个视图元素,都具有一定的属性,在运行时通过元素属性变量用来表示,例如视图的宽、高、位置等。

1.3 脚本变量

  脚本变量在脚本中的定义,用于脚本执行时存储相关信息,它分为全局变量与局部变量。

2. 函数

  脚本中函数分为本地系统函数、自定义脚本函数。
函数关系图

2.1 本地系统函数

  本地系统函数实现是在引擎框架中,脚本能够通过解释机制直接执行JAVA代码。它主要有两方面作用,一个用来获取系统变量以及各元素变量,二是执行系统功能,例如解锁、启动Acitivity、设置定时器等。

2.2 自定义脚本函数

  自定义脚本函数主要是用来控制变量、调用系统函数,例如修改元素位置、调用定时器功能等。

3.示例

  下面将分析用脚本如何实现图片拖动,首先定义一个图片视图元素:

1
2
<Image name="按钮1" x="100" y="700" w="121" h="60" src="/mnt/sdcard/ic_download_edit_normal1.png"
onclickdown="doclickdown()" onclickup="doclickup()" onclickmove="doclickmove()"/>

  这里定义了一个视图元素Image,名称为“按钮1”,并且定义了属性起始坐标x、起始坐标y、图片宽度w、图片高度h、图片地址src的值;同时定义了三种点击事件函数按下事件onclickdown、弹起事件onclickup以及移动事件onclickmove。
  XModeEngine会将sdcard图片ic_download_edit_normal1.png在X坐标100、Y坐标700,按照大小为宽121、高60绘制在视图中。

  接下来定义一个脚本:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
var lastTouchX = 0;
var lastTouchY = 0;
function doclickdown()
{
XModeDocument.setAttrValue("按钮1","src","/mnt/sdcard/ic_download_edit_pressed1.png");
lastTouchX = XModeDocument.getSystemValue("system_touch_x");
lastTouchY = XModeDocument.getSystemValue("system_touch_y");
}
function doclickup()
{
XModeDocument.setAttrValue("按钮1","src","/mnt/sdcard/ic_download_edit_normal1.png");
}
function doclickmove()
{
var currentTouchX = 0;
var currentTouchY = 0;
currentTouchX = XModeDocument.getSystemValue("system_touch_x");
currentTouchY = XModeDocument.getSystemValue("system_touch_y");
var offsetX = parseInt(currentTouchX) - lastTouchX;
var offsetY = parseInt(currentTouchY) - lastTouchY;
lastTouchX = currentTouchX;
lastTouchY = currentTouchY;
var currentElementX = XModeDocument.getAttrValue("按钮1","x");
var currentElementY= XModeDocument.getAttrValue("按钮1","y");
currentElementX = parseInt(currentElementX) + offsetX;
currentElementY = parseInt(currentElementY) + offsetY;
XModeDocument.setAttrValue("按钮1","x",currentElementX);
XModeDocument.setAttrValue("按钮1","y",currentElementY);
}

  (一)定义全局变量

1
2
var lastTouchX = 0;
var lastTouchY = 0;

    定义了全局变量lastTouchX与lastTouchY,用来记录上次按下时触屏位置。

  (二)定义自定义脚本函数:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function doclickdown()
{
...
}
function doclickup()
{
...
}
function doclickmove()
{
...
}

    这里定义了三个自定义脚本函数,用来处理图片的点击事件。

  (三)处理点击按下事件

1
2
3
4
5
6
7
8
function doclickdown()
{
// 设置按钮图片地址为/mnt/sdcard/ic_download_edit_pressed1.png
XModeDocument.setAttrValue("按钮1","src","/mnt/sdcard/ic_download_edit_pressed1.png");
// 获取系统触屏时的坐标,并记入到全局变量中
lastTouchX = XModeDocument.getSystemValue("system_touch_x");
lastTouchY = XModeDocument.getSystemValue("system_touch_y");
}

    其中XModeDocument.setAttrValue()与XModeDocument.getSystemValue()均为本地系统函数,分别表示设置元素属性值即修改元素属性变量值,以及获取系统变量值。

  (四)处理移动事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function doclickmove()
{
// 局部变量
var currentTouchX = 0;
var currentTouchY = 0;
// 获取当前点击位置
currentTouchX = XModeDocument.getSystemValue("system_touch_x");
currentTouchY = XModeDocument.getSystemValue("system_touch_y");
// 计算拖动偏移
var offsetX = parseInt(currentTouchX) - lastTouchX;
var offsetY = parseInt(currentTouchY) - lastTouchY;
lastTouchX = currentTouchX;
lastTouchY = currentTouchY;
// 获取按钮1当前位置
var currentElementX = XModeDocument.getAttrValue("按钮1","x");
var currentElementY= XModeDocument.getAttrValue("按钮1","y");
// 计算按钮1应该移动到的位置
currentElementX = parseInt(currentElementX) + offsetX;
currentElementY = parseInt(currentElementY) + offsetY;
// 设置按钮1新的位置
XModeDocument.setAttrValue("按钮1","x",currentElementX);
XModeDocument.setAttrValue("按钮1","y",currentElementY);
}

    这里定义了局部变量currentTouchX等,并且通过语言内置语法parseInt将变量转成int型进行计算。

  (五)处理弹起事件

1
2
3
4
function doclickup()
{
XModeDocument.setAttrValue("按钮1","src","/mnt/sdcard/ic_download_edit_normal1.png");
}

    这里将图片设为默认正常图片。

4.总结

  本文描述了XModeEngine中变量与函数类型分类,并通过示例代码段简单描述了元素与脚本中变量与函数的概念。