HTML5App商业开发实战教程基于WeX5可视化开发平台电子资源 教学全套课件配套资源3-5 实战案例：账目列表.pptxVIP

实战案例：记账本App——账目列表; 新闻列表 商品列表;数据组件;新建应用 选择“模型资源”视图中的UI2目录，右击，在弹出的快捷菜单中选择“新建”→“应用”命令 打开“新建应用”对话框，输入应用名称。单击“完成”按钮 在UI2目录下就会生成一个acc目录 新建页面 选择acc目录，右击，在弹出的快捷菜单中选择“新建”→“W文件”命令，打开“新建W向导”对话框 在“新建W向导”中选择模板“移动→标准→标准页面”，文件名输入list，生成list.w文件。 ;在model组???中放baasData组件 baasData组件可以从后端服务中获取数据 启动MySQL数据库 执行“启动MySQL数据库.bat” 选择后端服务中的动作 单击tableName属性右侧的按钮 选择queryAccount动作;在panel组件的content区域放scrollview组件 在scrollview组件的第二个div下放list组件 在list组件的li中放row组件，形成如下图的行列结构 在row组件的col中放output组件 ;设置list组件的data属性为accountData 设置output组件显示分类fClass 设置output组件显示金额fMoney 设置output组件显示备注fDescription 设置output组件显示日期fDate;启动Tomcat 选择“模型资源”视图中的UI2\acc\list.w文件，右击，在弹出的快捷菜单中选择“用浏览器运行”命令，打开Chrome浏览器，并运行list.w 界面显示出account数据表中的数据;改变字体大小 设置style属性 动态设置字体颜色 设置bind-style属性;列表页是移动应用中最常见的页面 列表可以将数据组件中的数据全部显示出来 列表中的每一行代表数据组件中的一条数据