sproutcore 0.9.0

data/frameworks/sproutcore/views/container.js

@@ -0,0 +1,62 @@
+// ========================================================================
+// SproutCore
+// copyright 2006-2007 Sprout Systems, Inc.
+// ========================================================================
+
+require('views/view') ;
+
+/** 
+  @class
+  
+  A container view will place the view of its content property inside
+  of itself as its only child.  You can override this with a custom
+  replaceContent() method if you want to do something different when the
+  content changes.
+  
+  @extends SC.View
+
+*/
+SC.ContainerView = SC.View.extend(
+  /** @scope SC.ContainerView.prototype */
+  {
+  
+  /** change this property value to replace the content of the container.
+      @type SC.View
+  */
+  content: null,
+  
+  /** @private */
+  contentBindingDefault: SC.Binding.Single,
+  
+  /** 
+    define an outlet named rootView to use that view as the container.
+    
+    Normally container view will set its own child views to the content you
+    set. Instead, you can set the rootView property to point to a child view 
+    of the container and the child views in that view will be changed instead.
+    
+    @type SC.View
+  */
+  rootView: null,
+
+  /**
+    Replaces any child views with the passed new content.  
+    
+    This method is automatically called whenever your content property 
+    changes.  You can override it if you want to provide some behavior other
+    than the default.
+    
+    @param {SC.View} newContent the new content view or null.
+  */
+  replaceContent: function(newContent) {
+    var containerView = this.get('rootView') || this ;
+    containerView.clear() ;
+    var newView = newContent ;
+    if (newView) containerView.appendChild(newView) ;
+  },
+  
+  _contentObserver: function() {
+    this.replaceContent(this.get('content'));
+  }.observes('content')
+  
+}) ;

data/frameworks/sproutcore/views/error_explanation.js

@@ -0,0 +1,45 @@
+// ========================================================================
+// SproutCore
+// copyright 2006-2007 Sprout Systems, Inc.
+// ========================================================================
+
+require('views/label');
+
+// The ErrorExplanation view is a special type of label view that can display
+// one or more errors related to a form or field.  This view will set itself
+// to visible only if it has errors.
+SC.ErrorExplanationView = SC.LabelView.extend({
+
+  emptyElement: '<ul class="errors"></ul>',
+  explanationTemplate: '<li>%@</li>',
+  
+  _errorsFor: function(errors) {
+    if (!errors || errors.length == 0) return [] ;
+    return errors.map(function(er) {
+      return ($type(er) == T_ERROR) ? er : null ;
+    }).compact() ;
+  },
+  
+  contentBindingDefault: SC.Binding.Multiple,
+  formatter: function(errors, view) {
+    errors = view._errorsFor(errors) ;
+    if (!errors || errors.length == 0) return '' ;
+    return errors.map(function(er) {
+      er = er.get('description') ; 
+      if (er.escapeHTML) er = er.escapeHTML() ;
+      return view.explanationTemplate.fmt(er); 
+    }).join("") ;
+  },
+  escapeHTML: false,
+  
+  _contentVisibleObserver: function() {
+    var errors = this._errorsFor(this.get('content')) ;
+    var isVisible = errors && errors.length > 0 ;
+    if (this.get('isVisible') != isVisible) this.set('isVisible',isVisible);
+  }.observes('content'),
+  
+  init: function() {
+    arguments.callee.base.apply(this,arguments) ;
+    this._contentVisibleObserver() ;
+  }
+});

data/frameworks/sproutcore/views/field.js

