In Zafu: KendoUI JSP taglib + Couchbase (3) I have explained how to implement an autocomplete for accessing the name of the beers of Couchbase sample-beer database. That time I have used a pretty complex structure for mapping KendoUI filter.
But if the only thing that I need is sending whatever the user has typed so far, might not be worthwhile using such complex structure. If that’s your case, this is what you have to do.
Redefine parameterMap
In the previous post I have used the following function for generating the parameters to send to the server.
function kendoJson(d, t) {
return "param=" + JSON.stringify(d);
}
I.e., only send the data typed so far as a parameter called name and limit as the number of results that is the value defined in kendo:dataSource JSP tag.
Get the parameters in the server
In the server now the parameters are much easier to retrieve since they arrive as two different parameters with the names name and limit.
String name = request.getParameter("name");
int limit = 10;
System.out.println("Limit:" + request.getParameter("limit"));
if (request.getParameter("limit") != null) {
try {
limit = Integer.parseInt(request.getParameter("limit"));
} catch (Exception e) {
e.printStackTrace();
}
}
And then invoke the query as we explained in the last post:
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:
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:
take the number of records to retrieve.
skip the number of records to skip from the beginning of the DataSet.
page the index of the current page.
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:
setSkip for defining the number of elements to skip.
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¶m2=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:
I should not change my servlet no mather I user HTML/JavaScript, ASP wrapper, JSP wrapper,…
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:
HTML/JavaScript
JSP wrapper.
Fixes
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**).
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.
A couple a days ago I attended KendoUI Q3 announcement. Being more in the Java than C# side I was very excited about JSP taglib (again, zillions of thanks).
Just one hour after finishing the presentation I connected to Couchbase 2.0 webinar on Couchbase App Development.
Few hours latter (about 4 working hours) I finished writing some code using both together.
Why took me almost 4 hours?
Just as a little of feedback I admit that before this I didn’t write a single line of code for Couchbase (many for CouchDB using Java Client libraries as well as CouchApp) but they are not the same and they do not use the same Java Client library.
I have written many lines of code for KendoUI using HTML5 + JavaScript (never ASP and C#), created new KendoUI widgets (and even fixed some bugs in KendoUI). BUTKendoUI JSP taglib is new, so I did not have experience on KendoUI JSP taglib neither on the server side, so a little of challenge.
But this was not where I spend most of the time 😦 It was because Couchbase Java Client (plus the libraries that come with it), is for Java 6 while KendoUI JSP taglib is for Java 7 so I had to figure out how to run both together under Apache Tomcat (and this took me more than 2 hours).
@toddanglin,@BrandonSatrom,@JohnBristowe,@burkeholland,@alex_gyoshev Would be possible to have your taglib **officially** release for Java 6 too? You just need to change a couple of lines of code 😉
What I did in the remaining two hours was…
When you install Couchbase 2.0, you are prompted (at least I was) about installing a sample database (a list of almos 6000 beers!!!).
So, I’ve decide to display in a grid those (almost) 6000 records (name, abv, category and style) and being able to navigate them. NOTE: For this first example I will not be doing server side paging, filtering,… By the end of the experiment (I live in Europe) it was almost 1am and I went to sleep.
What did I need to write:
Java Server Page (JSP) using KendoUI taglib (not much documentation on how to use it but looking their example was enough for me).
Servlet invoked by KendoUIDataSource transport read for retrieving the data, this is Java and uses Couchbase Java Client Library.
Couchbase view for extracting the list of beers (this is a MapReduce function).
function (doc, meta) {
if (doc.type && doc.type == "beer" && doc.name) {
emit(doc.name, doc.id);
}
}
Couchbase 2.0 Java Client: View invocation
public List read(String key) throws Exception {
View view = client.getView(ViewDocument, ViewName);
if (view == null) {
throw new Exception("View is null");
}
Query query = new Query();
// Set the key for the query based on beer name
if (key != null) {
query.setKey(key);
}
query.setStale(Stale.FALSE);
query.setIncludeDocs(true);
query.setDescending(false);
ViewResponse result = client.query(view, query);
Iterator<ViewRow> itr = result.iterator();
return IteratorUtils.toList(itr);
}
Conclusion
Positive
It works!
It was not that hard!
Both fit pretty nice and both are easy to start with!
Even that tag libraries are pretty verbose having snippets you can type it quite fast.
My IDE recognized KendoUI taglib and coloring and typing was pretty fast.
Negative
KendoUI, please release Java 6 version (I know that it is pretty old but as you can see there people developing new products and still using it).
Couchbase, please upgrade to Java 7. Java 6 is pretty old otherwise it will look like Windows XP.
Pending
Play with more widgets and server side paging / filtering / …
See how it fits (if it actually does, I don’t think so) with my own Widgets (I have a few that I use a lot).
Neutral
I think that would be nice a series of blogs exploiting the idea of JSP taglib… maybe I start one… is not that much the question of documentation as writing Guides on how to use if for practical cases.
Document workflow using CouchDB & HTML5 