{"id":1541,"date":"2012-07-12T19:00:00","date_gmt":"2012-07-12T19:00:00","guid":{"rendered":"http:\/\/www.javacodegeeks.com\/2012\/10\/zk-in-action-mvvm-load-and-render-data.html"},"modified":"2012-10-22T06:02:59","modified_gmt":"2012-10-22T06:02:59","slug":"zk-in-action-mvvm-load-and-render-data","status":"publish","type":"post","link":"https:\/\/www.javacodegeeks.com\/2012\/07\/zk-in-action-mvvm-load-and-render-data.html","title":{"rendered":"ZK in Action: MVVM &#8211; Load and Render Data"},"content":{"rendered":"<div dir=\"ltr\" style=\"text-align: left\">A                     <a href=\"http:\/\/techdojo.blogspot.ca\/2012\/03\/jquery-selector-inspired-controller-in.html\">previous post<\/a> had briefly introduced the RIA framework ZK and how its CSS Selector inspired controller mechanism alleviates some of the burdens that comes with UI changes by making the task of referencing UI components in the controller class a relatively flexible affair.                    <\/p>\n<p>We then explored how the                     <a href=\"http:\/\/techdojo.blogspot.ca\/2012\/04\/first-look-at-mvvm-in-zk-6.html\" target=\"_blank\">MVVM<\/a> patterns in ZK allows a single ViewModel to serve different views in the last post.                    <\/p>\n<p>This post marks the beginning of a series of posts that will go through steps in building a simple application from the ground up using ZK.                    <\/p>\n<p><strong> Objective<\/strong><\/p>\n<p>For now, we&#8217;ll build a simple inventory management feature which is limited only to the loading and rendering of a data collection from a database into a table.                    <\/p>\n<p><strong> ZK Features in Action<\/strong>                     <\/p>\n<ul>\n<li>MVVM : Load<\/li>\n<li>Template Tag<\/li>\n<\/ul>\n<p><strong> Load and Render Data into a Table with MVVM<\/strong><\/p>\n<p>Assume there&#8217;s a collection of objects named &#8220;Item&#8221; and there&#8217;s a DataService class which takes care of caching and communication with the database (MongoDB and Morphia).                    <\/p>\n<pre class=\"brush:java\">@Entity(\"items\")\r\npublic class Item {\r\n @Id\r\n private ObjectId id;\r\n \r\n private String name;\r\n private String model;\r\n private int qty;\r\n private float price;\r\n private Date datemod;\r\n \r\n        \/\/ getters &amp; setters<\/pre>\n<p>To render data into a table as shown below in ZK, we&#8217;ll need to implement these parts:                    <\/p>\n<ul>\n<li>A POJO that will serve as our ViewModel<\/li>\n<li>A ZK markup file as our presentation<\/li>\n<\/ul>\n<div class=\"separator\" style=\"clear: both;text-align: center\"><a href=\"http:\/\/4.bp.blogspot.com\/-oGwALPmOjUw\/T_7AU4JdPtI\/AAAAAAAAAqM\/CPrIG_N6_Ao\/s1600\/MVVMloaditems.png\"><img decoding=\"async\" border=\"0\" height=\"115\" src=\"http:\/\/4.bp.blogspot.com\/-oGwALPmOjUw\/T_7AU4JdPtI\/AAAAAAAAAqM\/CPrIG_N6_Ao\/s640\/MVVMloaditems.png\" width=\"640\" \/><\/a><\/div>\n<div class=\"separator\" style=\"clear: both;text-align: center\">\n<\/div>\n<p><strong>The ViewModel Class<\/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:java\">public class InventoryVM {\r\n\r\n    private List&lt;item&gt; items;\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    }<\/pre>\n<ul>\n<li>Line 3,  the list of items needs to be declared as a property of the VM class<\/li>\n<li>Line 5, we need to provide a getter method so the Binder can retrieve the list of items. To recap, the Binder holds reference to the UI components and the ViewModel so it can keep data on both sides in sync as well as call command methods in ViewModel as events are triggered in View.<\/li>\n<\/ul>\n<p><strong>The Markup<\/strong>                   <\/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;listbox model=\"@load(vm.items) \"&gt;\r\n  &lt;listhead&gt;\r\n   &lt;listheader label=\"Name\" \/&gt;\r\n   &lt;listheader label=\"Model\" \/&gt;\r\n   &lt;listheader label=\"Quantity\" \/&gt;\r\n   &lt;listheader label=\"Unit Price\"\/&gt;\r\n   &lt;listheader label=\"Last Modified\" \/&gt;\r\n  &lt;\/listhead&gt;\r\n  &lt;template name=\"model\" var=\"item\" &gt;\r\n   &lt;listitem&gt;\r\n    &lt;listcell&gt;\r\n     &lt;textbox value=\"@load(item.name)\" inplace=\"true\" \/&gt;\r\n    &lt;\/listcell&gt;\r\n    &lt;listcell&gt;\r\n     &lt;textbox value=\"@load(item.model)\" inplace=\"true\" \/&gt;\r\n    &lt;\/listcell&gt;\r\n    &lt;listcell&gt;\r\n     &lt;spinner value=\"@load(item.qty)\"  inplace=\"true\" \/&gt;\r\n    &lt;\/listcell&gt;\r\n    &lt;listcell&gt;\r\n     &lt;decimalbox value=\"@load(item.price)\" inplace=\"true\" \r\n     format=\"#,###.00\"\/&gt;\r\n    &lt;\/listcell&gt;\r\n    &lt;listcell label=\"@load(item.datemod)\" \/&gt;\r\n   &lt;\/listitem&gt;\r\n  &lt;\/template&gt;\r\n &lt;\/listbox&gt;\r\n&lt;\/window&gt;<\/pre>\n<ul>\n<li>Line 1, we apply ZK&#8217;s default implementation of its BindComposer. It is responsible for instantiating our VM instance as well as the Binder instance.<\/li>\n<li>Line 2, we supply the full class name of the ViewModel we wish to instantiate and give it an ID (in this case, &#8216;vm&#8217;) for future reference<\/li>\n<li>Line 3, we assign a data model, which we made as a property of our ViewModel instance, to the Listbox.<\/li>\n<li>Line 11, we instruct the Template component to iterate through the given collection. We also declare a variable called &#8220;item&#8221; which will iteratively take on each Item object inside our collection. Alternatively, we can omit the variable declaration and use the keyword &#8220;each&#8221; to reference the data object (Item).<\/li>\n<li>Line 14, 17, 20, 23, 26, we retrieve the Item properties which we&#8217;d like to be displayed in the Listbox.<\/li>\n<li>Here we use input elements (Textbox, Spinner, Decimalbox) inside the Listcells in anticipation of our future implementation of an editable table. The attribute &#8220;inplace=true&#8221; will render these input elements as regular labels while they&#8217;re not selected.<\/li>\n<\/ul>\n<p><strong><br \/>\n<\/strong><br \/>\n<strong> Wrap Up<\/strong><\/p>\n<p>ZK Binder is central to the workings of ZK MVVM. It holds references to both the UI components and the ViewModel. The ViewModel class is just a POJO where we declare and assign our data models. It exposes getter methods so Binder can retrieve and bind data to their respective annotated UI components. The template tag then allows us to iteratively render UI components with respect to the data model. In our case, a row of 5 Listcells with each cell holding a bean property is rendered iteratively through the bean collection using the template tag.                    <\/p>\n<p>In the next post, we&#8217;ll implement an &#8220;Add&#8221; feature so we can save new entries to our existing inventory using MVVM&#8217;s form binding.                    <\/p>\n<p><strong> Reference<\/strong>                     <a href=\"http:\/\/books.zkoss.org\/wiki\/ZK%20Developer's%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-0-mvvm-load-and-render.html\">ZK in Action [0] : MVVM &#8211; Load and Render Data <\/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>A previous post had briefly introduced the RIA framework ZK and how its CSS Selector inspired controller mechanism alleviates some of the burdens that comes with UI changes by making the task of referencing UI components in the controller class a relatively flexible affair. We then explored how the MVVM patterns in ZK allows a &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-1541","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 - Load and Render Data - Java Code Geeks<\/title>\n<meta name=\"description\" content=\"A previous post had briefly introduced the RIA framework ZK and how its CSS Selector inspired controller mechanism alleviates some of the burdens that\" \/>\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-load-and-render-data.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 - Load and Render Data - Java Code Geeks\" \/>\n<meta property=\"og:description\" content=\"A previous post had briefly introduced the RIA framework ZK and how its CSS Selector inspired controller mechanism alleviates some of the burdens that\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.javacodegeeks.com\/2012\/07\/zk-in-action-mvvm-load-and-render-data.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-12T19:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2012-10-22T06:02:59+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=\"4 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-load-and-render-data.html#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2012\\\/07\\\/zk-in-action-mvvm-load-and-render-data.html\"},\"author\":{\"name\":\"Lance Lu\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#\\\/schema\\\/person\\\/428a6a876ca552ce5502cfdfc85af956\"},\"headline\":\"ZK in Action: MVVM &#8211; Load and Render Data\",\"datePublished\":\"2012-07-12T19:00:00+00:00\",\"dateModified\":\"2012-10-22T06:02:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2012\\\/07\\\/zk-in-action-mvvm-load-and-render-data.html\"},\"wordCount\":601,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2012\\\/07\\\/zk-in-action-mvvm-load-and-render-data.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-load-and-render-data.html#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2012\\\/07\\\/zk-in-action-mvvm-load-and-render-data.html\",\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2012\\\/07\\\/zk-in-action-mvvm-load-and-render-data.html\",\"name\":\"ZK in Action: MVVM - Load and Render Data - Java Code Geeks\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2012\\\/07\\\/zk-in-action-mvvm-load-and-render-data.html#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2012\\\/07\\\/zk-in-action-mvvm-load-and-render-data.html#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2012\\\/10\\\/zk-logo.jpg\",\"datePublished\":\"2012-07-12T19:00:00+00:00\",\"dateModified\":\"2012-10-22T06:02:59+00:00\",\"description\":\"A previous post had briefly introduced the RIA framework ZK and how its CSS Selector inspired controller mechanism alleviates some of the burdens that\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2012\\\/07\\\/zk-in-action-mvvm-load-and-render-data.html#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.javacodegeeks.com\\\/2012\\\/07\\\/zk-in-action-mvvm-load-and-render-data.html\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2012\\\/07\\\/zk-in-action-mvvm-load-and-render-data.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-load-and-render-data.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; Load and Render Data\"}]},{\"@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 - Load and Render Data - Java Code Geeks","description":"A previous post had briefly introduced the RIA framework ZK and how its CSS Selector inspired controller mechanism alleviates some of the burdens that","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-load-and-render-data.html","og_locale":"en_US","og_type":"article","og_title":"ZK in Action: MVVM - Load and Render Data - Java Code Geeks","og_description":"A previous post had briefly introduced the RIA framework ZK and how its CSS Selector inspired controller mechanism alleviates some of the burdens that","og_url":"https:\/\/www.javacodegeeks.com\/2012\/07\/zk-in-action-mvvm-load-and-render-data.html","og_site_name":"Java Code Geeks","article_publisher":"https:\/\/www.facebook.com\/javacodegeeks","article_published_time":"2012-07-12T19:00:00+00:00","article_modified_time":"2012-10-22T06:02:59+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":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.javacodegeeks.com\/2012\/07\/zk-in-action-mvvm-load-and-render-data.html#article","isPartOf":{"@id":"https:\/\/www.javacodegeeks.com\/2012\/07\/zk-in-action-mvvm-load-and-render-data.html"},"author":{"name":"Lance Lu","@id":"https:\/\/www.javacodegeeks.com\/#\/schema\/person\/428a6a876ca552ce5502cfdfc85af956"},"headline":"ZK in Action: MVVM &#8211; Load and Render Data","datePublished":"2012-07-12T19:00:00+00:00","dateModified":"2012-10-22T06:02:59+00:00","mainEntityOfPage":{"@id":"https:\/\/www.javacodegeeks.com\/2012\/07\/zk-in-action-mvvm-load-and-render-data.html"},"wordCount":601,"commentCount":0,"publisher":{"@id":"https:\/\/www.javacodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.javacodegeeks.com\/2012\/07\/zk-in-action-mvvm-load-and-render-data.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-load-and-render-data.html#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.javacodegeeks.com\/2012\/07\/zk-in-action-mvvm-load-and-render-data.html","url":"https:\/\/www.javacodegeeks.com\/2012\/07\/zk-in-action-mvvm-load-and-render-data.html","name":"ZK in Action: MVVM - Load and Render Data - Java Code Geeks","isPartOf":{"@id":"https:\/\/www.javacodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.javacodegeeks.com\/2012\/07\/zk-in-action-mvvm-load-and-render-data.html#primaryimage"},"image":{"@id":"https:\/\/www.javacodegeeks.com\/2012\/07\/zk-in-action-mvvm-load-and-render-data.html#primaryimage"},"thumbnailUrl":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2012\/10\/zk-logo.jpg","datePublished":"2012-07-12T19:00:00+00:00","dateModified":"2012-10-22T06:02:59+00:00","description":"A previous post had briefly introduced the RIA framework ZK and how its CSS Selector inspired controller mechanism alleviates some of the burdens that","breadcrumb":{"@id":"https:\/\/www.javacodegeeks.com\/2012\/07\/zk-in-action-mvvm-load-and-render-data.html#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.javacodegeeks.com\/2012\/07\/zk-in-action-mvvm-load-and-render-data.html"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.javacodegeeks.com\/2012\/07\/zk-in-action-mvvm-load-and-render-data.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-load-and-render-data.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; Load and Render Data"}]},{"@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\/1541","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=1541"}],"version-history":[{"count":0,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/posts\/1541\/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=1541"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/categories?post=1541"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/tags?post=1541"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}