- updating the all component test and moving it into the simple-test directory (trying to consildate the directory structure a bit).

- adding group headers for compound elements
- minor refactoring to groups and repeats.

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

source/test-resources/xforms/unit-tests/simple-test/components-test.xsd

@@ -0,0 +1,135 @@
+<?xml version="1.0"?>
+<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema"
+	   xmlns:alfresco="http://www.alfresco.org/alfresco"
+	   elementFormDefault="qualified">
+  <xs:simpleType name="five_string_values">
+    <xs:restriction base="xs:string">
+      <xs:enumeration value="one">
+	<xs:annotation>
+	  <xs:appinfo>
+	    <alfresco:label>1 - eno</alfresco:label>
+	  </xs:appinfo>
+	</xs:annotation>
+      </xs:enumeration>
+      <xs:enumeration value="two">
+	<xs:annotation>
+	  <xs:appinfo>
+	    <alfresco:label>2 - owt</alfresco:label>
+	  </xs:appinfo>
+	</xs:annotation>
+      </xs:enumeration>
+      <xs:enumeration value="three">
+	<xs:annotation>
+	  <xs:appinfo>
+	    <alfresco:label>3 - eerht</alfresco:label>
+	  </xs:appinfo>
+	</xs:annotation>
+      </xs:enumeration>
+      <xs:enumeration value="four">
+	<xs:annotation>
+	  <xs:appinfo>
+	    <alfresco:label>4 - ruof</alfresco:label>
+	  </xs:appinfo>
+	</xs:annotation>
+      </xs:enumeration>
+      <xs:enumeration value="five">
+	<xs:annotation>
+	  <xs:appinfo>
+	    <alfresco:label>5 - evif</alfresco:label>
+	  </xs:appinfo>
+	</xs:annotation>
+      </xs:enumeration>
+    </xs:restriction>
+  </xs:simpleType>
+  <xs:simpleType name="ten_string_values">
+    <xs:restriction base="xs:string">
+      <xs:enumeration value="one"/>
+      <xs:enumeration value="two"/>
+      <xs:enumeration value="three"/>
+      <xs:enumeration value="four"/>
+      <xs:enumeration value="five"/>
+      <xs:enumeration value="six"/>
+      <xs:enumeration value="seven"/>
+      <xs:enumeration value="eight"/>
+      <xs:enumeration value="nine"/>
+      <xs:enumeration value="ten"/>
+    </xs:restriction>
+  </xs:simpleType>
+  <xs:simpleType name="five_number_list">
+    <xs:list itemType="five_string_values"/>
+  </xs:simpleType>
+  <xs:simpleType name="ten_number_list">
+    <xs:list itemType="ten_string_values"/>
+  </xs:simpleType>
+  <xs:simpleType name="ten_number_list_select_three">
+    <xs:restriction base="ten_number_list">
+      <xs:length value="3"/>
+    </xs:restriction>
+  </xs:simpleType>
+  <xs:element name="text_components">
+    <xs:complexType>
+      <xs:sequence>
+	<xs:element name="required_textfield" type="xs:string" minOccurs="1" maxOccurs="1">
+	  <xs:annotation>
+	    <xs:appinfo>
+	      <alfresco:label>A Required String</alfresco:label>
+	      <alfresco:alert>Please enter a non zero length string</alfresco:alert>
+	    </xs:appinfo>
+	  </xs:annotation>
+	</xs:element>
+	<xs:element name="optional_textfield" type="xs:string" minOccurs="0" maxOccurs="1"/>
+	<xs:element name="prefilled_textfield" type="xs:string" minOccurs="0" maxOccurs="1" default="i am the default value"/>
+	<xs:element name="textarea" type="xs:anyType"/>
+      </xs:sequence>
+    </xs:complexType>
+  </xs:element>
+  <xs:element name="numerical_components">
+    <xs:complexType>
+      <xs:sequence>
+	<xs:element name="integer" type="xs:integer"/>
+	<xs:element name="positive_integer" type="xs:positiveInteger"/>
+	<xs:element name="double" type="xs:double"/>
+	<xs:element name="date" type="xs:date"/>
+      </xs:sequence>
+    </xs:complexType>
+  </xs:element>
+  <xs:element name="list_components">
+    <xs:complexType>
+      <xs:sequence>
+	<xs:element name="radio" type="five_string_values"/>
+	<xs:element name="combobox" type="ten_string_values"/>
+	<xs:element name="list_of_five" type="five_number_list"/>
+	<xs:element name="list_of_ten" type="ten_number_list"/>
+	<xs:element name="list_of_ten_select_three" type="ten_number_list_select_three">
+	  <xs:annotation>
+	    <xs:appinfo>
+	      <alfresco:label>10 select 3</alfresco:label>
+	      <alfresco:alert>Please select at least 3 items from the list.</alfresco:alert>
+	    </xs:appinfo>
+	  </xs:annotation>
+	</xs:element>
+      </xs:sequence>
+    </xs:complexType>
+  </xs:element>
+  <xs:element name="other_components">
+    <xs:complexType>
+      <xs:sequence>
+	<xs:element name="file" type="xs:anyURI"/>
+	<xs:element name="repeat" type="xs:string" minOccurs="1" maxOccurs="unbounded"/>
+	<xs:element name="checkbox_default_true" type="xs:boolean" default="true"/>
+	<xs:element name="checkbox_default_false" type="xs:boolean" default="false"/>
+	<xs:element name="checkbox_no_default" type="xs:boolean"/>
+      </xs:sequence>
+    </xs:complexType>
+  </xs:element>
+  <xs:element name="components_test">
+    <xs:complexType>
+      <xs:sequence>
+	<xs:element ref="text_components"/>
+	<xs:element ref="numerical_components"/>
+	<xs:element ref="list_components"/>
+	<xs:element ref="other_components"/>
+      </xs:sequence>
+    </xs:complexType>
+  </xs:element>
+</xs:schema>

