Minor changes, converted some of the buttons to links, added a link to expand/collapse the 'Add' section at the bottom of the widgets.

git-svn-id: http://svn.us.apache.org/repos/asf/tuscany@682646 13f79535-47bb-0310-9956-ffa450edef68

4 files changed, 134 insertions, 45 deletions

diff --git a/java/sca/modules/domain-manager/src/main/resources/cloud-gadget.html b/java/sca/modules/domain-manager/src/main/resources/cloud-gadget.html
index dc8aa672b8..619df54ede 100644
--- a/java/sca/modules/domain-manager/src/main/resources/cloud-gadget.html
+++ b/java/sca/modules/domain-manager/src/main/resources/cloud-gadget.html
@@ -32,14 +32,14 @@
   <form id="cloudCompositeForm">
     <div id="composites" ></div>
     <br>
-    <input type="button" onClick="startNode()"  value="Start" />
-    <input type="button" onClick="stopNode()"  value="Stop" />
+    &gt;<a href="" id="addNodeLink">Add</a>
+    &nbsp;<a href="" id="deleteNodeLink">Delete</a>
     &nbsp;&nbsp;
-    <input type="button" onClick="deleteNode()"  value="Delete" />
+    <a href="" id="startNodeLink">Start</a>
+    &nbsp;<a href="" id="stopNodeLink">Stop</a>
   </form>
 
-  <br><br>
-  
+  <div id="newNode" style="visibility: hidden;">
   <form id="newNodeForm">
     <table width="100%">
     <tr><th>Add a Node</th></tr>
@@ -53,8 +53,9 @@
     <tr><td>Composite name:</td><td><input type="text" name="compositeName" size="50"/></td></td><td>e.g. yourcomposite</td></tr>
     <tr><td>Contribution URI:</td><td><input type="text" name="contributionURI" size="50"/></td></td><td>e.g. yourcontrib, http://yourcontrib</td></tr>
     </table>
-    <input type="button" onClick="addNode()" value="Add" />
+    <input id="addNodeButton" type="button" value="Add" />
   </form>
+  </div>
   
   </div>
 </body>
@@ -71,9 +72,20 @@
 	var processCollection = new Reference("processCollection");
 	
 	var gadget = gadget(window, document);
+	if (gadget.showStatus == null) {
+		gadget.showStatus = true;
+	}
+	if (gadget.showConfigurations == null) {
+		gadget.showConfigurations = true;
+	}
 
-	var newNodeForm = elementByID(gadget, 'newNodeForm');
+	var cloudCompositeForm = elementByID(gadget, 'cloudCompositeForm');
 	var compositesElement = elementByID(gadget, 'composites');
+	var newNodeElement = elementByID(gadget, 'newNode');
+	var newNodeForm = elementByID(gadget, 'newNodeForm');
+	
+	var nodeNames;
+	var deployedComposites = new Array();
 	
 	function getNodes() {
 		cloudComposite.get("", getNodesResponse);
@@ -95,8 +107,6 @@
     	return name.substring(i + 1);
 	}
 	
