[esb-java-dev] svn commit r724 - in esb/java/trunk/modules/distribution/src/main/www/extensions/core: css js

svn at wso2.com svn at wso2.com
Mon Feb 5 02:37:48 PST 2007


Author: chathura
Date: Mon Feb  5 02:36:50 2007
New Revision: 724

Modified:
   esb/java/trunk/modules/distribution/src/main/www/extensions/core/css/wso2-esb.css
   esb/java/trunk/modules/distribution/src/main/www/extensions/core/js/esbregistry.js
   esb/java/trunk/modules/distribution/src/main/www/extensions/core/js/folder.js
   esb/java/trunk/modules/distribution/src/main/www/extensions/core/js/regfile.js
   esb/java/trunk/modules/distribution/src/main/www/extensions/core/js/root.js
Log:
Improved the UI of registry.

Modified: esb/java/trunk/modules/distribution/src/main/www/extensions/core/css/wso2-esb.css
==============================================================================
--- esb/java/trunk/modules/distribution/src/main/www/extensions/core/css/wso2-esb.css	(original)
+++ esb/java/trunk/modules/distribution/src/main/www/extensions/core/css/wso2-esb.css	Mon Feb  5 02:36:50 2007
@@ -172,9 +172,14 @@
     _margin-top: 0;
 }
 
+div#propValueDiv {
+    width:800px;
+}
+
 div#propEditRegistryKeyListDiv {
     position:relative;
-    width:600px;
+    width: 550px;
+
     _width:100%;
     _position:absolute;
 }
@@ -186,7 +191,7 @@
     border: 1px solid gray;
     padding: 5px;
     width: 200px;
-    height:200px;
+    height:300px;
     position:relative;
 
     _margin-top:40;
@@ -194,13 +199,13 @@
 }
 
 div#propEditRegistryKeyData {
-    float:left;
-    margin-top: 0;
-    margin-left: 230px;
+
+    margin-top: 0px;
+    margin-left: 30px;
     border: 1px solid gray;
     padding: 5px;
     width: 300px;
-    height:200px;
+    height:300px;
     position:relative;
 
     _margin-top: 40;
@@ -218,15 +223,17 @@
 div#registryKeySelectBox {
     float:left;
     margin-left: 210px;
-    margin-top:0;
+    margin-top:0px;
     border: 1px solid gray;
     padding: 5px;
     width: 200px;
     height:200px;
     position:absolute;
+    overflow:auto;
 
     _margin-top:40;
     _height:190px;
+    _position: absolute;
 }
 
 div#registryKeyData {
@@ -247,18 +254,34 @@
 
 div#regBrowser {
     position:relative;
+    float:left;
+    margin-left: 0px;
+    margin-top:0;
+    height: 550px;
+
     _width:100%;
     _position:absolute;
 }
 
+div#defaultReg {
+    float:left;
+    position:absolute;
+    margin-left:0px;
+    margin-top:0px;
+    width: 650px;
+    height: 550px;
+
+    _position:absolute;
+}
+
 div#regKeys {
     float:left;
-    margin-left: 220px;
-    margin-top:0;
+    margin-left: 0px;
+    margin-top:0px;
     border: 1px solid gray;
     padding: 5px;
     width: 250px;
-    height:300px;
+    height:500px;
     position:absolute;
     overflow:auto;
 
@@ -269,11 +292,11 @@
 
 div#regKeyData {
     float:left;
-    margin-top: 0;
-    margin-left: 490px;
+    margin-top: 0px;
+    margin-left: 280px;
     border: 1px solid gray;
     padding: 5px;
-    width: 300px;
+    width: 350px;
     height:300px;
     position:absolute;
     overflow:auto;
@@ -286,14 +309,13 @@
 
 div#regUtils {
     float:left;
-    margin-left: 210px;
+    margin-left: 280px;
     margin-top:320px;
     border: 1px solid gray;
     padding: 5px;
-    margin-left:0;
-    width: 600px;
-    height:500px;
-    position:relative;
+    width: 350px;
+    height:180px;
+    position:absolute;
 
     _position: absolute;
     _margin-top:250px;
@@ -836,6 +858,15 @@
     background-color: #d6c09d;
 }
 
