sproutcore 1.8.2.1 → 1.9.0

data/lib/frameworks/sproutcore/apps/showcase/resources/views_page.js

@@ -0,0 +1,64 @@
+// ==========================================================================
+// Project:   Showcase
+// Copyright: @2012 Tyler Keating
+// ==========================================================================
+/*globals Showcase */
+
+
+Showcase.viewsPage = SC.Page.create({
+
+  buttonViews: Showcase.buttonViews,
+
+  checkboxViews: Showcase.checkboxViews,
+
+  containerViews: Showcase.containerViews,
+
+  dateFieldViews: Showcase.dateFieldViews,
+
+  disclosureViews: Showcase.disclosureViews,
+
+  gridViews: Showcase.gridViews,
+
+  imageButtonViews: Showcase.imageButtonViews,
+
+  imageViews: Showcase.imageViews,
+
+  labelViews: Showcase.labelViews,
+
+  listViews: Showcase.listViews,
+
+  popupButtonViews: Showcase.popupButtonViews,
+
+  progressViews: Showcase.progressViews,
+
+  radioViews: Showcase.radioViews,
+
+  scrollViews: Showcase.scrollViews,
+
+  segmentedViews: Showcase.segmentedViews,
+
+  selectViews: Showcase.selectViews,
+
+  sliderViews: Showcase.sliderViews,
+
+  sourceListViews: Showcase.sourceListViews,
+
+  splitViews: Showcase.splitViews,
+
+  stackedViews: Showcase.stackedViews,
+
+  staticContentViews: Showcase.staticContentViews,
+
+  tabViews: Showcase.tabViews,
+
+  textFieldViews: Showcase.textFieldViews,
+
+  toolbarViews: Showcase.toolbarViews,
+
+  webViews: Showcase.webViews,
+
+  wellViews: Showcase.wellViews,
+
+  workspaceViews: Showcase.workspaceViews
+
+});

data/lib/frameworks/sproutcore/apps/showcase/system/views_item_content.js

@@ -0,0 +1,59 @@
+// ==========================================================================
+// Project:   Showcase
+// Copyright: @2012 Tyler Keating
+// ==========================================================================
+/*globals Showcase */
+
+
+/**
+  This class is used to provide content to the lists of Views & Controls.
+*/
+Showcase.ViewsItemContent = SC.Object.extend({
+
+  example: null,
+
+  /**
+    Takes the example snippet and generates a multiline String.
+  */
+  exampleString: function() {
+    var example = this.get('example'),
+        padding = '  ',
+        parts;
+
+    parts = example.split('  ');
+    parts.forEach(function(part, index) {
+      if (part.indexOf('.extend(') >= 0 || part.indexOf('function(') >= 0 || part.indexOf('({') >= 0) {
+        parts[index] = padding + part;
+        padding += '  ';
+      } else if (part.indexOf('}.property') >= 0 || part.indexOf('})') >= 0) {
+        padding = padding.substr(2);
+        parts[index] = padding + part;
+      } else {
+        parts[index] = padding + part;
+      }
+    });
+
+    return '\n' + parts.join('\n') + '\n';
+  }.property().cacheable(),
+
+  /**
+    Takes the example snippet and generates a JavaScript class.
+  */
+  exampleView: function() {
+    var el,
+        example = this.get('example');
+
+    // Remove the HTML formatting from the snippet.
+    // el = document.createElement("div");
+    // el.innerHTML = example;
+    // example = el.textContent || el.innerText;
+
+    // Return the JavaScript interpretation.
+    return eval(example);
+  }.property().cacheable(),
+
+  supportTitle: null,
+
+  title: null
+
+});

data/lib/frameworks/sproutcore/apps/showcase/theme.js

@@ -0,0 +1,27 @@
+// ==========================================================================
+// Project:   Showcase
+// Copyright: @2012 My Company, Inc.
+// ==========================================================================
+/*globals Showcase */
+
+// This is the theme that defines how your app renders.
+//
+// Your app is given its own theme so it is easier and less
+// messy for you to override specific things just for your
+// app.
+//
+// You don't have to create the whole theme on your own, though:
+// your app's theme is based on SproutCore's Ace theme.
+//
+// NOTE: if you want to change the theme this one is based on, don't
+// forget to change the :css_theme property in your buildfile.
+Showcase.Theme = SC.AceTheme.create({
+  name: 'showcase'
+});
+
+// SproutCore needs to know that your app's theme exists
+SC.Theme.addTheme(Showcase.Theme);
+
+// Setting it as the default theme makes every pane SproutCore
+// creates default to this theme unless otherwise specified.
+SC.defaultTheme = 'showcase';

