Introduction

In the previous two articles Rich Web Application with Spring MVC CRUD Demo and  Rich Web Application with Spring MVC CRUD Demo – Part II, we’ve explored the advantages of combining ZK with Spring MVC and the benefits of manipulating the data between Spring MVC and ZK MVVM data binding. In this article, we’ll briefly talk about how Java configuration could be used to replace the XML configuration in ZK Spring MVC and the convenience of using a new feature in ZK 8 – Shadow Selector – to control shadow elements.

To-do Management Demo (Changing templates by Shadow Selector)

The following demonstrates changing templates in ZK Spring MVC through using a new feature in ZK 8 – Shadow Selector.

Required Configuration

Versions:

• Spring MVC: 3.1 or later
• ZK PE and EE: 8.0.1

web.xml

    <servlet/>
        <servlet-name/>springmvc</servlet-name/>
        <servlet-class/>org.springframework.web.servlet.DispatcherServlet
        </servlet-class/>
		<init-param/>
			<param-name/>contextClass</param-name/>
			<param-value/>org.springframework.web.context.support.AnnotationConfigWebApplicationContext</param-value/>
		</init-param/>
		<init-param/>
			<param-name/>contextConfigLocation</param-name/>
			<param-value/>config.MvcConfig</param-value/>
		</init-param/>
        <load-on-startup/>1</load-on-startup/>
    </servlet/>
    <servlet-mapping/>
        <servlet-name/>springmvc</servlet-name/>
        <url-pattern/>/</url-pattern/>
    </servlet-mapping/>

Java Configuration

Instead of defining in a springmvc-servlet.xml file, we could define by a Java configuration class.
The only difference from Spring is you have to extend ZKWebMvcConfigurerAdapter.

@EnableWebMvc
@Configuration
@ComponentScan(basePackages = { "org.zkoss.zkspringmvc.demo" })
public class MvcConfig extends ZKWebMvcConfigurerAdapter {

        @Bean
        public ViewResolver getViewResolver() {
                ZKUrlBasedViewResolver resolver = new ZKUrlBasedViewResolver();
                resolver.setViewClass(new ZKView().getClass());
                resolver.setPrefix("/WEB-INF/");
                resolver.setSuffix("");
                return resolver;
        }

}

Controller

In the controller, the method for changing templates should return a Shadow Selector.
In line 3, the shadow selector “::shadow:todo” means changing the selected “::shadow” shadow element and changing the applied template to the “todo” template.
For more examples of Shadow Selector, please visit this page.
What is a bit different from the Shadow Selector document is that “::shadow” would only select the first shadow root in this version of zkspringmvc.

	@RequestMapping(value = "/changeTemplate",  method = RequestMethod.POST)
	public String changeTemplate(@ZKVariable("self.checked") Boolean checked) {
		return checked ? "::shadow:memo" : "::shadow:todo";
	}

The View

In line 3, we use a shadow element to apply the “todo” template. By setting dynamicValue=”true”, this shadow element will be stored on the server side for updates later.

<zk xmlns:ca="client/attribute"/>
    <vlayout/>
        <apply template="todo" dynamicValue="true"/>
            <template name="todo"/>
                <listbox id="list" model="${todoList}" ca:data-springmvc-action="edit"
                         ca:data-springmvc-trigger="onSelect"/>
                    <listhead/>
                        <listheader label="Message"/>
                            <checkbox label="readonly" ca:data-springmvc-action="changeTemplate" onCheck="div1.setVisible(false)"//>
                        </listheader/>
                    </listhead/>
                    <template name="model"/>
                        <listitem/>
                            <listcell/>
                                <checkbox label="${each.message}" checked="${each.done}" value="${each}"  ca:data-springmvc-action="finish" ca:data-springmvc-trigger="onCheck"//>
                            </listcell/>
                        </listitem/>
                    </template/>
                </listbox/>
            </template/>
            <template name="memo"/>
                <listbox id="list" model="${todoList}" ca:data-springmvc-trigger="onSelect"/>
                    <listhead/>
                        <listheader label="Message"/>
                            <checkbox label="readonly" checked="true" ca:data-springmvc-action="changeTemplate" onCheck="div1.setVisible(true)"//>
                        </listheader/>
                    </listhead/>
                    <template name="model"/>
                        <listitem/>
                            <listcell/>
                                <label value="${each.message}"//>
                            </listcell/>
                        </listitem/>
                    </template/>
                </listbox/>
            </template/>
        </apply/>
        <div id="div1"/>
            <label id="status" value="Add:"//>
            <grid id="form"/>
                <columns/>
                    <column label="Message"//>
                </columns/>
                <rows/>
                    <row/>
                        <textbox id="message" cols="40"//>
                    </row/>
                    <row/>
                        <button id="submit" label="Add new Todo"
                                ca:data-springmvc-action="add"//>
                    </row/>
                </rows/>
            </grid/>
        </div/>
    </vlayout/>
</zk/>

You can run the code above with Tomcat or Jetty server to visit the page “http://localhost:8080/zkspringmvc-demo/mvc/todos2/” and view the demo.

Downloads

The whole demo project could be found on Github project