sproutcore 0.9.3 → 0.9.4

data/History.txt

@@ -1,5 +1,24 @@
 == SVN HEAD
 
+* [FIX] Build system now generates index.html files for client bundles, even 
+if they do not include .rhtml resources.
+
+* [FIX] Typos in the readme docs for the client generator.
+
+* Added automaticOutletFor() that will cause a view to be configured 
+automatically instead of forcing you to use an outlets array.  Useful for when
+you are manually constructing your views.
+
+* Initial changes required to eventually implement improved observer 
+notification system.
+
+* Improved documentation for a variety of classes
+
+* [FIX] Only fixtures ending in ".js" will now be loaded.  This allows you to include fixtures named .json or whatever and actually load them via XHR.
+
+* [FIX] The build system now ignored any rhtml files that does not appear in
+an lproj directory since this is where templates are stored.
+
 * Basic changes to get IE working.  All non-view tests now pass and the doc app and test runner both load and run in IE7.  Lots of visual fixes are still required for the sc-theme as well as IE-specific perf optimization and bug fixes.
 
 * [BUG] Default template for both client and template included a stray comma in their core.js file that breaks IE and Safari 2.  This is fixed in the templates and in the clients included with the framework, though you will need to make this change manually in your own apps.

data/Manifest.txt

@@ -39,10 +39,24 @@ clients/sc_test_runner/main.js
 clients/sc_test_runner/models/test.js
 clients/sc_test_runner/views/runner_frame.js
 clients/sc_test_runner/views/test_label.js
+clients/view_builder/builders/builder.js
+clients/view_builder/builders/button.js
+clients/view_builder/controllers/document.js
+clients/view_builder/core.js
+clients/view_builder/english.lproj/body.css
+clients/view_builder/english.lproj/body.rhtml
+clients/view_builder/english.lproj/controls.css
+clients/view_builder/english.lproj/strings.js
+clients/view_builder/main.js
+clients/view_builder/mixins/design_mode.js
+clients/view_builder/tests/controllers/document.rhtml
+clients/view_builder/tests/views/builder.rhtml
+clients/view_builder/tests/views/palette.rhtml
+clients/view_builder/views/builder.js
+clients/view_builder/views/palette.js
 config/hoe.rb
 config/requirements.rb
 frameworks/prototype/prototype.js
-frameworks/sproutcore/animation/animation.js
 frameworks/sproutcore/controllers/array.js
 frameworks/sproutcore/controllers/collection.js
 frameworks/sproutcore/controllers/controller.js

data/clients/view_builder/builders/builder.js

