openjpa-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From ppod...@apache.org
Subject svn commit: r1041709 - in /openjpa/sandboxes/jest/openjpa-persistence/src/main/resources/org/apache/openjpa/persistence/jest: jest.css jest.html jest.js
Date Fri, 03 Dec 2010 06:57:14 GMT
Author: ppoddar
Date: Fri Dec  3 06:57:13 2010
New Revision: 1041709

URL: http://svn.apache.org/viewvc?rev=1041709&view=rev
Log:
OPENJPA-1851: Support JSON in JEST. Assorted style tweaks.

Modified:
    openjpa/sandboxes/jest/openjpa-persistence/src/main/resources/org/apache/openjpa/persistence/jest/jest.css
    openjpa/sandboxes/jest/openjpa-persistence/src/main/resources/org/apache/openjpa/persistence/jest/jest.html
    openjpa/sandboxes/jest/openjpa-persistence/src/main/resources/org/apache/openjpa/persistence/jest/jest.js

Modified: openjpa/sandboxes/jest/openjpa-persistence/src/main/resources/org/apache/openjpa/persistence/jest/jest.css
URL: http://svn.apache.org/viewvc/openjpa/sandboxes/jest/openjpa-persistence/src/main/resources/org/apache/openjpa/persistence/jest/jest.css?rev=1041709&r1=1041708&r2=1041709&view=diff
==============================================================================
--- openjpa/sandboxes/jest/openjpa-persistence/src/main/resources/org/apache/openjpa/persistence/jest/jest.css
(original)
+++ openjpa/sandboxes/jest/openjpa-persistence/src/main/resources/org/apache/openjpa/persistence/jest/jest.css
Fri Dec  3 06:57:13 2010
@@ -18,14 +18,11 @@
  */
 
 /** -----------------------------------------------------------------------
- * Visible/Invisible divisions
+ *  Basic layout consists of a left menu section (class='menu')and two  
+ *  vertical sections for command specification (class='highlight') and 
+ *  JEST response (class='canvas') respectively.
  * --------------------------------------------------------------------- */
-.open {
-	display:block;
-}
-.close {
-	display:none;
-}
+ 
 /** -----------------------------------------------------------------------
  *  div section containing the command menu.
  *  Lodged on the top-left corner
@@ -61,8 +58,18 @@
 	position:relative;
 	left:10em;
 	top:1em;
-	border:1px solid black;
-	padding:0em 1em 1em 1em; // top, right, bottom, left
+	width:60em;
+	padding:0em 1em 0em 1em; // top, right, bottom, left
+}
+
+/** -----------------------------------------------------------------------
+ * Visible/Invisible divisions
+ * --------------------------------------------------------------------- */
+.open {
+	display:block;
+}
+.close {
+	display:none;
 }
 
 /** -----------------------------------------------------------------------
@@ -83,9 +90,13 @@
 }
 
 
+
 /** -----------------------------------------------------------------------
  * XML Tag 
  * --------------------------------------------------------------------- */