+.panelbuttondisabled {
+    text-align: center;
+    font-weight: 800;
+    width: 100px;
+    height: 27px;
+    color: #ffffff;
+    background-color: #d6c09d;
+}
+
 .panelbuttonover {
     text-align: center;
     font-weight: 800;

Modified: esb/java/trunk/modules/distribution/src/main/www/extensions/core/js/esbregistry.js
==============================================================================
--- esb/java/trunk/modules/distribution/src/main/www/extensions/core/js/esbregistry.js	(original)
+++ esb/java/trunk/modules/distribution/src/main/www/extensions/core/js/esbregistry.js	Mon Feb  5 02:36:50 2007
@@ -58,33 +58,34 @@
 
 function showESBRegistryWindow() {
 
-    var regDiv = document.getElementById(REGISTRY_DIV);
+    var regDiv = document.getElementById(REGISTRY_DIV);    
 
-    var regUtilPanelContent = "<input type='button' value='New folder' onClick='javascript:newFolderPanel();return false;' />" +
-                              "<input type='button' value='New file' onClick='javascript:newFilePanel();return false;' />" +
-                              "<input type='button' value='Edit file' onClick='javascript:editFilePanel();return false;' />";
+    var regUtilsDivContent =    "<input type='button' id='newFileButton' value='New file' onClick='javascript:displayNewFilePanel();return false;' class='panelbutton' /> " +
+                                "<input type='button' id='editFileButton' value='Edit file' onClick='javascript:displayEditFilePanel();return false;' class='panelbutton' /><br /><br />" +
+                                "<fieldset style='border:1px solid gray'><legend>New folder</legend><br /><lable>Folder name: </lable><input type='text' id='regNewFolderName' size='30' /><br /><br />" +
+                                "<input type='button' id='addFolderButton' value='Add folder' onClick='javascript:addRegistryFolder();return false;' class='panelbutton' /><br /><br /></fieldset> ";
+
+    var editFileDivContent = "<textarea cols='100' rows='28' id='regEditFileContents'></textarea><br /><br />" +
+                             "<input type='button' value='Save' onClick='javascript:editRegistryFile();return false;' class='panelbutton'/>" +
+                             "<input type='button' value='Cancel' onClick='javascript:cancelEditRegistryFile();return false;' class='panelbutton'/>";
 
-    var newFolderDivContent =  "<br /><lable>Folder name: </label><input type='text' id='regNewFolderName' size='30' /><br /><br />" +
-                               "<input type='button' value='Create folder' onClick='javascript:addRegistryFolder();return false;' /> ";
+    var newFileDivContent = "<div id='newFilePanelDiv' style='display:block'>" +
+                            "<label>File name: </label><input id='regNewFileName' type='text' size='30' /><br /><br />" +
+                            "<textarea id='regFileContent' cols='100' rows='28'></textarea><br /><br />" +
+                            "<input type='button' value='Create file' onClick='javascript:addRegistryFile();return false;' class='panelbutton'/>" +
+                            "<input type='button' value='Cancel' onClick='javascript:cancelAddRegistryFile();return false;' class='panelbutton'/></div>";
 
-    var editFileDivContent = "<textarea cols='80' rows='20' id='regEditFileContents'></textarea><br /><br />" +
-                             "<input type='button' value='Save' onClick='javascript:editRegistryFile();return false;' />";
+    //"<label>Upload file: </label><input type='file' value='Upload file' onClick='javascript:uploadRegistryFile();return false;' /> ";
 
-    var newFileDivContent = "<div id='newEditFileDiv' style='display:block'>" +
-                            "<label>File name: </label><input id='regNewFileName' type='text' size='30' /><br /><br />" +
-                            "<textarea id='regFileContent' cols='80' rows='20'></textarea><br />" +
-                            "<input type='button' value='Create file' onClick='javascript:addRegistryFile();return false;' /></div>";
+    var structure = "<div id='regBrowser' style='display:block'>";
+    structure += "<div id='defaultReg'><div id='regKeys'></div><div id='regKeyData'>Select a registry entry to view details.</div>";
+    structure += "<div id='regUtils'>" + regUtilsDivContent + "</div></div>";
 
-            //"<label>Upload file: </label><input type='file' value='Upload file' onClick='javascript:uploadRegistryFile();return false;' /> ";
+    // add new file div
+    structure += "<div id='newFileDiv' style='display:none'>" + newFileDivContent + "</div>";
 
-    var structure = "<div id='regBrowser'>"
-    structure += "<div id='regKeys'></div><div id='regKeyData'>Select a registry entry to view details.</div>";
-    structure += "<div id='regUtils'>" +
-                 "<div id='regUtilPanel'>" + regUtilPanelContent + "</div><br />" +
-                 "<div id='newFolderDiv' style='display:block'>" + newFolderDivContent + "</div>" +
-                 "<div id='editFileDiv' style='display:none'>" + editFileDivContent + "</div>" +
-                 "<div id='newFileDiv' style='display:none'>" + newFileDivContent + "</div>" +
-                 "</div></div>";
+    // add edit file div
+    structure += "<div id='editFileDiv' style='display:none'>" + editFileDivContent + "</div></div>";
 
     regDiv.innerHTML = structure;
     showOnlyOneMain(regDiv);
@@ -94,61 +95,52 @@
 
 function resetRegistryPanel() {
     regTree.reset();
-    newFolderPanel();
+    displayDefaultRegPanel();
     var dataPanel = document.getElementById("regKeyData");
     dataPanel.innerHTML = "Select a registry entry to view details.";
 }
 
-function newFolderPanel() {
-    var folderEditor = document.getElementById("regNewFolderName");
-    folderEditor.value = "";
-
-    var div1 = document.getElementById('newFolderDiv');
-    div1.style.display = "block";
+function displayDefaultRegPanel() {
 
-    var div2 = document.getElementById('editFileDiv');
-    div2.style.display = "none";
+    var defaultReg = document.getElementById("defaultReg");
+    defaultReg.style.display = "block";
 
-    var div3 = document.getElementById('newFileDiv');
-    div3.style.display = "none";
+    var editFileDiv = document.getElementById("editFileDiv");
+    editFileDiv.style.display = "none";
 
-    utilPanel = NEW_FOLDER_UTIL;
+    var newFileDiv = document.getElementById("newFileDiv");
+    newFileDiv.style.display = "none";
 }
 
-function editFilePanel() {
-    var div1 = document.getElementById('newFolderDiv');
-    div1.style.display = "none";
+function displayNewFilePanel() {
 
-    var div2 = document.getElementById('editFileDiv');
-    div2.style.display = "block";
+    // display the new file panel
 
-    var div3 = document.getElementById('newFileDiv');
-    div3.style.display = "none";
+    var defaultReg = document.getElementById("defaultReg");
+    defaultReg.style.display = "none";
 
-    var selectedFile = regTree.getSelected();
-    loadRegistryFile(selectedFile);
+    var editFileDiv = document.getElementById("editFileDiv");
+    editFileDiv.style.display = "none";
 
-    utilPanel = EDIT_FILE_UTIL;
+    var newFileDiv = document.getElementById("newFileDiv");
+    newFileDiv.style.display = "block";
 }
 
-function newFilePanel() {
+function displayEditFilePanel() {
 
-    var newFileName = document.getElementById('regNewFileName');
-    newFileName.value = "";
+    // display the new file panel
 
-    var fileEditor = document.getElementById('regFileContent');
-    fileEditor.value = "";
+    var defaultReg = document.getElementById("defaultReg");
+    defaultReg.style.display = "none";
 
-    var div1 = document.getElementById('newFolderDiv');
-    div1.style.display = "none";
+    var editFileDiv = document.getElementById("editFileDiv");
+    editFileDiv.style.display = "block";
 
-    var div2 = document.getElementById('editFileDiv');
-    div2.style.display = "none";
+    var newFileDiv = document.getElementById("newFileDiv");
+    newFileDiv.style.display = "none";
 
-    var div3 = document.getElementById('newFileDiv');
-    div3.style.display = "block";
-
-    utilPanel = NEW_FILE_UTIL;
+    var selectedKey = regTree.getSelected();
+    loadRegistryFile(selectedKey);
 }
 
 function addRegistryFolder() {
@@ -178,6 +170,10 @@
     }
 }
 
+function cancelAddRegistryFile() {
+    resetRegistryPanel();
+}
+
 function addRegistryFile() {
 
     var newFileName = document.getElementById("regNewFileName").value;
@@ -243,6 +239,10 @@
     editor.value = fileContents;
 }
 
+function cancelEditRegistryFile() {
+    resetRegistryPanel();
+}
+
 function editRegistryFile() {
 
     var fileContent = document.getElementById("regEditFileContents").value;
@@ -256,8 +256,16 @@
 
     var callURL = serverURL + "/" + "RegistryAdmin" + "/" + "updateRegistryEntryValue";
 
-    send("updateRegistryEntryValue", body_xml, "", callURL, "", false, regLoadRegistryFileCallback);
+    send("updateRegistryEntryValue", body_xml, "", callURL, "", false, editRegistryFileCallback);
+
+}
+
+function editRegistryFileCallback() {
+    if(!onError()) {
+        return;
+    }
 
+    resetRegistryPanel();
 }
 
 function showMainRegistryPanel(divName, selectHandlerParam, selectedValue) {
@@ -271,6 +279,22 @@
 
 function regFolderSelectCallback(entry) {
 
+    var regEntry = regTree.getFolder(entry);
+
+    var newFileButton = document.getElementById("newFileButton");
+    var editFileButton = document.getElementById("editFileButton");
+    var addFolderButton = document.getElementById("addFolderButton");
+
+    if (regEntry.getType() == "folder") {
+        newFileButton.disabled = false;
+        editFileButton.disabled = true;
+        addFolderButton.disabled = false;
+    } else {
+        newFileButton.disabled = true;
+        editFileButton.disabled = false;
+        addFolderButton.disabled = true;
+    }
+
     var body_xml = '<ns1:getRegistryEntry xmlns:ns1="http://org.apache.synapse/xsd">' +
                    '<regKey>' + entry + '</regKey>' +
                    '</ns1:getRegistryEntry>';
@@ -310,16 +334,12 @@
                 data += "<input type='text' id='regExTime' value='" + exTime.textContent + "' /><br /><br />";
             }
 
-            data += "<input type='button' value='Update' onClick='javascript:updateRegistryData();return false;' />";
+            data += "<input type='button' value='Update' onClick='javascript:updateRegistryData();return false;' class='panelbutton'/>";
         }
     }
 
     var regDataElement = document.getElementById(REGISTRY_DATA_DIV);
     regDataElement.innerHTML = data;
-
-    if (utilPanel == EDIT_FILE_UTIL) {
-        loadRegistryFile(keyValue);
-    }
 }
 
 function updateRegistryData() {

Modified: esb/java/trunk/modules/distribution/src/main/www/extensions/core/js/folder.js
==============================================================================
--- esb/java/trunk/modules/distribution/src/main/www/extensions/core/js/folder.js	(original)
+++ esb/java/trunk/modules/distribution/src/main/www/extensions/core/js/folder.js	Mon Feb  5 02:36:50 2007
@@ -17,10 +17,13 @@
 
 /* folder class */
 
-function folder(path, name){
+function folder(path, name, p){
+
     this.state = COLLAPSED;
     this.path = path; // path is used as an unique id
     this.name = name;
+    this.p = p; // prefix used for html ids
+
     this.write = writeFolder;
     this.add = addFolderChild;
     this.getMatchingChild = getMatchingFolderChild;
@@ -28,12 +31,17 @@
     this.expand = expandFolder;
     this.collapse = collapseSubFolder;
     this.getState = getSubFolderState;
+    this.getType = getTypeFolder;
 }
 
 function getSubFolderState() {
     return this.state;
 }
 
+function getTypeFolder() {
+    return "folder";
+}
+
 /**
  Collapse the folder and all its descendants.
  */
@@ -104,15 +112,16 @@
     }
 
     var folderString = '<span style="cursor:pointer; cursor:hand; display:normal" ';
-    folderString += '><img src=' + expanderImg + ' id="E' + this.path + '" style="cursor:pointer; cursor:hand; display:normal" ' +
+    folderString += '><img src=' + expanderImg + ' id="E' + this.p + this.path + '" style="cursor:pointer; cursor:hand; display:normal" ' +
                     'onClick="thisObject.expanderClick(\'' + this.path + '\')"/></span>';
 
-    folderString += '<span id="F' + this.path + '" style="cursor:pointer; cursor:hand; display:normal" ' +
+    folderString += '<span id="F' + this.p + this.path + '" style="cursor:pointer; cursor:hand; display:normal" ' +
                     'onClick="thisObject.onFolderClick(\'' + this.path + '\')"';
-    folderString += '><img src=' + folderImg + ' id="FI' + this.path + '"><label style="cursor:pointer; cursor:hand; display:normal" id="l' + this.path + '">' + folderName + '</label></span><br />';
+    //folderString += '><img src=' + folderImg + ' id="FI' + this.path + '"><label style="cursor:pointer; cursor:hand; display:normal" id="l' + this.path + '">' + folderName + '</label></span><br />';
+    folderString += '><img src=' + folderImg + ' id="FI' + this.p + this.path + '" /><span style="cursor:pointer; cursor:hand; display:normal" id="l' + this.p + this.path + '"> ' + folderName + '</span></span><br />';
 
     folderString += '<span style="display:none; margin-left:16px" id="';
-    folderString += this.path + '">';
+    folderString += this.p + this.path + '">';
     var numLeaves = this.folderChildren.length;
     for (var j=0;j<numLeaves;j++)
         folderString += this.folderChildren[j].write();

Modified: esb/java/trunk/modules/distribution/src/main/www/extensions/core/js/regfile.js
==============================================================================
--- esb/java/trunk/modules/distribution/src/main/www/extensions/core/js/regfile.js	(original)
+++ esb/java/trunk/modules/distribution/src/main/www/extensions/core/js/regfile.js	Mon Feb  5 02:36:50 2007
@@ -16,22 +16,28 @@
 
 /* regfile class */
 
-function regfile(path, name){
+function regfile(path, name, p){
     this.state = EXPANDED;
     this.path = path; // path is used as an unique id
     this.name = name;
+    this.p = p; // prefix used for html ids
     this.write = writeFile;
     this.add = addFileChild;
     this.getMatchingChild = getMatchingFileChild;
     this.expand = expandFile;
     this.collapse = collapseFile;
     this.getState = getFileState;
+    this.getType = getTypeFile;
 }
 
 function getFileState() {
     return this.state;
 }
 
+function getTypeFile() {
+    return "file";
+}
+
 /**
  Collapse the folder and all its descendants.
  */
@@ -70,14 +76,14 @@
     expanderImg = expandedImg.src;
 
     var fileString = '<span style="cursor:pointer; cursor:hand; display:normal" ';
-    fileString += '><img src=' + expanderImg + ' id="E' + this.path + '" style="cursor:pointer; cursor:hand; display:normal"/></span>';
+    fileString += '><img src=' + expanderImg + ' id="E' + this.p + this.path + '" style="cursor:pointer; cursor:hand; display:normal"/></span>';
 
-    fileString += '<span id="F' + this.path + '" style="cursor:pointer; cursor:hand; display:normal" ' +
+    fileString += '<span id="F' + this.p + this.path + '" style="cursor:pointer; cursor:hand; display:normal" ' +
                     'onClick="thisObject.onFolderClick(\'' + this.path + '\')"';
-    fileString += '><img src='+ fileImg.src + '><label style="cursor:pointer; cursor:hand; display:normal" id="l' + this.path + '">' + folderName + '</label></span><br />';
+    fileString += '><img src='+ fileImg.src + '><span style="cursor:pointer; cursor:hand; display:normal" id="l' + this.p + this.path + '">' + folderName + '</span></span><br />';
 
     fileString += '<span style="display:none; margin-left:16px" id="';
-    fileString += this.path + '"></span>';
+    fileString += this.p + this.path + '"></span>';
 
     //showStuffInNewWindow(folderString);
     return fileString;

Modified: esb/java/trunk/modules/distribution/src/main/www/extensions/core/js/root.js
==============================================================================
--- esb/java/trunk/modules/distribution/src/main/www/extensions/core/js/root.js	(original)
+++ esb/java/trunk/modules/distribution/src/main/www/extensions/core/js/root.js	Mon Feb  5 02:36:50 2007
@@ -44,6 +44,7 @@
     // attributes
 
     this.name = pName;
+    this.np = pName.substring(0,1); // prefix used for div names
     this.rootChildren = new Array();
     this.regDivName = registryDiv;
 
@@ -152,7 +153,7 @@
 
     if(rootFolder != null) {
         showFolder(rootFolder.path);
-        var expImg = document.getElementById('E' + folder.path);
+        var expImg = document.getElementById('E' + this.np + folder.path);
         if(expImg != null) {
             expImg.src = expandedImg.src;
         }
@@ -187,7 +188,7 @@
 
 function addNewFolder(parent, newFolder) {
     var hookFolder = this.getFolder(parent);
-    var childFolder = new folder(parent + '/' + newFolder, newFolder);
+    var childFolder = new folder(parent + '/' + newFolder, newFolder, this.np);
     hookFolder.add(childFolder);
     this.write();
 }
@@ -244,10 +245,13 @@
 
     regElement.innerHTML = treeString;
 
-    var selectedEntry = document.getElementById('l' + this.selected);
+    var selectedEntry = document.getElementById('l' + this.np + this.selected);
     if (selectedEntry != null) {
         selectedEntry.style.backgroundColor = '#9999ff';
     }
+
+    //alert("wrote to: " + this.regDivName);
+    //showStuffInNewWindow(treeString);
 }
 
 /**
@@ -271,12 +275,13 @@
 }
 
 function onFolderClickRoot(folder) {
-    var oldEntry = document.getElementById('l' + this.selected);
+
+    var oldEntry = document.getElementById('l' + this.np + this.selected);
     if (oldEntry != null) {
         oldEntry.style.backgroundColor = '#ffffff';
     }
 
-    var newEntry = document.getElementById('l' + folder);
+    var newEntry = document.getElementById('l' + this.np + folder);
     if (newEntry != null) {
         newEntry.style.backgroundColor = '#9999ff';
     }
@@ -350,9 +355,9 @@
 
                             var child;
                             if (type == "folder") {
-                                child = new folder(key, key);
+                                child = new folder(key, key, thisObject.np);
                             } else {
-                                child = new regfile(key, key);
+                                child = new regfile(key, key, thisObject.np);
                             }
 
                             thisObject.add(child);
@@ -377,9 +382,9 @@
 
                             var child;
                             if (type == "folder") {
-                                child = new folder(key, key);
+                                child = new folder(key, key, thisObject.np);
                             } else {
-                                child = new regfile(key, key);
+                                child = new regfile(key, key, thisObject.np);
                             }
 
                             f.add(child);
@@ -404,22 +409,22 @@
 /* utility functions */
 
 function showFolder(folder){
-    var objFolder = document.getElementById(folder).style;
+    var objFolder = document.getElementById(thisObject.np + folder).style;
     objFolder.display="block";
-    var objExpanderImg = document.getElementById('E' + folder);
+    var objExpanderImg = document.getElementById('E' + thisObject.np + folder);
     objExpanderImg.src = expandedImg.src;
-    var objFolderImg = document.getElementById('FI' + folder);
+    var objFolderImg = document.getElementById('FI' + thisObject.np + folder);
     if (objFolderImg != null) {
         objFolderImg.src = folderopenImg.src;
     }
 }
 
 function hideFolder(folder){
-    var objFolder = document.getElementById(folder).style;
+    var objFolder = document.getElementById(thisObject.np + folder).style;
     objFolder.display="none";
-    var objExpanderImg = document.getElementById('E' + folder);
+    var objExpanderImg = document.getElementById('E' + thisObject.np + folder);
     objExpanderImg.src = collapsedImg.src;
-    var objFolderImg = document.getElementById('FI' + folder);
+    var objFolderImg = document.getElementById('FI' + thisObject.np + folder);
     if (objFolderImg != null) {
         objFolderImg.src = foldercloseImg.src;
     }




More information about the Esb-java-dev mailing list