REVERT TO CONSOLE » Ajax

New Google Code Project

Jeff — Fri, 08 May 2009 01:41:40 +0000

I’ve started a new google code project, tuneshost, for a presentation I’m giving this week. It’s a bare minimal start, and in the short term I’m not going to be making many enhancements- I’ll just be using it to demonstrate htmlunit and selenium testing.

It’s built on the grails platform, and uses extjs for the UI. Communication is predominantly done in a restful fashion, with json. I’m using the acegi and searchable plugins. (btw, searchable is a @#$!@# awesome plugin!!!)

The concept is that you search through your media (it supports music right now, but the plan is to support all media), a la google style. I’m tired of importing 4 gigs into iTunes over my home network and having to wait 2 hours for it to finish. I’m also tired of syncing my ipod. So it’s streaming media for me all the way, and smart searching.

JavaScript Unit Testing

Jeff — Fri, 24 Apr 2009 22:28:38 +0000

TechTalk: Testing Rich Client Web Applications by Jeff Hemminger from Object Partners on Vimeo.

Step by Step Tutorials – DWR with Spring, Ajax – Dynamic drop down lists

Priyatam — Wed, 07 Nov 2007 21:53:49 +0000

Scenario: A simple jsp page with a standard drop down box. A Selection criteria (could be another drop down box and a couple of check boxes) to change the values in these drop down box dynamically, without submitting the page.

What you will learn:

Configure dwr.xml with spring beans
Configure application contexts for dwr beans
The basic structure of the jsp for dwr
The necessary js that executes the ajax call along with the code for rendering the new drop down values
Finally, the facade (ajax handler) in Java, for the action

1. Configure dwr.xml with spring beans

listOptionsAjaxFacade is the bean name you would want configure in Spring’s application context. The advantage of using beans and creator=”spring” here is that all your dependencies can be autowired by default with your existing Spring container. So if you have two dao dependencies in listOptionsAjaxFacade, you can now use your existing application context to resolve dependencies. Simply add autowire=”byType”. The converter=”bean” above ensures that all Types are converted to your domain object types. I assume a package structure for domain which are the only return types of my ajax handlers.

2.Configure application contexts for dwr beans



	
		This file defines DWR Ajax Facade Beans.

I assume, you already have an application context(s) for all your controller, dao, services beans etc

3.The basic structure of the jsp for dwr









// contents of your jsp




 Ascending


// other parts of jsp

As you see, include 3 js files on the top of your jsp. The js ListOptionsAjaxFacade.js is actually the name of the handler that you
will see in a moment. The button ‘refresh’ has a js handler processListOptions.

4.The necessary js that executes the ajax call along with the code for rendering the new drop down values
Add the following js in the jsp

It retrieves the values of groupBy and ascendingorder fields from the current jsp and calls the ajax method processListOptions. Once retrieved, it uses the handy dwr.util method to replace all the list options with the new values. Note the callback function(date) used for this. Dwr replaces the return call from processListOptions and puts them in data (The complete java object collection)

5.Finally, the facade (ajax handler) in Java, for the action

public class ListOptionsAjaxFacade {
      private PersonDao personDao;

      public List processListOptions(String sortBy, boolean isAscending) {
       	return personDao.getAll(sortBy, isAscending);
      }

      //setters & getters
}

Ofcourse, this is a happy-day-flow with no exception handling either in client side or server side, but you can add that later. Read the docs for DWR.
Thats it. You should now be able to retrieve the lists dynamically

Essential Reading:
Read more on dwr.util package. Just like drop down lists, you can pretty
much create any other dynamic form element. The basic structure remains the same as above. Try using scriptaculous for fancy js effects in combination with the above code. For instance, on click of Refresh, you can fade in fade out the dropdown box.
(and charge the customer an additional 8 hours for implementing the same)

Generic search for auto complete using Hibernate, Ajax, Scriptaculous – Part 1

Priyatam — Fri, 13 Apr 2007 15:49:21 +0000

Ever wondered how to write a custom search function with pattern matching, generic enough to for an auto completer using Hibernate? In this part I will explain the back end portion of writing an auto completer, for the next part you will see an Ajax front end using DWR and scriptaculous.

Use Case Scenario - User has a text input field. User types in “Bi” and a request is sent to the server for searching all matching strings with “Bi”.

Technical Challenges Implementing this functionality for a single scenario should be straight forward but having a solution generic enough that any single or a combination of attributes of your domain objects could be searched using hibernate in the dao layer, has some challenges. Also remember, we are not interesting in Pojos but returning “Hibernate Objects” to the UI.

Solution In this example, I use a domain object, ResearchStaff. Let’s say, the first request from the client is matchResearchStaffs(String textPattern). Your Controller (or ajax facade) would look something similar.

public List matchResearchStaffs(String text, HttpServletRequest request) throws Exception{
    List  staffCol = researchStaffDao.getBySubnames(extractSubnames(text));

    // The below code is not required for simple searches. But if your ResearchStaff Object has a lot
    // of attributes and collections. You may want to strip it off or "reduce" it before sending it to the UI
    List  reducedStaffCol = new ArrayList (staffCol.size());
    for (ResearchStaff staff : staffCol) {
        reducedStaffCol.add(buildReduced(staff, Arrays.asList("id", "firstName","lastName")));
    }

     return reducedStaffCol;
}

As you see, the controller delegates to Dao for pattern matching and this is where Dao is smart enough to figure out ‘which’ domain object’s ‘what’ attributes are being queried. In my last article, you’ve seen how to couple an abstract domain object to a Base Dao and make it ‘aware’. Well, here you see the real benefits of that coupling.

    /**
     * A query builder for use by subclass DAOs.  It makes it easy to match a fragment of a name
     * or identifier against multiple properties.  This is intended for use in implementing
     * user-friendly dynamic searches; e.g., autocompleters.
     *
     * @param subnames the name fragments to search on
     * @param extraConditions custom HQL conditions with which to constrain the fragment matches
     * @param extraParameters parameters for the custom conditions
     * @param substringMatchProperties a list of properties of the implementing object which should
     *             be matched as case-insensitive substrings
     * @param exactMatchProperties a list of properties which should be matched as case-insensitive
     *             full strings
     * @return a list of matching domain object instances
     */
    @SuppressWarnings("unchecked")
    protected List findBySubname(
        String[] subnames, String extraConditions, List extraParameters,
        List substringMatchProperties, List exactMatchProperties
    ) {
        StringBuilder query = new StringBuilder("from ")
            .append(domainClass().getName()).append(" o where ");
        if (extraConditions != null) query.append(extraConditions).append(" and ");
        List params = new LinkedList();
        if (extraParameters != null) params.addAll(extraParameters);

        for (int i = 0; i < subnames.length; i++) {
            buildSubnameQuery(subnames[i], query, params,
                substringMatchProperties, exactMatchProperties);
            if (i < subnames.length - 1) query.append(" and ");
        }

        log.debug("query string = " +query);
        return getHibernateTemplate().find(query.toString(), params.toArray());
    }

    protected void buildSubnameQuery(
        String subname, StringBuilder query, List params,
        List substringMatchProperties, List exactMatchProperties) {
        query.append('(');
        if (hasAny(substringMatchProperties)) {
            for (Iterator it = substringMatchProperties.iterator(); it.hasNext();) {
                String prop = it.next();
                query.append("LOWER(o.").append(prop).append(") LIKE ?");
                params.add('%' + subname.toLowerCase() + '%');
                if (it.hasNext()) query.append(" or ");
            }
            if (hasAny(exactMatchProperties)) {
                query.append(" or ");
            }
        }
        if (hasAny(exactMatchProperties)) {
            for (Iterator it = exactMatchProperties.iterator(); it.hasNext();) {
                String prop = it.next();
                query.append("LOWER(o.").append(prop).append(") = ?");
                params.add(subname.toLowerCase());
                if (it.hasNext()) query.append(" or ");
            }
        }
        query.append(')');
    }

    private boolean hasAny(List properties) {
        return properties != null && properties.size() > 0;
    }

For more working code and complex use cases, feel free to look into our gforge codebase in the core/web sub projects

AbstractBaseDao
StudyAjaxFacade