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

If you enjoyed this post, please consider leaving a comment or subscribing to the RSS feed to have future articles delivered to your feed reader.

8 Responses to “Rich Web Application with Spring MVC and ZK 8 Shadow Selector Demo”

  1. Tanmay says:

    Tried your demo app. Compiles and runs without any error, but when I hit the url http://localhost:8080/zkspringmvc-demo/mvc/todos2/

    I got blank page and the following trace in the jetty server

    INFO: FrameworkServlet ‘springmvc’: initialization completed in 580 ms
    2016-02-23 11:23:56.040:INFO:oejs.AbstractConnector:Started SelectChannelConnect
    [email protected]:8080
    [INFO] Started Jetty Server
    [INFO] Starting scanner at interval of 5 seconds.
    Feb 23, 2016 11:24:32 AM org.zkoss.util.resource.impl.LabelLoaderImpl loadLabels

    INFO: Loading labels for en_US
    Feb 23, 2016 11:24:32 AM org.zkoss.util.resource.impl.LabelLoaderImpl loadLabels

    INFO: Loading labels for en

  2. Wenning Hsu says:

    @Tanmay
    There were some errors in the zul page of the demo project..
    They have been corrected and work fine now
    Thank you for pointing them out.

  3. Ismail says:

    There were some errors in the zul page of the demo project..

  4. Wenning Hsu says:

    @Ismail
    Yes, the wrong file was committed. However, the correct zul file had already been provided at the time of publication.
    If you continue to encounter problems, feel free to point them out, thanks!

  5. Aaron says:

    Excuse me, I try this demo , but @ZKSelector(“#submit”) Button submit is null in TodoCollector.java edit method. Can any body tell me why ? thank you.

  6. Wenning Hsu says:

    @Aaron
    The problem you’ve got might be caused by the expiry date of zkspringmvc, and it has bean updated. So, please clone the repository again. If there is any problem, feel free to let us know. Thanks.

  7. raja says:

    java.lang.IllegalStateException: Components can be accessed only in event listeners Error

  8. Wenning Hsu says:

    @raja

    Could you provide an example and steps to reproduce this exception? Thanks!

Leave a Reply