{"id":1535,"date":"2012-07-13T19:00:00","date_gmt":"2012-07-13T19:00:00","guid":{"rendered":"http:\/\/www.javacodegeeks.com\/2012\/10\/zk-in-action-mvvm-form-binding.html"},"modified":"2012-10-22T06:01:58","modified_gmt":"2012-10-22T06:01:58","slug":"zk-in-action-mvvm-form-binding","status":"publish","type":"post","link":"https:\/\/www.javacodegeeks.com\/2012\/07\/zk-in-action-mvvm-form-binding.html","title":{"rendered":"ZK in Action: MVVM &#8211; Form Binding"},"content":{"rendered":"<div dir=\"ltr\" style=\"text-align: left\">This is the second episode in our efforts to build a ZK application from the ground up. The previous post dealt with loading and rendering of data into a table using MVVM. In this post, we&#8217;ll be introduced to ZK MVVM&#8217;s form binding.                    <\/p>\n<p><strong> Objective<\/strong><\/p>\n<p>We&#8217;ll build an &#8220;Add&#8221; function that would enable us to save new entries to the inventory.<\/p>\n<table align=\"center\" cellpadding=\"0\" cellspacing=\"0\" class=\"tr-caption-container\" style=\"margin-left: auto;margin-right: auto;text-align: center\">\n<tbody>\n<tr>\n<td style=\"text-align: center\"><a href=\"http:\/\/1.bp.blogspot.com\/-JvLRlRXCN2s\/T_-9RvzZnCI\/AAAAAAAAAqY\/KP2oKfO4HGo\/s1600\/MVVM_save_item.png\"><img decoding=\"async\" border=\"0\" height=\"235\" src=\"http:\/\/1.bp.blogspot.com\/-JvLRlRXCN2s\/T_-9RvzZnCI\/AAAAAAAAAqY\/KP2oKfO4HGo\/s400\/MVVM_save_item.png\" width=\"400\" \/><\/a><\/td>\n<\/tr>\n<tr>\n<td class=\"tr-caption\" style=\"text-align: center\">A Form Appears When &#8220;Add&#8221; is Clicked<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<table align=\"center\" cellpadding=\"0\" cellspacing=\"0\" class=\"tr-caption-container\" style=\"margin-left: auto;margin-right: auto;text-align: center\">\n<tbody>\n<tr>\n<td style=\"text-align: center\"><a href=\"http:\/\/1.bp.blogspot.com\/-zv5iRebVBbk\/T_-9bX0hFII\/AAAAAAAAAqg\/5O5JC4hPFak\/s1600\/MVVM_save_item_done.png\"><img decoding=\"async\" border=\"0\" height=\"192\" src=\"http:\/\/1.bp.blogspot.com\/-zv5iRebVBbk\/T_-9bX0hFII\/AAAAAAAAAqg\/5O5JC4hPFak\/s640\/MVVM_save_item_done.png\" width=\"640\" \/><\/a><\/td>\n<\/tr>\n<tr>\n<td class=\"tr-caption\" style=\"text-align: center\">New Entry is Added When &#8220;Save&#8221; is Clicked<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><strong> ZK Features in Action<\/strong><br \/>\n<strong>&nbsp;<\/strong>                      <\/p>\n<ul>\n<li>MVVM : Save, Form Binding, Conditional Binding<\/li>\n<\/ul>\n<p><strong> Add New Entries with MVVM Form Binding<\/strong><\/p>\n<p>we&#8217;ll need to implement these parts:                     <\/p>\n<ul>\n<li>Enhance our ViewModel POJO<\/li>\n<li>Add UI markup to present a form and decorate the markup with the appropriate annotations<\/li>\n<\/ul>\n<p><strong>The ViewModel Class<\/strong>                    <\/p>\n<pre class=\"brush:java\">public class InventoryVM {\r\n\r\n    private List&lt;item&gt; items;\r\n    private Item newItem;\r\n \r\n    @NotifyChange(\"newItem\")\r\n    @Command\r\n    public void createNewItem(){\r\n        newItem = new Item(\"\", \"\",0, 0,new Date());\r\n    }\r\n \r\n    @NotifyChange({\"newItem\",\"items\"})\r\n    @Command\r\n    public void saveItem() throws Exception{\r\n        DataService.getInstance().saveItem(newItem);\r\n        newItem = null;\r\n        items = getItems();\r\n    }\r\n  \r\n    @NotifyChange(\"newItem\")\r\n    @Command\r\n    public void cancelSave() throws Exception{\r\n        newItem = null;\r\n    }\r\n \r\n    public List&lt;item&gt; getItems() throws Exception{\r\n        items = DataService.getInstance().getAllItems();\r\n        return items;\r\n        }\r\n    }\r\n<\/pre>\n<ul>\n<li>Line 4, we declare an Item object named <i>newItem<\/i> which will reference the Item instance to be saved to the database.<\/li>\n<li>Line 6, <strong>@NotifyChange<\/strong> informs the binder to update the UI on the state of the associated ViewModel&#8217;s property.<br \/>\n In our UI markup shown below, at line 8, we have a Groupbox annotated with <strong>visible=&#8221;@load(<i>not empty vm.newItem<\/i>)<\/strong>, hence the Groupbox will become visible once <i>createNewItem<\/i> assigns an instance of Item to <i>newItem<\/i>.<br \/>\n Simply put, <strong>@NotifyChange<\/strong> refreshes the UI with respect to the updates on ViewModel&#8217;s properties.<\/li>\n<li>Line 7, we annotate the <i>createNewItem<\/i> method with <strong>@Command<\/strong> and in our UI markup shown below, at line 4, we have a Toolbarbutton with <strong>onClick=&#8221;@commnad(createNewItem)&#8221;<\/strong>. So when the Toolbarbutton is clicked, the <i>createNewItem<\/i> method will be invoked.\n <\/li>\n<li>Similarly, from line 12 to 18, we have a saveItem method which is called when its corresponding onClick event is triggered. Once the new Item object is saved to the database cache, we reset the newItem to null and retrieve the new list of items. The changes made to the ViewModel properties <i>newItem<\/i> (now null again) and <i>items<\/i> (now with an extra entry) are reflected to the UI using <strong>@NotifyChange<\/strong> as before.<\/li>\n<\/ul>\n<p><strong><br \/>\n <\/strong><br \/>\n<strong>The Markup<\/strong>                      <div style=\"display:inline-block; margin: 15px 0;\"> <div id=\"adngin-JavaCodeGeeks_incontent_video-0\" style=\"display:inline-block;\"><\/div> <\/div><\/p>\n<pre class=\"brush:xml\">&lt;window apply=\"org.zkoss.bind.BindComposer\" \r\n viewModel=\"@id('vm') @init('lab.sphota.zk.ctrl.InventoryVM')\"&gt;\r\n&lt;toolbar&gt;\r\n &lt;toolbarbutton label=\"Add\" onClick=\"@command('createNewItem')\" \/&gt;\r\n&lt;\/toolbar&gt;\r\n&lt;groupbox form=\"@id('itm') @load(vm.newItem) \r\n        @save(vm.newItem, before='saveItem')\"\r\n visible=\"@load(not empty vm.newItem)\"&gt;\r\n &lt;caption label=\"New Item\"&gt;&lt;\/caption&gt;\r\n &lt;grid width=\"50%\"&gt;\r\n  &lt;rows&gt;\r\n   &lt;row&gt;\r\n    &lt;label value=\"Item Name\" width=\"100px\"&gt;&lt;\/label&gt;\r\n    &lt;textbox id=\"name\" value=\"@bind(itm.name)\" \/&gt;\r\n   &lt;\/row&gt;\r\n   &lt;row&gt;\r\n    &lt;label value=\"Model\" width=\"100px\"&gt;&lt;\/label&gt;\r\n    &lt;textbox value=\"@bind(itm.model)\" \/&gt;\r\n   &lt;\/row&gt;\r\n   &lt;row&gt;\r\n    &lt;label value=\"Unit Price\" width=\"100px\"&gt;&lt;\/label&gt;\r\n    &lt;decimalbox value=\"@bind(itm.price)\" format=\"#,###.00\"\r\n     constraint=\"no empty, no negative\" \/&gt;\r\n   &lt;\/row&gt;\r\n   &lt;row&gt;\r\n    &lt;label value=\"Quantity\" width=\"100px\"&gt;&lt;\/label&gt;\r\n    &lt;spinner value=\"@bind(itm.qty)\"\r\n     constraint=\"no empty,min 0 max 999: \r\n    Quantity Must be Greater Than Zero\" \/&gt;\r\n   &lt;\/row&gt;\r\n   &lt;row&gt;\r\n    &lt;cell colspan=\"2\" align=\"center\"&gt;\r\n     &lt;button width=\"80px\" label=\"Save\"\r\n      onClick=\"@command('saveItem')\" mold=\"trendy\" \/&gt;\r\n     &lt;button width=\"80px\" label=\"Cancel\"\r\n      onClick=\"@command('cancelSave')\" mold=\"trendy\" \/&gt;\r\n    &lt;\/cell&gt;\r\n   &lt;\/row&gt;\r\n  &lt;\/rows&gt;\r\n &lt;\/grid&gt;\r\n&lt;\/groupbox&gt;\r\n&lt;listbox&gt;\r\n...\r\n&lt;\/listbox&gt;\r\n&lt;\/window&gt;\r\n<\/pre>\n<ul>\n<li>Line 1, we apply ZK&#8217;s default implementation of its BindComposer. It is responsible for instantiating our ViewModel and Binder instances.<\/li>\n<li>Line 2, we supply the full class name of the ViewModel we wish to instantiate and give it an ID for future reference<\/li>\n<li>Line 4, we assign our ViewModel&#8217;s &#8220;command method&#8221; <i>createNewItem<\/i> as the onClick event handler for the toolbar button.<\/li>\n<li>Line 6, the property newItem in ViewModel is made referenceable throughout the Groupbox using the ID &#8220;itm&#8221;.<\/li>\n<li>Line 6,7, by using form binding, to avoid invalid or incomplete data saved to the ViewModel property, entries in the form are saved to a temporary object until the command method <i>saveItem<\/i> is called.\n <\/li>\n<li>Line 8, we show the Groupbox to enter a new Item entry only user has clicked the &#8220;Add&#8221; button; which in turn invokes <i>createNewItem<\/i> method and assigns the VM property newItem an instance of Item with default value(empty strings and 0s).\n <\/li>\n<li>Line 14, 18, 22, 27, we bind the Item properties with the input elements. <strong>@bind<\/strong> is effectively equivalent to <strong>@load<\/strong> plus <strong>@save.<\/strong><\/li>\n<\/ul>\n<p><strong> In a Nuteshell<\/strong><\/p>\n<p>To sum up in point form:                     <\/p>\n<ul>\n<li>Using form binding avoids directly modifying data in ViewModel properties by saving form entries to a temporary object. Data is written to the ViewModel properties only if the condition specified is satisfied; in our example, only if the <i>saveItem<\/i> method is invoked. <\/li>\n<li> <strong>@Command<\/strong> annotation allows the binder to map UI event handlers to ViewModel command methods.<\/li>\n<li><strong>@NotifyChange<\/strong> informs the binder which ViewModel properties had been modified after the command method is executed so changes in data can then be reflected on the UI.<\/li>\n<li>We can assign values to any of UI components&#8217; attributes at run-time via MVVM binding to manipulate parameters such as visibility, style, disable\/enable, etc.<\/li>\n<\/ul>\n<p>In this post, we&#8217;ve not seen how data entries are validated. Before that, we&#8217;ll implement the delete and edit functionalities in the next post.                                           <\/p>\n<p><strong>Reference<\/strong>                      <a href=\"http:\/\/books.zkoss.org\/wiki\/ZK%20Developer%27s%20Reference\/MVVM\" target=\"_blank\">ZK Developer Reference<\/a><\/p>\n<p><strong><i>Reference: <\/i><\/strong><a href=\"http:\/\/techdojo.blogspot.ca\/2012\/05\/zk-in-action-1-mvvm-form-binding.html\">ZK in Action [1] : MVVM &#8211; Form Binding <\/a> from our <a href=\"http:\/\/www.javacodegeeks.com\/p\/jcg.html\">JCG partner<\/a> Lance Lu at the <a href=\"http:\/\/techdojo.blogspot.ca\/\">Tech Dojo<\/a> blog.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>This is the second episode in our efforts to build a ZK application from the ground up. The previous post dealt with loading and rendering of data into a table using MVVM. In this post, we&#8217;ll be introduced to ZK MVVM&#8217;s form binding. Objective We&#8217;ll build an &#8220;Add&#8221; function that would enable us to save &hellip;<\/p>\n","protected":false},"author":193,"featured_media":257,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[523,351],"class_list":["post-1535","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-enterprise-java","tag-mvvm","tag-zk"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>ZK in Action: MVVM - Form Binding - Java Code Geeks<\/title>\n<meta name=\"description\" content=\"This is the second episode in our efforts to build a ZK application from the ground up. The previous post dealt with loading and rendering of data into a\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.javacodegeeks.com\/2012\/07\/zk-in-action-mvvm-form-binding.html\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"ZK in Action: MVVM - Form Binding - Java Code Geeks\" \/>\n<meta property=\"og:description\" content=\"This is the second episode in our efforts to build a ZK application from the ground up. The previous post dealt with loading and rendering of data into a\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.javacodegeeks.com\/2012\/07\/zk-in-action-mvvm-form-binding.html\" \/>\n<meta property=\"og:site_name\" content=\"Java Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/javacodegeeks\" \/>\n<meta property=\"article:published_time\" content=\"2012-07-13T19:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2012-10-22T06:01:58+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2012\/10\/zk-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Lance Lu\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@javacodegeeks\" \/>\n<meta name=\"twitter:site\" content=\"@javacodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Lance Lu\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2012\\\/07\\\/zk-in-action-mvvm-form-binding.html#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2012\\\/07\\\/zk-in-action-mvvm-form-binding.html\"},\"author\":{\"name\":\"Lance Lu\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#\\\/schema\\\/person\\\/428a6a876ca552ce5502cfdfc85af956\"},\"headline\":\"ZK in Action: MVVM &#8211; Form Binding\",\"datePublished\":\"2012-07-13T19:00:00+00:00\",\"dateModified\":\"2012-10-22T06:01:58+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2012\\\/07\\\/zk-in-action-mvvm-form-binding.html\"},\"wordCount\":663,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2012\\\/07\\\/zk-in-action-mvvm-form-binding.html#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2012\\\/10\\\/zk-logo.jpg\",\"keywords\":[\"MVVM\",\"ZK\"],\"articleSection\":[\"Enterprise Java\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.javacodegeeks.com\\\/2012\\\/07\\\/zk-in-action-mvvm-form-binding.html#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2012\\\/07\\\/zk-in-action-mvvm-form-binding.html\",\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2012\\\/07\\\/zk-in-action-mvvm-form-binding.html\",\"name\":\"ZK in Action: MVVM - Form Binding - Java Code Geeks\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2012\\\/07\\\/zk-in-action-mvvm-form-binding.html#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2012\\\/07\\\/zk-in-action-mvvm-form-binding.html#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2012\\\/10\\\/zk-logo.jpg\",\"datePublished\":\"2012-07-13T19:00:00+00:00\",\"dateModified\":\"2012-10-22T06:01:58+00:00\",\"description\":\"This is the second episode in our efforts to build a ZK application from the ground up. The previous post dealt with loading and rendering of data into a\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2012\\\/07\\\/zk-in-action-mvvm-form-binding.html#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.javacodegeeks.com\\\/2012\\\/07\\\/zk-in-action-mvvm-form-binding.html\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2012\\\/07\\\/zk-in-action-mvvm-form-binding.html#primaryimage\",\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2012\\\/10\\\/zk-logo.jpg\",\"contentUrl\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2012\\\/10\\\/zk-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2012\\\/07\\\/zk-in-action-mvvm-form-binding.html#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.javacodegeeks.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Java\",\"item\":\"https:\\\/\\\/www.javacodegeeks.com\\\/category\\\/java\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Enterprise Java\",\"item\":\"https:\\\/\\\/www.javacodegeeks.com\\\/category\\\/java\\\/enterprise-java\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"ZK in Action: MVVM &#8211; Form Binding\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#website\",\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/\",\"name\":\"Java Code Geeks\",\"description\":\"Java Developers Resource Center\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#organization\"},\"alternateName\":\"JCG\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.javacodegeeks.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/exelixis-logo.png\",\"contentUrl\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/javacodegeeks\",\"https:\\\/\\\/x.com\\\/javacodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#\\\/schema\\\/person\\\/428a6a876ca552ce5502cfdfc85af956\",\"name\":\"Lance Lu\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/50430356ad738b0a7694a45ebc751057d71882d016ce17bd66a2a59ef654aa60?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/50430356ad738b0a7694a45ebc751057d71882d016ce17bd66a2a59ef654aa60?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/50430356ad738b0a7694a45ebc751057d71882d016ce17bd66a2a59ef654aa60?s=96&d=mm&r=g\",\"caption\":\"Lance Lu\"},\"sameAs\":[\"http:\\\/\\\/techdojo.blogspot.com\\\/\"],\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/author\\\/Lance-Lu\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"ZK in Action: MVVM - Form Binding - Java Code Geeks","description":"This is the second episode in our efforts to build a ZK application from the ground up. The previous post dealt with loading and rendering of data into a","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.javacodegeeks.com\/2012\/07\/zk-in-action-mvvm-form-binding.html","og_locale":"en_US","og_type":"article","og_title":"ZK in Action: MVVM - Form Binding - Java Code Geeks","og_description":"This is the second episode in our efforts to build a ZK application from the ground up. The previous post dealt with loading and rendering of data into a","og_url":"https:\/\/www.javacodegeeks.com\/2012\/07\/zk-in-action-mvvm-form-binding.html","og_site_name":"Java Code Geeks","article_publisher":"https:\/\/www.facebook.com\/javacodegeeks","article_published_time":"2012-07-13T19:00:00+00:00","article_modified_time":"2012-10-22T06:01:58+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2012\/10\/zk-logo.jpg","type":"image\/jpeg"}],"author":"Lance Lu","twitter_card":"summary_large_image","twitter_creator":"@javacodegeeks","twitter_site":"@javacodegeeks","twitter_misc":{"Written by":"Lance Lu","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.javacodegeeks.com\/2012\/07\/zk-in-action-mvvm-form-binding.html#article","isPartOf":{"@id":"https:\/\/www.javacodegeeks.com\/2012\/07\/zk-in-action-mvvm-form-binding.html"},"author":{"name":"Lance Lu","@id":"https:\/\/www.javacodegeeks.com\/#\/schema\/person\/428a6a876ca552ce5502cfdfc85af956"},"headline":"ZK in Action: MVVM &#8211; Form Binding","datePublished":"2012-07-13T19:00:00+00:00","dateModified":"2012-10-22T06:01:58+00:00","mainEntityOfPage":{"@id":"https:\/\/www.javacodegeeks.com\/2012\/07\/zk-in-action-mvvm-form-binding.html"},"wordCount":663,"commentCount":0,"publisher":{"@id":"https:\/\/www.javacodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.javacodegeeks.com\/2012\/07\/zk-in-action-mvvm-form-binding.html#primaryimage"},"thumbnailUrl":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2012\/10\/zk-logo.jpg","keywords":["MVVM","ZK"],"articleSection":["Enterprise Java"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.javacodegeeks.com\/2012\/07\/zk-in-action-mvvm-form-binding.html#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.javacodegeeks.com\/2012\/07\/zk-in-action-mvvm-form-binding.html","url":"https:\/\/www.javacodegeeks.com\/2012\/07\/zk-in-action-mvvm-form-binding.html","name":"ZK in Action: MVVM - Form Binding - Java Code Geeks","isPartOf":{"@id":"https:\/\/www.javacodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.javacodegeeks.com\/2012\/07\/zk-in-action-mvvm-form-binding.html#primaryimage"},"image":{"@id":"https:\/\/www.javacodegeeks.com\/2012\/07\/zk-in-action-mvvm-form-binding.html#primaryimage"},"thumbnailUrl":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2012\/10\/zk-logo.jpg","datePublished":"2012-07-13T19:00:00+00:00","dateModified":"2012-10-22T06:01:58+00:00","description":"This is the second episode in our efforts to build a ZK application from the ground up. The previous post dealt with loading and rendering of data into a","breadcrumb":{"@id":"https:\/\/www.javacodegeeks.com\/2012\/07\/zk-in-action-mvvm-form-binding.html#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.javacodegeeks.com\/2012\/07\/zk-in-action-mvvm-form-binding.html"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.javacodegeeks.com\/2012\/07\/zk-in-action-mvvm-form-binding.html#primaryimage","url":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2012\/10\/zk-logo.jpg","contentUrl":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2012\/10\/zk-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.javacodegeeks.com\/2012\/07\/zk-in-action-mvvm-form-binding.html#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.javacodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"Java","item":"https:\/\/www.javacodegeeks.com\/category\/java"},{"@type":"ListItem","position":3,"name":"Enterprise Java","item":"https:\/\/www.javacodegeeks.com\/category\/java\/enterprise-java"},{"@type":"ListItem","position":4,"name":"ZK in Action: MVVM &#8211; Form Binding"}]},{"@type":"WebSite","@id":"https:\/\/www.javacodegeeks.com\/#website","url":"https:\/\/www.javacodegeeks.com\/","name":"Java Code Geeks","description":"Java Developers Resource Center","publisher":{"@id":"https:\/\/www.javacodegeeks.com\/#organization"},"alternateName":"JCG","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.javacodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.javacodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.javacodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.javacodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.javacodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/javacodegeeks","https:\/\/x.com\/javacodegeeks"]},{"@type":"Person","@id":"https:\/\/www.javacodegeeks.com\/#\/schema\/person\/428a6a876ca552ce5502cfdfc85af956","name":"Lance Lu","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/50430356ad738b0a7694a45ebc751057d71882d016ce17bd66a2a59ef654aa60?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/50430356ad738b0a7694a45ebc751057d71882d016ce17bd66a2a59ef654aa60?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/50430356ad738b0a7694a45ebc751057d71882d016ce17bd66a2a59ef654aa60?s=96&d=mm&r=g","caption":"Lance Lu"},"sameAs":["http:\/\/techdojo.blogspot.com\/"],"url":"https:\/\/www.javacodegeeks.com\/author\/Lance-Lu"}]}},"_links":{"self":[{"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/posts\/1535","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/users\/193"}],"replies":[{"embeddable":true,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/comments?post=1535"}],"version-history":[{"count":0,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/posts\/1535\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/media\/257"}],"wp:attachment":[{"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/media?parent=1535"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/categories?post=1535"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/tags?post=1535"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}