https://www.zkoss.org/_w/index.php?title=Small_Talks/2012/February/MVVM_in_ZK6:_Work_with_Spring&feed=atom&action=history
Small Talks/2012/February/MVVM in ZK6: Work with Spring - Revision history
2024-03-28T16:18:08Z
Revision history for this page on the wiki
MediaWiki 1.35.1
https://www.zkoss.org/_w/index.php?title=Small_Talks/2012/February/MVVM_in_ZK6:_Work_with_Spring&diff=53834&oldid=prev
Hawk: correct highlight (via JWB)
2022-01-20T04:19:31Z
<p>correct highlight (via JWB)</p>
<table class="diff diff-contentalign-left diff-editfont-monospace" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="en">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 04:19, 20 January 2022</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l10" >Line 10:</td>
<td colspan="2" class="diff-lineno">Line 10:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>= Declare Spring bean =</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>= Declare Spring bean =</div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>We will declare <<del class="diffchange diffchange-inline">tt</del>> OrderService </<del class="diffchange diffchange-inline">tt</del>> (service layer), and <<del class="diffchange diffchange-inline">tt</del>> OrderDao </<del class="diffchange diffchange-inline">tt</del>> as the '''singleton bean'''.</div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>We will declare <<ins class="diffchange diffchange-inline">code</ins>> OrderService </<ins class="diffchange diffchange-inline">code</ins>> (service layer), and <<ins class="diffchange diffchange-inline">code</ins>> OrderDao </<ins class="diffchange diffchange-inline">code</ins>> as the '''singleton bean'''.</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l18" >Line 18:</td>
<td colspan="2" class="diff-lineno">Line 18:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><ol></div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><ol></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><li>None of Spring's scopes matches correctly with ViewModel's lifecycle</li></div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><li>None of Spring's scopes matches correctly with ViewModel's lifecycle</li></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><li>There will be two variables referenced to the same ViewModel in which one is created by <<del class="diffchange diffchange-inline">tt</del>>@id</<del class="diffchange diffchange-inline">tt</del>>, and another by Spring bean's name</li></div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><li>There will be two variables referenced to the same ViewModel in which one is created by <<ins class="diffchange diffchange-inline">code</ins>>@id</<ins class="diffchange diffchange-inline">code</ins>>, and another by Spring bean's name</li></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></ol></div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></ol></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l34" >Line 34:</td>
<td colspan="2" class="diff-lineno">Line 34:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></source></div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></source></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>As ViewModel is not a Spring bean, we can't retrieve an object of <<del class="diffchange diffchange-inline">tt</del>> OrderService </<del class="diffchange diffchange-inline">tt</del>> by Spring's autowire, however, we can use ZK's <<del class="diffchange diffchange-inline">tt</del>> @WireVariable </<del class="diffchange diffchange-inline">tt</del>> to achieve the same result.</div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>As ViewModel is not a Spring bean, we can't retrieve an object of <<ins class="diffchange diffchange-inline">code</ins>> OrderService </<ins class="diffchange diffchange-inline">code</ins>> by Spring's autowire, however, we can use ZK's <<ins class="diffchange diffchange-inline">code</ins>> @WireVariable </<ins class="diffchange diffchange-inline">code</ins>> to achieve the same result.</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><source lang="java" <del class="diffchange diffchange-inline">high</del>="6"></div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><source lang="java" <ins class="diffchange diffchange-inline">highlight</ins>="6"></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>public class OrderVM {</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>public class OrderVM {</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l82" >Line 82:</td>
<td colspan="2" class="diff-lineno">Line 82:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>'''order3.zul'''</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>'''order3.zul'''</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><source lang="xml" <del class="diffchange diffchange-inline">high</del>="4,5,6"></div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><source lang="xml" <ins class="diffchange diffchange-inline">highlight</ins>="4,5,6"></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><listitem ></div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><listitem ></div></td></tr>
<tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l146" >Line 146:</td>
<td colspan="2" class="diff-lineno">Line 146:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></source></div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></source></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>We can therefore use them in ZK bind expression without prefix “vm.” because we retrieve them by ZK's <<del class="diffchange diffchange-inline">tt</del>> DelegatingVariableResolver </<del class="diffchange diffchange-inline">tt</del>>. Any ZUL can access a validator through its bean name only instead of ViewModel.</div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>We can therefore use them in ZK bind expression without prefix “vm.” because we retrieve them by ZK's <<ins class="diffchange diffchange-inline">code</ins>> DelegatingVariableResolver </<ins class="diffchange diffchange-inline">code</ins>>. Any ZUL can access a validator through its bean name only instead of ViewModel.</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== Package Structure ==</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== Package Structure ==</div></td></tr>
</table>
Hawk
https://www.zkoss.org/_w/index.php?title=Small_Talks/2012/February/MVVM_in_ZK6:_Work_with_Spring&diff=25648&oldid=prev
Dennischen: /* Validator as a Singleton Bean */
2012-02-15T03:05:31Z
<p><span dir="auto"><span class="autocomment">Validator as a Singleton Bean</span></span></p>
<table class="diff diff-contentalign-left diff-editfont-monospace" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="en">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 03:05, 15 February 2012</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l141" >Line 141:</td>
<td colspan="2" class="diff-lineno">Line 141:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><datebox </div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><datebox </div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>value="@load(vm.selected.shippingDate) @save(vm.selected.shippingDate, before='saveOrder') @validator(shippingDateValidator)"/></div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins class="diffchange diffchange-inline"> </ins>value="@load(vm.selected.shippingDate) @save(vm.selected.shippingDate, before='saveOrder') </div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins class="diffchange diffchange-inline"> </ins>@validator(shippingDateValidator)"/></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></source></div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></source></div></td></tr>
</table>
Dennischen
https://www.zkoss.org/_w/index.php?title=Small_Talks/2012/February/MVVM_in_ZK6:_Work_with_Spring&diff=25646&oldid=prev
Southerncrossie at 09:23, 14 February 2012
2012-02-14T09:23:17Z
<p></p>
<table class="diff diff-contentalign-left diff-editfont-monospace" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="en">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 09:23, 14 February 2012</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l1" >Line 1:</td>
<td colspan="2" class="diff-lineno">Line 1:</td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">{{Template:UnderConstruction}}</del></div></td><td colspan="2"> </td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;"></del></div></td><td colspan="2"> </td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>{{Template:Smalltalk_Author|</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>{{Template:Smalltalk_Author|</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>|author=Hawk Chen, Engineer, Potix Corporation</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>|author=Hawk Chen, Engineer, Potix Corporation</div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>|date=February 2012</div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>|date=February <ins class="diffchange diffchange-inline">08, </ins>2012</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>|version=ZK 6</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>|version=ZK 6</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>}}</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>}}</div></td></tr>
</table>
Southerncrossie
https://www.zkoss.org/_w/index.php?title=Small_Talks/2012/February/MVVM_in_ZK6:_Work_with_Spring&diff=24912&oldid=prev
Southerncrossie: Created page with "{{Template:UnderConstruction}} {{Template:Smalltalk_Author| |author=Hawk Chen, Engineer, Potix Corporation |date=February 2012 |version=ZK 6 }} = Foreword = In the previous ar..."
2012-02-01T08:44:01Z
<p>Created page with "{{Template:UnderConstruction}} {{Template:Smalltalk_Author| |author=Hawk Chen, Engineer, Potix Corporation |date=February 2012 |version=ZK 6 }} = Foreword = In the previous ar..."</p>
<p><b>New page</b></p><div>{{Template:UnderConstruction}}<br />
<br />
{{Template:Smalltalk_Author|<br />
|author=Hawk Chen, Engineer, Potix Corporation<br />
|date=February 2012<br />
|version=ZK 6<br />
}}<br />
<br />
= Foreword =<br />
<br />
In the previous article: [[Small Talks/2011/November/MVVM in ZK 6 - Design CRUD page by MVVM pattern| MVVM in ZK 6 - Design CRUD page by MVVM pattern]], Dennis introduced us to how we can build an order management application. Users can create, read, modify orders and delete using the confirmation dialog. However, in larger projects, it is popular to adopt Spring framework as an application infrastructure. This article continues the story. The goal is to build an application with same functions but using Spring to manage objects, including ViewModel, validator, converter and even validation message. We also utilize JPA as the persistence layer in our example application.<br />
<br />
= Declare Spring bean =<br />
We will declare <tt> OrderService </tt> (service layer), and <tt> OrderDao </tt> as the '''singleton bean'''.<br />
<br />
<br />
== Prepare a ViewModel ==<br />
<br />
Although we adopt Spring framework in this example, we don't make the ViewModel as a Spring bean for 2 reasons; <br />
<ol><br />
<li>None of Spring's scopes matches correctly with ViewModel's lifecycle</li><br />
<li>There will be two variables referenced to the same ViewModel in which one is created by <tt>@id</tt>, and another by Spring bean's name</li><br />
</ol><br />
<br />
These two variables will confuse developers<br />
<br />
Therefore, We use ViewModel like the original way and activate Spring variable resolver.<br />
<br />
'''order3.zul'''<br />
<source lang="xml"><br />
<br />
<?variable-resolver class="org.zkoss.zkplus.spring.DelegatingVariableResolver"?><br />
<window title="Order Management" border="normal" width="600px" apply="org.zkoss.bind.BindComposer"<br />
viewModel="@id('vm') @init('org.zkoss.bind.examples.spring.order.viewmodel.OrderVM')" ><br />
<br />
</source><br />
<br />
As ViewModel is not a Spring bean, we can't retrieve an object of <tt> OrderService </tt> by Spring's autowire, however, we can use ZK's <tt> @WireVariable </tt> to achieve the same result.<br />
<br />
<source lang="java" high="6"><br />
public class OrderVM {<br />
<br />
//the order list<br />
List<Order> orders;<br />
<br />
@WireVariable<br />
OrderService orderService;<br />
}<br />
<br />
</source><br />
<br />
== Converter as a Singleton Bean ==<br />
<br />
Originally, we access converters through OrderVM. To increase reusability of a converter, we create an independent class for each converter inside in OrderVM and declare them as beans. Thus, any ZUL can easily utilize a converter without OrderVM and eliminate those getter methods for converters. <br />
<br />
'''DateFormatConverter.java'''<br />
<source lang="java"><br />
<br />
@org.springframework.stereotype.Component("dateFormatConverter")<br />
public class DateFormatConverter implements Converter {<br />
public Object coerceToUi(Object val, Component comp, BindContext ctx) {<br />
//user sets format in annotation of binding or args when calling binder.addPropertyBinding() <br />
final String format = (String) ctx.getConverterArg("format");<br />
if(format==null) throw new NullPointerException("format attribute not found");<br />
final Date date = (Date) val;<br />
return date == null ? null : new SimpleDateFormat(format).format(date);<br />
}<br />
<br />
public Object coerceToBean(Object val, Component comp, BindContext ctx) {<br />
final String format = (String) ctx.getConverterArg("format");<br />
if(format==null) throw new NullPointerException("format attribute not found");<br />
final String date = (String) val;<br />
try {<br />
return date == null ? null : new SimpleDateFormat(format).parse(date);<br />
} catch (ParseException e) {<br />
throw UiException.Aide.wrap(e);<br />
}<br />
}<br />
}<br />
</source><br />
<br />
Converters have no dependency with other shorter-lived bean and are stateless, so declare them as singleton beans. This converter accepts an argument with key "format" as a pattern to format the Date value.<br />
<br />
'''order3.zul'''<br />
<br />
<source lang="xml" high="4,5,6"><br />
<br />
<listitem ><br />
<listcell label="@bind(item.id)"/> <br />
<listcell label="@bind(item.quantity)"/><br />
<listcell label="@bind(item.price) @converter(numberFormatConverter, format='###,##0.00')"/><br />
<listcell label="@bind(item.creationDate) @converter(dateFormatConverter, format='yyyy/MM/dd')"/><br />
<listcell label="@bind(item.shippingDate) @converter(dateFormatConverter, format='yyyy/MM/dd')"/><br />
</listitem><br />
<br />
</source><br />
<br />
== Validator as a Singleton Bean ==<br />
<br />
Validators are similar to converters, we extract each validator inside a ViewModel as an independent class <br />
<br />
'''ShippingDateValidator.java'''<br />
<source lang="java"><br />
<br />
@Component("shippingDateValidator")<br />
public class ShippingDateValidator extends AbstractValidator{<br />
<br />
public void validate(ValidationContext ctx) {<br />
Date shipping = (Date)ctx.getProperty().getValue();//the main property<br />
Date creation = (Date)ctx.getProperties("creationDate")[0].getValue();//the collected<br />
//multiple fields dependent validation, shipping date have to large than creation more than 3 days.<br />
if(!isDayAfter(creation,shipping,3)){<br />
addInvalidMessage(ctx, "must large than creation date at least 3 days");<br />
}<br />
}<br />
<br />
static public boolean isDayAfter(Date date, Date laterDay , int day) {<br />
if(date==null) return false;<br />
if(laterDay==null) return false;<br />
<br />
Calendar cal = Calendar.getInstance();<br />
Calendar lc = Calendar.getInstance();<br />
<br />
cal.setTime(date);<br />
lc.setTime(laterDay);<br />
<br />
int cy = cal.get(Calendar.YEAR);<br />
int ly = lc.get(Calendar.YEAR);<br />
<br />
int cd = cal.get(Calendar.DAY_OF_YEAR);<br />
int ld = lc.get(Calendar.DAY_OF_YEAR);<br />
<br />
return (ly*365+ld)-(cy*365+cd) >= day; <br />
}<br />
}<br />
<br />
</source><br />
<br />
We declare validators as singleton beans because they are stateless. This validator validates one field (shippDate) upon another field (creationDate) and stores message into the validation message holder.<br />
<br />
'''order3.zul'''<br />
<source lang="xml"><br />
<br />
<datebox <br />
value="@load(vm.selected.shippingDate) @save(vm.selected.shippingDate, before='saveOrder') @validator(shippingDateValidator)"/><br />
<br />
</source><br />
<br />
We can therefore use them in ZK bind expression without prefix “vm.” because we retrieve them by ZK's <tt> DelegatingVariableResolver </tt>. Any ZUL can access a validator through its bean name only instead of ViewModel.<br />
<br />
== Package Structure ==<br />
<br />
The final package structure looks like:<br />
<br />
[[File:smalltalks-mvvm-in-zk6-spring-package.png]]<br />
<br />
Every reusable element is separated to an independent class in multiple packages.<br />
<br />
= LiveDemo =<br />
<br />
<gflash width="653" height="676"> smalltalks-mvvm-in-zk6-spring.swf </gflash><br />
<br />
= Summary =<br />
<br />
ZK MVVM pattern is very suitable to cooperate with Spring framework. All objects used on ZUL can be accessed through a consistent mechanism provided by Spring, thus increasing those objects’ reusability and reducing developer’s burden.<br />
<br />
= Download =<br />
[http://code.google.com/p/zkbind/downloads/list zkbind-springdemo (war with source code)]<br />
<br />
= See Also =<br />
# [[Small Talks/2011/October/Envisage ZK 6: The Next Generation Data Binding System| Envisage ZK 6: The Next Generation Data Binding System]]<br />
# [[Small Talks/2011/November/Hello ZK MVVM| Hello ZK MVVM]]<br />
# [[Small Talks/2011/November/MVVM in ZK 6 - Design your first MVVM page| MVVM in ZK 6 - Design your first MVVM page]]<br />
# [[Small Talks/2011/November/MVVM in ZK 6 - Design CRUD page by MVVM pattern| MVVM in ZK 6 - Design CRUD page by MVVM pattern]]<br />
<br />
<br />
<br />
{{Template:CommentedSmalltalk_Footer_new|<br />
|name=Potix Corporation<br />
}}</div>
Southerncrossie