FELIX-592 Declare response as transitional XHTML
- fix style attribute handling (IE is pickier than Firefox)
- Use innerHTML syntax to declare elements with event handlers
because these cannot be declared through DOM in IE (AFAIK)
git-svn-id: https://svn.apache.org/repos/asf/felix/trunk@671679 13f79535-47bb-0310-9956-ffa450edef68
diff --git a/webconsole/src/main/java/org/apache/felix/webconsole/AbstractWebConsolePlugin.java b/webconsole/src/main/java/org/apache/felix/webconsole/AbstractWebConsolePlugin.java
index 0b151e4..1628ea2 100644
--- a/webconsole/src/main/java/org/apache/felix/webconsole/AbstractWebConsolePlugin.java
+++ b/webconsole/src/main/java/org/apache/felix/webconsole/AbstractWebConsolePlugin.java
@@ -44,8 +44,9 @@
/** The name of the request attribute containig the map of FileItems from the POST request */
public static final String ATTR_FILEUPLOAD = "org.apache.felix.webconsole.fileupload";
- private static final String HEADER = "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01//EN\" \"http://www.w3.org/TR/html4/strict.dtd\">"
- + "<html>"
+ private static final String HEADER = "<?xml version=\"1.0\" encoding=\"UTF-8\" ?>"
+ + "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"xhtml1-transitional.dtd\">"
+ + "<html xmlns=\"http://www.w3.org/1999/xhtml\">"
+ "<head>"
+ "<meta http-equiv=\"Content-Type\" content=\"text/html; utf-8\">"
+ "<link rel=\"icon\" href=\"{15}/res/imgs/favicon.ico\">"
@@ -211,7 +212,7 @@
if ( linkToCurrent )
{
map.put( labelMapEntry.getValue(), "<a class='technavat' href='" + appRoot + "/"
- + labelMapEntry.getKey() + "'>" + labelMapEntry.getValue() + "</a></li>" );
+ + labelMapEntry.getKey() + "'>" + labelMapEntry.getValue() + "</a>" );
}
else
{
@@ -222,7 +223,7 @@
else
{
map.put( labelMapEntry.getValue(), "<a href='" + appRoot + "/" + labelMapEntry.getKey() + "'>"
- + labelMapEntry.getValue() + "</a></li>" );
+ + labelMapEntry.getValue() + "</a>" );
}
}
diff --git a/webconsole/src/main/resources/res/ui/configmanager.js b/webconsole/src/main/resources/res/ui/configmanager.js
index b0b3d66..76c6396 100644
--- a/webconsole/src/main/resources/res/ui/configmanager.js
+++ b/webconsole/src/main/resources/res/ui/configmanager.js
@@ -58,13 +58,11 @@
}
var trEl = tr( "content" );
- var tdEl = createElement( "th", "content", { colspan: 2 } );
+ var tdEl = createElement( "th", "content", { colSpan: "2" } );
addText( tdEl, obj.title );
trEl.appendChild( tdEl );
parent.appendChild( trEl );
- // innerHtml += '<tr class="content">';
- // innerHtml += '<td class="content"> </td>';
trEl = tr( "content" );
parent.appendChild( trEl );
@@ -72,12 +70,9 @@
addText( tdEl, "\u00a0" );
trEl.appendChild( tdEl );
- // innerHtml += '<td class="content">';
tdEl = td( "content" );
trEl.appendChild( tdEl );
- // innerHtml += '<form method="post" action="' + pluginRoot + '/' + obj.pid + '">';
- // innerHtml += '<input type="hidden" name="apply" value="true" />';
var formEl = createElement( "form", null, {
method: "post",
action: pluginRoot + "/" + obj.pid
@@ -94,7 +89,6 @@
// add the factory PID as a hidden form field if present
if (obj.factoryPid)
{
- // innerHtml += '<input type="hidden" name="factoryPid" value="' + obj.factoryPid + '" />';
inputEl = createElement( "input", null, {
type: "hidden",
name: "factoryPid",
@@ -103,7 +97,6 @@
formEl.appendChild( inputEl );
}
- // innerHtml += '<input type="hidden" name="action" value="ajaxConfigManager" />';
inputEl = createElement( "input", null, {
type: "hidden",
name: "action",
@@ -111,7 +104,6 @@
});
formEl.appendChild( inputEl );
- // innerHtml += '<table border="0" width="100%">';
var tableEl = createElement( "table", null, {
border: 0,
width: "100%"
@@ -123,10 +115,8 @@
if (obj.description)
{
- // innerHtml += '<tr class="content">';
- // innerHtml += '<td class="content" colspan="2">' + obj.description + '</td></tr>';
trEl = tr( "content" );
- tdEl = td( "content", { colspan: 2 } );
+ tdEl = td( "content", { colSpan: "2" } );
addText( tdEl, obj.description );
trEl.appendChild( tdEl );
bodyEl.appendChild( trEl );
@@ -141,63 +131,34 @@
printForm(bodyEl, obj);
}
- // innerHtml += '<tr class="content">';
trEl = tr( "content" );
bodyEl.appendChild( trEl );
- // innerHtml += '<td class="content"> </td>';
tdEl = td( "content" );
addText( tdEl, "\u00a0" );
trEl.appendChild( tdEl );
- // innerHtml += '<td class="content">';
tdEl = td( "content" );
trEl.appendChild( tdEl );
-
- // innerHtml += '<input type="submit" class="submit" name="submit" value="Save" />';
- tdEl.appendChild( createElement( "input", "submit", {
- type: "submit",
- name: "submit",
- value: "Save"
- })
- );
-
- // innerHtml += ' ';
- addText( tdEl, "\u00a0\u00a0\u00a0" );
-
- // innerHtml += '<input type="reset" class="submit" name="reset" value="Reset" />';
- tdEl.appendChild( createElement( "input", "submit", {
- type: "reset",
- name: "reset",
- value: "Reset"
- })
- );
-
- // innerHtml += ' ';
- // addText( tdEl, "\u00a0\u00a0\u00a0" );
- // innerHtml += '<input type="submit" class="submit" name="delete" value="Delete" onClick="return confirmDelete();"/>';
- tdEl.appendChild( createElement( "input", "submit", {
- type: "submit",
- name: "delete",
- value: "Delete",
- onClick: "return confirmDelete();"
- })
- );
-
- // innerHtml += '</td></tr>';
+ // define this TD as innerHTML otherwise the onClick event handler
+ // of the Delete button is not accepted by IE...
+ var innerHTML = '<input type="submit" class="submit" name="submit" value="Save" />';
+ innerHTML += ' ';
+ innerHTML += '<input type="reset" class="submit" name="reset" value="Reset" />';
+ innerHTML += ' ';
+ innerHTML += '<input type="submit" class="submit" name="delete" value="Delete" onClick="return confirmDelete();"/>';
+ tdEl.innerHTML = innerHTML;
- // innerHtml += '</table>';
- // innerHtml += '</form>';
- // innerHtml += '</td></tr>';
-
printConfigurationInfo(parent, obj);
}
-function printTextArea(/* Element */ parent, props ) {
+function printTextArea(/* Element */ parent, props )
+{
var propsValue = "";
- for (var key in props) {
+ for (var key in props)
+ {
propsValue += key + ' = ' + props[key] + '\r\n';
}
@@ -205,24 +166,14 @@
td( "content aligntop", null, [
text( "Properties" )
]),
- td( "content", { style: "width: 99%" }, [
+ td( "content", { style: { width: "99%" } }, [
createElement( "textarea", null, {
name: "properties",
- style: "height: 50%; width: 99%"
+ style: { height: "50%", width: "99%" }
}, [ text( propsValue ) ] ),
text( "Enter Name-Value pairs of configuration properties" )
])
]);
-
-/*
- var innerHtml = '<tr class="content">';
- innerHtml += '<td class="content" style="vertical-align: top">Properties</td>';
- innerHtml += '<td class="content" style="width: 99%">';
- innerHtml += '<textarea name="properties" style="height: 50%; width: 99%">';
- innerHtml += '</textarea>';
- innerHtml += 'Enter Name-Value pairs of configuration properties.</td>';
- return innerHtml;
-*/
}
function printForm( /* Element */ parent, obj ) {
@@ -232,15 +183,12 @@
var prop = obj.propertylist[idx];
var attr = obj[prop];
- // innerHtml += '<tr class="content">';
- // innerHtml += '<td class="content" style="vertical-align: top">' + attr.name + '</td>';
var trEl = tr( "content", null, [
td( "content aligntop", null, [ text( attr.name ) ] )
]);
parent.appendChild( trEl );
- // innerHtml += '<td class="content" style="width: 99%">';
- var tdEl = td( "content", { style: "width: 99%" } );
+ var tdEl = td( "content", { style: { width: "99%" } } );
trEl.appendChild( tdEl );
if (attr.value != undefined)
@@ -279,7 +227,6 @@
}
}
- // innerHtml += '<input type="hidden" name="propertylist" value="' + propList + '"/>';
parent.appendChild( createElement( "input", null, {
type: "hidden",
name: "propertylist",
@@ -290,18 +237,13 @@
function printConfigurationInfo( /* Element */ parent, obj )
{
- // var innerHtml = '<tr class="content">';
- // innerHtml += '<th colspan="2" class="content" >Configuration Information</th></tr>';
parent.appendChild( tr( "content", null, [
- createElement( "th", "content", { colspan: 2 }, [
+ createElement( "th", "content", { colSpan: "2" }, [
text( "Configuration Information" )
])
])
);
- // innerHtml += '<tr class="content">';
- // innerHtml += '<td class="content">Persistent Identity (PID)</td>';
- // innerHtml += '<td class="content">' + obj.pid + '</td></tr>';
parent.appendChild( tr( "content", null, [
td( "content", null, [
text( "Persistent Identity (PID)" )
@@ -314,9 +256,6 @@
if (obj.factoryPID)
{
- // innerHtml += '<tr class="content">';
- // innerHtml += '<td class="content">Factory Peristent Identifier (Factory PID)</td>';
- // innerHtml += '<td class="content">' + obj.factoryPID + '</td></tr>';
parent.appendChild( tr( "content", null, [
td( "content", null, [
text( "Factory Peristent Identifier (Factory PID)" )
@@ -334,9 +273,6 @@
binding = "Unbound or new configuration";
}
- // innerHtml += '<tr class="content">';
- // innerHtml += '<td class="content">Configuration Binding</td>';
- // innerHtml += '<td class="content">' + binding + '</td></tr>';
parent.appendChild( tr( "content", null, [
td( "content", null, [
text( "Configuration Binding" )
@@ -354,22 +290,18 @@
spanCounter++;
var newId = prop + spanCounter;
- return createElement( "span", null, { id: newId }, [
- createInput( prop, value, type, '89%' ),
- createElement( "input", "input", {
- type: "button",
- value: "+",
- onClick: "addValue('" + prop + "', '" + newId + "');",
- style: "width: 5%"
- }),
- createElement( "input", "input", {
- type: "button",
- value: "-",
- onClick: "removeValue('" + newId + "');",
- style: "width: 5%"
- }),
- createElement( "br" )
+ var spanEl = createElement( "span", null, { id: newId }, [
+ createInput( prop, value, type, '89%' )
]);
+
+ // define this SPAN as innerHTML otherwise the onClick event handler
+ // of the buttons is not accepted by IE...
+ var innerHTML = "<input type='button' class='input' style='width:\"5%\"' value='+' onClick='addValue(\"" + prop + "\", \"" + newId + "\")' />";
+ innerHTML += "<input type='button' class='input' style='width:\"5%\"' value='-' onClick='removeValue(\"" + newId + "\")' />";
+ innerHTML += "<br />";
+ spanEl.innerHTML += innerHTML;
+
+ return spanEl;
}
/* Element */ function createInput(prop, value, type, width) {
@@ -396,7 +328,7 @@
var selectEl = createElement( "select", "select", {
name: prop,
- style: "width: " + width
+ style: { width: width }
});
var labels = type.labels;
@@ -421,7 +353,7 @@
type: "text",
name: prop,
value: value,
- style: "width: " + width
+ style: { width: width }
});
}
}
@@ -459,6 +391,7 @@
function addValue(prop, vidx)
{
+alert("add " + prop + " to " + vidx);
var span = document.getElementById(vidx);
if (!span)
{
diff --git a/webconsole/src/main/resources/res/ui/ui.js b/webconsole/src/main/resources/res/ui/ui.js
index 92a0f95..b022b98 100644
--- a/webconsole/src/main/resources/res/ui/ui.js
+++ b/webconsole/src/main/resources/res/ui/ui.js
@@ -93,14 +93,26 @@
if (cssClass)
{
- element.setAttribute( "class", cssClass );
+ element.setAttribute( "class", cssClass ); // non-IE
+ element.setAttribute( "className", cssClass ); // IE
}
if (attrs)
{
for (var lab in attrs)
{
- element.setAttribute( lab, attrs[lab] );
+ if ("style" == lab)
+ {
+ var styles = attrs[lab];
+ for (var styleName in styles)
+ {
+ element.style[styleName] = styles[styleName];
+ }
+ }
+ else
+ {
+ element.setAttribute( lab, attrs[lab] );
+ }
}
}