Current development on JAMWiki is primarily focused on maintenance rather than new features due to a lack of developer availability. If you are interested in working on JAMWiki please join 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>