mobl-lang 的反应性编程

mobl-lang是一门针对移动应用开发的语言，接下来介绍该语言的反应性编程特性，下面是一段简单的代码，看看是什么意思？

screen root() {
  var amount     =  20
  var percentage =  10

  header("Tip calculator")
  group {
    item { numField(amount, label="amount") }
    item { numField(percentage, label="percentage") }
    item { "$" label(amount * (1 + percentage/100)) }
  }
}

该代码用户通过调节前两个numField中的值，会实时改变label的显示值。
先看第一段代码

screen root() { ... }

这句代码意思是一个没有参数的名叫root的屏幕，屏幕可以有0或者更多的参数。

var amount     = 20
var percentage = 10

这段代码定义了屏幕的两个变量，这些变量只能由该屏幕访问，虽然mobl-lang是类型语言，有时也不需要准确指明，因为类型可以被推测出来，实际上，上述的代码可以变成

var amount     : Num = 20
var percentage : Num = 10

var表示变量variable，变量的值可以由两种方式改变，直接被赋予新值，或者被绑定到控件上。

header("Tip calculator")

这一行实例化header控件，该控件来自mobl::ui::generic 包。控件可以有两类参数，普通参数和body元素。普通参数通过括号里面的内容传给控件，header控件的第一个参数叫做“text”，因此上述代码可以写作

header(text="Tip calculator")

第二类body元素见下一行代码，这是一句对group控件的实例化，group没有被传进任何普通参数，但他有三个item元素。

group {
  item { ... }
  item { ... }
  item { ... }
}

item元素也是一个控件，拥有一个numField控件元素，item只能在group控件中，不能单独存在。numField是一个输入控件，有两个普通参数，包括amount变量和label控件。将变量传给numField控件，就是将amount与numField进行绑定，任意一边的变化都会引起另一边的变化，下一句代码类似。对控件值的操作会引起变量的变化，变量的变化也有可能引起其他绑定该变量的控件。

item { numField(amount, label="amount") }
item { numField(percentage, label="percentage") }

最后一行代码，item包含两个控件，第一个是“$”,第二个是label控件，label被传进一个表达式作为变量，同样该表达式也与label绑定在一起，表达式值的变化引起label屏幕显示值的变化，不过这是一个单向绑定。

item { "$" label(amount * (1 + percentage/100)) }