Implement View

Purpose

Implement a flow view using ZK

Example

As shown in the demo we have two flows in this sample application. Each flow transitions from one view state to another through user actions and each view state is rendered as a view. In our case we have implemented each view using ZK and to be specific as a ZUML page. As specified by Spring Webflow each view-state maps to a view named with the same view-state so in our main flow the very first view state enterSearchCriteria gets mapped to enterSearchCriteria.zul page.

Here is a a screen shot of this enterSearchCriteria view state as represented by enterSearchCriteria.zul view.

It has two sections,one is to show the search criteria which is where you can enter some search string and select maximum search results per page to display. The other one is where you will see past bookings.

ZUML

Here is a snippet from enterSearchCriteria.zul that implements the first section we described above.

<?page title="ZK Spring: Hotel Booking Sample Application" complete="true" ?>
<?init class="org.zkoss.zk.ui.util.Composition" arg0="/WEB-INF/layouts/standard.zul"?>
<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit" arg0="./hotelSearch"?>
<?taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c" ?>
<?variable-resolver class="org.zkoss.zkplus.spring.DelegatingVariableResolver"?>
<zk:zk     xmlns="http://www.zkoss.org/2005/zk/native"       
    xmlns:zul="http://www.zkoss.org/2005/zul"
    xmlns:zk="http://www.zkoss.org/2005/zk">
        <zul:div id="hotelSearch" class="section" self="@{define(content) fragment(hotelSearchFragment)}">
            <span class="errors">
               <!-- <h:messages globalOnly="true" />  -->
            </span>
            <h2>Search Hotels</h2>
            <form id="mainForm">
                <fieldset>
                    <div class="field">
                        <div class="label">
                            Search String:
                        </div>
                        <div class="input">
                            <zul:textbox id="searchString" value="@{searchCriteria.searchString}" 
                            tooltiptext="Search hotels by name, address, city, or zip."/>
                        </div>
                    </div>
                    <div class="field">
                        <div class="label">
                               Maximum results:
                        </div>
                        <div class="input">
                            <zul:listbox id="pageSize" rows="1" mold="select">
                                <zul:listitem forEach="${referenceData.pageSizeOptions}" 
                                value="${c:int(each)}" label="${each}"/>
                            </zul:listbox>
                           </div>
                    </div>
                    <div class="buttonGroup">
                        <zul:button id="findHotels" label="Find Hotels" onClick="" self="@{action(search)}"/>
                    </div>
                </fieldset>
            </form>
        </zul:div>
...
</zk:zk>

First we describe is the use of org.zkoss.zk.ui.util.Composition to display a login status bar at the top of this view. It simply constructs a fragment out of standard.zul page and attaches itself to the current page.

Second we describe how once user enters the search term and select maximum results per page to display the flow transitions to the next view-state i.e. to reviewHotels. It is achieved theorugh data binding annotation for the search button as shown below

    <zul:button id="findHotels" label="Find Hotels" onClick="" self="@{action(search)}"/>

Here the annotation

@{action(<transition-on-value>)}

trigger a transition. In main flow definition we have defined this transition for the enterSearchCriteria view state which causes ZK Spring Webflow to make a transition to reviewHotels view state.

        <transition on="search" to="reviewHotels">
            <evaluate expression="searchCriteria.resetPage()" />
        </transition>

Third we describe is how does view implemented with ZK can access to the flow variables. it is done through org.zkoss.zkplus.spring.DelegatingVariableResolver which internally uses ZK Spring Webflow variable resolver to resolve flow variable. In addition to the standard spring scopes such as request, session etc. Spring Webflow has several other useful scopes such as viewScope or flowScope. Variable stored in these scopes are then exposed to the views implemented in ZUML by org.zkoss.zkplus.spring.DelegatingVariableResolver.

Using org.zkoss.zkplus.spring.DelegatingVariableResolver we can resolve bookings variable that is set in viewScope and it is used to generate the second section of this view to display any past bookings. This part of view is generated using ZK's data-binding technique which resolves variable used in data-binding annotations using org.zkoss.zkplus.spring.DelegatingVariableResolver.

Version History

Version	Date	Content