data/lib/frameworks/sproutcore/apps/showcase/views/button_views.js

@@ -0,0 +1,55 @@
+// ==========================================================================
+// Project:   Showcase
+// Copyright: @2012 Tyler Keating
+// ==========================================================================
+/*globals Showcase */
+sc_require('system/views_item_content.js');
+sc_require('views/views_list_view.js');
+
+
+/**
+  This pre-configured view demonstrates SC.ButtonView.
+*/
+Showcase.buttonViews = SC.ScrollView.design({
+  contentView: Showcase.ViewsListView.design({
+    content: [
+      Showcase.ViewsItemContent.create({
+        title: 'Regular',
+        example: "SC.View.extend({  childViews: ['regularButton', 'iconButton'],  regularButton: SC.ButtonView.extend({  layout: { width: 120, height: 24, centerX: -70, centerY: 0 },  title: 'Push Me'  }),  iconButton: SC.ButtonView.extend({  icon: 'sc-icon-favorite-16',  layout: { width: 120, height: 24, centerX: 70, centerY: 0 },  title: 'Love Me'  })  })"
+      }),
+      Showcase.ViewsItemContent.create({
+        title: 'Small',
+        example: "SC.View.extend({  childViews: ['regularButton', 'iconButton'],  regularButton: SC.ButtonView.extend({  controlSize: SC.SMALL_CONTROL_SIZE,  layout: { width: 100, height: 18, centerX: -60, centerY: 0 },  title: 'Push Me'  }),  iconButton: SC.ButtonView.extend({  controlSize: SC.SMALL_CONTROL_SIZE,  icon: sc_static('images/green-dot.png'),  layout: { width: 100, height: 18, centerX: 60, centerY: 0 },  title: 'Status OK'  })  })"
+      }),
+      Showcase.ViewsItemContent.create({
+        title: 'Huge',
+        example: "SC.View.extend({  childViews: ['regularButton', 'iconButton'],  regularButton: SC.ButtonView.extend({  controlSize: SC.HUGE_CONTROL_SIZE,  layout: { width: 120, height: 30, centerX: -70, centerY: 0 },  title: 'Push Me'  }),  iconButton: SC.ButtonView.extend({  controlSize: SC.HUGE_CONTROL_SIZE,  icon: 'sc-icon-options-16',  layout: { width: 120, height: 30, centerX: 70, centerY: 0 },  title: 'Configure'  })  })"
+      }),
+      Showcase.ViewsItemContent.create({
+        title: 'Jumbo',
+        example: "SC.View.extend({  childViews: ['regularButton', 'iconButton'],  regularButton: SC.ButtonView.extend({  controlSize: SC.JUMBO_CONTROL_SIZE,  layout: { width: 150, height: 44, centerX: -85, centerY: 0 },  title: 'Push Me'  }),  iconButton: SC.ButtonView.extend({  controlSize: SC.JUMBO_CONTROL_SIZE,  icon: 'sc-icon-cancel-24',  layout: { width: 150, height: 44, centerX: 85, centerY: 0 },  title: 'Delete'  })  })"
+      }),
+      Showcase.ViewsItemContent.create({
+        title: 'Toggles',
+        example: "SC.View.extend({  childViews: ['toggle', 'toggleOn', 'toggleOff'],  toggle: SC.ButtonView.extend({  buttonBehavior: SC.TOGGLE_BEHAVIOR,  layout: { width: 120, height: 24, centerX: -135, centerY: 0 },  title: 'Toggle Me'  }),  toggleOn: SC.ButtonView.extend({  buttonBehavior: SC.TOGGLE_ON_BEHAVIOR,  layout: { width: 120, height: 24, centerX: 0, centerY: 0 },  title: 'Toggle On',  value: false  }),  toggleOff: SC.ButtonView.extend({  buttonBehavior: SC.TOGGLE_OFF_BEHAVIOR,  layout: { width: 120, height: 24, centerX: 135, centerY: 0 },  title: 'Toggle Off',  value: true  })  });",
+        supportAction: function() {
+          this.setPath('parentView.exampleBox.contentView.toggleOn.value', false);
+          this.setPath('parentView.exampleBox.contentView.toggleOff.value', true);
+        },
+        supportTitle: 'Reset Values'
+      }),
+      Showcase.ViewsItemContent.create({
+        title: 'States',
+        example: "SC.View.extend({  childViews: ['disabledButton', 'defaultButton'],  disabledButton: SC.ButtonView.extend({  isEnabled: false,  layout: { width: 100, height: 24, centerX: 60, centerY: 0 },  title: 'Disabled'  }),  defaultButton: SC.ButtonView.extend({  isDefault: true,  layout: { width: 100, height: 24, centerX: -60, centerY: 0 },  title: 'Default'  })  })"
+      }),
+      Showcase.ViewsItemContent.create({
+        title: 'Capsule',
+        example: "SC.ButtonView.extend({  layout: { width: 100, height: 24, centerX: 0, centerY: 0 },  themeName: 'capsule',  title: 'Click Me'  });"
+      }),
+      Showcase.ViewsItemContent.create({
+        title: 'Pointers',
+        example: "SC.View.extend({  childViews: ['pointLeftButton', 'pointRightButton'],  pointLeftButton: SC.ButtonView.extend({  layout: { width: 100, height: 24, centerX: -50, centerY: 0 },  themeName: 'point-left',  title: 'Back'  }),  pointRightButton: SC.ButtonView.extend({  layout: { width: 100, height: 24, centerX: 50, centerY: 0 },  themeName: 'point-right',  title: 'Forward'  })  });"
+      })
+    ]
+  })
+});

