|
在上一篇文章《用云数据库实现图片的Base64编码》中，我们用云数据库组件实现了图片在云端的保存，本篇文章讲述如何将不同用户上传的图片，按照上传的时间顺序的逆序，分页显示在应用中，每页显示三张图片，通过翻页按钮，实现对全部图片的浏览。由于本案例的程序较为复杂，因此分为上下两篇完成。上篇讲解数据的结构、数据加载与首页显示，下篇讲解图片的保存与分页显示。 一、用户界面设计 在上一篇文章所建项目“共享相册”的基础上，删除画布组件，添加一个滚动垂直布局组件（宽度为95%，高度为充满），并在其中添加三个图片组件，选中自动缩放属性；在每个图片组件下方添加一个标签组件，设标签的显示文本为空。在滚动垂直布局下方，添加一个水平布局组件，在其中添加两个按钮，分别命名为为上页、下页，两个按钮的宽度为充满。最后，添加计时器组件及对话框组件，取消勾选计时器组件的一直计时及启用计时属性。设计完成后的用户界面如图1所示。
图1 共享相册应用的用户界面设计 在正式开始编写程序之前，我们需要明确两件重要的事情：①相册的数据结构；②数据的操作流程。 二、数据结构设计 数据结构包括数据在数据库中的存储方式，以及数据被加载到应用之后的存储方式。首先来看数据在云数据库中的存储方式，如图2所示。 显然相册数据被划分为两个部分：图片信息及图片数据。图片信息是以列表的方式保存到云数据库中，存储标记是固定不变的，每次用户添加新图片时，都会在列表的首项位置添加图片信息，而图片信息也是列表，其中包含4个列表项：用户名、毫秒数、简介及图片的存储标记。再来看图片数据：用户在上传图片时，系统会读取登录用户的用户名，以及当前的系统时间，即，毫秒数，并用下划线（_）将用户名与毫秒数拼接起来，组成该图片的存储标记。显而易见的是，每一张图片的存储标记都是独一无二的。
图2 共享相册数据在云数据库中的存储方式 了解了图片信息与图片数据在云数据库中的存储方式后，我们再来讲解这些数据在应用中的存储方式，即，如何将数据保存在全局变量中。如图3所示。图中显示了两个全局变量——图片信息列表及图片列表，其中前者用来保存全部图片的信息，每张图片的信息是一个二级列表，对应于图2上部表格中的一行；后者用来保存图片数据，这些数据即将被设置为图片组件的图片属性。
图3 共享相册数据在应用中的存储方式 三、数据流程设计 有了数据结构，我们再来介绍数据的操作流程，这些流程与事件处理程序有关，本文的上篇讲解与屏幕初始化相关的程序，如图4所示。图中使用了与App Inventor代码块相同的颜色填充了各种几何形状，以表示这些形状代表的代码类型，如，黄色对应于控制类代码块（事件、条件判断），紫色对应于过程块（内置过程及自定义过程），而橙色对应于变量块。
图4 与屏幕初始化事件相关的流程 在图4的右侧有一个紫色矩形、四个橙色的矩形和一个四角凹陷的橙色矩形，其中紫色块表示有返回值的过程，返回值是一个固定不变的字串，用来存放图片列表存储标记；四个橙色矩形块表示全局变量，分别为图片信息列表、图片列表、已加载图片数及页码；凹角矩形块表示局部变量，表示图片存储标记。在图左侧的流程中包含了两个事件——屏幕初始化事件及云数据库的收到数据事件。在屏幕初始化事件中，调用云数据库的请求数据过程——向云数据库请求图片信息列表。请求数据的执行结果将触发云数据库的收到数据事件。在收到数据事件中，首先判断返回的标记是否为图片信息列表存储标记，如果是，则继续判断收到的数据是否为空（第一个使用应用的人会收到空数据），如果数据不为空，则执行加载图片过程（针对图片信息列表执行循环语句，逐项取得图片数据存储标记，并向云数据库请求图片数据）。加载图片过程的执行结果会多次触发云数据库的收到数据事件，在这些收到数据事件中，将数据库返回的图片数据添加到全局变量图片列表中，当全部图片加载完成后，再执行显示图片过程。 四、编写程序 以上解释了共享相册应用的数据结构及屏幕初始化流程，下面给出具体的代码。 1、准备程序 如图5所示，首先定义四个有返回值的过程，其中上面两个返回值为文本，下面两个返回值为组件对象列表。然后声明全局变量图片信息列表、图片列表、已加载图片数及页码，图片信息列表用于保存从云数据库中读取到的用户图片列表，图片列表用于保存图片数据，已加载图片数用于累计已加载的图片数量，页码用于保存当前浏览页的序号。
图5 准备程序 2、屏幕初始化 首先创建一个有返回值的过程——图片高度，用来设置三个图片组件的高度，过程中的乘数0.86是根据笔者个人手机的屏幕尺寸得出的经验值。代码如图6所示。然后编写屏幕初始化程序——请求图片信息列表，并启用计时器。在计时事件中，设置图片组件的高度，并让计时器停止计时。
图6 与屏幕初始化相关的程序 3、接收并显示数据 如前所述，向云数据库请求数据，将触发云数据库的收到数据事件。在编写收到数据事件处理程序之前，我们先来创建几个过程。 （1）请求加载图片 定义请求加载图片过程，代码如图7所示。该过程将在云数据库的收到数据事件中被调用，过程的参数图片数是全局变量图片信息列表的长度。
图7 定义请求加载图片过程 （2）显示图片信息 如图8所示，创建一个有返回值的过程——图片信息索引值，结合页码，将1~3的整数换算成图片信息在图片信息列表中的索引值。再创建过程——显示图片信息，根据求得的索引值，读取某一页内相关的图片及文字信息，并将图文信息显示在用户界面组件上。注意过程中的否则分支，用于处理最后一页图片数不足3个的情形。
图8 显示图片信息过程 （3）显示首页 定义过程——显示首页，禁用上页按钮，并根据图片信息列表的长度，设置下页按钮的启用属性；最后调用显示图片信息过程，代码如图9所示。
图9 显示首页过程 （4）收到数据事件 有了以上过程，下面来编写云数据库的收到数据事件处理程序，代码如图10所示。
图10 收到数据事件处理程序 至此，我们实现了屏幕初始化流程，为了测试程序的执行结果，笔者事先上传了几张图片，测试结果如图11及图12所示。
图11 提示用户正在加载图片
图11 图文信息的显示效果 在下一篇文章中，我们会实现图片的保存流程，并实现图片的分页显示，届时将一并对程序进行综合测试。 |
|
|
