农业推广网站建设,wordpress 分类标签筛选,购物网站模板 php,岫岩做网站这是我们从头开始构建ZK应用程序的第二集。 上一篇文章涉及使用MVVM将数据加载和呈现到表中。 在本文中#xff0c;我们将向您介绍ZK MVVM的表单绑定。 目的 我们将构建一个“添加”功能#xff0c;使我们能够将新条目保存到清单中。 单击“添加”时出现表格 单击“保存”… 这是我们从头开始构建ZK应用程序的第二集。 上一篇文章涉及使用MVVM将数据加载和呈现到表中。 在本文中我们将向您介绍ZK MVVM的表单绑定。 目的 我们将构建一个“添加”功能使我们能够将新条目保存到清单中。 单击“添加”时出现表格 单击“保存”后将添加新条目 ZK实战功能 MVVM保存表单绑定条件绑定 使用MVVM表单绑定添加新条目 我们需要实现以下部分 增强我们的ViewModel POJO 添加UI标记以呈现表单并用适当的注释装饰标记 ViewModel类 public class InventoryVM {private Listitem items;private Item newItem;NotifyChange(newItem)Commandpublic void createNewItem(){newItem new Item(, ,0, 0,new Date());}NotifyChange({newItem,items})Commandpublic void saveItem() throws Exception{DataService.getInstance().saveItem(newItem);newItem null;items getItems();}NotifyChange(newItem)Commandpublic void cancelSave() throws Exception{newItem null;}public Listitem getItems() throws Exception{items DataService.getInstance().getAllItems();return items;}} 第4行我们声明了一个名为newItem的Item对象该对象将引用要保存到数据库的Item实例。 第6行 NotifyChange通知绑定程序在关联的ViewModel属性状态上更新UI。 在下面显示的UI标记的第8行我们有一个Groupbox并带有visible ” load 不是空vm.newItem 批注 因此一旦createNewItem将Item实例分配给newItem时 Groupbox将变为可见。 简而言之 NotifyChange会根据ViewModel属性的更新来刷新UI。 在第7行我们用Command注释了createNewItem方法在下面显示的UI标记中在第4行我们有一个带有onClick ” commnadcreateNewItem”的工具栏按钮 。 因此当单击工具栏按钮时将调用createNewItem方法。 类似地从第12行到第18行我们有一个saveItem方法当其对应的onClick事件被触发时将调用该方法。 将新的Item对象保存到数据库缓存后我们将newItem重置为null并检索新的项目列表。 与之前一样使用NotifyChange对ViewModel属性newItem 现在再次为null和项目 现在具有额外的条目所做的更改将反映到UI。 标记 window applyorg.zkoss.bind.BindComposer viewModelid(vm) init(lab.sphota.zk.ctrl.InventoryVM)
toolbartoolbarbutton labelAdd onClickcommand(createNewItem) /
/toolbar
groupbox formid(itm) load(vm.newItem) save(vm.newItem, beforesaveItem)visibleload(not empty vm.newItem)caption labelNew Item/captiongrid width50%rowsrowlabel valueItem Name width100px/labeltextbox idname valuebind(itm.name) //rowrowlabel valueModel width100px/labeltextbox valuebind(itm.model) //rowrowlabel valueUnit Price width100px/labeldecimalbox valuebind(itm.price) format#,###.00constraintno empty, no negative //rowrowlabel valueQuantity width100px/labelspinner valuebind(itm.qty)constraintno empty,min 0 max 999: Quantity Must be Greater Than Zero //rowrowcell colspan2 aligncenterbutton width80px labelSaveonClickcommand(saveItem) moldtrendy /button width80px labelCancelonClickcommand(cancelSave) moldtrendy //cell/row/rows/grid
/groupbox
listbox
...
/listbox
/window 第1行我们应用ZK的BindComposer的默认实现。 它负责实例化我们的ViewModel和Binder实例。 第2行我们提供了要实例化的ViewModel的完整类名并为其提供了ID以供将来参考 在第4行中我们将ViewModel的“命令方法” createNewItem分配为工具栏按钮的onClick事件处理程序。 第6行使用ID“ itm”使整个Groupbox中均可引用ViewModel中的newItem属性。 第6,7行使用表单绑定以避免将无效或不完整的数据保存到ViewModel属性将表单中的条目保存到一个临时对象直到调用命令方法saveItem 。 在第8行我们显示了Groupbox只有用户单击“ Add”按钮时它才能输入新的Item条目 依次调用createNewItem方法并为VM属性newItem分配具有默认值空字符串和0s的Item实例。 在第14、18、22、27行中我们将Item属性与输入元素绑定在一起。 bind实际上等效于load加save。 简而言之 总结点形式 使用表单绑定可避免通过将表单条目保存到临时对象来直接修改ViewModel属性中的数据。 仅在满足指定条件的情况下才将数据写入ViewModel属性。 在我们的示例中仅当调用saveItem方法时。 Command批注允许绑定程序将UI事件处理程序映射到ViewModel命令方法。 NotifyChange通知联编程序在执行命令方法后哪些ViewModel属性已被修改以便可以将数据更改反映在UI上。 我们可以在运行时通过MVVM绑定将值分配给任何UI组件的属性以操纵诸如可见性样式禁用/启用等参数。 在这篇文章中我们还没有看到如何验证数据条目。 在此之前我们将在下一篇文章中实现删除和编辑功能。 参考 ZK开发人员参考 参考 ZK in Action [1]MVVM –来自我们JCG合作伙伴 Lance Lu的Form Binding 位于Tech Dojo博客上。 翻译自: https://www.javacodegeeks.com/2012/07/zk-in-action-mvvm-form-binding.html