data/lib/frameworks/sproutcore/apps/showcase/views/checkbox_views.js

@@ -0,0 +1,34 @@
+// ==========================================================================
+// Project:   Showcase
+// Copyright: @2012 Tyler Keating
+// ==========================================================================
+/*globals Showcase */
+sc_require('system/views_item_content.js');
+sc_require('views/views_list_view.js');
+
+
+/**
+  This pre-configured view demonstrates SC.CheckboxView.
+*/
+Showcase.checkboxViews = SC.ScrollView.design({
+  contentView: Showcase.ViewsListView.design({
+    content: [
+      Showcase.ViewsItemContent.create({
+        title: 'Regular',
+        example: "SC.View.extend({  childViews: ['regularCheckbox', 'iconCheckbox'],  regularCheckbox: SC.CheckboxView.extend({  layout: { width: 120, height: 16, centerX: -70, centerY: 0 },  title: 'Check Me'  }),  iconCheckbox: SC.CheckboxView.extend({  icon: 'sc-icon-bookmark-16',  layout: { width: 120, height: 16, centerX: 70, centerY: 0 },  title: 'Bookmark It'  })  })"
+      }),
+      Showcase.ViewsItemContent.create({
+        title: 'Small',
+        example: "SC.View.extend({  childViews: ['regularCheckbox', 'iconCheckbox'],  regularCheckbox: SC.CheckboxView.extend({  controlSize: SC.SMALL_CONTROL_SIZE,  layout: { width: 120, height: 14, centerX: -70, centerY: 0 },  title: 'Check Me'  }),  iconCheckbox: SC.CheckboxView.extend({  controlSize: SC.SMALL_CONTROL_SIZE,  icon: sc_static('images/alarm-clock.png'),  layout: { width: 120, height: 14, centerX: 70, centerY: 0 },  title: 'Save Alarm'  })  })"
+      }),
+      Showcase.ViewsItemContent.create({
+        title: 'States',
+        example: "SC.View.extend({  childViews: ['mixedCheckbox', 'disabledCheckbox'],  mixedCheckbox: SC.CheckboxView.extend({  layout: { width: 120, height: 16, centerX: -70, centerY: 0 },  title: 'Mixed State',  toggleOnValue: 'a',  value: ['a', 'b']  }),  disabledCheckbox: SC.CheckboxView.extend({  isEnabled: false,  layout: { width: 120, height: 16, centerX: 70, centerY: 0 },  title: 'Disabled'  })  })",
+        supportAction: function() {
+          this.setPath('parentView.exampleBox.contentView.mixedCheckbox.value', ['a', 'b']);
+        },
+        supportTitle: 'Reset Mixed Value'
+      })
+    ]
+  })
+});

