Page tree
Skip to end of metadata
Go to start of metadata
Your Rating: Results: 1 Star2 Star3 Star4 Star5 Star 140 rates

We wanted to do some complex validation of forms in the browser, but we did not want to run into building and maintaining the javascript code needed for that. When you use Google Web Toolkit (GWT) you do not need to worry about javascript: GWT takes care of all that. You write your code in java.

We used GWT to build the UI, validate the response and submit the form to Magnolia. You can use all sorts of ajax functions or RPC to communicate with the server using GWT, but we didn't need that for our goal. A disadvantage of GWT is that you do not have a very big influence on the html that is being built. If you want to ban tables from your pages and only use divs, you can forget about GTW. If you want your form to be read by form readers for disabled users, GTW does not give you a lot of support for that.

Of course there is a lot of information about GWT available.

What do you need to do to get this done?

Step 1: build an application in GWT.

We built the GTW forms in a separate project. After compilation you get a main js file, like myForm.Application.js and several files with names like 0B9EB67B64740833768F41C7692609DA.cache.html for the different browsers and languages (if you defined those).

We copy the files to the Magnolia project or module so the js files become available for browsing.

Step 2: use the form in a template.

The paragraph contains some information that the GWT-form needs. GWT can get these hidden values from the page.

<input type="hidden" id="magnoliaNodePath" value="${formNode.handle}" />
<input type="hidden" id="contextPath" value="${pageContext.request.contextPath}" />
<input type="hidden" id="velocityTemplate" value="contactUsSv.vm" />
<input type="hidden" id="formAction" value="${pageContext.request.contextPath}/sendForm" />

Then the script is defined, and a container is added in which GWT will write the html to display the form.

<script type="text/javascript" src="${pageContext.request.contextPath}/docroot/javascript/gwt/sv/contactus/nl.neteffect.myForm.Application.nocache.js"><jsp:text></jsp:text></script>
<div id="gwtContactUs"><jsp:text /></div>

Step 3: the form is available in the browser.

The user can fill in the form, including the captcha, and submit it. Validations are done first by GWT, like the required fields, but also regex checks like:

if(!email.getText().matches(Constants.REGEX_EMAIL))

where the regex is:

public static final String REGEX_EMAIL = "^[a-zA-Z][\\w\\.-]*[a-zA-Z0-9]@[a-zA-Z0-9][\\w\\.-]*[a-zA-Z0-9]\\.[a-zA-Z][a-zA-Z\\.]*[a-zA-Z]$";

Step 4: submit and process the form

The form is submitted to "/sendForm", a url which is mapped to a servlet.

In the servlet the content is validated, processed, and a response is sent back to the browser. For example check the captcha:

isCaptchaValid = CaptchaService.getInstance().validateResponseForID(sessionId, captchaResponse)

Send a response:

response.setContentType("text/html");
PrintWriter out = response.getWriter();
out.println(responseMessage);

GWT deals with the response:

public void onSubmitComplete(FormSubmitCompleteEvent formSubmitCompleteEvent) {
String resultText = formSubmitCompleteEvent.getResults();
...
}

You will need to take some time to get to know your way in GWT, but once you have accustomed yourself to it, it is quite easy (and fun) to create forms like these and integrate them in Magnolia.

  • No labels