Replace all html textbox, textarea and button by dojo widgets.

src/main/webapp/script/haflow.admin.js

@@ -9,6 +9,10 @@ dojo.require("dijit.MenuBar");
 dojo.require("dijit.MenuBarItem");
 dojo.require("dijit.PopupMenuBarItem");
 
+dojo.require("dijit.form.Button");
+dojo.require("dijit.form.TextBox");
+dojo.require("dijit.form.SimpleTextarea");
+
 dojo.require("dojo.dom");
 dojo.require("dojo.json");
 dojo.require("dojo.store.Memory");
@@ -39,27 +43,49 @@ HAFlow.Admin.prototype.createAddModuleUserInterface = function() {
 	text += "<div>";
 	text += "<div>";
 	text += "<span>Name:</span>";
-	text += "<input type=\"text\" id=\"add_module_name\" />";
+	text += "<div id=\"add_module_name_container\"></div>";
 	text += "</div>";
 	text += "<div>";
 	text += "<div>Configurations: (displayName,key)</div>";
-	text += "<textarea id=\"add_module_configuration\" />";
+	text += "<div id=\"add_module_configuration_container\"></div>";
 	text += "</div>";
-	text += "<button id=\"add_module_button\">Add Module</button>";
+	text += "<div id=\"add_module_button\"></div>";
 	text += "</div>";
 	$("#" + this.addModuleContainerId).html(text);
 	var _currentInstance = this;
-	$("#" + "add_module_button").bind(
+	if (dijit.byId("add_module_name") != null) {
-			"click",
+		dijit.registry.remove("add_module_name");
-			function() {
+	}
-				var module = {
+	var moduleNameTextBox = new dijit.form.TextBox({
-					name : $("#add_module_name").val(),
+		id : "add_module_name",
-					configurations : _currentInstance.extractConfiguration($(
+	});
-							"#add_module_configuration").val())
+	moduleNameTextBox.placeAt(dojo.byId("add_module_name_container"));
-				};
+	moduleNameTextBox.startup();
-				_currentInstance.addModule(_currentInstance, module);
-			});
 
+	if (dijit.byId("add_module_configuration") != null) {
+		dijit.registry.remove("add_module_configuration");
+	}
+	var textarea = new dijit.form.SimpleTextarea({
+		id : "add_module_configuration",
+		rows : 5,
+		cols : 50
+	});
+	textarea.placeAt(dojo.byId("add_module_configuration_container"));
+	textarea.startup();
+
+	var button = new dijit.form.Button({
+		label : "Add Module",
+		onClick : function() {
+			var module = {
+				name : $("#add_module_name").val(),
+				configurations : _currentInstance.extractConfiguration($(
+						"#add_module_configuration").val())
+			};
+			_currentInstance.addModule(_currentInstance, module);
+		}
+	});
+	button.placeAt(dojo.byId("add_module_button"));
+	button.startup();
 };
 
 HAFlow.Admin.prototype.extractConfiguration = function(source) {
@@ -120,22 +146,26 @@ HAFlow.Admin.prototype.generateModuleList = function(instance) {
 			text += "</div>";
 			text += "<p/>";
 		}
-		text += "<button id=\"remove_module_" + this.moduleList.modules[i].id
+		text += "<div id=\"remove_module_" + this.moduleList.modules[i].id
-				+ "\">Remove Module</button>";
+				+ "\"></div>";
 		text += "<p/>";
 		text += "</div>";
 	}
 	text += "</div>";
 	$("#" + this.moduleListContainerId).html(text);
-	var _currentInstance = this;
 	for (i = 0; i < this.moduleList.modules.length; i++) {
-		$("#" + "remove_module_" + this.moduleList.modules[i].id).bind(
+		var _currentInstance = this;
-				"click",
+		var button = new dijit.form.Button({
-				function() {
+			label : "Remove Module",
-					var moduleId = $(this).attr("id").replace("remove_module_",
+			moduleId : this.moduleList.modules[i].id,
-							"");
+			onClick : function() {
-					_currentInstance.removeModule(_currentInstance, moduleId);
+				var moduleId = $(this).attr("moduleId");
-				});
+				_currentInstance.removeModule(_currentInstance, moduleId);
+			}
+		});
+		button.placeAt(dojo.byId("remove_module_"
+				+ this.moduleList.modules[i].id));
+		button.startup();
 	}
 };
 

