界面设计

接下来我们通过IDE的设计器来完成设计工作

1、创建列表界面

创建一个列表网页listview

界面设计 - 图1

在设计器中添加相关组件并设置样式,最后结果如下图。

界面设计 - 图2

CustomListView的样式配置如下图所示

界面设计 - 图3

设定CustomListView中的条目为一个弹性盒子布局。

在CustomListView中加入一个SquareBox,SquareBox的设定如下图

界面设计 - 图4

通过设定SquareBox为盒子布局并设定布局方式使其子元素横向、纵向居中

接下来在SquareBox中放置一个高宽为95%的Box,Box参数设置如下图

界面设计 - 图5

这个Box的作用是作为图片显示控件使用,因此配置其默认背景图并配置其背景图展示效果为覆盖方式。

然后在CustomListView中加入一个Box,Box参数设置如下图

界面设计 - 图6

这个Box用于放置文字控件,配置其为弹性盒子并设定其子元素纵向居中排布,同时左右两侧保留一个余量。

最后在Box中添加一个Text控件,Text参数配置如下图

界面设计 - 图7

这里我们设置Text也是一个弹性盒子控件,并且宽度为100%。在属性页我们设置其总行数为1行。当文字超过一行时,自动使用”…”来省略文字。

注:框架中如果希望使用Line Count来控制行数,当文字超过行数时自动使用”…”缩略,那么必须配置Text为box布局,且必须有一个固定宽度。

2、加入服务、数据模型、视图模型

接下来我们在设计器中为列表界面加入服务、数据集合模型和视图模型,如下图

界面设计 - 图8

3、配置参数

这里我们制作的界面是一个列表界面,因此我们需要后端的列表接口来支持。如下是列表接口的说明。

  1. 请求方式:GET
  2. 请求地址:http://testmas.appcan.cn:9000/ODBC/shopList
  3. 返回值:{
  4. "state": 0,
  5. "data": [
  6. {
  7. "id":1000005,
  8. "title":"味多美(亿方店)",
  9. "summary":"味多美,北京更受欢迎的面包坊......的面包坊。",
  10. "top":"http://........jpg",
  11. "distance":"2km"
  12. },
  13. ......]};
  14. 返回值详解:
  15. id:商铺id
  16. title: 商铺名称
  17. summary: 商铺简介
  18. top:商铺图片
  19. distance:距离

根据上述说明,我们为三个组件进行相应的参数配置,使其完成对应的数据处理工作。

●根据文档,我们为Service组件进行如下属性设定:

界面设计 - 图9

上图中,我们配置了服务器的接口地址并设定了返回值的格式为JSON。由于文档中返回数据中state属性知否为0表示查询的结果是否有异常,因此我们在validate接口中返回data.state来处理数据异常。由于数据集合需要的是数组,因此我们在success函数中返回了原始数据中的数组部分。数据集合Collection会自动转换这个数组。

注:如果不再success函数中处理,那么在collection的parse函数中进行同样处理也可。

●根据文档,我们为数据集合Collection组件进行如下属性设定:

界面设计 - 图10

在Collection控件中我们设定数据集合的数据来源Service。通过后面的按钮可以测试是否可以正确获取到数据。从上述截图中可以看到获取的数据。

●对数据和通讯测试没有问题后,我们来使用视图模型ViewModel来完成数据集合模型Collection与界面控件的关联,如下图

界面设计 - 图11

我们设定了ViewModel的所维护的视图和数据集合。当ViewModel所关联的数据集合、视图出现配置变化时,需要使用后面刷新按钮进行重新绑定。视图模型还需要处理视图的交互事件,我们加入下拉事件的处理使界面在打开时自动加载数据。如下图

界面设计 - 图12

上图中我们通过事件向导加入了reload事件的处理。

注:由于ViewModel本身绑定的是ScrollContent控件,而reload事件属于ScrollContent,因此在事件向导中我们不需要选择控件对象列表中的条目在点击时也会需要相应的代码进行处理,因此我们需要在ViewModel的列表子视图交互事件中加入列表条目的交互事件,如下图

界面设计 - 图13

列表条目中每一个条目对象都是一个子ViewModel,他建立了列表条目View与Collection数据集合中的一个Model的绑定。因此子视图交互事件中我们可以使用this.model来获取条目对应的数据模型。

●最后我们为界面中的控件配置与数据模型属性的绑定关系,如下图

界面设计 - 图14

上图中我们对SquareBox中的Box控件的数据绑定属性进行了设定,通过CSS控制器,我们把数据模型中的top属性与HTML元素的background-image属性进行了关联,在关联的时候我们使用format过滤器对数据top进行了格式化。我们在对text控件进行设定,如下图

界面设计 - 图15

设定完这些属性后,我们可以在ViewModel控件里使用刷新按钮来检查Collection中的数据是否能够自动映射到屏幕上,如下图

界面设计 - 图16

4、保存输出全部代码

5、使用模拟器打开导出的listview文件

界面设计 - 图17