HTML5App商业开发实战教程基于WeX5可视化开发平台电子资源 教学全套课件配套资源3-4 实战案例：Hello World App.pptxVIP

实战案例：Hello World App; 记账本App 仿淘宝App;姓名;name;新建应用 选择“模型资源”视图中的UI2目录，右击，在弹出的快捷菜单中选择“新建”→“应用”命令，打开“新建应用”对话框，输入应用名称。单击“完成”按钮，在UI2目录下就会生成一个hello目录 新建页面 选择hello目录，右击，在弹出的快捷菜单中选择“新建”→“W文件”命令，打开“新建W向导”对话框，在“新建W向导”中选择模板“移动→标准→空白”，文件名输入index，生成index.w文件。 ;添加数据组件 在model组件中放data组件，data组件中的数据是一个行列结构的二维表。 定义列：选择data组件，右击，在弹出的快捷菜单中选择“编辑列”命令，打开“data列编辑”对话框。新增name列，并设置为ID列。 增加行：选择data组件，右击，在弹出的快捷菜单中选择“编辑数据”命令，打开“data数据编辑”对话框。新增一行。注意：在新增的行上单击一下，再单击“完成”按钮。 添加展现组件 在window组件下放“表单”分类下面的input组件和output组件 设置数据绑定 设置input组件的bind-ref属性为$model.data1.ref(name) 设置output组件的bind-text属性为Hello +$model.data1.val(name)。;启动Tomcat 选择“模型资源”视图中的UI2\hello\index.w文件，右击，在弹出的快捷菜单中选择“用浏览器运行”命令，打开Chrome浏览器，并运行index.w 在input中输入“小伙伴”，焦点移出，下面的ouput就会显示“Hello 小伙伴”;生成App;开发App的步骤：新建应用、新建页面、运行调试、生成App 页面由组件构成，通过拖拽组件完成界面开发 展现组件和数据组件之间是双向数据绑定的