免费flash网站模板,wordpress上传主机,wordpress 入门学习,提供企业网站建设在之前的文章中#xff0c;我们使用ZK的MVVM实现了以下功能#xff1a; 将数据加载到表中 使用表单绑定保存数据 删除条目并以编程方式更新视图 ZK MVVM和ZK MVC实现方式之间的主要区别是#xff0c;我们不直接在controller#xff08;ViewModel#xff09;类中访问和操… 在之前的文章中我们使用ZK的MVVM实现了以下功能 将数据加载到表中 使用表单绑定保存数据 删除条目并以编程方式更新视图 ZK MVVM和ZK MVC实现方式之间的主要区别是我们不直接在controllerViewModel类中访问和操作UI组件。 在本文中我们将看到如何将某些UI操作委派给客户端代码以及如何将参数从View传递到ViewModel。 目的 为我们的简单清单CRUD功能构建更新功能。 用户可以在表中就地编辑条目并可以选择更新或放弃所做的更改。 修改后的条目以红色突出显示。 ZK实战功能 ZK客户端API ZK风格班 MVVM将参数从视图传递到ViewModel 分步实施 在列表框中启用就地编辑以便我们可以编辑条目 listcelltextbox inplacetrue valueload(each.name) .../textbox/listcell....listcelldoublebox inplacetrue valueload(each.price) .../textbox/listcell... inplace ” true”呈现输入元素例如Textbox但其边框未显示为纯标签 仅当选择输入元素时才显示边框 第2、6行“每个”指的是数据收集中的每个Item对象 编辑条目后我们希望为用户提供更新或放弃更改的选项。 仅当用户对列表框条目进行了修改时“更新”和“放弃”按钮才需要可见。 首先我们定义JavaScript函数以显示和隐藏“更新”和“放弃”按钮 toolbar...span idedit_btns visiblefalse ...toolbarbutton labelUpdate .../toolbarbutton labelDiscard ...//span
/toolbarscript typetext/javascriptfunction hideEditBtns(){jq($edit_btns).hide();}function showEditBtns(){ jq($edit_btns).show();}/script... 第2行我们包装了Update and Discard 并将可见性设置为false 第9、13行中我们定义了分别隐藏和显示“ 更新”和“ 放弃”按钮的函数 第11、15行我们使用jQuery选择器jq$ edit_btns检索ID为“ edit_btns”的ZK小部件 请注意ZK小部件ID的选择器模式为“ $”而不是“” 修改列表框中的条目后我们将使“更新/丢弃”按钮可见并使修改后的值变为红色。 单击“更新”或“放弃”按钮后我们想再次隐藏按钮 由于这是纯UI交互因此我们将使用ZK的客户端API style.inputs { font-weight: 600; }.modified { color: red; }
/style
...toolbar xmlns:wclient ...span idedit_btns visiblefalse ...toolbarbutton labelUpdate w:onClickhideEditBtns() .../toolbarbutton labelDiscard w:onClickhideEditBtns() ...//span/toolbarscript typetext/javascript//show hide functionszk.afterMount(function(){jq(.inputs).change(function(){showEditBtns();$(this).addClass(modified);})});/script...listcelldoublebox inplacetrue sclassinputs valueload(each.price) .../textbox/listcell... 第2行我们为输入元素文本框IntboxDoublebox日期框指定样式类并将其分配给输入元素的sclass属性例如。 第26行 sclass为ZK小部件定义样式类 在第18〜20行我们通过匹配它们的sclass名称获得所有输入元素并分配一个onChange事件处理程序。 更改输入元素中的值后“更新/丢弃”按钮将变为可见并且修改后的值将以红色突出显示。 第17行在创建ZK小部件时运行zk.afterMount 在第6行我们指定了客户端名称空间因此我们可以使用语法“ wonClick”注册客户端onClick事件侦听器。 请注意我们仍然可以注册通常在服务器上同时处理的onClick事件侦听器。 第9、10行我们为客户端分配了onClick事件监听器 hideEditBtns函数将被调用以使按钮再次不可见 定义一种将修改后的Item对象存储到集合中的方法以便如果用户选择这样做则可以批量更新更改 public class InventoryVM {private HashSetItem itemsToUpdate new HashSetitem();...Commandpublic void addToUpdate(BindingParam(entry) Item item){itemsToUpdate.add(item);} 第6行我们将此方法注释为命令方法以便可以从View调用它 第7行 BindingParam“ entry”项目项绑定了一个名为“ entry”的任意命名的参数 我们预计参数将为Item类型 创建一种方法来更新在视图中对数据模型所做的更改 public class InventoryVM {private ListItem items;private HashSetItem itemsToUpdate new HashSetitem();...NotifyChange(items)Commandpublic void updateItems() throws Exception{for (Item i : itemsToUpdate){i.setDatemod(new Date());DataService.getInstance().updateItem(i);}itemsToUpdate.clear();items getItems();} 对列表框条目进行修改后请调用addToUpdate方法并将经过编辑的Item对象传递给该方法该对象又被保存到itemsToUpdate集合 listitemlistcelldoublebox valueload(each.price) save(each.name, beforeupdateItems) onChangecommand(addToUpdate,entryeach) //listcell...
/listitem saveeach.namebefore updateItems确保除非调用updateItems即当用户单击“更新”按钮时否则不保存修改后的值。 最后当用户单击更新时我们调用updateItems方法来更新对数据模型的更改。 如果单击“丢弃”我们将调用getItems刷新列表框而不进行任何更改 ...toolbarbutton labelUpdate onClickcommand(updateItems) .../toolbarbutton labelDiscard onClickcommand(getItems) .../... 简而言之 在MVVM模式下我们努力使ViewModel代码独立于任何View组件 由于我们没有直接引用ViewModel代码中的UI组件因此可以使用ZK的客户端API将UI操作在示例代码中显示/隐藏样式更改代码委托给客户端 我们可以在ZK客户端使用jQuery选择器和API 我们可以使用BindingParam轻松地将参数从View传递到ViewModel 接下来在处理MVVM验证器和转换器之前我们将详细介绍ZK样式。 ViewModel动作中的ZK [0]〜[3] public class InventoryVM {private ListItem items;private Item newItem;private Item selected;private HashSetItem itemsToUpdate new HashSetItem();public InventoryVM(){}//CREATENotifyChange(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;}//READNotifyChange(items)Commandpublic ListItem getItems() throws Exception{items DataService.getInstance().getAllItems();for (Item j : items){System.out.println(j.getModel());}Clients.evalJavaScript(zk.afterMount(function(){jq(.inputs).removeClass(modified).change(function(){$(this).addClass(modified);showEditBtns();})});); //how does afterMount work in this case?return items;}//UPDATENotifyChange(items)Commandpublic void updateItems() throws Exception{for (Item i : itemsToUpdate){i.setDatemod(new Date());DataService.getInstance().updateItem(i);}itemsToUpdate.clear();items getItems();}Commandpublic void addToUpdate(BindingParam(entry) Item item){itemsToUpdate.add(item);}//DELETECommandpublic void deleteItem() throws Exception{if (selected ! null){String str The item with name \selected.getName()\ and model \selected.getModel()\ will be deleted.;Messagebox.show(str,Confirm Deletion, Messagebox.OK|Messagebox.CANCEL, Messagebox.QUESTION, new EventListenerEvent(){Overridepublic void onEvent(Event event) throws Exception {if (event.getName().equals(onOK)){DataService.getInstance().deleteItem(selected);items getItems();BindUtils.postNotifyChange(null, null, InventoryVM.this, items);}}});} else {Messagebox.show(No Item was Selected);} }public Item getNewItem() {return newItem;}public void setNewItem(Item newItem) {this.newItem newItem;}public Item getselected() {return selected;}public void setselected(Item selected) {this.selected selected;}
} 视图ZK处于活动状态[0]〜[3] zkstyle.z-toolbarbutton-cnt { font-size: 17px;} .edit-btns {border: 2pxsolid #7EAAC6; padding: 6px 4px 10px 4px; border-radius: 6px;}.inputs { font-weight: 600; } .modified { color: red; }/stylescript typetext/javascriptfunction hideEditBtns(){ jq($edit_btns).hide(); }function showEditBtns(){ jq($edit_btns).show(); }zk.afterMount(function(){ jq(.inputs).change(function(){$(this).addClass(modified); showEditBtns(); }) });/scriptwindow applyorg.zkoss.bind.BindComposerviewModelid(vm) init(lab.sphota.zk.ctrl.InventoryVM)xmlns:wclienttoolbar width100%toolbarbutton labelAddonClickcommand(createNewItem) /toolbarbutton labelDeleteonClickcommand(deleteItem)disabledload(empty vm.selected) /span idedit_btns sclassedit-btns visiblefalsetoolbarbutton labelUpdate onClickcommand(updateItems) w:onClickhideEditBtns()/toolbarbutton labelDiscardonClickcommand(getItems) w:onClickhideEditBtns() //span/toolbargroupbox mold3dformid(itm) load(vm.newItem) save(vm.newItem, beforesaveItem)visibleload(not empty vm.newItem)caption labelNew Item/captiongrid width50%rowsrowlabel valueItem Name width100px/labeltextbox valuebind(itm.name) //rowrowlabel valueModel width100px/labeltextbox valuebind(itm.model) //rowrowlabel valueUnit Price width100px/labeldecimalbox valuebind(itm.price)format#,###.00 constraintno 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 labelSave moldtrendyonClickcommand(saveItem) /button width80px labelCancel moldtrendyonClickcommand(cancelSave) //cell/row/rows/grid/groupboxlistbox selectedItembind(vm.selected) modelload(vm.items) listheadlistheader labelName sortauto hflex2 /listheader labelModel sortauto hflex1 /listheader labelQuantity sortauto hflex1 /listheader labelUnit Price sortauto hflex1 /listheader labelLast Modified sortauto hflex2 //listheadtemplate namemodellistitemlistcelltextbox inplacetrue width110px sclassinputsvalueload(each.name) save(each.name, beforeupdateItems)onChangecommand(addToUpdate,entryeach)/textbox/listcelllistcelltextbox inplacetrue width110px sclassinputs valueload(each.model) save(each.model, beforeupdateItems)onChangecommand(addToUpdate,entryeach) //listcelllistcellintbox inplacetrue sclassinputs valueload(each.qty) save(each.qty, beforeupdateItems)onChangecommand(addToUpdate,entryeach) //listcelllistcelldoublebox inplacetrue sclassinputs format###,###.00 valueload(each.price) save(each.price, beforeupdateItems)onChangecommand(addToUpdate,entryeach) //listcelllistcell labelload(each.datemod) //listitem/template/listbox/window
/zk ZK客户端参考 ZK开发人员参考BindingParam 参考 ZK in Action [3]MVVM –与我们的JCG合作伙伴 Lance Lu的ZK Client API一起在Tech Dojo博客上工作。 翻译自: https://www.javacodegeeks.com/2012/07/zk-in-action-mvvm-working-together-with.html