@@ -0,0 +1,339 @@
+// ==========================================================================
+// Basic View Builder
+// ==========================================================================
+
+/**
+  A Builder can generate HTML, JavaScript and CSS based on a set of input
+  attributes.  It expects to have the following attributes defined:
+  
+  - targetClass: The name of the output class for JavaScript purposes.
+  - name: the human readable name
+  - guid: an internally unique id used to identify the resource.
+  
+  - htmlTemplate: the html template to render.
+  - tagName: the tag name
+  - htmlId: ID used for tag
+  - cssClassNames: class names to add to tag.
+  - attributes: { src: "item" } -- HTML attrs to include.
+
+  - targetClass: name of output class.
+  - key: name of object when added to parent.
+  - properties: properties to place on JS object.
+  - bind: named bindings.  each binding is like: 
+     { to: path, kind: 'SC.Binding.Kind', isEnabled: YES }
+     
+  - children: Array of child view builder records, in order.  If any.
+  - parent: parent builder or null if top level.
+  - inPage: YES if should be added to SC.page.
+
+  You can add any other properties as well.  Use them when your callbacks are
+  invoked to enhance these properties before they are generated.
+*/
+SC.Builder = SC.Record.extend({
+
+  _targetClass: 'SC.Object',
+  
+  /**
+    Defined by subclasses.  If this is true, then the content of the view
+    is the HTML generated by children.
+  */
+  isContainer: NO,
+  
+  /**
+    Defined by subclasses.  If true, then views will be generated with an
+    outletFor() attached to them.
+  */
+  isOutletView: YES,
+  
+  childrenType: 'SC.Builder',
+  
+  parentType: 'SC.Builder',
+  
+  /**
+    The default profile.  New records will inherit a cloned set of these
+    attributes.
+  */
+  defaultAttributes: { 
+    propertySettings: {},
+    bindSettings: {},
+    attributeSettings: {},
+    htmlTemplate: '<{%TagName%}{%Attributes%}>{%Content%}</{%TagName%}>',
+    cssClassNames: [],
+    innerHtml: '',
+    lazyOutlet: NO
+  },
+
+  init: function() {
+    arguments.callee.base.apply(this) ;
+    if (this.get('newRecord')) {
+      var attrs = this._deepClone(this.get('defaultAttributes'));
+      attrs.name = attrs.targetClass = this._targetClass ;
+      attrs.guid = attrs.htmlId = 'id%@'.fmt(Date.now().toString());
+      this.updateAttributes(attrs, YES, YES);
+    } 
+  },
+
+  /**
+    Invoked just before the attributes are written out.  You can add anything
+    you want here.
+  */
+  prepareAttributes: function(attrs) {
+    return attrs ;
+  },
+  
+  /**
+    Invoked just before the class name is set.  Add anything you want here.
+  */
+  prepareClassNames: function(classNames) {
+    return classNames ;
+  },
+  
+  /**
+    Invoked just before outlets are added and the final JS is generated.  Add
+    anything here you might pull from specialized preferences.
+  */
+  prepareProperties: function(props) { return props; },
+
+  /**
+    Invoked just before bindings are blended into properties.  Add your own.
+  */
+  prepareBindings: function(binds) { return binds; },
+  
+  // ..........................................
+  // HTML RENDERING
+  //
+
+  /**
+    Computes the HTML for this builder.  HTML is built by interpolating the
+    htmlTemplate.  Any variables must match a corresponding property on the
+    record with 'html' added to the beginning.
+  */
+  htmlPart: function() {
+    var template = this.get('htmlTemplate') ;
+    if (!template) return null ;
+    
+    var that = this; 
+    return template.replace(/{%(.+?)%}/g,function(m,p) {
+        return (p[0] == '%') ? p.slice(1,p.length) : that.get('html' + p) ;
+    }) ;
+  }.property('htmlTemplate', 'htmlContent', 'htmlTagName', 'htmlAttributes'),
+  
+  /** 
+    The tag name for the HTML.  Usually specified by tagName in the
+    attributes.
+  */
+  htmlTagName: function() {
+    return this.get('tagName') || 'div';
+  }.property('tagName'),
+  
+  /**
+    The attributes for the HTML.  Combines attributes hash, css classes, 
+    and id.  It then calls prepareAttributes() so you can do any extra 
+    processing you need.
+  */
+  htmlAttributes: function() {
+    // start with attributeSettings.
+    var attrs = this._deepClone(this.get('attributeSettings')) || {} ;
+    
+    // add id
+    attrs.id = this.get('htmlId') ;
+
+    // merge in CSS class names
+    var cssClassNames = this.get('cssClassNames') || [] ;
+    if ($type(cssClassNames) === T_STRING) {
+      cssClassNames = cssClassNames.split(' ') ;
+    }
+    
+    var cur = attrs['class'] || [] ;
+    if ($type(cur) === T_STRING) {
+      cur = cur.split(' ') ;
+    }
+    
+    cur = cur.concat(cssClassNames).uniq().compact().sort() ;
+    cur.push(attrs.id) ;
+    cur = this.prepareClassNames(cur) || cur;
+    if (cur.length > 0) {
+      attrs['class'] = cur.join(' ') ;
+    } else delete attrs['class'] ;
+    
+    attrs = this.prepareAttributes(attrs) || attrs ;
+    
+    // now convert to a string.
+    var ret = [''];
+    for(var key in attrs) {
+      if (!attrs.hasOwnProperty(key)) continue ;
+      ret.push('%@="%@"'.fmt(key, attrs[key])) ;
+    }
+    
+    return (ret.length > 1) ? ret.join(' ') : '';
+  }.property('cssClassNames', 'attributeSettings', 'htmlId'),
+  
+  /**
+    The inner content for the HTML.  If isContainer is true, then we get
+    the children for this view and use their HTML, otherwise get the
+    innerHtml property.
+  */
+  htmlContent: function() {
+    if (this.get('isContainer')) {
+      var children = this.get('children') || [] ;
+      var ret = [];
+      for(var idx=0;idx<children.length;idx++) {
+        var child = children.objectAt(idx) ;
+        ret.push(child.get('htmlPart')) ;
+      }
+      
+      return ret.join('') ;
+    } else return this.get('innerHtml') ;
+  }.property('innerHtml', 'isContainer', 'children'),
+  
+  // ..........................................
+  // JAVASCRIPT RENDERING
+  //
+
+  /**
+    Generates the JavaScript for this part.
+    
+    This works by merging the propertySettings and bindSettings. Then it 
+    calls your prepareProperties and finally merges in any outlets.  With the
+    properties combined, it then generates the code to build a view.
+  */
+  javascriptPart: function() {
+    var props = this.get('javascriptProperties') ; 
+    
+    var outlets = this.get('javascriptOutlets') ;
+    for(var key in outlets) {
+      if (!outlets.hasOwnProperty(key)) continue ;
+      props[key] = outlets[key] ;
+    }
+    
+    var outletDeclaration = '' ;
+    var verb = 'create' ;
+    if (this.get('isOutletView')) {
+      verb = 'extend' ;
+      outletDeclaration = '.outletFor(".%@?")'.fmt(this.get('htmlId'));
+    }
+    
+    return '%@.%@(%@)%@'.fmt(this.get('targetClass'), verb, this._stringify(props), outletDeclaration) ;
+  }.property(),
+
+  /**
+    Generates the properties for the JavaScript sans any outlets.
+  */
+  javascriptProperties: function() {
+    var props = this._deepClone(this.get('propertySettings')) ;
+    props = this.prepareProperties(props) || props ;
+    
+    var binds = this._deepClone(this.get('bindSettings')) ;
+    binds = this.prepareBindings(binds) || binds ;
+    for(var key in binds) {
+      if (!binds.hasOwnProperty(key)) continue ;
+      
+      var bind = binds[key] ;
+      if (!bind.isEnabled) continue ;
+      bind = (bind.kind) ? "%@('%@')".fmt(bind.kind, bind.to) : "'%@'".fmt(bind.to) ;
+      props[key + 'Binding'] = bind ;
+    }
+    
+    return props ;
+  }.property(),
+  
+  /**
+    Generates the outlet properties for the JavaScript.
+  */
+  javascriptOutlets: function() {
+    var ret = {} ;
+    var outlets = [] ;
+    
+    // loop through children.
+    var children = this.get('children') || [];
+    var idx = children.length ;
+    if (idx <= 0) return {} ;
+    while(--idx >= 0) {
+      var child = children.objectAt(idx) ;
+      var outletName = child.get('outletName') ;
+      var js = child.get('javascriptPart') ;
+      ret[outletName] = js ;
+      if (!child.get('lazyOutlet')) outlets.push(outletName) ;
+    }
+    
+    ret.outlets = outletName ;
+    return ret ;
+  }.property(),
+  
+  outletName: function(key, value) {
+    if (value !== undefined) this.writeAttribute('outletName', value) ;
+    return this.readAttribute('outletName') || this.get('htmlId') ;
+  }.property(),
+  
+  // ..........................................
+  // INTERNAL METHODS
+  //
+
+  // deep clones a hash of properties.  expects only Hash, Array or 
+  // primitives.
+  _deepClone: function(obj) {
+    var ret = obj ;
+    
+    switch($type(obj)) {
+      case T_HASH:
+        ret = {} ;
+        for(var key in obj) {
+          if (!obj.hasOwnProperty(key)) continue ;
+          ret[key] = this._deepClone(obj[key]) ;
+        }
+        break ;
+      case T_ARRAY:
+        ret = [] ;
+        for(var idx=0;idx < obj.length; idx++) {
+          ret.push(this._deepClone(obj[idx])) ;
+        }
+        break ;
+    }
+    return ret ;
+  },
+  
+  // converts the input object into a eval-able string
+  _stringify: function(obj) {
+    var ret = obj ;
+    switch($type(obj)) {
+      case T_HASH: 
+        ret = [] ;
+        for(var key in obj) {
+          if (!obj.hasOwnProperty(key)) continue ;
+          ret.push([key, this._stringify(obj[key])].join(': ')) ;
+        }
+        ret = "{ %@ }".fmt(ret.join(",\n  ")) ;
+        break ;
+        
+      case T_ARRAY:
+        ret = [] ;
+        for(var idx=0; idx < obj.length; idx++) {
+          ret.push(this._stringify(obj[idx])) ;
+        }
+        ret = '[%@]'.fmt(ret.join(', ')) ;
+        break ;
+        
+      case T_NULL:
+        ret = 'null' ;
+        break ;
+        
+      // Strings can be either property paths or quoted strings.  They are
+      // quoted strings if they are in "quotes".  If they are strings they
+      // should be already quoted, etc.
+      case T_STRING:
+        ret = obj ;
+        break ;
+        
+      default:
+        ret = (obj.toString) ? obj.toString() : obj ;
+    }
+    return ret ;
+  }
+
+}) ;
+
+SC.Builder.newBuilder = function(attrs) {
+  if (!attrs) attrs = {} ;
+  attrs.newRecord = YES ;
+  return this.create(attrs) ;
+} ;