data/lib/frameworks/sproutcore/apps/showcase/views/container_views.js

@@ -0,0 +1,29 @@
+// ==========================================================================
+// Project:   Showcase
+// Copyright: @2012 Tyler Keating
+// ==========================================================================
+/*globals Showcase */
+sc_require('system/views_item_content.js');
+sc_require('views/views_list_view.js');
+
+
+/**
+  This pre-configured view demonstrates SC.ContainerView.
+*/
+Showcase.containerViews = SC.ScrollView.design({
+  contentView: Showcase.ViewsListView.design({
+    content: [
+      Showcase.ViewsItemContent.create({
+        title: 'Regular',
+        example: "SC.ContainerView.extend({  layout: { left: 20, right: 20, top: 20, bottom: 20 },  nowShowing: 'blueSampleView',  blueSampleView: SC.LabelView.extend({  classNames:['blue-sample-view'],  value: 'Blue View'  }),  redSampleView: SC.LabelView.extend({  classNames:['red-sample-view'],  value: 'Red View'  })  });",
+        supportAction: function() {
+          var containerView = this.getPath('parentView.exampleBox.contentView');
+          if (containerView.get('nowShowing') === 'blueSampleView') containerView.set('nowShowing', 'redSampleView');
+          else containerView.set('nowShowing', 'blueSampleView');
+        },
+        supportTitle: 'Toggle nowShowing'
+      })
+    ],
+    exampleHeight: 300
+  })
+});

data/lib/frameworks/sproutcore/apps/showcase/views/date_field_views.js

@@ -0,0 +1,30 @@
+// ==========================================================================
+// Project:   Showcase
+// Copyright: @2012 Tyler Keating
+// ==========================================================================
+/*globals Showcase */
+sc_require('system/views_item_content.js');
+sc_require('views/views_list_view.js');
+
+
+/**
+  This pre-configured view demonstrates SC.DateFieldView.
+*/
+Showcase.dateFieldViews = SC.ScrollView.design({
+  contentView: Showcase.ViewsListView.design({
+    content: [
+      Showcase.ViewsItemContent.create({
+        title: 'Regular',
+        example: "SC.View.extend({  childViews: ['regularField', 'formattedLabel', 'formattedField'],  regularField: SC.DateFieldView.extend({  classNames: ['centered-field'],  layout: { width: 160, height: 24, centerX: -90, centerY: 0 },  value: SC.DateTime.create()  }),  formattedLabel: SC.LabelView.extend({  layout: { width: 160, height: 18, centerX: 90, centerY: -20 },  value: 'Custom format'  }),  formattedField: SC.DateFieldView.extend({  classNames: ['centered-field'],  formatDate: '%b | %d | %Y',  layout: { width: 160, height: 24, centerX: 90, centerY: 0 },  value: SC.DateTime.create()  })  })"
+      }),
+      Showcase.ViewsItemContent.create({
+        title: 'Date and Time',
+        example: "SC.View.extend({  childViews: ['regularField', 'formattedLabel', 'formattedField'],  regularField: SC.DateFieldView.extend({  classNames: ['centered-field'],  layout: { width: 160, height: 24, centerX: -90, centerY: 0 },  showTime: true,  value: SC.DateTime.create()  }),  formattedLabel: SC.LabelView.extend({  layout: { width: 160, height: 18, centerX: 90, centerY: -20 },  value: 'Custom format'  }),  formattedField: SC.DateFieldView.extend({  classNames: ['centered-field'],  formatDateTime: '%y-%m-%d @ %H:%M',  layout: { width: 160, height: 24, centerX: 90, centerY: 0 },  showTime: true,  value: SC.DateTime.create()  })  })"
+      }),
+      Showcase.ViewsItemContent.create({
+        title: 'Time Only',
+        example: "SC.View.extend({  childViews: ['regularField', 'formattedLabel', 'formattedField'],  regularField: SC.DateFieldView.extend({  classNames: ['centered-field'],  layout: { width: 160, height: 24, centerX: -90, centerY: 0 },  showDate: false,  showTime: true,  value: SC.DateTime.create()  }),  formattedLabel: SC.LabelView.extend({  layout: { width: 160, height: 18, centerX: 90, centerY: -20 },  value: 'Custom format'  }),  formattedField: SC.DateFieldView.extend({  classNames: ['centered-field'],  formatTime: '%Hh%Mm%Ss',  layout: { width: 160, height: 24, centerX: 90, centerY: 0 },  showDate: false,  showTime: true,  value: SC.DateTime.create()  })  })"
+      })
+    ]
+  })
+});

