You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@openjpa.apache.org by pp...@apache.org on 2010/12/03 07:57:14 UTC
svn commit: r1041709 - in
/openjpa/sandboxes/jest/openjpa-persistence/src/main/resources/org/apache/openjpa/persistence/jest:
jest.css jest.html jest.js
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 < 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
}
+