source/test-resources/xforms/unit-tests/simple-test/components-test.xsl

@@ -0,0 +1,67 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<xsl:stylesheet version="1.0"
+    xmlns:xhtml="http://www.w3.org/1999/xhtml"
+    xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
+    exclude-result-prefixes="xhtml">
+
+    <xsl:output method="html" version="4.01" encoding="UTF-8" indent="yes"
+                doctype-public="-//W3C//DTD HTML 4.01 Transitional//EN"
+                doctype-system="http://www.w3.org/TR/html4/loose.dtd"/>
+    <xsl:preserve-space elements="*"/>
+
+    <xsl:template match="/">
+      <html>
+	<head>
+	  <style type="text/css">
+body
+{
+  font-family: Tahoma, Arial, Helvetica, sans-serif;
+  background-color: white;
+  font-size: 11px;
+}
+
+.name {
+  color: #003366;
+  font-weight: bold;
+  margin-right: 10px;
+}
+
+	  </style>
+	  <title>Component Test</title>
+	</head>
+	<body>
+        <xsl:apply-templates/>
+        </body>
+      </html>
+    </xsl:template>
+    <xsl:template match="/components_test/text_components/required_textfield">
+      <div style="line-height: 25px;"><span class="name">Required Textfield:</span> <xsl:value-of select="/components_test/text_components/required_textfield"/></div>
+    </xsl:template>
+    <xsl:template match="/components_test/text_components/optional_textfield">
+      <div style="line-height: 25px;"><span class="name">Optional Textfield:</span> <xsl:value-of select="/components_test/text_components/optional_textfield"/></div>
+    </xsl:template>
+    <xsl:template match="/components_test/text_components/textarea">
+      <div style="line-height: 25px;"><span class="name">TextArea:</span> <xsl:value-of select="/components_test/text_components/textarea"/></div>
+    </xsl:template>
+    <xsl:template match="/components_test/numerical_components/integer">
+      <div style="line-height: 25px;"><span class="name">Integer:</span> <xsl:value-of select="/components_test/numerical_components/integer"/></div>
+    </xsl:template>
+    <xsl:template match="/components_test/numerical_components/positive_integer">
+      <div style="line-height: 25px;"><span class="name">Positive Integer:</span> <xsl:value-of select="/components_test/numerical_components/positiveInteger"/></div>
+    </xsl:template>
+    <xsl:template match="/components_test/numerical_components/double">
+      <div style="line-height: 25px;"><span class="name">Double:</span> <xsl:value-of select="/components_test/numerical_components/double"/></div>
+    </xsl:template>
+    <xsl:template match="/components_test/numerical_components/date">
+      <div style="line-height: 25px;"><span class="name">Date:</span> <xsl:value-of select="/components_test/numerical_components/date"/></div>
+    </xsl:template>
+    <xsl:template match="/components_test/list_components/radio">
+      <div style="line-height: 25px;"><span class="name">Radio:</span> <xsl:value-of select="/components_test/list_components/radio"/></div>
+    </xsl:template>
+    <xsl:template match="/components_test/list_components/combobox">
+      <div style="line-height: 25px;"><span class="name">ComboBox:</span> <xsl:value-of select="/components_test/list_components/combobox"/></div>
+    </xsl:template>
+    <xsl:template match="/components_test/other_components/checkbox">
+      <div style="line-height: 25px;"><span class="name">CheckBox:</span> <xsl:value-of select="/components_test/other_components/checkbox"/></div>
+    </xsl:template>
+</xsl:stylesheet>