data/lib/frameworks/sproutcore/apps/showcase/views/disclosure_views.js

@@ -0,0 +1,22 @@
+// ==========================================================================
+// Project:   Showcase
+// Copyright: @2012 Tyler Keating
+// ==========================================================================
+/*globals Showcase */
+sc_require('system/views_item_content.js');
+sc_require('views/views_list_view.js');
+
+
+/**
+  This pre-configured view demonstrates SC.DisclosureView.
+*/
+Showcase.disclosureViews = SC.ScrollView.design({
+  contentView: Showcase.ViewsListView.design({
+    content: [
+      Showcase.ViewsItemContent.create({
+        title: 'Regular',
+        example: "SC.DisclosureView.extend({  layout: { width: 150, height: 24, centerX: 0, centerY: 0 },  title: function() {  return this.get('value') ? 'Collapse something' : 'Expand something';  }.property('value').cacheable()  })"
+      })
+    ]
+  })
+});

data/lib/frameworks/sproutcore/apps/showcase/views/grid_views.js

@@ -0,0 +1,28 @@
+// ==========================================================================
+// Project:   Showcase
+// Copyright: @2012 Tyler Keating
+// ==========================================================================
+/*globals Showcase */
+sc_require('system/views_item_content.js');
+sc_require('views/views_list_view.js');
+
+
+/**
+  This pre-configured view demonstrates SC.DisclosureView.
+*/
+Showcase.gridViews = SC.ScrollView.design({
+  contentView: Showcase.ViewsListView.design({
+    content: [
+      Showcase.ViewsItemContent.create({
+        title: 'Regular',
+        example: "SC.GridView.extend({  columnWidth: 120,  rowHeight: 58,  contentBinding: SC.Binding.oneWay('Showcase.collectionItems'),  layout: { left: 20, right: 20, top: 20, bottom: 20 },  exampleView: SC.View.extend(SC.Control, {  classNames: ['grid-example-view'],  childViews: ['image', 'title'],  image: SC.ImageView.extend({  layout: { centerX: 0, centerY: 0, height: 24, width: 24 },  valueBinding: SC.Binding.oneWay('.parentView.content.icon')  }),  title: SC.LabelView.extend({  layout: { centerX: 0, bottom: 0, height: 18, width: 120 },  valueBinding: SC.Binding.oneWay('.parentView.content.title')  })  })  })"
+      }),
+
+      Showcase.ViewsItemContent.create({
+        title: 'Scrollable with Minimum Width',
+        example: "SC.ScrollView.extend({ layout: { left: 20, right: 20, top: 20, bottom: 20 },  contentView: SC.GridView.extend({  columnWidth: 200,  rowHeight: 200,  layout: { minWidth: 600 },  contentBinding: SC.Binding.oneWay('Showcase.collectionItems'),  exampleView: SC.View.extend(SC.Control, {  classNames: ['grid-example-view'],  childViews: ['image', 'title'],  image: SC.ImageView.extend({  layout: { centerX: 0, centerY: 0, height: 24, width: 24 },  valueBinding: SC.Binding.oneWay('.parentView.content.icon')  }),  title: SC.LabelView.extend({  layout: { centerX: 0, bottom: 0, height: 18, width: 120 },  valueBinding: SC.Binding.oneWay('.parentView.content.title')  })  })  })  })"
+      })
+    ],
+    exampleHeight: 360
+  })
+});

