Changeset 2435

Timestamp:

11/23/09 15:58:53 (2 years ago)

Author:

erikroos

Message:

Added inline help to the AnimalDB prototype, based on Ajax technology.

When you hover with your mouse over e.g. the animal select box in the Event Manager screen, the JavaScript 'getHelpText' is called. This function calls the URL served by the InlineHelpServlet? with a parameter designating the GUI element the user put his mouse on. Furthermore, another JavaScript function (in the same .js file) is set as the event handler, once the Servlet returns its HTML. The Servlet spits out a line of text, depending on the parameter passed to it. The event handler puts the HTML from the Servlet into the help text box's InnerHTML. The event handler function has access to this box through its ID.

Location:

molgenis4animaldb

Files:

• WebContent/WEB-INF/web.xml (modified) (1 diff)
• WebContent/res/scripts/custom/eventman.js (modified) (2 diffs)
• WebContent/res/scripts/custom/helptext.html (deleted)
• handwritten/java/plugin/eventman/ManageEventsPlugin.ftl (modified) (3 diffs)
• handwritten/java/servlets/InlineHelpServlet.java (added)

molgenis4animaldb/WebContent/WEB-INF/web.xml

@@ -54 +54 @@
                 <servlet-name>MolgenisServlet</servlet-name>
                 <url-pattern>/download/*</url-pattern>
-        </servlet-mapping>      
+        </servlet-mapping>
+        
+        <servlet>
+                <servlet-name>InlineHelpServlet</servlet-name>
+                <servlet-class>servlets.InlineHelpServlet</servlet-class>
+        </servlet>
+        <servlet-mapping>
+                <servlet-name>InlineHelpServlet</servlet-name>
+                <url-pattern>/inlinehelpservlet</url-pattern>
+        </servlet-mapping>
+        
 </web-app>

molgenis4animaldb/WebContent/res/scripts/custom/eventman.js

@@ -1 +1 @@
 var xmlhttp;
 
-function getHelptext() {
+function getHelptext(elementname) {
         if (!xmlhttp) xmlhttp = aaGetXmlHttpRequest();
         if (!xmlhttp) return;
-        var url = 'helptext.html';
+        var url = 'inlinehelpservlet?elname='+elementname;
         xmlhttp.open('GET', url, true);
         xmlhttp.onreadystatechange = printHelptext;
@@ -32 +32 @@
         }
 }
-
-/*window.onload=function() {
-        document.getElementById('animal').onmouseover=getHelptext;
-};*/

molgenis4animaldb/handwritten/java/plugin/eventman/ManageEventsPlugin.ftl

@@ -32 +32 @@
 <#--begin your plugin-->        
 
-<div style="float:left; background-color:#F7FE2E">Add event...</div>
+<div style="float:left"><strong>Add event...</strong></div>
 <div style="float:right; background-color:#00FFFF">
   <div id="helptextbox">Move your mouse over an element to get help.</div>
@@ -45 +45 @@
   <tr>
     <td rowspan=3>
-      <select name="animal" id="animal" size=10 onmouseover="getHelptext();" >
+      <select name="animal" id="animal" size=10 onmouseover="getHelptext('animal');" >
       <#if screen.selectedAnimalList?exists>
         <#list screen.selectedAnimalList as sa>
@@ -108 +108 @@
 <td>Comment:</td>
 <td>
-<input type="text" size=50 name="comment" value="<#if screen.comment?exists>${screen.getComment()}</#if>" />
+<input type="text" size=50 name="comment" value="<#if screen.comment?exists>${screen.getComment()}</#if>" onmouseover="getHelptext('comment');" />
 </tr><tr>
 <td colspan=2>