source/web/scripts/ajax/xforms.js

@@ -48,8 +48,6 @@ dojo.declare("alfresco.xforms.Widget",
                {
                  this.xform = xform;
                  this.xformsNode = xformsNode;
-                 //XXXarielb this has to come back
-                 //     this.node.widget = this;
                  this.id = this.xformsNode.getAttribute("id");
                  this.modified = false;
                  this.valid = true;
@@ -697,6 +695,20 @@ dojo.declare("alfresco.xforms.Group",
                  this.children = [];
                  this.domNode = document.createElement("div");
                  this.domNode.setAttribute("id", this.id + "-domNode");
+                 this.showHeader = false;
+                 this.domNode.addEventListener("childAdded", this._childAddedListener, false);
+                 this.domNode.addEventListener("childRemoved", this._childRemovedListener, false);
+               },
+               setShowHeader: function(showHeader)
+               {
+                 if (showHeader == this.showHeader)
+                   return;
+
+                 this.showHeader = showHeader;
+                 if (this.showHeader && this.groupHeaderNode.style.display == "none")
+                   this.groupHeaderNode.style.display = "block";
+                 if (!this.showHeader && this.groupHeaderNode.style.display == "block")
+                   this.groupHeaderNode.style.display = "none";
                },
                getWidgetsInvalidForSubmit: function()
                {
@@ -855,17 +867,38 @@ dojo.declare("alfresco.xforms.Group",
                  this.domNode.style.top = "0px";
                  this.domNode.style.left = "0px";
                  this.domNode.style.width = "100%";
+                 this.domNode.style.marginBottom = "10px";
                  if (djConfig.isDebug)
                  {
                    var idNode = document.createElement("div");
                    idNode.style.backgroundColor = "red";
-                   idNode.appendChild(document.createTextNode(this.id));
+                   idNode.appendChild(document.createTextNode(this.getLabel()));
                    this.domNode.appendChild(idNode);
                  }
 
                  this.groupHeaderNode = document.createElement("div");
                  this.groupHeaderNode.id = this.id + "-groupHeaderNode";
                  this.domNode.appendChild(this.groupHeaderNode);
+                 this.groupHeaderNode.style.position = "relative";
+                 this.groupHeaderNode.style.top = "0px";
+                 this.groupHeaderNode.style.left = "0px";
+                 this.groupHeaderNode.style.height = "20px";
+                 this.groupHeaderNode.style.lineHeight = "20px";
+                 this.groupHeaderNode.style.backgroundColor = "#cddbe8";
+                 this.groupHeaderNode.style.fontWeight = "bold";
+                 this.groupHeaderNode.style.width = "100%";
+                 this.groupHeaderNode.style.display = "none";
+
+                 this.toggleExpandedImage = document.createElement("img");
+                 this.groupHeaderNode.appendChild(this.toggleExpandedImage);
+                 this.toggleExpandedImage.setAttribute("src", EXPANDED_IMAGE.src);
+                 this.toggleExpandedImage.align = "absmiddle";
+                 this.toggleExpandedImage.style.marginLeft = "5px";
+                 this.toggleExpandedImage.style.marginRight = "5px";
+                 
+                 dojo.event.connect(this.toggleExpandedImage, "onclick", this, this._toggleExpanded_clickHandler);
+
+                 this.groupHeaderNode.appendChild(document.createTextNode(this.getLabel()));
 
                  this.domNode.childContainerNode = document.createElement("div");
                  this.domNode.childContainerNode.setAttribute("id", this.id + "-childContainerNode");
@@ -873,6 +906,21 @@ dojo.declare("alfresco.xforms.Group",
                  this.domNode.childContainerNode.style.width = "100%";
                  return this.domNode;
                },
+               isExpanded: function()
+               {
+                 return this.toggleExpandedImage.getAttribute("src") == EXPANDED_IMAGE.src;
+               },
+               setExpanded: function(expanded)
+               {
+                 if (expanded == this.isExpanded())
+                   return;
+                 this.toggleExpandedImage.src = expanded ? EXPANDED_IMAGE.src : COLLAPSED_IMAGE.src;
+                 this.domNode.childContainerNode.style.display = expanded ? "block" : "none";
+               },
+               _toggleExpanded_clickHandler: function(event)
+               {
+                 this.setExpanded(!this.isExpanded());
+               },
                _updateDisplay: function()
                {
                  for (var i = 0; i < this.children.length; i++)
@@ -893,6 +941,24 @@ dojo.declare("alfresco.xforms.Group",
                  {
                    this.children[i].hideAlert();
                  }
+               },
+               _childAddedListener: function(event)
+               {
+                 var hasNonGroupChildren = false;
+                 for (var i in this.widget.children)
+                 {
+                   if (!(this.widget.children[i] instanceof alfresco.xforms.Group))
+                   {
+                     hasNonGroupChildren = true;
+                     break;
+                   }
+                 }
+                 this.widget.setShowHeader(hasNonGroupChildren &&
+                                           this.widget.children.length != 1 &&
+                                           this.widget.parent != null);
+               },
+               _childRemovedListener: function(event)
+               {
                }
              });
 
@@ -901,11 +967,17 @@ dojo.declare("alfresco.xforms.Repeat",
              {
                initializer: function(xform, xformsNode) 
                {
-                 this.domNode.addEventListener("childAdded", this._childAddedListener, false);
+                 this.showHeader = true;
-                 this.domNode.addEventListener("childRemoved", this._childRemovedListener, false);
                  this.repeatControls = [];
                  this._selectedIndex = -1;
                },
+               getLabel: function()
+               {
+                 var label = this.parent.getLabel();
+                 if (djConfig.isDebug)
+                   label += " [" + this.id + "]";
+                 return label;
+               },
                isInsertRepeatItemEnabled: function()
                {
                  var maximum = this.xform.getBinding(this.xformsNode).maximum;
@@ -1150,37 +1222,14 @@ dojo.declare("alfresco.xforms.Repeat",
                                              parseInt(this.domNode.style.marginLeft) -
                                              parseInt(this.domNode.style.marginRight)) + "px";
 
+                 this.groupHeaderNode.style.display = "block";
                  this.groupHeaderNode.repeat = this;
-                 this.groupHeaderNode.style.position = "relative";
-                 this.groupHeaderNode.style.top = "0px";
-                 this.groupHeaderNode.style.left = "0px";
-                 this.groupHeaderNode.style.height = "20px";
-                 this.groupHeaderNode.style.lineHeight = "20px";
-                 this.groupHeaderNode.style.backgroundColor = "#cddbe8";
-                 this.groupHeaderNode.style.fontWeight = "bold";
-                 this.groupHeaderNode.style.width = "100%";
                  dojo.event.connect(this.groupHeaderNode, "onclick", function(event)
                                     {
                                       if (event.target == event.currentTarget)
                                         event.currentTarget.repeat.setFocusedChild(null);
                                     });
                
-                 //used only for positioning the label accurately
-                 this.toggleExpandedImage = document.createElement("img");
-                 this.groupHeaderNode.appendChild(this.toggleExpandedImage);
-                 this.toggleExpandedImage.setAttribute("src", EXPANDED_IMAGE.src);
-                 this.toggleExpandedImage.align = "absmiddle";
-                 this.toggleExpandedImage.style.marginLeft = "5px";
-                 this.toggleExpandedImage.style.marginRight = "5px";
-                 
-                 dojo.event.connect(this.toggleExpandedImage, "onclick", this, this._toggleExpanded_clickHandler);
-               
-                 var label = this.parent.getLabel()
-                   if (djConfig.isDebug)
-                     label += " [" + this.id + "]";
-                   
-                 this.groupHeaderNode.appendChild(document.createTextNode(label));
-           
                  this.headerInsertRepeatItemImage = document.createElement("img"); 
                  this.headerInsertRepeatItemImage.repeat = this;
                  this.groupHeaderNode.appendChild(this.headerInsertRepeatItemImage);
@@ -1189,7 +1238,6 @@ dojo.declare("alfresco.xforms.Repeat",
                  this.headerInsertRepeatItemImage.style.height = "16px";
                  this.headerInsertRepeatItemImage.align = "absmiddle";
                  this.headerInsertRepeatItemImage.style.marginLeft = "5px";
-//                 addElement.style.opacity = .2;
            
                  dojo.event.connect(this.headerInsertRepeatItemImage, 
                                     "onclick", 
@@ -1229,21 +1277,6 @@ dojo.declare("alfresco.xforms.Repeat",
                  dojo.debug(this.id + ".handleItemDeleted(" + position + ")");
                  this.removeChildAt(position);
                },
-               isExpanded: function()
-               {
-                 return this.toggleExpandedImage.getAttribute("src") == EXPANDED_IMAGE.src;
-               },
-               setExpanded: function(expanded)
-               {
-                 if (expanded == this.isExpanded())
-                   return;
-                 this.toggleExpandedImage.src = expanded ? EXPANDED_IMAGE.src : COLLAPSED_IMAGE.src;
-                 this.domNode.childContainerNode.style.display = expanded ? "block" : "none";
-               },
-               _toggleExpanded_clickHandler: function(event)
-               {
-                 this.setExpanded(!this.isExpanded());
-               },
                _updateRepeatControls: function()
                {
                  var insertEnabled = this.isInsertRepeatItemEnabled();