+pre { 
+	background-color: white;
+}
 .tag {
 	color:green;
 	font-family:"Courier New";
@@ -136,6 +147,12 @@ td.mandatory {
 	color:red;
 }
 
+td input {
+	width : 99%;
+}
+td select {
+	width : 99%;
+}
 
 /** -----------------------------------------------------------------------
  * Paragraph with smaller line breaks 

Modified: openjpa/sandboxes/jest/openjpa-persistence/src/main/resources/org/apache/openjpa/persistence/jest/jest.html
URL: http://svn.apache.org/viewvc/openjpa/sandboxes/jest/openjpa-persistence/src/main/resources/org/apache/openjpa/persistence/jest/jest.html?rev=1041709&r1=1041708&r2=1041709&view=diff
==============================================================================
--- openjpa/sandboxes/jest/openjpa-persistence/src/main/resources/org/apache/openjpa/persistence/jest/jest.html
(original)
+++ openjpa/sandboxes/jest/openjpa-persistence/src/main/resources/org/apache/openjpa/persistence/jest/jest.html
Fri Dec  3 06:57:13 2010
@@ -45,6 +45,12 @@ under the License.
 <link   type="text/css" rel="stylesheet" href="${dojo.base}/dijit/themes/${dojo.theme}/${dojo.theme}.css">
 <!-- link   type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/claro/claro.css"
-->
 <link   type="text/css" rel="stylesheet" href="jest.css">
+<script type="text/javascript" language="javascript" djConfig="parseOnLoad: true, isDebug:
true"  
+        src="${dojo.base}/dojo/dojo.xd.js">
+</script>
+<!-- script type="text/javascript" djConfig="parseOnLoad:true;isDebug=true" src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js"></script
-->
+<script type="text/javascript" language="javascript" src="jest.js">
+</script>
 
 <meta content="REST,OpenJPA,JPA,JEST">
 </head>
@@ -56,22 +62,22 @@ under the License.
 <!-- ====================================================================================
-->
 <!--                     Section for menu based commands.                            
    -->
 <!--                                                                                 
    -->
-<!-- Each menu opens a command window by making a div section visible                
    -->
+<!-- Each menu opens a command window by making a menu section visible               
    -->
 <!-- ====================================================================================
-->
 <div id="menu" class="menu">
 <table cellspacing="1em">
  <tr><td><img alt="Home" src="images/home.jpg" width="100" height="100"></td></tr>
- <tr><td style="text-align:center"><a href="javascript:switchid('home', ['deploy',
'find', 'query', 'domain', 'properties']);">Info</a></td></tr>
- <tr><td><img alt="Deploy" src="images/monitor.jpg" width="100" height="100"></td></tr>
- <tr><td style="text-align:center"><a href="javascript:switchid('deploy',
['home', 'find', 'query', 'domain', 'properties']);">deploy</a></td></tr>
+ <tr><td style="text-align:center"><a href="javascript:openMenu('home');">Info</a></td></tr>
+ <tr><td><img alt="Domain" src="images/domain.jpg" width="100" height="100"></td></tr>
+ <tr><td style="text-align:center"><a href="javascript:openMenu('domain');">browse
domain</a></td></tr>
  <tr><td><img alt="Find"   src="images/find.jpg" width="100" height="100"></td></tr>
- <tr><td style="text-align:center"><a href="javascript:switchid('find', ['home',
'deploy', 'query', 'domain', 'properties']);">find instances</a></td></tr>
+ <tr><td style="text-align:center"><a href="javascript:openMenu('find');">find
instances</a></td></tr>
  <tr><td><img alt="Query"  src="images/query2.png" width="100" height="100"></td></tr>
- <tr><td style="text-align:center"><a href="javascript:switchid('query', ['home',
'deploy', 'find', 'domain', 'properties']);">query objects</a></td></tr>
- <tr><td><img alt="Domain" src="images/domain.jpg" width="100" height="100"></td></tr>
- <tr><td style="text-align:center"><a href="javascript:switchid('domain',
['home', 'deploy', 'find', 'query', 'properties']);">browse domain</a></td></tr>
+ <tr><td style="text-align:center"><a href="javascript:openMenu('query');">query
objects</a></td></tr>
  <tr><td><img alt="View" src="images/properties.jpg"  width="100" height="100"></td></tr>
- <tr><td style="text-align: center"><a href="javascript:switchid('properties',
['home', 'deploy', 'find', 'query', 'domain']);">view properties</a></td></tr>
+ <tr><td style="text-align: center"><a href="javascript:openMenu('properties');">view
properties</a></td></tr>
+ <tr><td><img alt="Deploy" src="images/monitor.jpg" width="100" height="100"></td></tr>
+ <tr><td style="text-align:center"><a href="javascript:openMenu('deploy');">deploy</a></td></tr>
 </table>
 </div>
 
@@ -87,8 +93,8 @@ under the License.
 <!--                   Introduces basic information about JEST                       
    -->
 <!-- ====================================================================================
-->
 <div id="home" class="highlight" dojoType="dijit.TitlePane" 
-title="<b><a href='http://openjpa.apache.org/jest-usage.html' target='_blank'>JEST</a>
facilitates 
-RESTful interaction with OpenJPA runtime.</b>">
+title="<a href='http://openjpa.apache.org/jest-usage.html' target='_blank'>JEST</a>
 
+      <b>facilitates RESTful interaction with OpenJPA runtime.</b>">
 
 
 <UL>
@@ -107,8 +113,8 @@ that syntax. The response is in <tt>XML<
 The response always contains the <em>closure</em> of the persistent instances.

 </LI>
       
-<LI>Connects to the <em>same</em> persistent unit used by the application.
Allows the user to 
-find application objects by JPQL query or find by primary key. 
+<LI>Connects to the <b>persistent unit</b> of an application in the same
module. Or
+    instantiates its own persistence unit.
 </LI>
 </UL>
 </div>
@@ -117,8 +123,8 @@ find application objects by JPQL query o
 <!--        Describes deployment details                                             
    -->
 <!-- ====================================================================================
-->
 <div id="deploy" class="highlight" style="display:none;" dojoType="dijit.TitlePane" 
-	title='<b><a href="http://openjpa.apache.org/jest-usage.html" target="_blank">Deploy
JEST</a> 
-	as a servlet in a web application.</b>'>
+	title='<a href="http://openjpa.apache.org/jest-usage.html" target="_blank">Deploy
JEST</a> 
+	<b>as a servlet in a web application.</b>'>
 	
 	
 	Following <code>WEB-INF/web.xml</code> descriptor will enable JEST to
@@ -170,31 +176,25 @@ find application objects by JPQL query o
 <!-- The user can click the hyperlink to send the request to the server.             
    -->
 <!-- ====================================================================================
-->
 <div id="find"  class="highlight" style="display:none;" dojoType="dijit.TitlePane" 
-  title='<b><a href="http://openjpa.apache.org/jest-syntax.html" target="_blank">Find
</a>  
-	persistent objects by simple or compound primary key.</b>'>
-	
+  title='<a href="http://openjpa.apache.org/jest-syntax.html" target="_blank">Find</a>
 
+	<b>persistent objects by primary identifier.</b>'>
 	
+	<!-- a form for user to fill in the find specifications. Script uses these entries to
-->
+	<!-- build up a request URI for JEST server                                         
 -->
 	<table id="find.command">
 	<tr>
-	  <th>find</th>
-	  <th colspan="2">Arguments</th>
-	  <th colspan="2">Qualifiers</th>
+	  <th width="30%" class="mandatory" title="Name of a persistent entity to find.">Entity
Name</th>
+	  <th width="30%" class="mandatory" title="Primary Key of the entity.">Identifier</th>
+	  <th width="30%" title="Fetch Plan to use.">Fetch Plan</th>
+	  <th width="10%" title="Format of the response.">Format</th>
 	</tr>
 	<tr>
-	  <td></td>
-	  <td class="mandatory" title="Name of a persistent entity to find.">Entity Name</td>
-	  <td class="mandatory" title="Primary Key of the entity.">Primary Key</td>
-	  <td title="Fetch Plan to use.">Fetch Plan</td>
-	  <td title="Format of the response.">Response Format</td>
-	</tr>
-	<tr>
-	  <td></td>
-	  <td><input id="find.type"   onblur="javascript:toURI('find');"></td>
-	  <td><input id="find.pk"     onblur="javascript:toURI('find');"></td>
-	  <td><input id="find.plan"   onblur="javascript:toURI('find');"></td>
+	  <td><input id="find.type"                      onblur="javascript:toURI('find');"></td>
+	  <td><input id="find.pk"                        onblur="javascript:toURI('find');"></td>
+	  <td><input id="find.plan" disabled="disabled"  onblur="javascript:toURI('find');"
></td>
 	  <td>
-	    <select id="find.format" onblur="javascript:toURI('find');" >
-	    <option value="">default</option>
+	    <select id="find.format" onchange="javascript:toURI('find');" >
+	    <option value=""></option>
 	    <option value="xml">XML</option>
 	    <option value="json">JSON</option>
 	    </select>
@@ -202,7 +202,12 @@ find application objects by JPQL query o
 	</tr>
 	</table>
 	<p>
-	<b>URI: </b><span id="find.uri"></span><br>
+	<!-- Script will fill in the URI in this element based on user entries from the above
-->
+	<!-- The element is made to look like a hyperlink but actually a span to omit the   
 -->
+	<!-- associated complexity of preventing the browser's default handling of hyperlink
 -->
+	<!-- click events.                                                                  
 -->
+	<b>URI: </b><span id="find.uri" class="url-invalid">filling the form will
update 
+	this hyperlink. <b>If does not respond at first, please click once more.</b></span><br>
 </div>
 		 
 <!-- ====================================================================================
-->
@@ -217,35 +222,47 @@ find application objects by JPQL query o
 <!-- decrement.                                                                      
    -->
 <!-- ====================================================================================
-->
 <div id="query"  class="highlight" style="display:none;" dojoType="dijit.TitlePane" 
-	title='<b><a href="http://openjpa.apache.org/jest-syntax.html" target="_blank">Query</a>
with 
-	JPQL or named query and binding parameters.</b>'>
-	
+	title='<a href="http://openjpa.apache.org/jest-syntax.html" target="_blank">Query</a>

+	<b>with JPQL or named query and binding parameters.</b>'>
 	
+	<!-- a form for user to fill in the find specifications. Script uses these entries to
-->
+	<!-- build up a request URI for JEST server. This form is more complicated than that
 -->
+	<!-- of find, because a query can accept variable number of binding parameters      
 -->
 	<table id="query.command">
 	<tr>
-	  <th width="10%">Query</th>
-	  <th colspan="3">Arguments</th>
-	  <th colspan="3">Qualifiers</th>
+	  <th width="20%" class="mandatory" title="JPQL query or a named query">Query</th>
+      <th width="10%"style="display: hidden"></th>
+      <th width="10%"style="display: hidden"></th>
+      <th width="10%"style="display: hidden"></th>
+	  <th width="5%" title="Is it a named query?">Single</th>
+	  <th width="5%" title="Returns single result?">Named</th>
+	  <th width="30%" title="Fetch Plan to use.">Fetch Plan</th>
+	  <th width="10%" title="Format of the response.">Format</th>
 	</tr>
 	<tr>
-	  <td></td>
-	  <td class="mandatory" title="JPQL query or a named query" colspan="3">Query</td>
-	  <td title="Is it a named query?">Single</td>
-	  <td title="Returns single result?">Named</td>
-	</tr>
-	<tr>
-	  <td></td>
-	  <td colspan="2"><input id="query.q" size="60"               onblur="javascript:toURI('query');"></td>
+	  <td colspan="4"><input id="query.q"                         onblur="javascript:toURI('query');"></td>
 	  <td><input id="query.single" type="checkbox" value="true"   onblur="javascript:toURI('query');"></td>
 	  <td><input id="query.named"  type="checkbox" value="true"   onblur="javascript:toURI('query');"></td>
+	  <td><input id="query.plan"   disabled="disabled"            onblur="javascript:toURI('query');"
></td>
+	  <td>
+	    <select id="query.format" onchange="javascript:toURI('query');" >
+	    <option value=""></option>
+	    <option value="xml">XML</option>
+	    <option value="json">JSON</option>
+	    </select>
+	  </td>
 	</tr>
 	<tr id="query.vararg.0">
 	  <td><input type="button" value="Bind Query Parameter" 
 	       onclick="javascript:addVarArgRow('query.vararg', 0, 'Bind Query Parameter')"></td>
 	</tr>
 	</table>
-
-	<b>URI: </b><span id="query.uri" class="url" ></span>
+	<!-- Script will fill in the URI in this element based on user entries from the above
-->
+	<!-- The element is made to look like a hyperlink but actually a span to omit the   
 -->
+	<!-- associated complexity of preventing the browser's default handling of hyperlink
 -->
+	<!-- click events.                                                                  
 -->
+	<b>URI: </b><span id="query.uri" class="url-invalid">filling the form
will update 
+	this hyperlink. <b>If does not respond at first, please click once more.</b></span><br>
 </div>
 		 
 <!-- ====================================================================================
-->
@@ -255,10 +272,10 @@ find application objects by JPQL query o
   title='<b><a href="http://openjpa.apache.org/jest-syntax.html" target="_blank">Browse</a>

   persistent domain model.</b>'>
   
-	This command accepts no qualifier or arguments	 <br>
+	This command accepts no qualifier or arguments.	 <br>
 	
 	<b>JEST URI: </b><span id="domain.uri" class="url"
-	onclick="javascript:render('domain','canvas', 'domain', 'xml'); event.returnValue=false;return
false;">domain</span>
+	onclick="javascript:render('domain','canvas', 'domain', 'xml');">domain</span>
 </div>
 		 
 <!-- ====================================================================================
-->
@@ -271,7 +288,7 @@ find application objects by JPQL query o
 	This command accepts no qualifier or arguments	 <br>
 		 
 	<b>URI: </b><span id="properties.uri" class="url" 
-	onclick="javascript:render('properties','canvas', 'properties', 'xml'); event.returnValue=false;return
false;">properties</span>
+	onclick="javascript:render('properties','canvas', 'properties', 'xml');">properties</span>
 </div>
 
 <!-- ====================================================================================
-->
@@ -280,12 +297,6 @@ find application objects by JPQL query o
 <div id="canvas" class="canvas">
 </div>
 
-<script type="text/javascript" language="javascript" djConfig="parseOnLoad: true, isDebug:
true"  
-src="${dojo.base}/dojo/dojo.xd.js">
-</script>
-<!-- script type="text/javascript" djConfig="parseOnLoad:true;isDebug=true" src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js"></script
-->
-<script type="text/javascript" language="javascript" src="jest.js">
-</script>
 
 </body>
 </html>
\ No newline at end of file

Modified: openjpa/sandboxes/jest/openjpa-persistence/src/main/resources/org/apache/openjpa/persistence/jest/jest.js
URL: http://svn.apache.org/viewvc/openjpa/sandboxes/jest/openjpa-persistence/src/main/resources/org/apache/openjpa/persistence/jest/jest.js?rev=1041709&r1=1041708&r2=1041709&view=diff
==============================================================================
--- openjpa/sandboxes/jest/openjpa-persistence/src/main/resources/org/apache/openjpa/persistence/jest/jest.js
(original)
+++ openjpa/sandboxes/jest/openjpa-persistence/src/main/resources/org/apache/openjpa/persistence/jest/jest.js
Fri Dec  3 06:57:13 2010
@@ -35,10 +35,23 @@ dojo.require("dojox.xml.parser");
  *
  * The identifiers of every element to be shown or hidden.
  * ---------------------------------------------------------------------------------------
*/ 
+
+var menuIds = new Array('home', 'deploy', 'find', 'query', 'domain', 'properties');
+
+/**
+ * Opening a menu implies clearing the canvas, hidding the current menu item and making
+ * the given menu identifier visible.
+ * 
+ * @param id menu section identifier 
+ */
+function openMenu(/*HTML element id*/id) {
+	clearElement('canvas');
+	switchId(id, menuIds);
+}
 /**
  * Show the division identified by the given id, and hide all others
  */
-function switchid(/*string*/id, /*string[]*/highlightedSections) {	
+function switchId(/*string*/id, /*string[]*/highlightedSections) {	
     for (var i=0; i < highlightedSections.length; i++){
     	var section = document.getElementById(highlightedSections[i]);
     	if (section != null) {
@@ -143,26 +156,22 @@ function addVarArgRow(rowIdPrefix, index
 		console.log("*ERROR: Variable argument row id [" + rowId + "] not found in the document");
 		return;
     }
-	
-	// remove the current columns from this row
-	while (row.childNodes.length > 0) {
-		row.removeChild(row.firstChild);
-	}
+	clearElement(rowId);
 	
 	// New input column for parameter name. Element id is rowId + '.key'
 	var argNameColumn  = document.createElement('td');
 	var argNameInput   = document.createElement('input');
 	argNameInput.setAttribute('type', 'text');
 	argNameInput.setAttribute('id', rowId + '.key');
-	argNameInput.setAttribute('onchange', 'javascript:toURI("' + rowIdPrefix.split('.')[0] +
'");');
+	argNameInput.setAttribute('onblur', 'javascript:toURI("' + rowIdPrefix.split('.')[0] + '");');
 	argNameColumn.appendChild(argNameInput);
 	
-	// New input column for parameter value Element id is rowId + '.value'
+	// New input column for parameter value. Element id is rowId + '.value'
 	var argValueColumn = document.createElement('td');
 	var argValueInput  = document.createElement('input');
 	argValueInput.setAttribute('type', 'text');
 	argValueInput.setAttribute('id', rowId + '.value');
-	argValueInput.setAttribute('onchange', 'javascript:toURI("' + rowIdPrefix.split('.')[0]
+ '");');
+	argValueInput.setAttribute('onblur', 'javascript:toURI("' + rowIdPrefix.split('.')[0] +
'");');
 	argValueColumn.appendChild(argValueInput);
 	
 	// New column for remove button. Will remove this row.
@@ -175,9 +184,9 @@ function addVarArgRow(rowIdPrefix, index
 	
 	// Empty column as the first column
 	var emptyColumn = document.createElement('td');
+	emptyColumn.appendChild(document.createTextNode("Key-Value pair"));
 	
-	
-	// Add the new instruction column, input columns and remove button to the current row
+	// Add the empty column, two input columns and remove button to the current row
 	row.appendChild(emptyColumn); 
 	row.appendChild(argNameColumn);
 	row.appendChild(argValueColumn);
@@ -242,13 +251,17 @@ function Command(name, qualifiers, argum
  * ---------------------------------------------------------------------------------------
*/
 function Command_toURI() {
 	console.log("Rewriting URI for " + this.name + " command");
-	var uri = this.name;
+	var uri = this.name; // command name is same as URI name -- need not be
+	var iformat = 'xml';  // default response format
 	for (var i = 0; i < this.qualifiers.length; i++) {
 		var id = this.name + '.' + this.qualifiers[i].name;
 		var inode = document.getElementById(id);
 		var path = this.qualifiers[i].toURI(inode);
 		if (path != null) {
 			uri = uri.concat('/').concat(path);
+			if (this.qualifiers[i].key == 'format') {
+				iformat = getNodeValue(inode);
+			}
 		}
 	}
 	var args = "";
@@ -292,8 +305,8 @@ function Command_toURI() {
 				'javascript:render("' 
 				   + uri 
 				   + '", "canvas"' + ',"' 
-				   + contentType   + '",' 
-				   + '"xml", "xml"); event.returnValue = false; return false;');
+				   + contentType   + '","' 
+				   + iformat + '");');
 		uriNode.innerHTML = uri;
 	} else {
 		uriNode.setAttribute('class', 'url-invalid');
@@ -455,7 +468,9 @@ function isVarArgRow(row, commandName) {
 /**
  * Removes all children of the given element.
  */
-function clearElement(/* HTML element */ element) {
+function clearElement(/* HTML element id */ id) {
+	var element = dojo.byId(id);
+	if (element == null) return;
 	while (element.childNodes.length > 0) {
 		element.removeChild(element.firstChild);
 	}
@@ -474,10 +489,10 @@ function warn(/*string*/message) {
  *     Rendering functions
  *     
  *  Several rendering functions to display server response in the canvas section.
- *  The server responds in either 
+ *  The server responds in following formats :
  *      1a) XML 
- *   or 1b) JSON 
- *  format. The response can be rendered as
+ *      1b) JSON 
+ *  The response can be rendered in following display modes :
  *      2a) raw XML text
  *      2b) HTML table
  *      2c) Dojo Widgets
@@ -490,9 +505,9 @@ function warn(/*string*/message) {
  *      
  *  Thus there are 2x4x4 = 32 possible combinations. However, response format for
  *  certain content type is fixed e.g. server always sends domain/properties/error 
- *  stack trace in XML format. Moreover certain content-response format-display format
+ *  stack trace in XML format. Moreover certain content-response format-display mode
  *  combinations are not supported. The following matrix describes the supported 
- *  display format for content-response format combinations.
+ *  display modes for content-response format combinations.
  *  [y] : supported
  *  [x] : not supported
  *  n/a : not available
@@ -502,12 +517,12 @@ function warn(/*string*/message) {
  *               instances         domain            properties            error
  *  --------------------------------------------------------------------------------    
          
  *  XML          [y] XML text      [y] XML text      [y] XML text      [x] XML text
- *               [y] HTML Table    [y] HTML Table    [y] HTML Table    [y] HTML Table
+ *               [y] HTML          [y] HTML          [y] HTML          [y] HTML 
  *               [y] Dojo Widgets  [y] Dojo Widgets  [x] Dojo Widgets  [x] Dojo Widgets
  *               [x] JSON          [x] JSON          [x] JSON          [x] JSON
  *                  
  *  JSON         [x] XML text      n/a               n/a               n/a
- *               [x] HTML Table    n/a               n/a               n/a
+ *               [x] HTML Table    n/a               n/a               [y] HTML
  *               [x] Dojo Widgets  n/a               n/a               n/a
  *               [y] JSON          n/a               n/a               n/a
  *  ---------------------------------------------------------------------------------
@@ -517,12 +532,12 @@ var supportedResponseFormats = new Array
 var supportedContentTypes    = new Array('instances', 'domain', 'properties', 'error');
 var renderingCombo = new Array(
 		                                                              
-/*XML*/ new Array(new Array('xml', 'html', 'dojo'), // instances
-		          new Array('xml', 'html', 'dojo'), // domain
+/*XML*/ new Array(new Array('xml', 'dojo', 'html'), // instances
+		          new Array('xml', 'dojo', 'html'), // domain
 		          new Array('xml','html'),          // properties
 		          new Array('html')),               // error
 /*JSON*/new Array(new Array('json'),                // instances
-		          new Array('xml', 'html', 'dojo'), // domain
+		          new Array('xml', 'dojo', 'html'), // domain
 		          new Array('xml', 'html'),         // properties
 		          new Array('html')));              // error 
 /**
@@ -565,12 +580,12 @@ function getOrdinalContentType(/*enum*/c
  * @param contentType
  * @returns
  */
-function getSupportedDisplayFormat(/*enum*/iformat,/*enum*/contentType) {
-	var displayFormats = renderingCombo[getOrdinalResponseFormat(iformat)][getOrdinalContentType(contentType)];
-	if (displayFormats == null) {
+function getSupportedDisplayModes(/*enum*/iformat,/*enum*/contentType) {
+	var displayModes = renderingCombo[getOrdinalResponseFormat(iformat)][getOrdinalContentType(contentType)];
+	if (displayModes == null) {
 		warn("No display format for response format [" + iformat + "] and content type [" + contentType
+ "]");
 	}
-	return displayFormats;
+	return displayModes;
 } 
 
 /**
@@ -591,8 +606,9 @@ function getSupportedDisplayFormat(/*enu
  */
 function render(/* string */ uri, /* id */ targetId, /* enum */contentType, /* enum */iformat)
{
     var targetNode = dojo.byId(targetId);
-    clearElement(targetNode);
-     
+    clearElement(targetId);
+    var handleAsJSON = (iformat == 'json' && contentType == 'instances');
+    console.log("render(): content [" + contentType + "] response format [" + iformat + "]
json? " + handleAsJSON);
     //The parameters to pass to xhrGet, the url, how to handle it, and the callbacks.
     var xhrArgs = {
         url: uri,
@@ -600,15 +616,15 @@ function render(/* string */ uri, /* id 
         preventCache: true,
         timeout : 1000,
         load: function(data, ioargs) {
-    		var displayFormats = getSupportedDisplayFormat(iformat, contentType);
+    		var displayModes = getSupportedDisplayModes(iformat, contentType);
     		var newDivs = null;
         	if (iformat == 'json') {
         		newDivs = renderJSONResponse(data, contentType);
         	} else {
         		newDivs = renderXMLResponse(data, contentType);
         	} 
-        	var displayNode = createDisplayModeControl(displayFormats);
-        	targetNode.appendChild(displayNode);
+        	var displayMode = createDisplayModeControl(displayModes);
+        	targetNode.appendChild(displayMode);
         	for (var i = 0; i < newDivs.length; i++) {
         		targetNode.appendChild(newDivs[i]);
         	}
@@ -625,44 +641,59 @@ function render(/* string */ uri, /* id 
     return false;
 }
 
-function createDisplayModeControl(displayFormats) {
-	var displayNode = document.createElement("table");
-	for (var row = 0; row < 2; row++) {
-		var tr = document.createElement("tr");
-		var td = document.createElement("td");
-		td.innerHTML = (row == 0 ? "Display" : "Mode");
-		tr.appendChild(td);
-    	for (var i = 0; i < displayFormats.length; i++) {
-    		var mode = displayFormats[i];
-    		td = document.createElement("td");
-    		if (row == 1) {
-    			td.innerHTML = mode;
-    		} else {
-        		var radio = document.createElement("input");
-        		radio.setAttribute("type", "radio");
-        		radio.setAttribute("value", mode);
-        		radio.setAttribute("name", "display.mode");
-        		if (i == 0) radio.setAttribute("checked", "checked");
-        		radio.appendChild(document.createTextNode(mode.toUpperCase()));
-        		td.appendChild(radio);
-        		
-        		radio.setAttribute('onchange', createModeSwitch(mode, displayFormats));
-    		}
-    		tr.appendChild(td);
-    	}
-		displayNode.appendChild(tr);
-	}
-	return displayNode;
+/**
+ * Creates a table with radio buttons for supported display modes.
+ * 
+ * @param displayModes name of supported display modes.
+ * 
+ * @returns an unattached HTML table
+ */
+function createDisplayModeControl(displayModes) {
+	var displayMode = document.createElement("table");
+	displayMode.style.width = "100%";
+	
+	var tr = document.createElement("tr");
+	displayMode.appendChild(tr);
+	// append columns. 0-th an dfirst columns are descriptive texts. 
+	var caption = document.createElement("th");
+	caption.style.width = (100 - displayModes.length*12) + '%';
+	caption.appendChild(document.createTextNode("JEST Response"));
+	tr.appendChild(caption);
+
+    for (var i = 0; i < displayModes.length; i++) {
+    	var mode = displayModes[i];
+    	var modeColumn = document.createElement("th");
+    	modeColumn.style.width = "12%";
+    	tr.appendChild(modeColumn);
+        
+    	var radio = document.createElement("input");
+        radio.setAttribute("type", "radio");
+        radio.setAttribute("value", mode);
+        radio.setAttribute("name", "display.mode");
+        if (i == 0) radio.setAttribute("checked", "checked");
+       	radio.setAttribute('onchange', createModeSwitchFunction(mode, displayModes));
+       	
+       	modeColumn.appendChild(radio);
+       	modeColumn.appendChild(document.createTextNode(mode.toUpperCase()));
+    }
+	
+	return displayMode;
 }
 
-function createModeSwitch(/* string */ visible, /* string[] */ all) {
-	var array = '[';
+/**
+ * Creates a string for javascript function call to switch between display modes
+ * @param visible the visible display mode
+ * @param all available display modes
+ * @returns {String} a event handler function string 
+ */
+function createModeSwitchFunction(/* string */ visible, /* string[] */ all) {
+	var array = '';
 	for (var i = 0; i < all.length; i++) {
 		if (all[i] != visible) {
-			array = array + (i == 0 ? '' : ', ') + '"display.mode.' + all[i] + '"';
+			array = array + (array.length == 0 ? '' : ', ') + '"display.mode.' + all[i] + '"';
 		}
 	}
-	return 'javascript:switchid("display.mode.' + visible+ '",' + array + '])';
+	return 'javascript:switchId("display.mode.' + visible+ '", [' + array + '])';
 }
 
 /**
@@ -677,29 +708,30 @@ function createModeSwitch(/* string */ v
  * @returns an array of unattached divs only one of which is visible.
  */
 function renderXMLResponse(/*XML DOM*/dom, /*enum*/contentType) {
-	var displayFormats = getSupportedDisplayFormat('xml', contentType);
-	var newDivs = new Array(displayFormats.length);
-	console.log("Display formats [" + displayFormats + " Content Type [" + contentType + "]");
-	for (var i = 0; i < displayFormats.length; i++) {
-		if (displayFormats[i] == 'xml') {
+	var displayModes = getSupportedDisplayModes('xml', contentType);
+	var newDivs = new Array(displayModes.length);
+	console.log("Display formats [" + displayModes + " Content Type [" + contentType + "]");
+	for (var i = 0; i < displayModes.length; i++) {
+		var displayMode = displayModes[i];
+		if (displayMode == 'xml') {
 			newDivs[i] = renderXMLasXML(dom);
 		} else if (contentType == 'instances') {
-			if (displayFormats[i] == 'html') {
+			if (displayMode == 'html') {
 				newDivs[i] = renderInstancesFromXMLAsHTML(dom);
-			} else if (displayFormats[i] == 'dojo') {
+			} else if (displayMode == 'dojo') {
 				newDivs[i] = renderInstancesFromXMLAsDojo(dom);
 			}
 		} else if (contentType == 'domain') {
-			if (displayFormats[i] == 'html') {
+			if (displayMode == 'html') {
 				newDivs[i] = renderDomainFromXMLAsHTML(dom);
-			} else if (displayFormats[i] == 'dojo') {
+			} else if (displayMode == 'dojo') {
 				newDivs[i] = renderDomainFromXMLAsDojo(dom);
 			}
 		} else if (contentType == 'properties') {
 			newDivs[i] = renderPropertiesFromXMLAsHTML(dom);
 		} 
 		newDivs[i].style.display = (i == 0 ? 'block' : 'none');
-		newDivs[i].setAttribute("id", "display.mode." + displayFormats[i]);
+		newDivs[i].setAttribute("id", "display.mode." + displayMode);
 	}
 	return newDivs;
 }
@@ -732,6 +764,12 @@ function renderInstancesFromXMLAsDojo(/*
     return target;
 }
 
+/**
+ * Renders given DOM for metamodel as dojo widgets.
+ * 
+ * @param data XML DOM for domain model.
+ * @returns a HTML div 
+ */
 function renderDomainFromXMLAsDojo(/*XML DOM*/data) {
 	var target = document.createElement('div');
     var panels = new Array();
@@ -753,26 +791,47 @@ function renderDomainFromXMLAsDojo(/*XML
     return target;
 }
 
+/**
+ * Renders given XML DOM for instances to HTML tables.
+ * *** NOT IMPLEMENTED
+ * 
+ * @param data XML DOM for list of instances. All instanes may not belong to same entity.
+ * @returns a div with zero or more tables.
+ */
 function renderInstancesFromXMLAsHTML(/* XML DOM */data) {
 	var empty = document.createElement('div');
 	empty.innerHTML = "<b>renderInstancesFromXMLAsHTML</b> not implemented";
 	return empty;
 }
 
+/**
+ * Renders given XML DOM for domain model to HTML tables.
+ * *** NOT IMPLEMENTED
+ * 
+ * @param data XML DOM for list of domain model. 
+ * @returns a div with zero or more tables.
+ */
 function renderDomainFromXMLAsHTML(/* XML DOM */data) {
 	var empty = document.createElement('div');
 	empty.innerHTML = "<b>renderDomainFromXMLAsHTML</b> not implemented";
 	return empty;
 }
 
+/**
+ * Renders configration (name-value pairs) in a HTML table.
+ * 
+ * @param data XML DOM for name-value pair properties.
+ * @returns a HTML table
+ */
 function renderPropertiesFromXMLAsHTML(/* XML DOM */data) {
 	var table = document.createElement("table");
 	var caption = document.createElement("caption");
 	caption.innerHTML = "Configuration Properties";
 	table.appendChild(caption);
 	dojo.query("property", data)
-	    .forEach(function(item) {
+	    .forEach(function(item, index) {
 		  var row = document.createElement("tr");
+		  row.className = index%2 == 0 ? 'even' : 'odd'; 
 		  var key = document.createElement("td");
 		  var val = document.createElement("td");
 		  key.innerHTML = item.getAttribute("name");
@@ -786,9 +845,11 @@ function renderPropertiesFromXMLAsHTML(/
 }
 
 /**
+ * Renders error message in HTML
  * 
- * @param data
- * @returns
+ * @param data XML DOM containing error description
+ * 
+ * @returns a div element with error details
  */
 function renderErrorFromXMLAsHTML(/*XML DOM*/data, ioargs) {
 	console.log("renderErrorFromXMLAsHTML " + data);
@@ -916,10 +977,6 @@ function createEntityTypeDojoWidget(node
 	return pane;
 }
 
-
-function renderJSONResponse(/*JSON*/json, /*enum*/contentType) {
-}
-
 /**
  * Generic routine to render the given XML Document as a raw but indented text in to an unattached
div section.
  * 
@@ -929,7 +986,6 @@ function renderJSONResponse(/*JSON*/json
  */
 function renderXMLasXML(/*XML DOM*/dom) {
 	var newDiv = document.createElement('div');
-	newDiv.style.backgroundColor = 'white';
 	var pre    = document.createElement('pre');
 	newDiv.appendChild(pre);
 	// replace all < character to &lt; so that they display properly
@@ -938,7 +994,20 @@ function renderXMLasXML(/*XML DOM*/dom) 
 	return newDiv;
 }
 
-function renderJSON(target, data) {
-	target.innerHTML = data;
+/**
+ * Renders server response of JSON objects.
+ * Server sends always an array of JSON objects.
+ * @param json an array of hopefully non-empty array of JSON objects
+ * @param contentType type of content. Currently only instances are JSONized.
+ * @returns an array of div with a single member
+ */
+function renderJSONResponse(/*JSON[]*/json, /*enum*/contentType) {
+	var text = dojo.toJson(json, true);
+	var div = document.createElement("div");
+	var pre = document.createElement("pre");
+	pre.innerHTML = text;
+	div.appendChild(pre);
+	return [div]; // an array of a single div
 }
 
+



Mime
View raw message