Eclipse Wiki Weblog

Friday December 15, 2006

How to integrate a GWT module in a new JAMWiki Special: page

Note: this document is work in progress and not complete at the moment

Contents
An AJAX calculator example Creating a new Special:Calc page Integrating the GWT module Introductory articles

An AJAX calculator example

My example GWT module is the MathEclipse AJAX calculator called org.matheclipse.gwt.Calc which is separately developed in the GWT hosted mode and should now be included into a new JAMWiki Special:Calc page.

In the main GWT EntryPoint in the method org.matheclipse.gwt.client.Calc#onModuleLoad() we can distinguish between non-hosted mode and hosted mode with the GWT.isScript() method. In the onModuleLoad() method we also create the main calculator GUI panel and insert it into a prepared "slot1" in calc.jsp (see below).

 public void onModuleLoad() {
   CALC_SERVICE = (CalcServiceAsync) GWT.create(CalcService.class);
   ServiceDefTarget target = (ServiceDefTarget) CALC_SERVICE;
   if (GWT.isScript()) {
     String url = GWT.getModuleBaseURL();
     url += "calc"; 
     target.setServiceEntryPoint(url);
   } else {
     target.setServiceEntryPoint("/calc");
   }
 ...
   // Create a panel for the GUI and insert it into a prepared "slot1" in cals.jsp
   RootPanel slot1 = RootPanel.get("slot1");
   slot1.add(panel);
 ...

Creating a new Special:Calc page

Modify the /WEB-INF/jamwiki-servlet.xml file to add a mapping and a servlet handler. The mapping is the URL pattern (such as <prop key="/**/Special:Calc">Calc</prop>) and the handler links the mapping with a servlet (such as <bean id="Calc" class="org.jamwiki.servlets.CalcServlet" />).
Make sure JAMWiki recognizes your page as an existing special page by adding the URL pattern to /WEB-INF/classes/pseudotopics.properties (for JAMWiki versions prior to 0.5.0) or by adding a pseudotopic entry to /WEB-INF/classes/jamwiki-configuration.xml (for JAMWiki 0.5.0 or later).
Example: <pseudotopic><name>Special:Calc</name></pseudotopic>.
Create the servlet that you specified in the jamwiki-servlet.xml file ("org.jamwiki.servlets.CalcServlet"). The servlet should extend JAMWikiServlet:

 protected ModelAndView handleJAMWikiRequest(HttpServletRequest request, HttpServletResponse response, ModelAndView next, WikiPageInfo pageInfo) throws Exception {
   pageInfo.setPageTitle(new WikiMessage("calc.title"));
   pageInfo.setAction(WikiPageInfo.ACTION_CALC);
   pageInfo.setSpecial(true);
   return next;
 }

Add a description into ApplicationResources.properties

 calc.title=AJAX online calculator

Add an action for the servlet to org.jamwiki.servlets.WikiPageInfo:

 ...
 public static final int ACTION_CALC = 999;
 ...
 public boolean getActionCalc() {
     return (this.action == ACTION_CALC);
 }

Copy a first WEB-INF/jsp/calc.jsp for example from the WEB-INF/jsp/search.jsp

Process the action for your servlet and display the page by modifying wiki.jsp appropriately:

<c:when test="${pageInfo.actionCalc}">
  <jsp:include page="calc.jsp" flush="true" />
</c:when>

Integrating the GWT module

Note:In the following I assume that your JAMWiki Application-URI is /wiki

In a separated GWT project I compiled all GWT files with the GWTCompiler from Java to JavaScript into the \www\org.matheclipse.gwt.Calc directory. These files must now been copied into a JAMWiki subdirectory.

For a better organization all compiled (static) GWT files in this example go into subdirectory:

 /wiki/static

and the main gwt.js is stored in

 /wiki/static/gwt.js

The compiled GWT files are copied from the

 /www/org.matheclipse.gwt.Calc

directory into the directory

 /wiki/static/org.matheclipse.gwt.Calc

In the /WEB-INF/jsp/top.jsp file I added this line in the header section:

<meta name='gwt:module' content='/wiki/static/org.matheclipse.gwt.Calc=org.matheclipse.gwt.Calc'>

Description of the new /WEB-INF/jsp/calc.jsp file

 <%@ page errorPage="/WEB-INF/jsp/error.jsp"
    contentType="text/html; charset=utf-8"
 %>
 <%@ include file="page-init.jsp" %>
 <-- <GWT CSS styles follow in this section -->
 <style type="text/css">
   ... 
 </style>
 <script language='javascript' src='/wiki/static/gwt.js'></script>
    <iframe id='__gwt_historyFrame' style='width:0;height:0;border:0'></iframe>
    <div id="loadingWait">Loading...</div>
       <table align="left" verticalalign="top">
	<tr><td id="slot1"></td></tr>
       </table>

Copy all necessary *.jar files for yor application into the WEB-INF/lib directory

Copy GWT gwt-servlet.jar into the WEB-INF/lib directory

Modify JAMWiki's web.xml servlets mapping

 ...
 <servlet>
   <servlet-name>calculator</servlet-name>
     <servlet-class>org.matheclipse.gwt.server.CalcServiceImpl</servlet-class>
   <load-on-startup>1</load-on-startup>
 </servlet>
 ...
 <servlet-mapping>
   <servlet-name>calculator</servlet-name>
   <url-pattern>/static/org.matheclipse.gwt.Calc/calc</url-pattern>
 </servlet-mapping>