界面设计

接下来我们通过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组件进行如下属性设定:

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

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

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

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

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

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

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

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

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

4、保存输出全部代码

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

还需要帮助吗? 联系我们
最新更新 8th Jul 2021