data/lib/frameworks/sproutcore/apps/showcase/views/image_button_views.js

@@ -0,0 +1,22 @@
+// ==========================================================================
+// Project:   Showcase
+// Copyright: @2012 Tyler Keating
+// ==========================================================================
+/*globals Showcase */
+sc_require('system/views_item_content.js');
+sc_require('views/views_list_view.js');
+
+
+/**
+  This pre-configured view demonstrates SC.ImageButtonView.
+*/
+Showcase.imageButtonViews = SC.ScrollView.design({
+  contentView: Showcase.ViewsListView.design({
+    content: [
+      Showcase.ViewsItemContent.create({
+        title: 'Regular',
+        example: "SC.ImageButtonView.extend({  classNames: ['my-image-button'],  layout: { width: 56, height: 56, centerX: 0, centerY: 0 },  image: 'sc-icon-alert-48'  });"
+      })
+    ]
+  })
+});

data/lib/frameworks/sproutcore/apps/showcase/views/image_views.js

@@ -0,0 +1,51 @@
+// ==========================================================================
+// Project:   Showcase
+// Copyright: @2012 Tyler Keating
+// ==========================================================================
+/*globals Showcase */
+sc_require('system/views_item_content.js');
+sc_require('views/views_list_view.js');
+
+
+/**
+  This pre-configured view demonstrates SC.ImageView.
+*/
+Showcase.imageViews = SC.ScrollView.design({
+  contentView: Showcase.ViewsListView.design({
+    content: [
+      Showcase.ViewsItemContent.create({
+        title: 'Regular (Fill)',
+        example: "SC.View.extend({  childViews: ['smallerImage', 'largerImage'],  smallerImage: SC.ImageView.extend({  classNames: ['my-image-view'],  layout: { width: 220, height: 220, centerX: -120, centerY: 0 },  value: sc_static('sproutcore-logo.png')  }),  largerImage: SC.ImageView.extend({  classNames: ['my-image-view'],  layout: { width: 220, height: 220, centerX: 120, centerY: 0 },  value: sc_static('sproutcore-startup-landscape.jpg')  })  })"
+      }),
+      Showcase.ViewsItemContent.create({
+        title: 'No Scaling',
+        example: "SC.View.extend({  childViews: ['smallerImage', 'largerImage'],  smallerImage: SC.ImageView.extend({  classNames: ['my-image-view'],  layout: { width: 220, height: 220, centerX: -120, centerY: 0 },  scale: SC.SCALE_NONE,  value: sc_static('sproutcore-logo.png')  }),  largerImage: SC.ImageView.extend({  classNames: ['my-image-view'],  layout: { width: 220, height: 220, centerX: 120, centerY: 0 },  scale: SC.SCALE_NONE,  value: sc_static('sproutcore-startup-landscape.jpg')  })  })"
+      }),
+      Showcase.ViewsItemContent.create({
+        title: 'Best Fit Scaling',
+        example: "SC.View.extend({  childViews: ['smallerImage', 'largerImage'],  smallerImage: SC.ImageView.extend({  classNames: ['my-image-view'],  layout: { width: 220, height: 220, centerX: -120, centerY: 0 },  scale: SC.BEST_FIT,  value: sc_static('sproutcore-logo.png')  }),  largerImage: SC.ImageView.extend({  classNames: ['my-image-view'],  layout: { width: 220, height: 220, centerX: 120, centerY: 0 },  scale: SC.BEST_FIT,  value: sc_static('sproutcore-startup-landscape.jpg')  })  })"
+      }),
+      Showcase.ViewsItemContent.create({
+        title: 'Best Fit Scaling Down Only',
+        example: "SC.View.extend({  childViews: ['smallerImage', 'largerImage'],  smallerImage: SC.ImageView.extend({  classNames: ['my-image-view'],  layout: { width: 220, height: 220, centerX: -120, centerY: 0 },  scale: SC.BEST_FIT_DOWN_ONLY,  value: sc_static('sproutcore-logo.png')  }),  largerImage: SC.ImageView.extend({  classNames: ['my-image-view'],  layout: { width: 220, height: 220, centerX: 120, centerY: 0 },  scale: SC.BEST_FIT_DOWN_ONLY,  value: sc_static('sproutcore-startup-landscape.jpg')  })  })"
+      }),
+      Showcase.ViewsItemContent.create({
+        title: 'Fill Proportionally',
+        example: "SC.View.extend({  childViews: ['smallerImage', 'largerImage'],  smallerImage: SC.ImageView.extend({  classNames: ['my-image-view'],  layout: { width: 220, height: 220, centerX: -120, centerY: 0 },  scale: SC.FILL_PROPORTIONALLY,  value: sc_static('sproutcore-logo.png')  }),  largerImage: SC.ImageView.extend({  classNames: ['my-image-view'],  layout: { width: 220, height: 220, centerX: 120, centerY: 0 },  scale: SC.FILL_PROPORTIONALLY,  value: sc_static('sproutcore-startup-landscape.jpg')  })  })"
+      }),
+      Showcase.ViewsItemContent.create({
+        title: 'Top Alignments',
+        example: "SC.View.extend({  childViews: ['left', 'middle', 'right'],  left: SC.ImageView.extend({  classNames: ['my-image-view'],  layout: { width: 220, height: 220, centerX: -230, centerY: 0 },  align: SC.ALIGN_TOP_LEFT,  scale: SC.SCALE_NONE,  value: sc_static('sproutcore-logo.png')  }),  middle: SC.ImageView.extend({  classNames: ['my-image-view'],  layout: { width: 220, height: 220, centerX: 0, centerY: 0 },  align: SC.ALIGN_TOP,  scale: SC.SCALE_NONE,  value: sc_static('sproutcore-logo.png')  }),  right: SC.ImageView.extend({  classNames: ['my-image-view'],  layout: { width: 220, height: 220, centerX: 230, centerY: 0 },  align: SC.ALIGN_TOP_RIGHT,  scale: SC.SCALE_NONE,  value: sc_static('sproutcore-logo.png')  })  })"
+      }),
+      Showcase.ViewsItemContent.create({
+        title: 'Middle Alignments',
+        example: "SC.View.extend({  childViews: ['left', 'middle', 'right'],  left: SC.ImageView.extend({  classNames: ['my-image-view'],  layout: { width: 220, height: 220, centerX: -230, centerY: 0 },  align: SC.ALIGN_LEFT,  scale: SC.SCALE_NONE,  value: sc_static('sproutcore-logo.png')  }),  middle: SC.ImageView.extend({  classNames: ['my-image-view'],  layout: { width: 220, height: 220, centerX: 0, centerY: 0 },  scale: SC.SCALE_NONE,  value: sc_static('sproutcore-logo.png')  }),  right: SC.ImageView.extend({  classNames: ['my-image-view'],  layout: { width: 220, height: 220, centerX: 230, centerY: 0 },  align: SC.ALIGN_RIGHT,  scale: SC.SCALE_NONE,  value: sc_static('sproutcore-logo.png')  })  })"
+      }),
+      Showcase.ViewsItemContent.create({
+        title: 'Bottom Alignments',
+        example: "SC.View.extend({  childViews: ['left', 'middle', 'right'],  left: SC.ImageView.extend({  classNames: ['my-image-view'],  layout: { width: 220, height: 220, centerX: -230, centerY: 0 },  align: SC.ALIGN_BOTTOM_LEFT,  scale: SC.SCALE_NONE,  value: sc_static('sproutcore-logo.png')  }),  middle: SC.ImageView.extend({  classNames: ['my-image-view'],  layout: { width: 220, height: 220, centerX: 0, centerY: 0 },  align: SC.ALIGN_BOTTOM,  scale: SC.SCALE_NONE,  value: sc_static('sproutcore-logo.png')  }),  right: SC.ImageView.extend({  classNames: ['my-image-view'],  layout: { width: 220, height: 220, centerX: 230, centerY: 0 },  align: SC.ALIGN_BOTTOM_RIGHT,  scale: SC.SCALE_NONE,  value: sc_static('sproutcore-logo.png')  })  })"
+      })
+    ],
+    exampleHeight: 256
+  })
+});

