云白板

本应用的始作俑者为张路先生,在这个漫长的假期里,在连续多年出品了多种App Inventor汉化版本之后,张老汉也聊发少年狂,摆弄起“块码”来。本文的全部代码均由张老汉编写,笔者只是加以整理并发表。

该应用基于App Inventor的云数据库组件,可以在多部安装了该应用的手机上,实现白板的共享,即,如果有一群人同时运行该应用,那么其中任何一个人在白板上绘画,其它人均可在自己的手机上实时地看到绘画内容。应用中可以设置画笔的线宽及颜色,这些设置也可以在多人之间共享。下面介绍应用的实现过程。

一、用户界面设计

用户界面划分为三个区域,上部是绘图区,被画布组件占据,中部是线宽区,由水平布局组件和其中的数字滑动条组成,底部是颜色区,由水平布局组件和其中的多个按钮组成,如图1所示。值得一提的是,这里设置了Screen1的主题属性(深色主题),在这个主题之下,数字滑动条及按钮的外观都有令人赏心悦目的表现。项目中组件的命名及属性设置见表1。

图1 云白板应用的用户界面设计

表1 组件的命名及属性设置

注意表格中“线宽区”及“颜色区”两个水平布局,它们的背景颜色均设为白色,是为了遮挡深色主题下屏幕的黑色背景。这项设置在AI伴侣测试时显得有些多余,只有当应用编译后安装到手机上时,才能显示出其必要性。

二、编写程序

1、全局变量——颜色列表

声明一个全局变量——颜色列表,这里不是简单地将颜色放在列表中,此处的列表是一个键值对列表,其中的键是组件对象——6个颜色按钮,值是6种颜色被分解后的值,这样做是为了满足云数据库的存储要求。代码如图2所示。

图2 全局变量——颜色列表

2、画布的拖动事件

当用户在屏幕上拖动手指时,将邻点及当前点的坐标以列表的方式保存到服务器中,保存的标记为“draw”,代码如图3所示。

图3 画布的拖动事件处理程序

3、颜色按钮的点击事件

当颜色按钮被点击时,将选中的颜色值(其实是颜色分解之后的值)保存到服务器中,代码如图4所示。注意代码中使用了按钮类事件块,该事件块会涉及到全部按钮,因此这里使用条件语句将“清空”排除在外。

图4 颜色按钮的点击事件处理程序

4、清空按钮的点击事件

在清空按钮的点击事件中,用标记“clear”将空字符保存到服务器中,代码如图5所示。

图5 清空按钮的点击事件处理程序

5、线宽条的滑块位置改变事件

这个事件处理起来稍显麻烦,本来可以仿照前面的方法,在滑块位置改变时,以“size”为标记将滑块位置保存到服务器,代码如图6所示,但是在测试时发现,一旦移动滑块,系统立即处于停滞状态,对任何操作都失去相应。

图6 原来的滑块位置改变事件处理程序

出现这种现象的原因之一是滑动条的事件机制:在滑块的滑动过程中,每一个微小的位置改变,都会触发一次位置改变事件,而每次事件都会向云数据库保存一次数据,因此,在滑块从初始位置到终止位置滑动过程中,无数次向服务器提交数据,从而造成了网络的拥塞。原因之二我们稍后再加解释。为了减少向服务器保存数据的次数,这里采用了计时器组件,一旦滑块开始滑动,立即启动计时器,同时用全局变量来保存当前滑块的位置,如图7所示,当计时器到达计时点时,向服务器保存数据,同时再次读取滑块位置的值,比较计时前后的两个值,当它们相等时,说明滑块不再滑动,于是停止计时。

图7 改进后的解决方案

6、服务器的数据被改变事件

上述的每一个事件处理程序都没有直接修改应用中组件的属性,如画笔颜色、线宽等,而是将改变发送给云数据库服务器,并在服务器的数据被改变事件中完成对组件属性的修改,包括绘图、清除画布、改变画笔颜色及画笔线宽等等,代码如图8所示。

图8 服务器的数据改变事件处理程序

现在我们来解释一下移动滑块时出现拥塞的第二个原因。从图8中得知,当多人共同运行该应用时,如果某位用户开始调节滑块位置,那么其他用户的滑块位置会随之而改变,这些改变继而会引发数据保存到服务器的操作,这些保存操作又会触发所有客户端的数据被改变事件,这样就形成了循环调用,从而使应用陷入停滞状态。使用计时器后,将这一连续的过程分割成有限次数的操作,因而避免了拥塞的产生。

至此白板的功能已经实现,我们来测试一下,如下面视频所示。

注意观察视频中的线宽区和颜色区,由于两个水平布局组件采用了默认的背景颜色,使得应用在安装之后,这两个区域透露出黑色的屏幕背景。

7、侦测服务器连接错误

在开发网络应用时,要习惯于考虑可能存在的网络中断问题,并对这类问题加以处理。云数据库组件提供了一个出现错误事件,当出现错误时,只要重新连接服务器即可,代码如图9所示。

图9 侦测服务器连接错误

本文给出的例子,没有考虑到白板的分组使用,致使所有安装了该应用的用户只能分享同一块白板。白板分组的方法,请参照此前的两篇文章《云数据库与简易聊天室[上]》《云数据库与简易聊天室[下]》。实际上白板的例子提供了一种实时多人在线游戏的雏形,借助于云数据库的实时通信功能,相信读者可以开发出更加生动有趣的应用来。

(0)

相关推荐