-	var nodeNames;
-	
 	function getNodesResponse(feed) {
 		nodeNames = new Array();      
 		if (feed != null) {
@@ -111,7 +121,7 @@
 				composites += '<th>Composite</th>';
 			}
 			if (gadget.showContributions) {
-			composites += '<th>Contribution</th>';
+				composites += '<th>Contribution</th>';
 			}
 			if (gadget.showConfigurations) {
 				composites += '<th>Node Config</th>';
@@ -210,13 +220,14 @@
 	}
 
 	function deleteNode() {
-		var composites  = array(gadget.cloudCompositeForm.composites);
+		var composites  = array(cloudCompositeForm.composites);
 		for (var i = 0; i < composites.length; i++) {
 			if (composites[i].checked) {
 			    var id = composites[i].value;
 				cloudComposite.del(id, deleteNodeResponse);
 			}
 		}
+		return false;
 	}
 
 	function deleteNodeResponse() {
@@ -268,7 +279,7 @@
 	}	
 
 	function startNode() {
-		var composites  = array(gadget.cloudCompositeForm.composites);
+		var composites  = array(cloudCompositeForm.composites);
 		for (var i = 0; i < composites.length; i++) {
 			if (composites[i].checked) {
 			    var id = nodeNames[i];
@@ -279,12 +290,13 @@
 				processCollection.post(entry, startNodeResponse);
 			}
 		}
+		return false;
 	}
 
 	function startNodeResponse() {
 		processCollection.get("", getProcessesResponse);
 		
-		var composites  = array(gadget.cloudCompositeForm.composites);
+		var composites  = array(cloudCompositeForm.composites);
 		for (var i = 0; i < composites.length; i++) {
 			if (composites[i].checked) {
 			  composites[i].checked = false;
@@ -293,19 +305,20 @@
 	}	
 
 	function stopNode() {
-		var composites  = array(gadget.cloudCompositeForm.composites);
+		var composites  = array(cloudCompositeForm.composites);
 		for (var i = 0; i < composites.length; i++) {
 			if (composites[i].checked) {
 			    var id = nodeNames[i];
 				processCollection.del(id, stopNodeResponse);
 			}
 		}
+		return false;
 	}
 
 	function stopNodeResponse() {
 		processCollection.get("", getProcessesResponse);
 		
-		var composites  = array(gadget.cloudCompositeForm.composites);
+		var composites  = array(cloudCompositeForm.composites);
 		for (var i = 0; i < composites.length; i++) {
 			if (composites[i].checked) {
 			  composites[i].checked = false;
@@ -313,8 +326,6 @@
 		}
 	}	
 
-	var deployedComposites = new Array();
-	
 	function getComposites() {
 		domainComposite.get("", getCompositesResponse);
 	}
@@ -371,6 +382,22 @@
 		return array(uris);
 	}
 
+	function toggleNewNode() {
+		var visibility = newNodeElement.style.visibility;
+		if (visibility == 'hidden') {
+			newNodeElement.style.visibility = 'visible';
+		} else {
+			newNodeElement.style.visibility = 'hidden';
+		}
+		return false;
+	}
+
+	elementByID(gadget, 'deleteNodeLink').onclick = deleteNode; 
+	elementByID(gadget, 'addNodeLink').onclick = toggleNewNode; 
+	elementByID(gadget, 'startNodeLink').onclick = startNode; 
+	elementByID(gadget, 'stopNodeLink').onclick = stopNode; 
+	elementByID(gadget, 'addNodeButton').onclick = addNode; 
+
 	getNodes();
 	getComposites();
 	suggest(newNodeForm.compositeNamespace, suggestCompositeNamespaces);
diff --git a/java/sca/modules/domain-manager/src/main/resources/composite-gadget.html b/java/sca/modules/domain-manager/src/main/resources/composite-gadget.html
index 1cfbd70333..82855a410a 100644
--- a/java/sca/modules/domain-manager/src/main/resources/composite-gadget.html
+++ b/java/sca/modules/domain-manager/src/main/resources/composite-gadget.html
@@ -32,11 +32,11 @@
   <form id="domainCompositeForm">
     <div id="composites" ></div>
     <br>
-    <input type="button" onClick="deleteComposite()"  value="Delete" />
+     &gt;<a href="" id="addCompositeLink">Add</a>
+     &nbsp;<a href="" id="deleteCompositeLink">Delete</a>
   </form>
   
-  <br><br>
-  
+  <div id="newComposite" style="visibility: hidden;">
   <form id="newCompositeForm">
     <table width="100%">
     <tr><th>Add Composite</th></tr>
@@ -48,8 +48,9 @@
     <tr><td>Composite name:</td><td><input type="text" name="compositeName" size="50"/></td><td>e.g. yourcomposite</td></tr>
     <tr><td>Contribution URI:</td><td><input type="text" name="contributionURI" size="50"/></td><td>e.g. yourcontrib, http://yourcontrib</td></tr>
     </table>
-    <input type="button" onClick="addComposite()" value="Add" />
+    <input id="addCompositeButton" type="button" value="Add" />
   </form>
+  </div>
   
   </div>
 </body>
@@ -62,10 +63,17 @@
 	var workspace = new Reference("workspace");
 	
 	var gadget = gadget(window, document);
+	if (gadget.showContributions == null) {
+		gadget.showContributions = true;
+	}
 
-	var newCompositeForm = elementByID(gadget, 'newCompositeForm');
+	var domainCompositeForm = elementByID(gadget, 'domainCompositeForm');
 	var compositesElement = elementByID(gadget, 'composites');
+	var newCompositeElement = elementByID(gadget, 'newComposite');
+	var newCompositeForm = elementByID(gadget, 'newCompositeForm');
 
+	var contributedComposites = new Array();
+	
 	function getComposites() {
 		domainComposite.get("", getCompositesResponse);
 	}
@@ -136,13 +144,14 @@
 	}
 
 	function deleteComposite() {
-		var composites  = array(gadget.domainCompositeForm.composites);
+		var composites  = array(domainCompositeForm.composites);
 		for (var i = 0; i < composites.length; i++) {
 			if (composites[i].checked) {
 			    var id = composites[i].value;
 				domainComposite.del(id, deleteCompositeResponse);
 			}
 		}
+		return false;
 	}
 
 	function deleteCompositeResponse() {
@@ -168,8 +177,6 @@
 	    getComposites();
 	}
 	
-	var contributedComposites = new Array();
-	
 	function getContributions() {
 		workspace.get("", getContributionsResponse);
 	}
@@ -246,6 +253,20 @@
 		return array(uris);
 	}
 
+	function toggleNewComposite() {
+		var visibility = newCompositeElement.style.visibility;
+		if (visibility == 'hidden') {
+			newCompositeElement.style.visibility = 'visible';
+		} else {
+			newCompositeElement.style.visibility = 'hidden';
+		}
+		return false;
+	}
+
+	elementByID(gadget, 'deleteCompositeLink').onclick = deleteComposite; 
+	elementByID(gadget, 'addCompositeLink').onclick = toggleNewComposite; 
+	elementByID(gadget, 'addCompositeButton').onclick = addComposite; 
+
 	getComposites();
 	getContributions();
 	suggest(newCompositeForm.compositeNamespace, suggestCompositeNamespaces);
diff --git a/java/sca/modules/domain-manager/src/main/resources/files-gadget.html b/java/sca/modules/domain-manager/src/main/resources/files-gadget.html
index e1c337f327..83315a1957 100644
--- a/java/sca/modules/domain-manager/src/main/resources/files-gadget.html
+++ b/java/sca/modules/domain-manager/src/main/resources/files-gadget.html
@@ -29,15 +29,15 @@
 <body>
   <div id="fileServer">
   
-  <form name="filesForm">
+  <form id="filesForm">
     <div id="files" ></div>
-    <br/>
-    <input type="button" onClick="deleteFile()"  value="Delete" />
+    <br>
+     &gt;<a href="" id="uploadFileLink">Upload</a>
+     &nbsp;<a href="" id="deleteFileLink">Delete</a>
   </form>
 
-  <br><br>
-  
-  <form method="post" name="uploadFileForm" enctype='multipart/form-data' action='/files'>
+  <div id="uploadFile" style="visibility: hidden;">
+  <form method="post" id="uploadFileForm" enctype='multipart/form-data' action='/files'>
     <table width="100%">
     <tr><th>Upload File</th></tr>
     <tr><td>Upload a file to the server.</td></tr>
@@ -47,8 +47,9 @@
     <tr><td>File:</td><td><input type="file" name="file" size="50"/></td></tr>
     </table>
     <br/>
-    <input type="button" onClick="uploadFile()" value="Upload" />
-  </form>    
+    <input id="uploadFileButton" type="button" value="Upload" />
+  </form>
+  </div>    
       
   </div>
 </body>
@@ -59,7 +60,9 @@
 
 	var gadget = gadget(window, document);
 
+	var filesForm = elementByID(gadget, "filesForm");
 	var filesElement = elementByID(gadget, 'files');
+	var uploadFileElement = elementByID(gadget, 'uploadFile');
 	var uploadFileForm = elementByID(gadget, 'uploadFileForm');
 	
 	function getFiles() {
@@ -82,13 +85,14 @@
 	}				
 
 	function deleteFile() {
-		var list = array(gadget.filesForm.files);
+		var list = array(filesForm.files);
 		for (var i=0; i < list.length; i++) {
 			if (list[i].checked) {
 			    var id = list[i].value;
 				files.del(id, deleteFileResponse);
 			}
 		}
+		return false;
 	}
 
 	function deleteFileResponse() {
@@ -97,8 +101,23 @@
 
 	function uploadFile() {
 		uploadFileForm.submit();
+		return false;
 	}
 
+	function toggleUploadFile() {
+		var visibility = uploadFileElement.style.visibility;
+		if (visibility == 'hidden') {
+			uploadFileElement.style.visibility = 'visible';
+		} else {
+			uploadFileElement.style.visibility = 'hidden';
+		}
+		return false;
+	}
+
+	elementByID(gadget, 'deleteFileLink').onclick = deleteFile; 
+	elementByID(gadget, 'uploadFileLink').onclick = toggleUploadFile; 
+	elementByID(gadget, 'uploadFileButton').onclick = uploadFile; 
+
 	getFiles();
 
 </script>
diff --git a/java/sca/modules/domain-manager/src/main/resources/workspace-gadget.html b/java/sca/modules/domain-manager/src/main/resources/workspace-gadget.html
index a86ef512f7..a4589b42e6 100644
--- a/java/sca/modules/domain-manager/src/main/resources/workspace-gadget.html
+++ b/java/sca/modules/domain-manager/src/main/resources/workspace-gadget.html
@@ -30,13 +30,13 @@
   <div id="workspace">
   
   <form id="workspaceForm">
-    <div id="contributions" ></div>
-    <br>
-    <input type="button" onClick="deleteContribution()"  value="Delete" />
+	<div id="contributions" ></div>
+  	<br>
+     &gt;<a href="" id="addContributionLink">Add</a>
+     &nbsp;<a href="" id="deleteContributionLink">Delete</a>
   </form>
-
-  <br><br>
-  
+	
+  <div id="newContribution" style="visibility: hidden;">
   <form id="newContributionForm">
     <table width="100%">
     <tr><th>Add Contribution</th></tr>
@@ -47,8 +47,9 @@
     <tr><td>Contribution URI:</td><td><input type="text" name="contributionID" size="50"/></td></td><td>e.g. yourcontrib, http://yourcontrib</td></tr> 
     <tr><td>Location:</td><td><input type="text" name="contributionLocation" size="50"/></td></td><td>e.g. http://host/yourjar.jar, file:/yourdir, file:/yourjar.jar</td></tr>
     </table>
-    <input type="button" onClick="addContribution()" value="Add" />
+    <input id="addContributionButton" type="button" value="Add" />
   </form>
+  </div>
   
   </div>
 </body>
@@ -59,9 +60,16 @@
 	var workspace = new Reference("workspace");
 
 	var gadget = gadget(window, document);
+	if (gadget.showDependencies == null) {
+		gadget.showDependencies = true;
+	}
 
-	var newContributionForm = elementByID(gadget, 'newContributionForm'); 
+	var workspaceForm = elementByID(gadget, 'workspaceForm');
 	var contributionsElement = elementByID(gadget, 'contributions');
+	var newContributionElement = elementByID(gadget, 'newContribution');
+	var newContributionForm = elementByID(gadget, 'newContributionForm');
+
+	var suggestedContributions = new Array();
 	
 	function getContributions() {
 		workspace.get("", getContributionsResponse);
@@ -129,8 +137,6 @@
 		}
 	}				
 	
-	var suggestedContributions = new Array();
-	
 	function getSuggestedContributions() {
 		workspace.get("?suggestions=true", getSuggestedContributionsResponse);
 	}
@@ -148,13 +154,15 @@
 	}				
 	
 	function deleteContribution() {
-		var contributions  = array(gadget.workspaceForm.contributions);
+		var contributions  = array(workspaceForm.contributions);
 		for (var i=0; i < contributions.length; i++) {
 			if (contributions[i].checked) {
 			    var id = contributions[i].value;
+				alert("hey " + id);
 				workspace.del(id, deleteContributionResponse);
 			}
 		}
+		return false;
 	}
 	
 	function deleteContributionResponse() {
@@ -201,6 +209,20 @@
 		return array(locations);
 	}
 
+	function toggleNewContribution() {
+		var visibility = newContributionElement.style.visibility;
+		if (visibility == 'hidden') {
+			newContributionElement.style.visibility = 'visible';
+		} else {
+			newContributionElement.style.visibility = 'hidden';
+		}
+		return false;
+	}
+
+	elementByID(gadget, 'deleteContributionLink').onclick = deleteContribution; 
+	elementByID(gadget, 'addContributionLink').onclick = toggleNewContribution; 
+	elementByID(gadget, 'addContributionButton').onclick = addContribution; 
+
 	getContributions();
 	getSuggestedContributions();
 	suggest(newContributionForm.contributionID, suggestContributionIDs);