data/clients/view_builder/builders/button.js

@@ -0,0 +1,81 @@
+// ==========================================================================
+// Button View Builder
+// ==========================================================================
+
+require('builders/builder') ;
+
+/**
+*/
+SC.ButtonView.Builder = SC.Builder.extend({
+
+  _targetClass: 'SC.ButtonView',
+  
+  /**
+    Defined by subclasses.  If this is true, then the content of the view
+    is the HTML generated by children.
+  */
+  isContainer: NO,
+  
+  /**
+    Defined by subclasses.  If true, then views will be generated with an
+    outletFor() attached to them.
+  */
+  isOutletView: YES,
+  
+  /**
+    The default profile.  New records will inherit a cloned set of these
+    attributes.
+  */
+  defaultAttributes: { 
+    propertySettings: {},
+    bindSettings: {},
+    attributeSettings: {},
+    htmlTemplate: '<{%TagName%}{%Attributes%}><span class="button-inner"><span class="label">{%Content%}</span></span></{%TagName%}>',
+    cssClassNames: ['sc-button-view', 'regular', 'normal'],
+    lazyOutlet: NO,
+    tagName: 'a',
+
+    title: 'Hello!'
+  },
+
+  init: function() {
+    arguments.callee.base.apply(this) ;
+    if (this.get('newRecord')) {
+      var attrs = this._deepClone(this.get('defaultAttributes'));
+      attrs.name = attrs.targetClass = this._targetClass ;
+      attrs.guid = attrs.htmlId = 'id%@'.fmt(Date.now().toString());
+      this.updateAttributes(attrs, YES, YES);
+    } 
+  },
+
+  /**
+    Invoked just before the attributes are written out.  You can add anything
+    you want here.
+  */
+  prepareAttributes: function(attrs) {
+    return attrs ;
+  },
+  
+  /**
+    Invoked just before the class name is set.  Add anything you want here.
+  */
+  prepareClassNames: function(classNames) {
+    return classNames ;
+  },
+  
+  /**
+    Invoked just before outlets are added and the final JS is generated.  Add
+    anything here you might pull from specialized preferences.
+  */
+  prepareProperties: function(props) { return props; },
+
+  /**
+    Invoked just before bindings are blended into properties.  Add your own.
+  */
+  prepareBindings: function(binds) { return binds; },
+  
+  innerHtml: function() {
+    return this.get('title') ;
+  }.property('title')
+
+}) ;