Zafu: KendoUI JSP taglib + Couchbase (2)


Just a few hours after being presented KendoUI Q3 I wrote the first post on KendoUI JSP wrapper. It was a pretty simple grid that retrieved data from Couchbase 2.0. That first post showed how to get data from a Couchbase 2.0 view and displayed it in a grid doing the paging in the client. In that example that meant transfer almost 6000 records and then do the paging in the browser -not very smart for such volume-. This time, I will implement the paging in the server and transfer only a small group of records.

Zafu server-side paging

Step one, a brief introduction to what we need for implementing server-side paging and what KendoUI and Couchbase.

KendoUI server-side paging

Configuring a KendoUI grid for server-side paging is as easy as defining serverPaging as true in the DataSource definition used by our Grid (see documentation here or here). Something like:

<kendo:dataSource pageSize="10" serverPaging="true">
    <kendo:dataSource-transport>
        <kendo:dataSource-transport-read url="/ListBeer" type="GET"/>
    </kendo:dataSource-transport>
    <kendo:dataSource-schema data="data" total="total" groups="data">
        <kendo:dataSource-schema-model>
            <kendo:dataSource-schema-model-fields>
                <kendo:dataSource-schema-model-field name="name" type="string"/>
                <kendo:dataSource-schema-model-field name="abv" type="number"/>
                <kendo:dataSource-schema-model-field name="style" type="string"/>
                <kendo:dataSource-schema-model-field name="category" type="string"/>
            </kendo:dataSource-schema-model-fields>
        </kendo:dataSource-schema-model>
    </kendo:dataSource-schema>
</kendo:dataSource>

In the previous definition I specify both that the server will do paging (send a page at a time) and the size of each page defined in pageSize (defined as 10 in the previous example).

But, in addition when the DataSource loads data, it also needs to specify the number of records to skip from the dataset. What I will get in my servlet /ListBeer is four tuples of paramater-value:

  1. take the number of records to retrieve.
  2. skip the number of records to skip from the beginning of the DataSet.
  3. page the index of the current page.
  4. pageSize the number of records displayed on each page.

Couchbase 2.0 server-side paging

When we build a query in Couchbase 2.0, we define a series of parameter to configure it. This includes:

  1. setSkip for defining the number of elements to skip.
  2. setLimit for defining the number of records to retrieve.

The mapping between KendoUI and Couchbase 2.0 paging parameters is easy: KendoUI:skip maps into Couchbase:skip and KendoUI:take maps into Couchbase:limit.

New Java read code

The new read function (defined in the previous post) now is as follow:

public List read(String key, int skip, int limit) throws Exception {
    View view = client.getView(ViewDocument, ViewName);

    if (view == null) {
        throw new Exception("View is null");
    }

    Query query = new Query();
    if (key != null) {
        query.setKey(key);
    }
    if (skip >= 0) {
        query.setSkip(skip);
    }
    if (limit >= 0) {
        query.setLimit(limit);
    }
    query.setStale(Stale.FALSE);
    query.setIncludeDocs(true);
    query.setDescending(false);
    query.setReduce(false);

    ViewResponse result = client.query(view, query);
    Iterator<ViewRow> itr = result.iterator();
    return IteratorUtils.toList(itr);
}

Where skip is what I get in the servlet as request.getParameter(“skip”) and limit is request.getParameter(“take”).

First “problem” in KendoUI wrapper

NOTE: Please, remember that KendoUI JSP wrapper is a beta release which means (according the Wikipedia):

Beta (named after the second letter of the Greek alphabet) is the software development phase following alpha. It generally begins when the software is feature complete. Software in the beta phase will generally have many more bugs in it than completed software, as well as speed/performance issues. The focus of beta testing is reducing impacts to users, often incorporating usability testing. The process of delivering a beta version to the users is called beta release and this is typically the first time that the software is available outside of the organization that developed it.

So, having defects is not bad, it is something that we cannot avoid, and as far as it is usable (and so far it is) and the defects get fixed by the time the final release is introduced it is completely understandable.

The defect is the way we receive the parameters that is different that for traditional HTML / JavaScript usage but also a little odd.

Parameters in KendoUI HTML / Javascript

Parameters are sent to the server (unless you define your own parameter mapping) encoded in the URL as url?param1=value1&param2=value2&… (Ex: /ListBeer?pageSize=10&take=10&skip=0&page=1).

Parameters in KendoUI JSP wrapper

Parameters are sent to the server (unless you define your own parameter mapping) as a stringified JSON and this as a parameter: url?{param1:value1,param2:value2,…} (Ex: /ListBeer?{pageSize:10,take:10,skip:0,page:1}=).

And here I have two concerns:

  1. I should not change my servlet no mather I user HTML/JavaScript, ASP wrapper, JSP wrapper,…
  2. Sending a string serialized JSON object as a parameter name is not nice, if I want to send it as JSON I will send it in the value side of a parameter and not the name side.

Workaround

Have 2 different servlets (code paths) for parsing parameters:

  1. HTML/JavaScript
  2. JSP wrapper.

Fixes

  1. KendoUI fixes TransportTag.doEndTag to do not define as default parameterMap function a JSON.stringify but leave it empty (this is something that we **cannot do**).
  2. Define our own parameter map that sends the parameters encoded in the URL as HTML 5 / JavaScript does or as JSON but in the value side and with well-known parameter name.

Which one I do recommend…? Fix 1, and while KendoUI provide us a patched version, you fix it or you go with Fix 2.

<script type="text/javascript">
    function encodeParametersAsJSON(param) {
        return "param=" + JSON.stringify(param);
    }
</script>
...
<kendo:dataSource-transport parameterMap="encodeParametersAsJSON">
    <kendo:dataSource-transport-read url="/ListBeer" type="GET"/>
</kendo:dataSource-transport>

I do not recommend Workaround since you have to duplicate your java code.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s