PersimmonUI实战帖 |带你进入绚丽多彩的柿饼M（二）

Fillmore · 发表于 2018-9-18 17:21:24

本帖最后由 Fillmore 于 2018-9-18 17:23 编辑

脚本及事件、数据绑定

在上一篇文章中，我们介绍了可以用于界面设计的设计器：设计器可以拖动一些常见控件到页面中，并在页面上进行摆放或者调整大小，属性等。对于一个按钮，例如点击它，对应的事件动作处理，却是设计器所不能处理的。

例如，上篇文章给出的界面设计稿是label显示了一个"Hello World"，我们通过点击下面的 OK 按钮，让它更改文本为"Hello RT-Thread"。

在设计器中，我们先选中这个button1对象，在设计器的属性栏中，把调用属性的bindtap栏内容填上onButton；

然后打开这个页面的脚本文件page1.js。这个脚本文件是一个JavaScript文件，以完整的ES5语法形式使用。这里可以在page对象中添加对应的onButton方法，我们先简单的在其中输出"clicked"的日志信息：

var page = { onButton: function(e) { console.log("clicked"); }};Page(page);

然后我们可以按工具栏的运行按钮

它会直接在PC上以模拟执行方式运行，这样开发工程师就可以直接查看效果，而不需要一定更新到开发板上才能看到效果：

我们可以看到，当点击 OK 按钮时，后面的命令行会输出"clicked"的日志信息。

接下来，我们介绍如何去更改label的显示文本。在一个page对象上，都会存在setData方法，可以通过这样的方式来设置这个page对象内控件的属性，例如这里添加的label1对象的文本信息：

var page = { onButton: function(e) { console.log("clicked"); this.setData({label1: { value : "Hello RT-Thread", refresh : true}}); }};Page(page);

在这个脚本中，我们会调用this.setData方法，并传递了一个对象进去：

{label1: { value : "Hello RT-Thread", refresh : true}}

这个参数对象的意思就是告诉page，我需要把名字是"label1"的对象的值设置成"Hello RT-Thread"，同时刷新这个对象(refresh : true)。我们可以运行下，然后点击下OK按钮试试：

果真，可以更改上面的文本。关于不同针对不同对象的setData，可以查看我们的API手册获得更多的信息。

页面切换

以上是一个页面的情况，我们可以多创建一些页面，选中工程文件树区域的UI文件，在上面点击鼠标右键，选择新建，直接点击确定

然后会创建出页面2，在页面2上我们只添加一个按钮，同时调整它的文本内容为"Back"，以及同样的，先设置它的bindtap属性为onButton

回过头来看page1，因为它是首先要显示的页面，我们对button1的bindtap函数做一定的改动，能够点击它后，跳转到page2：

var page = { onButton: function(e) { console.log("clicked"); // this.setData({label1: { value : "Hello RT-Thread", refresh : true}}); pm.navigateTo({url: "page2/page2"}); }};Page(page);

(对于原来的 this.setData 我们先注释掉)

在这里，当点击事件发生时，将执行pm.navigateTo({url : "page2/page2"})，即让UI导航切换到page2/page2的URL。相当于切换到page2。同样的，当切换到page2以后，对于唯一的Back按钮，我们可以点击它，需要它回到page1，可以这样：

var page = { onButton : function(e) { pm.navigateBack(); }};Page(page);

即调用pm.navigateBack()，切换回page1。我们可以下到板子上，让他们飞下……
另外，函数redirectTo也可供用于切换page。与navigateTo不同的是，redirectTo会先关闭当前page再跳转到目标page。
如果在上述Sample的page1中执行pm.redirectTo({url : "page2/page2"})后，再执行page2中pm.navigateBack(),界面不会切换page1，因为page1已经关闭，此时界面回切换到一个空page。因此在此仅做说明，不推荐使用。

实际效果