A jQuery inspired server side view model for Java

In HTML applications, jQuery has changed the way people thing about view rendering. Instead of an input or a text field in the view pulling data into it, the jQuery code pushes data into the view. How could this look in a server side situation like Java?

In this code example, I read an HTML template file from the classpath, set the value of an input field and append more data based on a template (also in the HTML file).

<span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000000; font-weight: bold;">class</span> ContactServlet <span style="color: #000000; font-weight: bold;">extends</span> HttpServlet <span style="color: #009900;">{</span>
 
    @Override
    <span style="color: #000000; font-weight: bold;">protected</span> <span style="color: #000066; font-weight: bold;">void</span> doGet<span style="color: #009900;">(</span>HttpServletRequest req, HttpServletResponse resp<span style="color: #009900;">)</span> <span style="color: #000000; font-weight: bold;">throws</span> <span style="color: #003399;">IOException</span> <span style="color: #009900;">{</span>
        <span style="color: #003399;">String</span> nameQuery <span style="color: #339933;">=</span> req.<span style="color: #006633;">getParameter</span><span style="color: #009900;">(</span><span style="color: #0000ff;">"nameQuery"</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span>
 
        <span style="color: #666666; font-style: italic;">// Read a pure html template from the classpath</span>
        Xhtml document <span style="color: #339933;">=</span> Xhtml.<span style="color: #006633;">fromResource</span><span style="color: #009900;">(</span>getClass<span style="color: #009900;">(</span><span style="color: #009900;">)</span>.<span style="color: #006633;">getResource</span><span style="color: #009900;">(</span><span style="color: #0000ff;">"html/contact/index.html"</span><span style="color: #009900;">)</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span>
 
        <span style="color: #666666; font-style: italic;">// Set the value of the nameQuery input field in the HTML</span>
        document.<span style="color: #006633;">getForm</span><span style="color: #009900;">(</span><span style="color: #0000ff;">"#findForm"</span><span style="color: #009900;">)</span>.<span style="color: #006633;">set</span><span style="color: #009900;">(</span><span style="color: #0000ff;">"nameQuery"</span>, nameQuery<span style="color: #009900;">)</span><span style="color: #339933;">;</span>
 
        <span style="color: #003399;">Element</span> contactsEl <span style="color: #339933;">=</span> document.<span style="color: #006633;">select</span><span style="color: #009900;">(</span><span style="color: #0000ff;">"#contacts"</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span>
        <span style="color: #003399;">Element</span> contactTmpl <span style="color: #339933;">=</span> contactsEl.<span style="color: #006633;">take</span><span style="color: #009900;">(</span><span style="color: #0000ff;">".contact"</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span>
        <span style="color: #000000; font-weight: bold;">for</span> <span style="color: #009900;">(</span>Contact contact <span style="color: #339933;">:</span> findContacts<span style="color: #009900;">(</span>nameQuery<span style="color: #009900;">)</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span>
            <span style="color: #666666; font-style: italic;">// Fill in the .contact template of the HTML with data</span>
            <span style="color: #003399;">Element</span> contactHtml <span style="color: #339933;">=</span> contactTmpl.<span style="color: #006633;">copy</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span>.<span style="color: #006633;">text</span><span style="color: #009900;">(</span>contact.<span style="color: #006633;">print</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span>
            <span style="color: #666666; font-style: italic;">// And add it to the #contacts element</span>
            contactsEl.<span style="color: #006633;">add</span><span style="color: #009900;">(</span>contactHtml<span style="color: #009900;">)</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">}</span>
 
        document.<span style="color: #006633;">write</span><span style="color: #009900;">(</span>resp.<span style="color: #006633;">getWriter</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span>
        resp.<span style="color: #006633;">setContentType</span><span style="color: #009900;">(</span><span style="color: #0000ff;">"text/html"</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">}</span>
<span style="color: #009900;">}</span>

This is a simplified version of the HTML:

<html>
  <form method='get' id="findForm">
	<input type='text' name='nameQuery' value='null' />
    <input type='submit' name='findContact' value="Find contact" />
  </form>
  <ul id='contacts'>
    <li class='contact'>Johannes (4444444)</li>
  </ul>
</html>

This is a third way from the alternatives of templated views like Velocity and JSP and from component models like JSF. In this model, the view, the model and the binding of the model variables to the view are all separate.

Disclaimer: In this example, I’ve used my still in pre-alpha XML library with the working name of Eaxy. You can get similiar results with libraries like jSoup and JOOX.

Caveat: I’ve never tried this on a grand scale. It’s an idea that compels me for three reasons: First, it’s very explicit. Nothing happens through @annotation, conventions or some special syntax in a template. Second, it’s very unit testable. There is nothing tying this code to running in a web application server. Finally, it’s easy to get to this code through incremental steps. I initially wrote the example application with code that embedded the HTML as strings in Java code and refactored to use the Java Query approach.

Could this approach be worth trying out more?

Join the discussion
Be the first to comment on this article. Our Commenting Policies
See more