src/main/webapp/script/haflow.main.js

@@ -9,6 +9,9 @@ dojo.require("dijit.MenuBar");
 dojo.require("dijit.MenuBarItem");
 dojo.require("dijit.PopupMenuBarItem");
 
+dojo.require("dijit.form.Button");
+dojo.require("dijit.form.TextBox");
+
 dojo.require("dojo.dom");
 dojo.require("dojo.json");
 dojo.require("dojo.store.Memory");
@@ -315,16 +318,28 @@ HAFlow.Main.prototype.onFlowClicked = function(instance, flowId) {
 	var text = "";
 	text += "<div>";
 	text += "<div><span>Id: " + flowBrief.id + "</span></div>";
-	text += "<span>Name: </span>";
+	text += "<div><span>Name: </span></div>";
-	text += "<input type=\"text\" value=\"" + flowBrief.name + "\" id=\"flow_"
+	text += "<div id=\"flow_name_text_box\"></div>";
-			+ flowBrief.id + "_name\"/>";
+	text += "<div id=\"save_flow_name_button\"></div>";
-	text += "<input id=\"save_flow_name_" + flowBrief.id
-			+ "\" type=\"button\" value=\"Save\" />";
 	text += "</div>";
 	$("#" + instance.informationContainerId).html(text);
-	$("#save_flow_name_" + flowBrief.id).bind("click", function() {
+	if (dijit.byId("flow_" + flowBrief.id + "_name") != null) {
-		instance.saveFlowName(instance, flowBrief.id);
+		dijit.registry.remove("flow_" + flowBrief.id + "_name");
+	}
+	var flowNameTextBox = new dijit.form.TextBox({
+		id : "flow_" + flowBrief.id + "_name",
+		value : flowBrief.name
 	});
+	flowNameTextBox.placeAt(dojo.byId("flow_name_text_box"));
+	flowNameTextBox.startup();
+	var button = new dijit.form.Button({
+		label : "Save",
+		onClick : function() {
+			instance.saveFlowName(instance, flowBrief.id);
+		}
+	});
+	button.placeAt(dojo.byId("save_flow_name_button"));
+	button.startup();
 };
 
 HAFlow.Main.prototype.saveFlowName = function(instance, flowId) {
@@ -536,17 +551,23 @@ HAFlow.Main.prototype.onConnectionCreated = function(instance, flowId, info) {
 HAFlow.Main.prototype.onConnectionClicked = function(instance, flowId, info) {
 	var source = info.sourceId.replace("node_", "");
 	var target = info.targetId.replace("node_", "");
+	var sourceNode = instance.getNodeById(instance, flowId, source);
+	var targetNode = instance.getNodeById(instance, flowId, target);
 
 	var text = "";
-	text += "<div><span>From: " + info.sourceId + ".</span><span>To: "
+	text += "<div><span>From: " + sourceNode.name + ".</span><span>To: "
-			+ info.targetId + ".</span></div>";
+			+ targetNode.name + ".</span></div>";
 	text += "<div>Delete?</div>";
-	text += "<div><button id=\"delete_connection_" + source + "_" + target
+	text += "<div id=\"delete_connection_button\"></div>";
-			+ "\">Delete Connection</button></div>";
 	$("#" + instance.informationContainerId).html(text);
-	$("#delete_connection_" + source + "_" + target).bind("click", function() {
+	var button = new dijit.form.Button({
-		instance.deleteConnection(instance, flowId, info);
+		label : "Delete Connection",
+		onClick : function() {
+			instance.deleteConnection(instance, flowId, info);
+		}
 	});
+	button.placeAt(dojo.byId("delete_connection_button"));
+	button.startup();
 };
 
 HAFlow.Main.prototype.deleteConnection = function(instance, flowId, info) {
@@ -593,45 +614,83 @@ HAFlow.Main.prototype.onNodeClicked = function(instance, flowId, nodeId) {
 	text += "<div><span>Module: " + module.name + "</span></div>";
 	text += "<div>";
 	text += "<span>Name: </span>";
-	text += "<input type=\"text\" value=\"" + node.name + "\" id=\"node_"
+	text += "<div id=\"node_name_text_box\"></div>";
-			+ nodeId + "_name\"/>";
+	text += "<div id=\"save_node_name_button\"></div>";
-	text += "<input id=\"save_node_name_" + node.id
-			+ "\" type=\"button\" value=\"Save\" />";
 	text += "</div>";
 	text += "<div>Delete?</div>";
-	text += "<div><button id=\"delete_node_" + nodeId
+	text += "<div id=\"delete_node_button\"></div>";
-			+ "\">Delete Node</button></div>";
 	text += "</div>";
 	$("#" + instance.informationContainerId).html(text);
-	$("#save_node_name_" + nodeId).bind("click", function() {
+
-		instance.saveNodeName(instance, flowId, nodeId);
+	if (dijit.byId("node_" + nodeId + "_name") != null) {
+		dijit.registry.remove("node_" + nodeId + "_name");
+	}
+	var nodeNameTextBox = new dijit.form.TextBox({
+		id : "node_" + nodeId + "_name",
+		value : node.name
 	});
-	$("#delete_node_" + nodeId).bind("click", function() {
+	nodeNameTextBox.placeAt(dojo.byId("node_name_text_box"));
-		instance.deleteNode(instance, flowId, nodeId);
+	nodeNameTextBox.startup();
+
+	var saveNodeNameButton = new dijit.form.Button({
+		label : "Save Node Name",
+		onClick : function() {
+			instance.saveNodeName(instance, flowId, nodeId);
+		}
 	});
+	saveNodeNameButton.placeAt(dojo.byId("save_node_name_button"));
+	saveNodeNameButton.startup();
+
+	var deleteNodeButton = new dijit.form.Button({
+		label : "DeleteNode",
+		onClick : function() {
+			instance.deleteNode(instance, flowId, nodeId);
+		}
+	});
+	deleteNodeButton.placeAt(dojo.byId("delete_node_button"));
+	deleteNodeButton.startup();
 
 	var form = "";
 	form += "<div>";
 	form += "<div>Configuration:</div>";
 	var i;
 	for (i = 0; i < module.configurations.length; i++) {
+		var textBoxId = "flow_" + flowId + "_node_" + nodeId + "_"
+				+ module.configurations[i].key;
+		var divId = textBoxId + "_container";
 		form += "<div>";
 		form += ("<span>" + module.configurations[i].displayName + "</span>");
-		form += ("<input type=\"text\" value=\""
+		form += "<div id=\"" + divId + "\"></div>";
-				+ instance.getConfigurationValue(instance, flowId, nodeId,
-						module.configurations[i].key) + "\" id=\"" + "flow_"
-				+ flowId + "_node_" + nodeId + "_"
-				+ module.configurations[i].key + "\" />");
 		form += "</div>";
 	}
-	form += "<input id=\"save_configuration_" + "flow_" + flowId + "_node_"
+	form += "<div id=\"save_configuration_button\"></div>";
-			+ nodeId + "\" type=\"button\" value=\"Save\" />";
 	form += "</div>";
 	$("#" + instance.configurationContainerId).html(form);
-	$("#save_configuration_" + "flow_" + flowId + "_node_" + nodeId).bind(
+
-			"click", function() {
+	for (i = 0; i < module.configurations.length; i++) {
-				instance.saveConfiguration(instance, flowId, nodeId);
+		var textBoxId = "flow_" + flowId + "_node_" + nodeId + "_"
-			});
+				+ module.configurations[i].key;
+		var divId = textBoxId + "_container";
+		if (dijit.byId(textBoxId) != null) {
+			dijit.registry.remove(textBoxId);
+		}
+		var configurationTextBox = new dijit.form.TextBox({
+			id : textBoxId,
+			value : instance.getConfigurationValue(instance, flowId, nodeId,
+					module.configurations[i].key)
+		});
+		configurationTextBox.placeAt(dojo.byId(divId));
+		configurationTextBox.startup();
+	}
+
+	var saveConfigurationButton = new dijit.form.Button({
+		label : "Save Configuration",
+		onClick : function() {
+			instance.saveConfiguration(instance, flowId, nodeId);
+		}
+	});
+	saveConfigurationButton.placeAt(dojo.byId("save_configuration_button"));
+	saveConfigurationButton.startup();
 };
 
 HAFlow.Main.prototype.saveNodeName = function(instance, flowId, nodeId) {