界面设计

界面设计

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

1、创建列表界面

创建一个列表网页listview

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

CustomListView的样式配置如下图所示

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

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

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

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

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

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

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

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

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

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

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

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

3、配置参数

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

请求方式：GET
请求地址：http://testmas.appcan.cn:9000/ODBC/shopList
返回值：{
    "state": 0,
    "data": [
        {
          "id":1000005,
          "title":"味多美(亿方店)",
          "summary":"味多美，北京更受欢迎的面包坊......的面包坊。",
          "top":"http://........jpg",
          "distance":"2km"
        },
         ......]};
返回值详解：
   id:商铺id
   title: 商铺名称
   summary: 商铺简介
   top:商铺图片
   distance:距离

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

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

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

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

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