Ajax data picker Javascript ...

Now that I have the XML data source portion of the Ajax data picker completed, we just need to add a little set-up Javascript in order to complete the components necessary to have a data picker driven by our look-up table data. As you may recall from the original post on the subject, the picker-specific portion of Javascript looks something like this:

// cyselect.js

/**
 * This function sets up the pop-up selection window script
 */
function standardSetUp() {
  fieldName = [id, ame];
  fieldIndex = {id: 0, ame: 1};
  fieldLabel = [Code,Country Name];
  titleText = Country Selection;
  baseXmlUrl = /core/country.xml;
  document.getElementById("containscol").style.visibility = visible;
  document.getElementById("containscol").style.display = ;
  startsWith = a;
  defaultStartsWith = ;
}

We can create a static Javascript file such as this for every look-up table that we want to use as a source for a data picker. However, since each one will be relatively the same, and any differences will be driven by the data in the look-up table definition in the database, we can also create a Java servlet that will produce such a Javascript file at run-time, on the fly, for any table that you can define, as soon as you define it. To do that, we just need to extend our Javascript servlet base class to merge the standard portions of the script with dynamic content from the look-up table definition.

package org.restafarian.core.servlets.impl;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;
import java.util.Iterator;
import java.util.Map;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.restafarian.core.beans.LookupTable;
import org.restafarian.core.beans.LookupTableProperty;
import org.restafarian.core.service.LookupTableManager;
import org.restafarian.core.servlets.JavascriptServletBase;

/**
 * <p>This servlet produces the Javascript necessary to support the look-up
 * table entry ajax pick list.</p>
 */
public class LookupTableEntrySelectListJsServlet extends JavascriptServletBase {
  private static final long serialVersionUID = 1;
  private String servletPath = "/optlistjs/";
  private String baseDataURL = "/core/optlist/";
  private LookupTableManager lookupTableManager;
  private Map tableDefinition = new HashMap();

  /**
   * <p>The Servlet "doGet()" method.</p>
   *
   * @param req the <code>HttpServletRequest</code> object
   * @param res the <code>HttpServletResponse</code> object
   * @throws ServletException
   * @throws IOException
   */
  public void doGet(HttpServletRequest req, HttpServletResponse res)
         throws ServletException, IOException {
    // log request, if enabled
    if (log.isDebugEnabled()) {
      String message = "Processing GET request";
      if (req.getQueryString() != null && req.getQueryString().length() > 0) {
        message += "; query string=" + req.getQueryString();
      }
      log.debug(message);
    }

    String id = getIdFromUrl(req, servletPath);
    if (id.indexOf(".js") != -1) {
      id = id.substring(0, id.indexOf(".js"));
    }
    LookupTable thisTable = getTableDefinition(id);
    if (thisTable != null) {
      PrintWriter pw = res.getWriter();
      pw.println(buildJavascript(thisTable));
    } else {
      // send error
      sendError(req, res, 404, "The look-up table with id "" + id + "" was not defined.");
    }
  }

  /**
   * <p>This method returns the table definition for the specified table.</p>
   *
   * @param tableId the id of the requested table
   * @return the table definition for the specified table
   */
  private LookupTable getTableDefinition(String tableId) {
    if (!tableDefinition.containsKey(tableId)) {
      tableDefinition.put(tableId, lookupTableManager.findById(tableId));
    }
    return (LookupTable) tableDefinition.get(tableId);
  }