data/lib/frameworks/sproutcore/apps/showcase/views/label_views.js

@@ -0,0 +1,53 @@
+// ==========================================================================
+// Project:   Showcase
+// Copyright: @2012 Tyler Keating
+// ==========================================================================
+/*globals Showcase */
+sc_require('system/views_item_content.js');
+sc_require('views/views_item_view.js');
+sc_require('views/views_list_view.js');
+
+
+/**
+  This pre-configured view demonstrates SC.LabelView.
+*/
+Showcase.labelViews = SC.ScrollView.design({
+  contentView: Showcase.ViewsListView.design({
+    action: 'beginEditing',
+    isSelectable: false,
+    content: [
+      Showcase.ViewsItemContent.create({
+        title: 'Regular',
+        example: "SC.View.extend({  childViews: ['regularLabel', 'iconLabel'],  regularLabel: SC.LabelView.extend({  classNames: ['my-label-view'],  layout: { width: 220, height: 16, centerX: -120, centerY: 0 },  value: 'This is a Label'  }),  iconLabel: SC.LabelView.extend({  classNames: ['my-label-view'],  icon: 'sc-icon-document-16',  layout: { width: 220, height: 16, centerX: 120, centerY: 0 },  value: 'This label has an icon.'  })  })"
+      }),
+      Showcase.ViewsItemContent.create({
+        title: 'Tiny',
+        example: "SC.View.extend({  childViews: ['regularLabel', 'iconLabel'],  regularLabel: SC.LabelView.extend({  classNames: ['my-label-view'],  controlSize: SC.TINY_CONTROL_SIZE,  layout: { width: 220, height: 11, centerX: -120, centerY: 0 },  value: 'This is a Label'  }),  iconLabel: SC.LabelView.extend({  classNames: ['my-label-view'],  icon: sc_static('bullet.png'),  controlSize: SC.TINY_CONTROL_SIZE,  layout: { width: 220, height: 11, centerX: 120, centerY: 0 },  value: 'This label has an icon.'  })  })"
+      }),
+      Showcase.ViewsItemContent.create({
+        title: 'Small',
+        example: "SC.View.extend({  childViews: ['regularLabel', 'iconLabel'],  regularLabel: SC.LabelView.extend({  classNames: ['my-label-view'],  controlSize: SC.SMALL_CONTROL_SIZE,  layout: { width: 220, height: 15, centerX: -120, centerY: 0 },  value: 'This is a Label'  }),  iconLabel: SC.LabelView.extend({  classNames: ['my-label-view'],  icon: sc_static('grey-dot.png'),  controlSize: SC.SMALL_CONTROL_SIZE,  layout: { width: 220, height: 15, centerX: 120, centerY: 0 },  value: 'This label has an icon.'  })  })"
+      }),
+      Showcase.ViewsItemContent.create({
+        title: 'Large',
+        example: "SC.View.extend({  childViews: ['regularLabel', 'iconLabel'],  regularLabel: SC.LabelView.extend({  classNames: ['my-label-view'],  controlSize: SC.LARGE_CONTROL_SIZE,  layout: { width: 220, height: 24, centerX: -120, centerY: 0 },  value: 'This is a Label'  }),  iconLabel: SC.LabelView.extend({  classNames: ['my-label-view'],  icon: 'sc-icon-folder-24',  controlSize: SC.LARGE_CONTROL_SIZE,  layout: { width: 220, height: 24, centerX: 120, centerY: 0 },  value: 'This label has an icon.'  })  })"
+      }),
+      Showcase.ViewsItemContent.create({
+        title: 'Inline Editing',
+        example: "SC.LabelView.extend({  classNames: ['my-label-view'],  isEditable: true,  layout: { width: 300, height: 16, centerX: 0, centerY: 0 },  value: 'Double-click this label to edit inline.'  })",
+        supportAction: function() {
+          var label = this.getPath('parentView.exampleBox.contentView');
+          label.beginEditing();
+        },
+        supportTitle: 'Manually Start Editing'
+      })
+    ],
+
+    exampleView: Showcase.ViewsItemView.extend({
+      beginEditing: function() {
+        var label = this.getPath('exampleBox.contentView.regularLabel');
+        label.beginEditing();
+      }
+    })
+  })
+});