- adding borders around all groups an indenting nested groups.

- more IE ui tweaks - it looks pretty much identical to firefox now


git-svn-id: https://svn.alfresco.com/repos/alfresco-enterprise/alfresco/HEAD/root@4854 c4b6b30b-aa2e-2d43-bbcb-ca4b014f7261

source/java/org/alfresco/web/forms/xforms/SchemaFormBuilder.java

@@ -1593,19 +1593,25 @@ public class SchemaFormBuilder
                if (bindId != null) 
                {
                   if (LOGGER.isDebugEnabled())
+                  {
                      LOGGER.debug("bindId found: " + bindId);
+                  }
 
                   final JXPathContext context = 
                      JXPathContext.newContext(formSection.getOwnerDocument());
                   final Pointer pointer = 
                      context.getPointer("//*[@" + NamespaceConstants.XFORMS_PREFIX + ":bind='" + bindId + "']");
                   if (pointer != null)
+                  {
                      control = (Element) pointer.getNode();
                   }
+               }
 
                //copy it
                if (control == null)
+               {
                   LOGGER.warn("Corresponding control not found");
+               }
                else 
                {
                   Element newControl = (Element)control.cloneNode(true);
@@ -1724,7 +1730,9 @@ public class SchemaFormBuilder
       if (bind != null && 
           bind.getLocalName() != null && 
           "bind".equals(bind.getLocalName())) 
+      {
          bindId = bind.getAttributeNS(null, "id");
+      }
       else 
       {
          LOGGER.warn("addRepeatIfNecessary: bind not found: " + bind
@@ -1736,10 +1744,14 @@ public class SchemaFormBuilder
          if (bind != null &&
              bind.getLocalName() != null && 
              "bind".equals(bind.getLocalName())) 
+         {
             bindId = bind.getAttributeNS(null, "id");
+         }
          else 
+         {
             LOGGER.warn("addRepeatIfNecessary: bind really not found");
          }
+      }
 
       repeatSection.setAttributeNS(NamespaceConstants.XFORMS_NS,
                                    NamespaceConstants.XFORMS_PREFIX + ":bind",
@@ -1756,7 +1768,6 @@ public class SchemaFormBuilder
       //add a group inside the repeat?
       final Element group = xForm.createElementNS(NamespaceConstants.XFORMS_NS,
                                                   NamespaceConstants.XFORMS_PREFIX + ":group");
-
       group.setAttributeNS(NamespaceConstants.XFORMS_NS,
                            NamespaceConstants.XFORMS_PREFIX + ":appearance",
                            "repeated");
@@ -1869,7 +1880,9 @@ public class SchemaFormBuilder
 
       Element hint = this.createHint(xForm, owner, resourceBundle);
       if (hint != null)
+      {
          formControl.appendChild(hint);
+      }
 
       //add selector if repeat
       //if (repeatSection != formSection)
@@ -2114,6 +2127,9 @@ public class SchemaFormBuilder
          xformsDocument.createElementNS(NamespaceConstants.XFORMS_NS, 
                                         NamespaceConstants.XFORMS_PREFIX + ":group");
       this.setXFormsId(groupElement);
+      groupElement.setAttributeNS(NamespaceConstants.XFORMS_NS,
+                                  NamespaceConstants.XFORMS_PREFIX + ":appearance",
+                                  "full");
 
       //groupElement = (Element) formSection.appendChild(groupElement);
       formSection.appendChild(groupElement);

source/web/css/xforms.css

@@ -1,7 +1,7 @@
 .xformsItem
 {
 /*	border: 1px dashed blue; */
-/*	margin: 2px 0px; */
+	margin-right: 2px;
 }
 
 .xformsItemDOMContainer
@@ -11,7 +11,6 @@
 	left: 0px;
 	padding: 0px; 
 	margin: 0px;
-/*	margin: 5px 0px; */
 }
 
 .xformsGroup
@@ -21,27 +20,28 @@
 	left: 0px;
 	width: 100%;
 	margin-bottom: 10px;
+	border: 1px solid #67a4e6; 
 }
 
 .xformsGroupItem
 {
 	position: relative;
 	margin: 5px 0px; 
-	margin-right: 2px;
+	max-width: 100%;
-/*	border: 1px dashed #cccccc; */
 }
 
 .xformsGroupHeader
 {
+
 	position: relative;
 	top: 0px;
 	left: 0px;
 	height: 20px;
 	line-height: 20px;
-/*	background-color: #e3effa; */
+	width: 100%;
 	background-color: #cddbe8; 
 	font-weight: bold;
-	width: 100%;
+	border-bottom: 1px solid #67a4e6; 
 }
 
 .xformsTextArea
@@ -51,7 +51,6 @@
 
 .xformsRepeat
 {
-	border: 1px solid #67a4e6; 
 }
 
 .xformsRepeatItem
@@ -64,9 +63,7 @@
 {
 	position: relative;
 	white-space: nowrap;
-/*	background-color: white; */
 	border: 1px solid #67a4e6; 
-/*	border: 1px solid black; */
 	height: 20px;
 	line-height: 20px;
 }

source/web/scripts/ajax/xforms.js

@@ -92,8 +92,8 @@ dojo.declare("alfresco.xforms.Widget",
                  this.xform = xform;
                  this.xformsNode = xformsNode;
                  this.id = this.xformsNode.getAttribute("id");
-                 this.modified = false;
+                 this._modified = false;
-                 this.valid = true;
+                 this._valid = true;
                  var b = this.xform.getBinding(this.xformsNode);
                  if (b)
                  {
@@ -139,7 +139,7 @@ dojo.declare("alfresco.xforms.Widget",
                /** Sets the widget's modified state, as indicated by an XFormsEvent. */
                setModified: function(b)
                {
-                 this.modified = b;
+                 this._modified = b;
                  this._updateDisplay();
                  this.hideAlert();
                },
@@ -147,7 +147,7 @@ dojo.declare("alfresco.xforms.Widget",
                /** Sets the widget's valid state, as indicated by an XFormsEvent */
                setValid: function(b)
                {
-                 this.valid = b;
+                 this._valid = b;
                  this._updateDisplay();
                  this.hideAlert();
                },
@@ -158,11 +158,11 @@ dojo.declare("alfresco.xforms.Widget",
                 */
                isValidForSubmit: function()
                {
-                 if (!this.valid)
+                 if (!this._valid)
                  {
                    return false;
                  }
-                 if (!this.modified && this.isRequired() && this.getInitialValue() == null)
+                 if (!this._modified && this.isRequired() && this.getInitialValue() == null)
                  {
                    return false;
                  }
@@ -194,16 +194,16 @@ dojo.declare("alfresco.xforms.Widget",
                /** Sets the widget's required state, as indicated by an XFormsEvent */
                setRequired: function(b)
                {
-                 this.required = b;
+                 this._required = b;
                  this._updateDisplay();
                },
 
                /** Indicates if a value is required for the widget. */
                isRequired: function()
                {
-                 if (typeof this.required != "undefined")
+                 if (typeof this._required != "undefined")
                  {
-                   return this.required;
+                   return this._required;
                  }
                  var binding = this.xform.getBinding(this.xformsNode);
                  return binding && binding.required == "true()";
@@ -212,15 +212,15 @@ dojo.declare("alfresco.xforms.Widget",
                /** Sets the widget's readonly state, as indicated by an XFormsEvent */
                setReadonly: function(readonly)
                {
-                 this.readonly = readonly;
+                 this._readonly = readonly;
                },
 
                /** Indicates if the widget's value is readonly. */
                isReadonly: function()
                {
-                 if (typeof this.readonly != "undefined")
+                 if (typeof this._readonly != "undefined")
                  {
-                   return this.readonly;
+                   return this._readonly;
                  }
                  var binding = this.xform.getBinding(this.xformsNode);
                  return binding && binding.readonly == "true()";
@@ -358,7 +358,7 @@ dojo.declare("alfresco.xforms.Widget",
                _updateDisplay: function()
                {
 //                 this.domContainer.style.backgroundColor =  
-//                   (!this.valid ? "yellow" : this.modified ? "lightgreen" : "white");
+//                   (!this._valid ? "yellow" : this._modified ? "lightgreen" : "white");
                },
 
                /** Destroy the widget and any resources no longer needed. */
@@ -385,6 +385,28 @@ dojo.declare("alfresco.xforms.Widget",
                    w = w.parent;
                  }
                  return result;
+               },
+
+               /** 
+                * Returns an array of RepeatIndexDatas corresponding to all enclosing repeats.
+                * The closest repeat will be at index 0.
+                */
+               getParentGroups: function(appearance)
+               {
+                 var result = [];
+                 var w = this;
+                 while (w.parent)
+                 {
+                   if (w.parent instanceof alfresco.xforms.Group)
+                   {
+                     if (appearance && w.parent.getAppearance() == appearance)
+                     {
+                       result.push(w.parent);
+                     }
+                   }
+                   w = w.parent;
+                 }
+                 return result;
                }
              });
 
@@ -1064,15 +1086,19 @@ dojo.declare("alfresco.xforms.Group",
                {
                  this.children = [];
                  dojo.html.removeClass(this.domNode, "xformsItem");
-                 this.showHeader = 
-                   (this.xformsNode.getAttribute("appearance") != "repeated" &&
-                    this.xformsNode.getAttribute(alfresco_xforms_constants.XFORMS_PREFIX + ":appearance") != "repeated");
                },
 
                /////////////////////////////////////////////////////////////////
                // methods & properties
                /////////////////////////////////////////////////////////////////
 
+               /** Returns the value of the appearance attribute for widget */
+               getAppearance: function()
+               {
+                 return (this.xformsNode.getAttribute("appearance") ||
+                         this.xformsNode.getAttribute(alfresco_xforms_constants.XFORMS_PREFIX + ":appearance"));
+               },
+
                /** Returns the child at the specified index or null if the index is out of range. */
                getChildAt: function(index)
                {     
@@ -1116,6 +1142,12 @@ dojo.declare("alfresco.xforms.Group",
                    child.domContainer.style.top = this.parent.domNode.style.bottom;
                  }
          
+                 if (!this.domNode.childContainerNode.parentNode)
+                 {
+                   // only add this to the dom once we're adding a child
+                   this.domNode.appendChild(this.domNode.childContainerNode);
+                 }
+
                  if (position == this.children.length)
                  {
                    this.domNode.childContainerNode.appendChild(child.domContainer);
@@ -1128,15 +1160,20 @@ dojo.declare("alfresco.xforms.Group",
                    this.children.splice(position, 0, child);
                  }
 
+                 var labelDiv = null;
                  if (!(child instanceof alfresco.xforms.Group))
                  {
+                   var labelDiv = document.createElement("div");
+                   labelDiv.style.position = "relative";
+                   child.domContainer.appendChild(labelDiv);
+
                    var requiredImage = document.createElement("img");
                    requiredImage.setAttribute("src", 
                                               alfresco_xforms_constants.WEBAPP_CONTEXT + "/images/icons/required_field.gif");
                    requiredImage.style.verticalAlign = "middle";
                    requiredImage.style.marginLeft = "5px";
                    requiredImage.style.marginRight = "5px";
-                   child.domContainer.appendChild(requiredImage);
+                   labelDiv.appendChild(requiredImage);
             
                    if (!child.isRequired())
                    {
@@ -1147,7 +1184,7 @@ dojo.declare("alfresco.xforms.Group",
                    {
                      child.labelNode = document.createElement("span");
                      child.labelNode.style.verticalAlign = "middle";
-                     child.domContainer.appendChild(child.labelNode);
+                     labelDiv.appendChild(child.labelNode);
                      child.labelNode.appendChild(document.createTextNode(label));
                    }
                  }
@@ -1161,21 +1198,29 @@ dojo.declare("alfresco.xforms.Group",
                  contentDiv.style.left = (child instanceof alfresco.xforms.Group 
                                           ? "0px" 
                                           : "30%");
-                 if (!(child instanceof alfresco.xforms.Group))
+
-                 {
+                 contentDiv.style.width = (child instanceof alfresco.xforms.Group
-                   contentDiv.style.width = (1 - (contentDiv.offsetLeft / 
+                                           ? "100%"
-                                                  child.domContainer.offsetWidth)) * 100 + "%";
+                                           : (1 - (contentDiv.offsetLeft / 
-                 }
+                                                   child.domContainer.offsetWidth)) * 100 + "%");
                  child.render(contentDiv);
                  if (!(child instanceof alfresco.xforms.Group))
                  {
-                   child.domContainer.style.height = Math.max(contentDiv.offsetHeight + dojo.style.getMarginHeight(contentDiv), 20) + "px";
+                   child.domContainer.style.height = 
-                   child.domContainer.style.lineHeight = child.domContainer.style.height;
+                     Math.max(contentDiv.offsetHeight + 
+                              dojo.style.getMarginHeight(contentDiv), 20) + "px";
+//                   child.domContainer.style.lineHeight = child.domContainer.style.height;
                  }
 
                  dojo.debug(contentDiv.getAttribute("id") + " offsetTop is " + contentDiv.offsetTop);
 //                 alert(contentDiv.offsetTop - dojo.style.getPixelValue(contentDiv, "margin-top"));
-                 contentDiv.style.top = "-" + Math.max(0, contentDiv.offsetTop - dojo.style.getPixelValue(contentDiv, "margin-top")) + "px";
+                 contentDiv.style.top = "-" + Math.max(0, contentDiv.offsetTop - 
+                                                       dojo.style.getPixelValue(contentDiv, "margin-top")) + "px";
+                 if (labelDiv)
+                 {
+                   labelDiv.style.top = (contentDiv.offsetTop + ((.5 * contentDiv.offsetHeight) -
+                                                                 (.5 * labelDiv.offsetHeight))) + "px";
+                 }
                  contentDiv.widget = child;
 
                  this._updateDisplay();
@@ -1260,9 +1305,6 @@ dojo.declare("alfresco.xforms.Group",
                render: function(attach_point)
                {
                  this.domNode.widget = this;
-                 attach_point.appendChild(this.domNode);
-                 dojo.html.setClass(this.domNode, "xformsGroup");
-
                  if (false && djConfig.isDebug)
                  {
                    var idNode = document.createElement("div");
@@ -1271,12 +1313,28 @@ dojo.declare("alfresco.xforms.Group",
                    this.domNode.appendChild(idNode);
                  }
 
-                 this.showHeader = this.showHeader && this.parent != null;
+                 if (this.getAppearance() == "full")
+                 {
+                   dojo.html.setClass(this.domNode, "xformsGroup");
+                   this.domNode.style.position = "relative";
+                   this.domNode.style.marginLeft = (10) + "px";
+                   this.domNode.style.marginRight = (parseInt(this.domNode.style.marginLeft) / 3) + "px";
+                   if (dojo.render.html.ie)
+                   {
+                     this.domNode.style.width = "100%";
+                   }
+                   else
+                   {
+                     this.domNode.style.width = (1 - ((dojo.style.getBorderWidth(this.domNode) +
+                                                       dojo.style.getPaddingWidth(this.domNode) +
+                                                       dojo.style.getMarginWidth(this.domNode)) /
+                                                      attach_point.offsetWidth)) * 100 + "%";
+                   }
+
                    this.groupHeaderNode = document.createElement("div");
                    this.groupHeaderNode.id = this.id + "-groupHeaderNode";
-                 this.domNode.appendChild(this.groupHeaderNode);
                    dojo.html.setClass(this.groupHeaderNode, "xformsGroupHeader");
-                 this.groupHeaderNode.style.display = this.showHeader ? "block" : "none";
+                   this.domNode.appendChild(this.groupHeaderNode);
 
                    this.toggleExpandedImage = document.createElement("img");
                    this.groupHeaderNode.appendChild(this.toggleExpandedImage);
@@ -1291,11 +1349,14 @@ dojo.declare("alfresco.xforms.Group",
                                       this._toggleExpanded_clickHandler);
                    
                    this.groupHeaderNode.appendChild(document.createTextNode(this.getLabel()));
+                 }
+                 attach_point.appendChild(this.domNode);
 
                  this.domNode.childContainerNode = document.createElement("div");
                  this.domNode.childContainerNode.setAttribute("id", this.id + "-childContainerNode");
-                 this.domNode.appendChild(this.domNode.childContainerNode);
+                 this.domNode.childContainerNode.style.position = "relative";
                  this.domNode.childContainerNode.style.width = "100%";
+
                  return this.domNode;
                },
 
@@ -1374,7 +1435,6 @@ dojo.declare("alfresco.xforms.Repeat",
              {
                initializer: function(xform, xformsNode) 
                {
-                 this.showHeader = true;
                  this.repeatControls = [];
                  this._selectedIndex = -1;
                },
@@ -1526,13 +1586,14 @@ dojo.declare("alfresco.xforms.Repeat",
                  var removeEnabled = this.isRemoveRepeatItemEnabled();
                  for (var i = 0; i < this.repeatControls.length; i++)
                  {
-                   this.repeatControls[i].moveRepeatItemUpImage.style.opacity = i == 0 ? .3 : 1;
+                   dojo.style.setOpacity(this.repeatControls[i].moveRepeatItemUpImage,
-                   this.repeatControls[i].moveRepeatItemDownImage.style.opacity = 
+                                         i == 0 ? .3 : 1);
-                     (i == this.repeatControls.length - 1 ? .3 : 1);
+                   dojo.style.setOpacity(this.repeatControls[i].moveRepeatItemDownImage, 
-                   this.repeatControls[i].insertRepeatItemImage.style.opacity = 
+                                         i == this.repeatControls.length - 1 ? .3 : 1);
-                     (insertEnabled ? 1 : .3);
+                   dojo.style.setOpacity(this.repeatControls[i].insertRepeatItemImage,
-                   this.repeatControls[i].removeRepeatItemImage.style.opacity = 
+                                         insertEnabled ? 1 : .3);
-                     (removeEnabled ? 1 : .3);
+                   dojo.style.setOpacity(this.repeatControls[i].removeRepeatItemImage,
+                                         removeEnabled ? 1 : .3);
                  }
                },
 
@@ -1632,7 +1693,7 @@ dojo.declare("alfresco.xforms.Repeat",
                /** Disables insert before. */
                _childAdded: function(child)
                {
-                 this.headerInsertRepeatItemImage.style.opacity = .3;
+                 dojo.style.setOpacity(this.headerInsertRepeatItemImage, .3);
                  this._updateRepeatControls();
                },
 
@@ -1641,7 +1702,7 @@ dojo.declare("alfresco.xforms.Repeat",
                {
                  if (this.children.length == 0)
                  {
-                   this.headerInsertRepeatItemImage.style.opacity = 1;
+                   dojo.style.setOpacity(this.headerInsertRepeatItemImage, 1);
                  }
                  this._updateRepeatControls();
                },
@@ -1651,20 +1712,17 @@ dojo.declare("alfresco.xforms.Repeat",
                  this.domNode = this.inherited("render", [ attach_point ]);
                  dojo.html.addClass(this.domNode, "xformsRepeat");
 
-                 var parentRepeats = this.getRepeatIndices();
+                 // clear the border bottom for the group header since we'll be getting it
-                 this.domNode.style.marginLeft = (parentRepeats.length * 10) + "px";
+                 // from the repeat item border
-                 this.domNode.style.marginRight = (parseInt(this.domNode.style.marginLeft) / 2) + "px";
+                 this.groupHeaderNode.style.borderBottomWidth = "0px";
-                 this.domNode.style.width = (1 - ((dojo.style.getBorderWidth(this.domNode) +
-                                                   dojo.style.getPaddingWidth(this.domNode) +
-                                                   dojo.style.getMarginWidth(this.domNode)) /
-                                                  this.domNode.offsetParent.offsetWidth)) * 100 + "%";
 
-                 this.groupHeaderNode.style.display = "block";
                  this.groupHeaderNode.repeat = this;
                  dojo.event.connect(this.groupHeaderNode, "onclick", function(event)
                                     {
                                       if (event.target == event.currentTarget)
+                                      {
                                         event.currentTarget.repeat.setFocusedChild(null);
+                                      }
                                     });
                
                  this.headerInsertRepeatItemImage = document.createElement("img"); 
@@ -3141,7 +3199,7 @@ _showPicker: function(data)
 
   var navigateToParentNodeImage = d.createElement("img");
   navigateToParentNodeImage.style.borderWidth = "0px";
-  navigateToParentNodeImage.style.opacity =  (currentPathName == "/" ? .3 : 1);
+  dojo.style.setOpacity(navigateToParentNodeImage, (currentPathName == "/" ? .3 : 1));
   navigateToParentNodeImage.style.margin = "0px 2px 0px 2px";
   navigateToParentNodeImage.align = "absmiddle";
   navigateToParentNodeImage.setAttribute("src", alfresco_xforms_constants.WEBAPP_CONTEXT + "/images/icons/up.gif");