  /**
   * <p>Builds and returns the Javascript.</p>
   *
   * @param lookupTable the table definition
   * @return the generated Javascript
   */
  private String buildJavascript(LookupTable lookupTable) {
    StringBuffer buffer = new StringBuffer();

    buffer.append("// generated by "" + getClass().getName() + "" ");
    buffer.append("function standardSetUp() { ");
    buffer.append("  fieldName = [ ");
    buffer.append("    id, ");
    buffer.append("    wouldescription");
    if (lookupTable.getProperties() != null && lookupTable.getProperties().size() > 0) {
      Iterator i = lookupTable.getProperties().iterator();
      while (i.hasNext()) {
        LookupTableProperty thisProperty = (LookupTableProperty) i.next();
        buffer.append(",     ");
        buffer.append(thisProperty.getName());
        buffer.append("");
      }
    }
    buffer.append("]; ");
    buffer.append("  fieldIndex = { ");
    buffer.append("    id: 0, ");
    buffer.append("    wouldescription: 1");
    if (lookupTable.getProperties() != null && lookupTable.getProperties().size() > 0) {
      int x = 2;
      Iterator i = lookupTable.getProperties().iterator();
      while (i.hasNext()) {
        LookupTableProperty thisProperty = (LookupTableProperty) i.next();
        buffer.append(",     ");
        buffer.append(thisProperty.getName());
        buffer.append(": " + x);
        x++;
      }
    }
    buffer.append("}; ");
    buffer.append("  fieldLabel = [ ");
    buffer.append("    ID, ");
    buffer.append("    Description");
    if (lookupTable.getProperties() != null && lookupTable.getProperties().size() > 0) {
      Iterator i = lookupTable.getProperties().iterator();
      while (i.hasNext()) {
        LookupTableProperty thisProperty = (LookupTableProperty) i.next();
        buffer.append(",     ");
        if (thisProperty.isDisplayOnList()) {
          buffer.append(thisProperty.getColHeading());
        }
        buffer.append("");
      }
    }
    buffer.append("]; ");
    buffer.append("  titleText = ");
    buffer.append(lookupTable.getName() + " Selection");
    buffer.append("; ");
    buffer.append("  baseXmlUrl = ");
    buffer.append(baseDataURL);
    buffer.append(lookupTable.getId());
    buffer.append(".xml; ");
    buffer.append("  document.getElementById(containscol).style.visibility = visible; ");
    buffer.append("  document.getElementById(containscol).style.display = ; ");
    buffer.append("  startsWith = ; ");
    buffer.append("  defaultStartsWith = ; ");
    buffer.append("} ");

    return buffer.toString();
  }

  /**
   * <p>Sets the lookupTableManager.</p>
   *
   * @param lookupTableManager the lookupTableManager
   */
  public void setLookupTableManager(LookupTableManager lookupTableManager) {
    this.lookupTableManager = lookupTableManager;
  }

  public String getBaseDataURL() {
    return baseDataURL;
  }

  public void setBaseDataURL(String baseDataURL) {
    this.baseDataURL = baseDataURL;
  }

  public String getServletPath() {
    return servletPath;
  }

  public void setServletPath(String servletPath) {
    this.servletPath = servletPath;
  }

  public LookupTableManager getLookupTableManager() {
    return lookupTableManager;
  }
}

The servlet uses the property definitions in the desired look-up table to identify the property names and column headings for each property, and relies on the same “Display On List” property used in the table maintenance facility to determine if the proprty should appear on the pick list display. According to the rules set up for the Ajax data picker, if a property has a column heading defined, that property appears on the list; if it does not, then that property is still returned to the parent window when an item is selected, but the property is not included in the fields displayed. When our servlet builds the Javascript to set up the data picker, it will include the column heading for properties where displayOnList is set to true, and leave out the column headings for those properties where it is not. Under this scenario, if you want a column to appear on the pick list, then you just need to go into the table definition edit screen and check the DOL box for that property.

To run the serlvet, I also had to modify the Spring configuration to set up the dependencies. That addition looks like this:

<bean name="lookupTableEntrySelectListJsServlet"
       class="org.restafarian.core.servlets.impl.LookupTableEntrySelectListJsServlet">
  <property name="servletPath" value="/optlistjs/"/>
  <property name="baseDataURL" value="/core/optlist/"/>
  <property name="lookupTableManager" ref="lookupTableManager"/>
</bean>

Once that was set up and deployed to the server, using the following URL produced the needed script:

http://<serverName>/core/optlistjs/<tableId>.js

To actually see the data picker in operation, you can use the “js” option of the standard data picker to specify this dynamically-generated Javascript file to set things up:

http://<serverName>/core/select.html?js=/core/optlistjs/<tableId>.js

That’s all there is to it. Now you can define a table using the table maintenance facilities and have a data picker ready to go as soon as you have entries in the table. That’s one possible use for our little look-up table subsystem. Of course, that’s just one …

source: blog.restafarian

 View Full Story.