@@ -0,0 +1,214 @@
+// ========================================================================
+// SproutCore
+// copyright 2006-2007 Sprout Systems, Inc.
+// ========================================================================
+
+require('views/view') ;
+
+// This is the generic base class for input-type views such as text fields,
+// checkboxes, etc.  You can extend this for your own purposes as well.
+SC.FieldView = SC.View.extend({
+
+  // PUBLIC PROPERTIES
+  // You generally do not need to override these properties though you might
+  // change them....
+  
+  // this is the value of the field.  The form view will pick up whatever 
+  // value is published here.  Generally you do not need to override this 
+  // method.  Instead you should override setFieldValue(), getFieldValue()
+  // and the error property.
+  value: null,
+
+  // set to true to enable editing on the field. 
+  isEnabled: true,
+  
+  // points to the validator for this field.  Set to a validator class or
+  // instance.  If this points to a class, it will be instantiated when the
+  // validator is first used.
+  validator: null,
+
+  // this should be set to the name of the key you want to be published for
+  // the owner form.
+  fieldKey: null,
+  
+  // this should be set to the human readable label you want shown for errors.
+  // defaults to the value of fieldKey.
+  fieldLabel: null,
+  
+  // computed property returns the human readable label for this field for
+  // use in error strings.  This is either the fieldLabel or a humanized
+  // form of the fieldKey.
+  errorLabel: function() {
+    var ret = this.get('fieldLabel') ;
+    if (ret) return ret ;
+    
+    // if field label is not provided, compute something...
+    var fk = this.get('fieldKey') ;
+    var def = (fk || '').humanize().capitalize() ;  
+    return "FieldKey.%@".fmt(fk).locWithDefault(def) ; // localize if poss.
+  }.property('fieldLabel','fieldKey'),
+  
+  // computed property, true when error is null.
+  isValid: function() { 
+    return $type(this.get('value')) != T_ERROR; 
+  }.property('value'),
+
+  // this is the raw value of the field, ignoring validation.  You generally
+  // should not override this.  Instead override setFieldValue and
+  // getFieldValue.
+  fieldValue: function(key,value) {
+    if (value !== undefined) this._setFieldValue(value) ;
+    return this._getFieldValue() ;
+  }.property('value'),
+
+  // ACTIONS
+  // You generally do not need to override these but they may be used.
+
+  // This is called to perform validation on the field just before the form 
+  // is submitted.  If you have a validator attached, this will get the
+  // validators.
+  validateSubmit: function() {
+    var ret = true ;
+    var value ;
+    
+    if (this._validator) {
+      ret = this._validator.validateSubmit(this.get('ownerForm'),this) ;
+      value = ($type(ret) == T_ERROR) ? ret : this._getFieldValue() ;
+    } else value = this._getFieldValue() ;
+    
+    if (value != this.get('value')) this.set('value',value) ;
+    return ret ;
+  },
+  
+  // OVERRIDE IN YOUR SUBCLASS
+  // Override these primitives in your subclass as required.
+  
+  // the two primitives below can be overridden by subclasses to translate
+  // the FieldView value to an element value and visa-versa.
+  setFieldValue: function(newValue) {
+    if (this.rootElement.value != newValue) this.rootElement.value = newValue;
+  },
+  
+  getFieldValue: function() {
+    return this.rootElement.value;
+  },
+
+  // This method should be called by you subclass anytime you want the view to
+  // pick up the current value from the form and post it out. 
+  //
+  // partial (opt): default false.  If true, this will be validated as a
+  //                partial.  Otherwise validated as a change.
+  //
+  fieldValueDidChange: function(partialChange) {
+    var ret = true ;
+
+    if (this._validator) {
+      var form = this.get('ownerForm') ;
+      if (partialChange == true) {
+        ret = this._validator.validatePartial(form,this) ;
+
+        // if the partial returned NO_CHANGE, then check to see if the 
+        // field is valid anyway.  If it is not valid, then don't update the
+        // value.  This way the user can have partially constructed values 
+        // without the validator trying to convert it to an object.
+        if (ret == SC.Validator.NO_CHANGE) {
+          if (this._validator.validateChange(form, this) != SC.Validator.OK) {
+            return ret ; // EXIT POINT
+          }
+        }
+      } else {
+        ret = this._validator.validateChange(form, this) ;
+        
+      }
+    }
+
+    // get the field value and set it.
+    // if ret is an error, use that instead of the field value.
+    var value = ($type(ret) == T_ERROR) ? ret : this._getFieldValue() ;
+    if (value != this.get('value')) this.set('value',value) ;
+    
+    // if the validator says everything is OK, then in addition to posting
+    // out the value, go ahead and pass the value back through itself.
+    // This way if you have a formatter applied, it will reformat.
+    if (!partialChange && ($type(ret) != T_ERROR)) {
+      this._setFieldValue(value) ;
+    }
+    
+    return ret ;
+  },
+
+  // override to enable editing of this field.
+  enableField: function() {
+    Form.Element.enable(this.rootElement) ;
+  },
+
+  // override to disable editing of this field.
+  disableField: function() {
+    Form.Element.disable(this.rootElement) ;
+  },
+  
+
+  // PRIVATE SUPPORT METHODS
+  //
+  
+  init: function() {
+    arguments.callee.base.call(this) ;
+    this._validatorObserver() ;
+    this._enabledObserver() ;
+    if (this.rootElement) this._setFieldValue(this.get('value')) ;
+  },
+  
+  
+  // add a class name when the valid state changes.
+  _validObserver: function() {
+    this.setClassName('invalid',!this.get('isValid')) ;
+  }.observes('isValid'),
+  
+  // called whenever isEnabled changes.
+  _enabledObserver: function(target, key, isEnabled) {
+    isEnabled = this.get('isEnabled') ;
+    this.setClassName('disabled', !isEnabled) ;
+    (isEnabled) ? this.enableField() : this.disableField(); 
+  }.observes('isEnabled'),
+  
+  // called whenever the value is set on the object.  Will set the value
+  // on the field if the value is changed.
+  _valueObserver: function() {
+    var value = this.get('value') ;
+    var isError = $type(value) == T_ERROR ;
+    if (!isError && (value != this._getFieldValue())) {
+      this._setFieldValue(value) ;
+    } 
+  }.observes('value'),
+  
+  // invoked whenever the attached validator changes.
+  _validatorObserver: function() {
+    var form = this.get('ownerForm') ;
+    var val = SC.Validator.findFor(form, this, this.get('validator')) ;
+    if (val != this._validator) {
+      if (this._validator) this._validator.detachFrom(form, this) ;
+      this._validator = val;
+      if (this._validator) this._validator.attachTo(form, this) ;
+    }  
+  }.observes('validator', 'ownerForm'),
+  
+  // these methods use the validator to conver the raw field value returned
+  // by your subclass into an object and visa versa.
+  _setFieldValue: function(newValue) {
+    if (this._validator) {
+      newValue = this._validator.fieldValueForObject(newValue, this.get('ownerForm'), this) ;
+    }
+    return this.setFieldValue(newValue) ;
+  },
+  
+  _getFieldValue: function() {
+    var val = this.getFieldValue() ;
+    if (this._validator) {
+      val = this._validator.objectForFieldValue(val, this.get('ownerForm'), this) ;
+    }
+    return val ;
+  }
+  
+}) ;
+
+

data/frameworks/sproutcore/views/filter_button.js

@@ -0,0 +1,29 @@
+// ========================================================================
+// SproutCore
+// copyright 2006-2007 Sprout Systems, Inc.
+// ========================================================================
+
+require('views/button') ;
+
+// A filter button sets a filter property to whatever you specifiy.  It 
+// also binds to the same property and updates its isSelected state based
+// on that.
+SC.FilterButtonView = SC.ButtonView.extend({
+  
+  filterValue: null, // relay to this property.
+
+  filterOn: null, // when this filter toggle on, it will go to this.
+  filterOff: null, // when this filter toggles off, it goes to this.
+  
+  action: function() {
+    var val = this.get('filterValue') ;
+    val = (val == this.get('filterOn')) ? this.get('filterOff') : this.get('filterOn') ;
+    this.set('filterValue',val) ;  
+  },
+  
+  filterValueObserver: function() {
+    var sel = this.get('filterValue') == this.get('filterOn') ;
+    if (sel != this.get('isSelected')) this.set('isSelected',sel) ;
+  }.observes('filterValue')
+  
+});