Active development of JAMWiki has ceased, and bug fixes and support will be limited at best. If you are interested in taking over management of JAMWiki please send an email to the jamwiki-devel mailing list.

Tech:Integrate a GWT module in a Special page

ktip.png This page (and all pages in the Tech: namespace) is a developer discussion about a feature that is either proposed for inclusion in JAMWiki or one that has already been implemented. This page is NOT documentation of JAMWiki functionality - for a list of documentation, see Category:JAMWiki.
Status of this feature: NOT IMPLEMENTED. Users may use the suggestions below to modify their own JAMWiki implementations, but these capabilities are not currently a part of the default distributions.

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

Contents

How can I integrate Google Web Toolkit modules in a new Special: page[edit]

Introductory articles[edit]

An AJAX calculator example[edit]

My example GWT module is an 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[edit]

  • 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[edit]

In a separated GWT project I compiled all GWT files 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>