inteligr8/alfresco-community-repo
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-community-repo.git synced 2025-08-14 17:58:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

more ui work on xforms ui and fixing the extraction of css into it's own file.

Browse Source 
git-svn-id: https://svn.alfresco.com/repos/alfresco-enterprise/alfresco/HEAD/root@4649 c4b6b30b-aa2e-2d43-bbcb-ca4b014f7261
This commit is contained in:
Ariel Backenroth
2006-12-18 23:06:40 +00:00
parent 50edc8427a
commit 354abf4147
3 changed files with 85 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
source/java/org/alfresco/web/forms/xforms/XFormsProcessor.java
View File

@@ -89,8 +89,7 @@ public class XFormsProcessor
Element e = result.createElement("link"); Element e = result.createElement("link");
e.setAttribute("rel", "stylesheet"); e.setAttribute("rel", "stylesheet");
e.setAttribute("type", "text/css"); e.setAttribute("type", "text/css");
e.setAttribute("src", cp + "/css/xforms.css"); e.setAttribute("href", cp + "/css/xforms.css");
e.appendChild(result.createTextNode("\n"));
div.appendChild(e); div.appendChild(e);
// a script with config information and globals. // a script with config information and globals.

51
source/web/css/xforms.css
View File

@@ -1,4 +1,9 @@
.xforms_group .xformsItem
{
/* border: 1px dashed blue; */
}
.xformsGroup
{ {
position: relative; position: relative;
top: 0px; top: 0px;
@@ -7,11 +12,18 @@
margin-bottom: 10px; margin-bottom: 10px;
} }
.xforms_groupHeader .xformsGroupItem
{
position: relative;
margin-right: 2px;
/* border: 1px dashed #cccccc; */
}
.xformsGroupHeader
{ {
position: relative; position: relative;
top: 0px; top: 0px;
left: px; left: 0px;
height: 20px; height: 20px;
line-height: 20px; line-height: 20px;
background-color: #cddbe8; background-color: #cddbe8;
@@ -19,12 +31,12 @@
width: 100%; width: 100%;
} }
.xforms_textArea .xformsTextArea
{ {
height: 200px; height: 200px;
} }
.xforms_repeatControl .xformsRepeatControl
{ {
position: relative; position: relative;
white-space: nowrap; white-space: nowrap;
@@ -33,28 +45,28 @@
line-height: 20px; line-height: 20px;
} }
.xforms_rowEven .xformsRowEven
{ {
background-color: #f0f0ee; background-color: #f0f0ee;
} }
.xforms_rowOdd .xformsRowOdd
{ {
background-color: #ffffff; background-color: #ffffff;
} }
.xforms_rowHover .xformsRowHover
{ {
background-color: #ffffcc; background-color: #ffffcc;
} }
.xforms_error .xformsError
{ {
padding: 2px; padding: 2px;
border: 1px solid #003366; border: 1px solid #003366;
} }
.xforms_ajaxLoader .xformsAjaxLoader
{ {
position: absolute; position: absolute;
top: 0px; top: 0px;
@@ -63,7 +75,12 @@
background-color: red; background-color: red;
} }
.xforms_filePicker_status .xformsFilePicker
{
width: 100%;
}
.xformsFilePickerStatus
{ {
padding: 2px; padding: 2px;
border: 1px solid #003366; border: 1px solid #003366;
@@ -72,7 +89,7 @@
text-align: center; text-align: center;
} }
.xforms_filePicker_header .xformsFilePickerHeader
{ {
position: relative; position: relative;
width: 100%; width: 100%;
@@ -82,7 +99,7 @@
padding-left: 2px; padding-left: 2px;
} }
.xforms_filePicker_headerMenuTrigger .xformsFilePickerHeaderMenuTrigger
{ {
padding: 2px; padding: 2px;
font-weight: bold; font-weight: bold;
@@ -90,7 +107,7 @@
border: 1px solid lightgrey; border: 1px solid lightgrey;
} }
.xforms_filePicker_footer .xformsFilePickerFooter
{ {
background-color: lightgrey; background-color: lightgrey;
text-align: center; text-align: center;
@@ -98,14 +115,14 @@
line-height: 30px; line-height: 30px;
} }
.xforms_filePicker_row .xformsFilePickerRow
{ {
position: relative; position: relative;
height: 20px; height: 20px;
line-height: 20px; line-height: 20px;
} }
.xforms_filePicker_addContent .xformsFilePickerAddContent
{ {
background-color: lightgrey; background-color: lightgrey;
position: absolute; position: absolute;
@@ -116,7 +133,7 @@
line-height: 20px; line-height: 20px;
} }
.xforms_filePicker_parentPathMenu .xformsFilePickerParentPathMenu
{ {
position: absolute; position: absolute;
background-color: lightgrey; background-color: lightgrey;

152
source/web/scripts/ajax/xforms.js
View File

@@ -61,11 +61,14 @@ dojo.declare("alfresco.xforms.Widget",
{ {
dojo.debug("no binding found for " + this.id); dojo.debug("no binding found for " + this.id);
} }
this.domNode = document.createElement("div");
this.domNode.setAttribute("id", this.id + "-domNode")
this.domNode.widget = this;
dojo.html.setClass(this.domNode, "xformsItem");
}, },
xformsNode: null, xformsNode: null,
labelNode: null, labelNode: null,
parent: null, parent: null,
domNode: null,
domContainer: null, domContainer: null,
setModified: function(b) setModified: function(b)
{ {
@@ -257,25 +260,15 @@ dojo.declare("alfresco.xforms.FilePicker",
}, },
render: function(attach_point) render: function(attach_point)
{ {
this.domNode = document.createElement("div"); dojo.html.prependClass(this.domNode, "xformsFilePicker");
attach_point.appendChild(this.domNode); attach_point.appendChild(this.domNode);
this.domNode.setAttribute("id", this.id + "-widget");
this.domNode.style.width = "100%";
this.domNode.widget = this;
dojo.event.browser.addListener(this.domNode,
"resize",
this._filePicker_resizeHandler,
false);
dojo.event.connect(this.domNode, "onresize", function() { alert('foo'); });
//XXXarielb support readonly and disabled //XXXarielb support readonly and disabled
this.widget = new FilePickerWidget(this.domNode, this.getInitialValue(), false); this.widget = new FilePickerWidget(this.domNode,
this.getInitialValue(),
false,
this._filePicker_changeHandler,
this._filePicker_resizeHandler);
this.widget.render(); this.widget.render();
dojo.event.browser.addListener(this.domNode,
"change",
this._filePicker_changeHandler,
false);
}, },
getValue: function() getValue: function()
{ {
@@ -288,15 +281,15 @@ dojo.declare("alfresco.xforms.FilePicker",
else else
this.widget.setValue(value); this.widget.setValue(value);
}, },
_filePicker_changeHandler: function(event) _filePicker_changeHandler: function(fpw)
{ {
this.xform.setXFormsValue(this.id, this.getValue()); var w = fpw.node.widget;
w.xform.setXFormsValue(w.id, w.getValue());
}, },
_filePicker_resizeHandler: function(event) _filePicker_resizeHandler: function(fpw)
{ {
alert("recieved file picker resize " + event); var w = fpw.node.widget;
var w = event.target.widget; w.domContainer.style.height = fpw.node.offsetHeight + "px";
w.domContainer.style.height = event.target.offsetHeight + "px";
} }
}); });
@@ -311,7 +304,6 @@ dojo.declare("alfresco.xforms.DatePicker",
{ {
var initial_value = this.getInitialValue() || ""; var initial_value = this.getInitialValue() || "";
this.domNode = document.createElement("div");
attach_point.appendChild(this.domNode); attach_point.appendChild(this.domNode);
this.widget = document.createElement("input"); this.widget = document.createElement("input");
this.widget.setAttribute("id", this.id + "-widget"); this.widget.setAttribute("id", this.id + "-widget");
@@ -376,7 +368,6 @@ dojo.declare("alfresco.xforms.TextField",
render: function(attach_point) render: function(attach_point)
{ {
var initial_value = this.getInitialValue() || ""; var initial_value = this.getInitialValue() || "";
this.domNode = document.createElement("div");
attach_point.appendChild(this.domNode); attach_point.appendChild(this.domNode);
this.widget = document.createElement("input"); this.widget = document.createElement("input");
@@ -428,10 +419,8 @@ dojo.declare("alfresco.xforms.TextArea",
}, },
render: function(attach_point) render: function(attach_point)
{ {
this.domNode = document.createElement("div");
attach_point.appendChild(this.domNode); attach_point.appendChild(this.domNode);
this.domNode.setAttribute("id", this.id); dojo.html.prependClass(this.domNode, "xformsTextArea");
dojo.html.setClass(this.domNode, "xforms_textArea");
this.domNode.innerHTML = this.getInitialValue() || ""; this.domNode.innerHTML = this.getInitialValue() || "";
tinyMCE.addMCEControl(this.domNode, this.id); tinyMCE.addMCEControl(this.domNode, this.id);
@@ -721,8 +710,7 @@ dojo.declare("alfresco.xforms.Group",
initializer: function(xform, xformsNode) initializer: function(xform, xformsNode)
{ {
this.children = []; this.children = [];
this.domNode = document.createElement("div"); dojo.html.removeClass(this.domNode, "xformsItem");
this.domNode.setAttribute("id", this.id + "-domNode");
this.showHeader = false; this.showHeader = false;
}, },
setShowHeader: function(showHeader) setShowHeader: function(showHeader)
@@ -816,9 +804,10 @@ dojo.declare("alfresco.xforms.Group",
} }
var contentDiv = document.createElement("div"); var contentDiv = document.createElement("div");
contentDiv.setAttribute("id", child.id + "-content"); contentDiv.setAttribute("id", child.id + "-content");
dojo.html.setClass(contentDiv, "xformsGroupItem");
child.domContainer.appendChild(contentDiv); child.domContainer.appendChild(contentDiv);
contentDiv.style.position = "relative";
contentDiv.style.marginRight = "2px";
contentDiv.style.left = (child instanceof alfresco.xforms.Group contentDiv.style.left = (child instanceof alfresco.xforms.Group
? "0px" ? "0px"
: "30%"); : "30%");
@@ -881,9 +870,9 @@ dojo.declare("alfresco.xforms.Group",
{ {
this.domNode.widget = this; this.domNode.widget = this;
attach_point.appendChild(this.domNode); attach_point.appendChild(this.domNode);
dojo.html.setClass(this.domNode, "xforms_group"); dojo.html.setClass(this.domNode, "xformsGroup");
if (djConfig.isDebug) if (false && djConfig.isDebug)
{ {
var idNode = document.createElement("div"); var idNode = document.createElement("div");
idNode.style.backgroundColor = "red"; idNode.style.backgroundColor = "red";
@@ -894,7 +883,7 @@ dojo.declare("alfresco.xforms.Group",
this.groupHeaderNode = document.createElement("div"); this.groupHeaderNode = document.createElement("div");
this.groupHeaderNode.id = this.id + "-groupHeaderNode"; this.groupHeaderNode.id = this.id + "-groupHeaderNode";
this.domNode.appendChild(this.groupHeaderNode); this.domNode.appendChild(this.groupHeaderNode);
dojo.html.setClass(this.groupHeaderNode, "xforms_groupHeader"); dojo.html.setClass(this.groupHeaderNode, "xformsGroupHeader");
this.groupHeaderNode.style.display = "none"; this.groupHeaderNode.style.display = "none";
this.toggleExpandedImage = document.createElement("img"); this.toggleExpandedImage = document.createElement("img");
@@ -1038,7 +1027,7 @@ dojo.declare("alfresco.xforms.Repeat",
else else
result.parentNode.appendChild(this.repeatControls[position]); result.parentNode.appendChild(this.repeatControls[position]);
dojo.html.setClass(this.repeatControls[position], "xforms_repeatControls"); dojo.html.setClass(this.repeatControls[position], "xformsRepeatControls");
this.repeatControls[position].style.width = repeatControlsWidth + "px"; this.repeatControls[position].style.width = repeatControlsWidth + "px";
this.repeatControls[position].style.backgroundColor = result.style.backgroundColor; this.repeatControls[position].style.backgroundColor = result.style.backgroundColor;
@@ -1328,9 +1317,9 @@ dojo.declare("alfresco.xforms.Trigger",
attach_point.appendChild(nodeRef); attach_point.appendChild(nodeRef);
this.widget = dojo.widget.createWidget("Button", this.widget = dojo.widget.createWidget("Button",
{ {
widgetId: this.id + "-widget", widgetId: this.id + "-widget",
caption: this.getLabel() + " " + this.id caption: this.getLabel() + " " + this.id
}, },
nodeRef); nodeRef);
dojo.event.connect(this.widget, "onClick", this, this._clickHandler); dojo.event.connect(this.widget, "onClick", this, this._clickHandler);
this.domContainer.style.display = "none"; this.domContainer.style.display = "none";
@@ -1909,7 +1898,7 @@ function _show_error(msg)
{ {
errorDiv = document.createElement("div"); errorDiv = document.createElement("div");
errorDiv.setAttribute("id", "alfresco-xforms-error"); errorDiv.setAttribute("id", "alfresco-xforms-error");
dojo.html.setClass(errorDiv, "infoText statusErrorText xforms_error"); dojo.html.setClass(errorDiv, "infoText statusErrorText xformsError");
var alfUI = document.getElementById("alfresco-xforms-ui"); var alfUI = document.getElementById("alfresco-xforms-ui");
dojo.dom.prependChild(errorDiv, alfUI); dojo.dom.prependChild(errorDiv, alfUI);
} }
@@ -1933,7 +1922,7 @@ function _get_ajax_loader_element()
return result; return result;
result = document.createElement("div"); result = document.createElement("div");
result.setAttribute("id", "alfresco-ajax-loader"); result.setAttribute("id", "alfresco-ajax-loader");
dojo.html.setClass(result, "xforms_ajaxLoader"); dojo.html.setClass(result, "xformsAjaxLoader");
dojo.style.hide(result); dojo.style.hide(result);
document.body.appendChild(result); document.body.appendChild(result);
return result; return result;
@@ -2067,11 +2056,13 @@ if (!Array.prototype.indexOf)
} }
} }
function FilePickerWidget(node, value, readonly) function FilePickerWidget(node, value, readonly, change_callback, resize_callback)
{ {
this.node = node; this.node = node;
this.value = value == null || value.length == 0 ? null : value; this.value = value == null || value.length == 0 ? null : value;
this.readonly = readonly || false; this.readonly = readonly || false;
this.change_callback = change_callback;
this.resize_callback = resize_callback;
} }
FilePickerWidget._uploads = []; FilePickerWidget._uploads = [];
@@ -2137,8 +2128,12 @@ getValue: function()
setValue: function(v) setValue: function(v)
{ {
this.value = (v == null || v.length == 0 ? null : v); this.value = (v == null || v.length == 0 ? null : v);
if (this.selectedPathInput)
{
this.selectedPathInput.value = v;
}
alfresco.event.dispatchEvent(this.selectedPathInput, "change", {}); this.change_callback(this);
}, },
setReadonly: function(r) setReadonly: function(r)
{ {
@@ -2159,12 +2154,12 @@ _showStatus: function(text)
{ {
this.statusDiv = d.createElement("div"); this.statusDiv = d.createElement("div");
this.node.insertBefore(this.statusDiv, this.node.firstChild); this.node.insertBefore(this.statusDiv, this.node.firstChild);
dojo.html.setClass(this.statusDiv, "infoText xforms_filePicker_status"); dojo.html.setClass(this.statusDiv, "infoText xformsFilePickerStatus");
this.statusDiv.appendChild(d.createTextNode(text)); this.statusDiv.appendChild(d.createTextNode(text));
this.node.style.height = (parseInt(this.node.style.height) + this.node.style.height = (parseInt(this.node.style.height) +
dojo.style.getMarginHeight(this.statusDiv) + dojo.style.getMarginHeight(this.statusDiv) +
this.statusDiv.offsetHeight) + "px"; this.statusDiv.offsetHeight) + "px";
alfresco.event.dispatchEvent(this.node, "resize", {}); this.resize_callback(this);
} }
else else
{ {
@@ -2179,21 +2174,20 @@ _hideStatus: function()
this.statusDiv.offsetHeight) + "px"; this.statusDiv.offsetHeight) + "px";
dojo.dom.removeChildren(this.statusDiv); dojo.dom.removeChildren(this.statusDiv);
dojo.dom.removeNode(this.statusDiv); dojo.dom.removeNode(this.statusDiv);
alfresco.event.dispatchEvent(this.node, "resize", {}); this.resize_callback(this);
} }
}, },
_showSelectedValue: function() _showSelectedValue: function()
{ {
var d = this.node.ownerDocument; var d = this.node.ownerDocument;
dojo.dom.removeChildren(this.node); dojo.dom.removeChildren(this.node);
dojo.html.setClass(this.node, "selector");
this.node.style.height = "20px"; this.node.style.height = "20px";
this.node.style.lineHeight = this.node.style.height; this.node.style.lineHeight = this.node.style.height;
this.node.style.position = "relative"; this.node.style.position = "relative";
this.node.style.whiteSpace = "nowrap"; this.node.style.whiteSpace = "nowrap";
alfresco.event.dispatchEvent(this.node, "resize", {}); this.resize_callback(this);
this.selectedPathInput = d.createElement("input"); this.selectedPathInput = d.createElement("input");
this.selectedPathInput.type = "text"; this.selectedPathInput.type = "text";
@@ -2214,7 +2208,6 @@ _showSelectedValue: function()
((this.selectButton.offsetWidth + ((this.selectButton.offsetWidth +
dojo.style.getMarginWidth(this.selectButton)) / dojo.style.getMarginWidth(this.selectButton)) /
dojo.style.getContentBoxWidth(this.node))) * 100 + "%"; dojo.style.getContentBoxWidth(this.node))) * 100 + "%";
alert(this.selectedPathInput.style.width);
dojo.event.browser.addListener(this.selectButton, dojo.event.browser.addListener(this.selectButton,
"click", "click",
function(event) function(event)
@@ -2255,14 +2248,14 @@ _showPicker: function(data)
parseInt(this.statusDiv.style.marginTop) + parseInt(this.statusDiv.style.marginTop) +
parseInt(this.statusDiv.style.marginBottom)) parseInt(this.statusDiv.style.marginBottom))
: 0) + "px"); : 0) + "px");
alfresco.event.dispatchEvent(this.node, "resize", {}); this.resize_callback(this);
var currentPath = data.getElementsByTagName("current-node")[0]; var currentPath = data.getElementsByTagName("current-node")[0];
currentPath = currentPath.getAttribute("webappRelativePath"); currentPath = currentPath.getAttribute("webappRelativePath");
var currentPathName = currentPath.replace(/.*\/([^/]+)/, "$1") var currentPathName = currentPath.replace(/.*\/([^/]+)/, "$1")
var headerDiv = d.createElement("div"); var headerDiv = d.createElement("div");
dojo.html.setClass(headerDiv, "xforms_filePicker_header"); dojo.html.setClass(headerDiv, "xformsFilePickerHeader");
this.node.appendChild(headerDiv); this.node.appendChild(headerDiv);
headerDiv.appendChild(d.createTextNode("In: ")); headerDiv.appendChild(d.createTextNode("In: "));
@@ -2270,7 +2263,7 @@ _showPicker: function(data)
this.headerMenuTriggerLink.filePickerWidget = this; this.headerMenuTriggerLink.filePickerWidget = this;
this.headerMenuTriggerLink.setAttribute("href", "javascript:void(0)"); this.headerMenuTriggerLink.setAttribute("href", "javascript:void(0)");
this.headerMenuTriggerLink.setAttribute("webappRelativePath", currentPath); this.headerMenuTriggerLink.setAttribute("webappRelativePath", currentPath);
dojo.html.setClass(headerMenuTriggerLink, "xforms_filePicker_headerMenuTrigger"); dojo.html.setClass(this.headerMenuTriggerLink, "xformsFilePickerHeaderMenuTrigger");
headerDiv.appendChild(this.headerMenuTriggerLink); headerDiv.appendChild(this.headerMenuTriggerLink);
dojo.event.connect(this.headerMenuTriggerLink, dojo.event.connect(this.headerMenuTriggerLink,
@@ -2379,7 +2372,7 @@ _showPicker: function(data)
this.node.appendChild(this.contentDiv); this.node.appendChild(this.contentDiv);
var footerDiv = d.createElement("div"); var footerDiv = d.createElement("div");
dojo.html.setClass(footerDiv, "xforms_filePicker_footer"); dojo.html.setClass(footerDiv, "xformsFilePickerFooter");
this.node.appendChild(footerDiv); this.node.appendChild(footerDiv);
var cancelButton = d.createElement("input"); var cancelButton = d.createElement("input");
@@ -2415,8 +2408,7 @@ _showPicker: function(data)
row.setAttribute("id", name + "-row"); row.setAttribute("id", name + "-row");
this.contentDiv.appendChild(row); this.contentDiv.appendChild(row);
row.rowIndex = i; row.rowIndex = i;
dojo.html.setClass("xforms_filePicker_row xforms_row" + dojo.html.setClass(row, "xformsFilePickerRow xformsRow" + (row.rowIndex % 2 ? "Even" : "Odd"));
(row.rowIndex % 2 ? "Even" : "Odd"));
dojo.event.browser.addListener(row, dojo.event.browser.addListener(row,
"mouseover", "mouseover",
function(event) function(event)
@@ -2481,8 +2473,8 @@ _showPicker: function(data)
dojo.event.connect(e, "onclick", function(event) dojo.event.connect(e, "onclick", function(event)
{ {
var w = event.target.filePickerWidget; var w = event.target.filePickerWidget;
w._showSelectedValue();
w.setValue(event.target.name); w.setValue(event.target.name);
w._showSelectedValue();
}); });
} }
}, },
@@ -2491,7 +2483,7 @@ _showAddContentPanel: function(addContentLink, currentPath)
var d = this.node.ownerDocument; var d = this.node.ownerDocument;
this.addContentDiv = d.createElement("div"); this.addContentDiv = d.createElement("div");
this.contentDiv.style.opacity = .3; this.contentDiv.style.opacity = .3;
dojo.html.setClass(this.addContentDiv, "xforms_filePicker_addContent"); dojo.html.setClass(this.addContentDiv, "xformsFilePickerAddContent");
this.node.insertBefore(this.addContentDiv, this.contentDiv); this.node.insertBefore(this.addContentDiv, this.contentDiv);
var e = d.createElement("div"); var e = d.createElement("div");
@@ -2573,7 +2565,7 @@ _openParentPathMenu: function(target, path)
}; };
d.addEventListener("click", parentPathMenu_documentClickHandler, true); d.addEventListener("click", parentPathMenu_documentClickHandler, true);
dojo.html.setClass(this.parentPathMenu, "xforms_filePicker_parentPathMenu"); dojo.html.setClass(this.parentPathMenu, "xformsFilePickerParentPathMenu");
var left = 0; var left = 0;
var top = 0; var top = 0;
@@ -2650,47 +2642,3 @@ _openParentPathMenu: function(target, path)
this.node.appendChild(this.parentPathMenu); this.node.appendChild(this.parentPathMenu);
} }
}; };
alfresco.event = new function()
{
this.addListener = function(node, eventName, fp, capture)
{
if (node.addEventListener)
{
node.addEventListener(eventName, fp, capture);
}
else
{
node.attachEvent("on" + eventName.toLowerCase(), function() { fp(window.event) });
}
},
this.dispatchEvent = function(target, eventName, properties)
{
if (document.createEvent)
{
var event = document.createEvent("UIEvents");
event.initUIEvent(eventName, true, true, window, 0);
for (var i in properties)
{
event[i] = properties[i];
}
target.dispatchEvent(event);
}
else
{
var el = document.createElement("public");
document.body.appendChild(el);
el = document.createElement("event");
document.body.lastChild.appendChild(el);
el.setAttribute("name", eventName);
var event = document.createEventObject();
for (var i in properties)
{
event[i] = properties[i];
}
target.fireEvent("on" + eventName.toLowerCase(), event);
}
}
}