sproutcore 1.6.0.beta.3-java → 1.6.0-java

data/lib/frameworks/sproutcore/frameworks/experimental/frameworks/forms/tests/views/form_row.js

@@ -5,13 +5,93 @@
 // ==========================================================================
 
 /*globals Forms module test ok equals same stop start */
+var pane = SC.Pane.create();
+module("Forms - Form Row", {
+  setup: function() {
+    pane.append();
+  },
 
-module("Forms.FormRowView");
+  teardown: function() {
+    pane.remove();
+  }
+});
+
+// - binds content
+// - sets contentValueKey, respecting _singleField
+
+test("Binds content to child views", function() {
+  SC.RunLoop.begin();
+  var test = SC.FormRowView.create({
+    childViews: 'a b'.w(),
+    a: SC.View.create(),
+    b: SC.View.create({ content: "HI" })
+  });
+  var content = SC.Object.create();
+  test.set('content', content);
+  SC.RunLoop.end();
+
+  equals(test.a.get('content'), content, "Content was set on view without content");
+  equals(test.b.get('content'), "HI", "Content stayed the same on view with content");
+});
+
+test("Sets contentValueKey on children", function() {
+  SC.RunLoop.begin();
+  var test = SC.FormRowView.create({
+    childViews: 'a b'.w(),
+    a: SC.View.create(),
+    b: SC.View.create({ contentValueKey: "HI" })
+  });
+  SC.RunLoop.end();
+
+  equals(test.a.get('contentValueKey'), 'a', "contentValueKey was set on the view without one");
+  equals(test.b.get('contentValueKey'), "HI", "contentValueKey was not set on view with one");
+});
+
+test("Sets contentValueKey to own key for _singleField", function() {
+  SC.RunLoop.begin();
+  var test = SC.FormRowView.create({
+    formKey: "theFormKey",
+    childViews: '_singleField'.w(),
+    _singleField: SC.View.create()
+  });
+  SC.RunLoop.end();
 
-// TODO: Replace with real unit test for Forms.FormRowView
-test("test description", function() {
-  var expected = "test";
-  var result   = "test";
-  equals(result, expected, "test should equal test");
+  equals(test._singleField.get('contentValueKey'), 'theFormKey', "contentValueKey is set to row's formKey if the view is a _singleField");
 });
 
+test("Measuring label width", function() {
+  SC.RunLoop.begin();
+  var row = SC.FormRowView.create({
+    label: "Hi"
+  });
+  pane.appendChild(row);
+  SC.RunLoop.end();
+
+  var size = row.get('rowLabelMeasuredSize');
+  ok(size > 0, "Size should not be 0");
+
+  SC.RunLoop.begin();
+  row.set('label', "Hiyo!");
+  SC.RunLoop.end();
+
+  var newSize = row.get('rowLabelMeasuredSize');
+  ok(newSize > size, "Size grew when label text did");
+});
+
+test("Creating Form Rows", function() {
+  var ret = SC.FormRowView.row("the label", SC.View.extend({
+    aProperty: YES
+  }), { extendedRow: YES });
+  
+  ret = SC.FormRowView.create(ret);
+
+  equals(ret.extendedRow, YES, "Row was extended");
+  equals(ret._singleField.get('aProperty'), YES, "Property was defined on field");
+  equals(ret.get('label'), "the label");
+
+  ret = SC.FormRowView.row(SC.View.extend({ aProperty: YES }), { extendedRow: YES });
+  ret = SC.FormRowView.create(ret);
+
+  equals(ret.extendedRow, YES, "Row was extended");
+  equals(ret._singleField.get('aProperty'), YES, "Property was defined on field");
+});

data/lib/frameworks/sproutcore/frameworks/experimental/frameworks/forms/views/form.js

@@ -4,122 +4,99 @@
 //            Portions ©2008-2011 Apple Inc. All rights reserved.
 // License:   Licensed under MIT license (see license.js)
 // ==========================================================================
-
 /*globals Forms */
 
-/** @class
-FormView
-FormView is a lot like a normal view. However, in addition to the childViews
-collection, it has a fields collection. The items referenced here are NOT
-just children; they are explicity stated in the array fields, which works
-just like childViews, but marks fields to be laid out automatically.
-
-Usually, you will place rows into the FormView:
-
-    childViews: "fullName gender".w(),
-    contentBinding: 'MyApp.personController',
-
-    fullName: SC.FormView.row("Name:", SC.TextFieldView.extend({
-      layout: {height: 20, width: 150}
-    })),
+sc_require("mixins/emptiness");
+sc_require("mixins/edit_mode");
+sc_require("views/form_row");
 
-    gender: SC.FormView.row("Gender:", SC.RadioView.design({
-      layout: {width: 150, height: 40, centerY: 0},
-      items: ["male", "female"]
-    }))
+/** 
+  @class
+  FormView lays out rows, manages their label widths, binds their
+  content properties, and sets up their contentValueKeys as needed.
 
-The name of the row (ie. 'fullName'), is passed down to the *FieldView, and used as the key
-to bind the value property to the content. In this case it will bind content.fullName to the
-value property of the textFieldView. Easy!
+  Usually, you will place rows into the FormView:
+  
+      childViews: "fullName gender".w(),
+      contentBinding: 'MyApp.personController',
 
-One important thing about the field collection: It can contain any type of
-view, including other FormViews or subclasses of FormView.
+      fullName: SC.FormView.row("Name:", SC.TextFieldView.extend({
+        layout: {height: 20, width: 150}
+      })),
 
-This is important, because this is how you make nice rows that have a
-label and a field: these rows are actually subclasses of FormView itself.
+      gender: SC.FormView.row("Gender:", SC.RadioView.design({
+        layout: {width: 150, height: 40, centerY: 0},
+        items: ["male", "female"]
+      }))
 
-## Editing
-The form does not allow editing by default; editing must be started by calling
-beginEditing.
+  The name of the row (ie. 'fullName'), is passed down to the fields, and used as the key
+  to bind the value property to the content. In this case it will bind content.fullName to the
+  value property of the textFieldView.
 
 
-@extends SC.View
-@implements SC.Editable
+  @extends SC.View
+  @implements SC.FlowedLayout, SC.CalculatesEmptiness, SC.FormsEditMode
 */
 
-sc_require("mixins/emptiness");
-sc_require("mixins/edit_mode");
-sc_require("views/form_row");
-
 SC.FormView = SC.View.extend(SC.FlowedLayout, SC.CalculatesEmptiness, SC.FormsEditMode, /** @scope SC.FormView.prototype */ {
+  // We lay out forms vertically. Each item gets its own "row". Wrapping makes
+  // no sense, as the FormView should grow with each row.
   layoutDirection: SC.LAYOUT_VERTICAL,
   canWrap: NO,
-  
-  renderDelegateName: 'formRenderDelegate',
-  
-  formFlowSpacing: undefined,
-  formFlowSpacingDefault: { left: 5, top: 5, bottom: 5, right: 5 },
-  
-  defaultFlowSpacing: function() {
-    return this.getThemedProperty('formFlowSpacing', 'FORM_FLOW_SPACING');
-  }.property('formFlowSpacing', 'theme'),
-  
-  classNames: ["sc-form-view"],
 
-  /**
-  Whether to automatically start editing.
-  */
-  editsByDefault: YES,
+  renderDelegateName: 'formRenderDelegate',
 
   /**
-  The input key view (to set previousKeyView for the first row, field, or sub-form).
+    The default padding around items in the form. By default, this comes from the theme.
+    You can supply your own directly, or override the formRenderDelegate:
 
-  For fields, this will likely be the field itself.
+        // base it on the existing render delegate
+        MyTheme.formRenderDelegate = SC.AceTheme.formRenderDelegate.create({
+          flowSpacing: { left: 5, top: 5, right: 5, bottom: 5 }
+        });
   */
-  firstKeyView: null,
+  defaultFlowSpacing: SC.propertyFromRenderDelegate('flowSpacing', {}),
+
+  classNames: ["sc-form-view"],
 
   /**
-  The output key view.
+    Whether to automatically start editing.
   */
-  lastKeyView: null,
+  editsByDefault: YES,
 
   /**
-  The content to bind the form to. This content object is passed to all children.
+    The content to bind the form to. This content object is passed to all children.
   
-  All child views, if added at design time via string-based childViews array, will get their
-  contentValueKey set to their string. Note that SC.RowView passes on its contentValueKey to its
-  child field if it doesn't have its own, and if its isNested property is YES, uses it to find its
-  own content object.
+    All child views, if added at design time via string-based childViews array, will get their
+    contentValueKey set to their own key. Note that SC.RowView passes on its contentValueKey to its
+    child field, and if its isNested property is YES, uses it to find its own content object.
   */
   content: null,
   
   /**
-    Rows in the form do not have to be full objects at load time. They can also be simple hashes
-    which are then passed to exampleRow.extend.
+    Rows in the form do not have to be full SC.FormRowView at design time. They can also be hashes
+    that get loaded into rows.
   */
   exampleRow: SC.FormRowView.extend({
     labelView: SC.FormRowView.LabelView.extend({ textAlign: SC.ALIGN_RIGHT })
   }),
 
   /**
-  Init function.
+     @private
   */
-  init: function()
-  {
+  init: function() {
     if (this.get("editsByDefault")) this.set("isEditing", YES);
     sc_super();
   },
 
   /**
-  Calls _updateFields to load the fields.
   */
-  createChildViews: function()
-  {
-    // keep array of keys so we can pass on key to child.
+  createChildViews: function() {
     var cv = SC.clone(this.get("childViews"));
     var idx, len = cv.length, key, v, exampleRow = this.get("exampleRow");
-    
-    // preprocess to handle templated rows (rows that use exampleRow to initialize)
+
+    // rows that are provided as plain hashes need to be created by passing them into
+    // exampleRow.extend.
     for (idx = 0; idx < len; idx++) {
       key = cv[idx];
       if (SC.typeOf(key) === SC.T_STRING) {
@@ -129,56 +106,54 @@ SC.FormView = SC.View.extend(SC.FlowedLayout, SC.CalculatesEmptiness, SC.FormsEd
         }
       }
     }
-    
-    // We need to add in contentValueKey before we call sc_super
-    for (idx = 0; idx < len; idx++) {
-      key = cv[idx];
-      if (SC.typeOf(key) === SC.T_STRING) {
-        v = this.get(key);
-        if (v.isClass && v.prototype.hasContentValueSupport && !v.prototype.contentValueKey && v.prototype.isFormRow) {
-          v.prototype.contentValueKey = key ;
-        } else {
-          v.prototype.formKey = key;
-        }
-      }
-    }
-    
-    // get content for further ops
+
+    // we will be initializing the 'content' property for all child views
     var content = this.get("content");
     sc_super();
-    
-    // now, do the actual passing it
+
     for (idx = 0; idx < len; idx++) {
       key = cv[idx];
-      
+
       // if the view was originally declared as a string, then we have something to give it
       if (SC.typeOf(key) === SC.T_STRING) {
         // try to get the actual view
         v = this.get(key);
-        
-        // see if it does indeed exist, and if it doesn't have a value already
-        if (v && !v.isClass && v.isFormRow) {
-          // set content
+
+        if (v && !v.isClass) {
+          // we used to set contentValueKey on applicable children, but given that was too
+          // implicit: any LabelView child of the form view would get the contentValueKey.
+          // 
+          // instead, we give ALL views a formKey for their convenience; if they want to
+          // use contentValue support they should do so directly.
+          v.set('formKey', key);
+
+          // We used to try to be clever and bind child views' 'content' to 
+          // individual properties if the views didn't have content value support.
+          // For instance, a plain view named 'myView' would get bound to content.myView.
+          //
+          // Cleverness is evil, so, we have dropped this. Instead, we always bind content,
+          // and always do so directly.
           if (!v.get("content")) {
-            
-            // controls can calculate their own value based on the contentValueKey we set earlier
-            if (v.get('hasContentValueSupport')) v.bind('content', '.owner.content');
-            // if it isn't a control then we can't use contentValueKey, so bind the content manually
-            else v.bind('content', '.owner.content.' + key);
+            v.bind('content', this, 'content');
           }
-          
-          // set the label size measuring stuff
-          if (this.get('labelWidth') !== null) v.set("shouldMeasureLabel", NO);
-          
-          // set label (if possible)
-          if (v.get("isFormRow") && SC.none(v.get("label"))) {
-            v.set("label", key.humanize().titleize());
+
+          // for form rows, set up label measuring and the label itself.
+          if (v.isFormRow) {
+            // set label (if possible).
+            if (SC.none(v.get('label'))) {
+                v.set("label", key.humanize().titleize());
+            }
+
+            // set the label size measuring stuff
+            if (this.get('labelWidth') !== null) {
+              v.set("shouldMeasureLabel", NO);
+            }
           }
+
         }
       }
     }
-    
-    // our internal bookeeping to prevent .
+
     this._hasCreatedRows = YES;
     this.recalculateLabelWidth();
   },
@@ -190,10 +165,18 @@ SC.FormView = SC.View.extend(SC.FlowedLayout, SC.CalculatesEmptiness, SC.FormsEd
   isRowDelegate: YES,
   
   /**
-    The manually specified label width (null to automatically calculate, which is the default).
+    Supply a label width to avoid automatically calculating the widths of the labels
+    in the form. Leave null to let SproutCore automatically determine the proper width
+    for the label.
+
+    @type Number
+    @default null
   */
   labelWidth: null,
   
+  /**
+    Tells the child rows whether they should measure their labels or not.
+  */
   labelWidthDidChange: function() {
     var childViews = this.get('childViews'), i, len = childViews.length,
     shouldMeasure = SC.none(this.get('labelWidth'));
@@ -206,14 +189,17 @@ SC.FormView = SC.View.extend(SC.FlowedLayout, SC.CalculatesEmptiness, SC.FormsEd
   }.observes('labelWidth'),
   
   /**
-    Calculates the current label width (if labelWidth is not null, it sets using the label width)
+    Propagates the label width to the child rows, finding the measured size if necessary.
   */
   recalculateLabelWidth: function() {
-    if (!this._hasCreatedRows) return;
+    if (!this._hasCreatedRows) {
+      return;
+    }
     
     var ret = this.get("labelWidth"), children = this.get("childViews"), idx, len = children.length, child;
     
-    // calculate by looping through child views and getting size (if possible)
+    // calculate by looping through child views and getting size (if possible and if
+    // no label width is explicitly set)
     if (ret === null) {
       ret = 0;
       for (idx = 0; idx < len; idx++) {
@@ -267,19 +253,5 @@ SC.mixin(SC.FormView, {
   row: function(optionalClass, properties, rowExt)
   {
     return SC.FormRowView.row(optionalClass, properties, rowExt);
-  },
-
-  /**
-  Creates a field.
-
-  Behind the scenes, this wraps the fieldClass in a FormFieldView—usually a
-  specialized variant of FormFieldView meant specifically to wrap that class.
-
-  You can add your own special variants of FormFieldView if you want to expose
-  special features of your own view by calling FormFieldView.registerWrapper.
-  */
-  field: function(fieldClass, properties)
-  {
-    return SC.FormFieldView.field(fieldClass, properties);
   }
 });

data/lib/frameworks/sproutcore/frameworks/experimental/frameworks/forms/views/form_row.js

@@ -8,95 +8,93 @@
 /*globals Forms */
 
 /** @class
-	Represents a single row in a form. Rows have label and any number of other child views.
+  Represents a single row in a form. Rows have label and any number of other child views.
 
-	
-	@extends SC.FormView
-	@author Alex Iskander
+  
+  @extends SC.FormView
+  @author Alex Iskander
 */
 sc_require("mixins/emptiness");
 sc_require("mixins/edit_mode");
 
 SC.FormRowView = SC.View.extend(SC.FlowedLayout, SC.CalculatesEmptiness, SC.FormsEditMode,
 /** @scope Forms.FormRowView.prototype */ {
+  classNames: ["sc-form-row-view"],
   renderDelegateName: 'formRowRenderDelegate',
-  
-  layout: {left: 0, width: 0, height: 0},
 
-  rowFlowSpacing: undefined,
-  rowFlowPadding: undefined,
-  
+  flowPadding: SC.propertyFromRenderDelegate('flowPadding'),
+  defaultFlowSpacing: SC.propertyFromRenderDelegate('flowSpacing'),
+
   fillWidth: YES,
+  layoutDirection: SC.LAYOUT_HORIZONTAL,
+
+  layout: {left: 0, width: 0, height: 0},
+
+  /**
+    Walks like a duck.
+  */
+  isFormRow: YES,
+
+  /**
+    A value set so that FormView knows to tell us about the row label size change.
+  */
+  hasRowLabel: YES,
+
   
-  defaultFlowSpacing: function() {
-    return this.getThemedProperty("rowFlowSpacing", 'FORM_ROW_FLOW_SPACING');
-  }.property("rowFlowSpacing", "theme"),
+  /**
+    The text to display next to the row. If undefined, SproutCore will try
+    to set it automatically to the key corresponding to this row in the FormView.
+  */
+  label: undefined,
   
-  flowPadding: function() {
-    return this.getThemedProperty("rowFlowPadding", 'FORM_ROW_FLOW_PADDING');
-  }.property("rowFlowPadding", "theme"),
+  /**
+    The actual size for the label, as assigned by the parent FormView.
+  */
+  rowLabelSize: 0,
   
-  classNames: ["sc-form-row-view"],
+  /**
+    The measured size of the label. The parent FormView may use this to
+    determine the proper rowLabelSize.
+  */
+  rowLabelMeasuredSize: 0,
   
   /**
-    Walks like a duck.
+    If NO, the label will not automatically measure itself. The parent
+    FormView normally manages this property for FormRowView.
+
+    Note that FormRowView never changes its own rowLabelSize: it only 
+    measures it. The measurement is placed into rowLabelMeasuredSize.
+
+    The FormView then sets the rowLabelSize, which is used to set the
+    width of the LabelView.
   */
-	isFormRow: YES,
-	
-	/**
-	  The label for the row (string label)
-	*/
-	label: "",
-	
-	/**
-	  The current size of the labels.
-	*/
-	rowLabelSize: 0,
-	
-	/**
-	  The current measured size of the label.
-	*/
-	rowLabelMeasuredSize: 0,
-	
-	/**
-	  If NO, the label will not automatically measure itself.
-	*/
-	shouldMeasureLabel: YES,
-	
-	/**
-	  A value set so that FormView knows to tell us about the row label size change.
-	*/
-	hasRowLabel: YES,
-	
-	/**
-	  The label view.
-	*/
-	labelView: null,
-	
-	/**
-	  Direction of the flow.
-	*/
-	layoutDirection: SC.LAYOUT_HORIZONTAL,
-	
+  shouldMeasureLabel: YES,
+
+  /**
+    The label view. The default is an SC.FormRowView.LabelView, which is
+    configured to handle resizing.
+  */
+  labelView: null, // NOTE: gets set at end of file.
+
   /**
-  Updates keys, content, etc. on fields. Also, handles our "special" field (only-one case)
+    Updates keys, content, etc. on fields. Also, handles our "special" field (only-one case)
   */
-  createChildViews: function()
-  {
+  createChildViews: function() {
     // keep array of keys so we can pass on key to child.
-    var cv = SC.clone(this.get("childViews"));
+    var cv = SC.clone(this.get('childViews'));
     
     // add label
     if (this.labelView.isClass) {
       this.labelView = this.createChildView(this.labelView, {
-        value: this.get("label")
+        value: this.get('label')
       });
-      this.labelView.addObserver("measuredSize", this, "labelSizeDidChange");
-      this.labelView.bind("shouldMeasureSize", this, "shouldMeasureLabel");
-      this.get("childViews").unshift(this.labelView);
+
+      this.labelView.addObserver('measuredSize', this, 'labelSizeDidChange');
+      this.labelView.bind('shouldMeasureSize', this, 'shouldMeasureLabel');
+      this.get('childViews').unshift(this.labelView);
     }
     
-    var content = this.get("content");
+    var content = this.get('content');
     
     sc_super();
     
@@ -110,27 +108,29 @@ SC.FormRowView = SC.View.extend(SC.FlowedLayout, SC.CalculatesEmptiness, SC.Form
       if (SC.typeOf(key) === SC.T_STRING) {
         // try to get the actual view
         v = this.get(key);
-        
+
         // see if it does indeed exist, and if it doesn't have a value already
         if (v && !v.isClass) {
-          if (!v.get("contentValueKey")) {
+          if (!v.get('contentValueKey')) {
             //
             // NOTE: WE HAVE A SPECIAL CASE
-            //       If this is the single field, pass through our contentValueKey
+            //       If this is the single field, pass through our formKey
+            //       Single-field rows are created by the SC.FormView.row helper.
             if (key === "_singleField")  {
-              v.set("contentValueKey", this.get("contentValueKey"));
+              v.set('contentValueKey', this.get('formKey'));
             } else {
-              v.set("contentValueKey", key);
+              v.set('contentValueKey', key);
             }
           }
-          if (!v.get("content")) {
-            v.bind('content', '.owner.content') ;
+
+          if (!v.get('content')) {
+            v.bind('content', this, 'content') ;
           }
         }
-        
+
       }
     }
-    
+
     this.rowLabelSizeDidChange();
   },
   
@@ -156,32 +156,31 @@ SC.FormRowView = SC.View.extend(SC.FlowedLayout, SC.CalculatesEmptiness, SC.Form
 });
 
 SC.FormRowView.mixin({
-	row: function(label, fieldType, ext)
-	{
-	  if (label.isClass) {
-	    ext = fieldType;
-	    fieldType = label;
-	    label = null;
-	  }
-		// now, create a hash (will be used by the parent form's exampleRow)
-		if (!ext) {
-		  ext = {};
-	  } else {
-	    ext = SC.clone(ext);
-	  }
-		ext.label = label;
-		ext.childViews = ["_singleField"];
-		ext._singleField = fieldType;
-		return ext;
-	},
-	
-	LabelView: SC.LabelView.extend(SC.AutoResize, SC.CalculatesEmptiness, {
-	  shouldAutoResize: NO, // only change the measuredSize so we can update.
-	  layout: { left:0, top:0, width: 0, height: 18 },
-	  fillHeight: YES,
-	  classNames: ["sc-form-label"],
+  row: function(label, fieldType, ext) {
+    if (label.isClass) {
+      ext = fieldType;
+      fieldType = label;
+      label = null;
+    }
+    // now, create a hash (will be used by the parent form's exampleRow)
+    if (!ext) {
+      ext = {};
+    } else {
+      ext = SC.clone(ext);
+    }
+    ext.label = label;
+    ext.childViews = ["_singleField"];
+    ext._singleField = fieldType;
+    return ext;
+  },
+  
+  LabelView: SC.LabelView.extend(SC.AutoResize, SC.CalculatesEmptiness, {
+    shouldAutoResize: NO, // only change the measuredSize so we can update.
+    layout: { left:0, top:0, width: 0, height: 18 },
+    fillHeight: YES,
+    classNames: ["sc-form-label"],
     isValue: NO
-	})
+  })
 });
 
 SC.FormRowView.prototype.labelView = SC.FormRowView.LabelView.design();