sproutcore 1.4.5 → 1.5.0.pre.3

data/lib/frameworks/sproutcore/apps/test_controls/resources/main_page.js

@@ -0,0 +1,144 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2011 Strobe Inc. and contributors.
+//            Portions ©2008-2010 Apple Inc. All rights reserved.
+// License:   Licensed under MIT license (see license.js)
+// ==========================================================================
+/*global TestControls tile Forms */
+
+require("resources/progress_page");
+require("resources/buttons_page");
+require("resources/checkboxes_page");
+require("resources/radio_page");
+require("resources/select_page");
+require("resources/segmented_page");
+require("resources/sliders_page");
+require("resources/text_field_page");
+require("resources/flow_layout_page");
+require("resources/scroll_page");
+require("resources/list_page");
+require("resources/tab_page");
+
+TestControls.mainPage = SC.Page.create({
+  
+  mainPane: SC.MainPane.design(SC.Animatable, {
+    childViews: "split".w(),
+    
+    split: SC.MasterDetailView.design ({
+      classNames: [ window.navigator.standalone ? "round-toolbars" : "normal" ],
+      autoHideMaster: YES,
+      
+      pickerPane: SC.PickerPane.extend(SC.Animatable, {
+        transitions: { 
+          opacity: { 
+            duration: 0.25, 
+            timing: SC.Animatable.TRANSITION_EASE_IN_OUT,
+            action: function(){ 
+              if (this.style.opacity === 0) this._call_when_done();
+            } 
+          }
+        },
+        style: { opacity: 1 },
+        layout: { width: 250, height: 480 },
+        theme: "popover",
+        
+        append: function() {
+          this.disableAnimation();
+          this.adjust("opacity", 1).updateLayout();
+          this.enableAnimation();
+          sc_super();
+        },
+        
+        remove: function() {
+          this._call_when_done = arguments.callee.base;
+          this.adjust("opacity", 0);
+        }
+      }),
+      
+      masterView: SC.WorkspaceView.design({
+        topToolbar: SC.ToolbarView.design({
+          layout: { top: 0, left: 0, right: 0, height: 32 },
+          childViews: "label".w(),
+          label: SC.LabelView.design({
+            layout: { left: 10, centerY: 0, height: 21, width: 200 },
+            value: "Test Controls",
+            classNames: "embossed".w()
+          })
+        }),
+        
+        contentView: SC.ScrollView.design({
+          classNames: ["sc-source-list-background"],
+          contentView: SC.SourceListView.design({
+            layout: { left: 0, top: 0, right: 0, bottom: 0 },
+            contentValueKey: "name",
+            contentBinding: "TestControls.categoriesController.arrangedObjects",
+            selectionBinding: "TestControls.categoriesController.selection"
+          })
+        })
+      }),
+      detailView: SC.WorkspaceView.design({
+        themeName: 'ace',
+        themeNameBinding: 'TestControls.categoryController.themeName',
+        topToolbar: SC.ToolbarView.design({
+          layout: { top: 0, left: 0, right: 0, height: 32 },
+          childViews: "showMaster label useDarkTheme".w(),
+          showMaster: SC.ButtonView.design({
+            layout: { left: 7, centerY: 0, height: 30, width: 100 },
+            controlSize: SC.AUTO_CONTROL_SIZE,
+            isVisible: NO,
+            isVisibleBinding: ".parentView.masterIsHidden",
+            title: "Tests",
+            action: "toggleMasterPicker"
+          }),
+          
+          label: SC.LabelView.design({
+            layout: { left: 120, centerY: 0, height: 21, width: 200 },
+            value: "Test Controls",
+            classNames: "embossed".w(),
+            isVisible: NO,
+            isVisibleBinding: SC.Binding.from(".parentView.masterIsHidden")
+          }),
+          
+          useDarkTheme: SC.CheckboxView.design({
+            layout: { right: 10, centerY: 0, height: 18, width: 150 },
+            title: "Use Dark Theme",
+            valueBinding: 'TestControls.categoryController.useDarkTheme'
+          })
+        }),
+        contentView: SC.ContainerView.design({
+          nowShowingBinding: "TestControls.categoryController.nowShowing"
+        })
+      })
+    })
+  }),
+
+  welcome: SC.LabelView.design({
+    escapeHTML: NO,
+    classNames: 'welcome-tab',
+    value: "<h1>Test Controls</h1><p>SproutCore comes bundled with a wide array of controls that you can use in your own applications. Most of these controls can be created very easily using the built-in view helper functions. Consult the source code of this application for samples code to use in your own application.</p>"
+  }),
+  
+  progress_page: TestControls.progressPage,
+  
+  buttons_page: TestControls.buttonsPage,
+  
+  checkboxes_page: TestControls.checkboxesPage,
+  
+  radio_page: TestControls.radioPage,
+  
+  select_page: TestControls.selectPage,
+
+  sliders_page: TestControls.slidersPage,
+  
+  text_field_page: TestControls.textFieldPage,
+  
+  segmented_page: TestControls.segmentedPage,
+  
+  flow_layout_page: TestControls.flowLayoutPage,
+  
+  scroll_page: TestControls.scrollPage,
+  
+  list_page: TestControls.listPage,
+  
+  tab_page: TestControls.tabPage
+});

data/lib/frameworks/sproutcore/apps/test_controls/resources/progress_page.js

@@ -0,0 +1,42 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2011 Strobe Inc. and contributors.
+//            Portions ©2008-2010 Apple Inc. All rights reserved.
+// License:   Licensed under MIT license (see license.js)
+// ==========================================================================
+
+/*globals TestControls Forms*/
+TestControls.progressPage = SC.View.design({
+  childViews: "form".w(),
+  form: SC.FormView.design({
+    classNames: ["sample_controls"],
+    layout: { left: 20, top: 40, right: 20, bottom: 40 },
+    
+    childViews: "header normal disabled".w(),
+    
+    // Plain Views
+    header: SC.LabelView.design({
+      layout: { width: 250, height: 18 },
+      value: "Progress Bars",
+      classNames: "header".w()
+    }),
+    
+    // RAW
+    normal: SC.FormRowView.design({
+      // rowDelegate: automatically calculated because parent.isRowDelegate
+      label: "Normal", // Also, FormView can set this automatically by going over childViews.
+      
+      childViews: "progress".w(), // this is what makes this rather tedious...
+      progress: SC.ProgressView.design({
+        layout: { height: 20, width: 200 },
+        value: 0.25
+      })
+    }),
+    
+    // Helper
+    disabled: SC.FormView.row(SC.ProgressView.design({
+      layout: { height: 20, width: 200 },
+      isEnabled: NO      
+    }))
+  })
+});

data/lib/frameworks/sproutcore/apps/test_controls/resources/radio_page.js

@@ -0,0 +1,48 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2011 Strobe Inc. and contributors.
+//            Portions ©2008-2010 Apple Inc. All rights reserved.
+// License:   Licensed under MIT license (see license.js)
+// ==========================================================================
+
+/*globals TestControls Forms*/
+TestControls.radioPage = SC.View.design({
+  childViews: "form".w(),
+  form: SC.FormView.design({
+    classNames: ["sample_controls"],
+    layout: { left: 20, top: 40, right: 20, bottom: 40 },
+    childViews: "header normal disabled multiple horizontal".w(),
+    // Plain Views
+    header: SC.LabelView.design({
+      layout: { width: 250, height: 18 },
+      value: "Radio Views",
+      classNames: "header".w()
+    }),
+    normal: SC.FormView.row(SC.RadioView.design({
+      layout: { width: 150, height: 60},
+      items: [ { title: "One", value: "one" },{ title: "Two", value: "two" },{ title: "Three", value: "three" } ],
+      itemTitleKey: "title", itemValueKey: "value",
+      value: null
+    })),
+    disabled: SC.FormView.row(SC.RadioView.design({
+      layout: { width: 150, height: 60},
+      isEnabled: NO,
+      items: [ { title: "One", value: "one" },{ title: "Two", value: "two" },{ title: "Three", value: "three" } ],
+      itemTitleKey: "title", itemValueKey: "value",
+      value: "one"
+    })),
+    multiple: SC.FormView.row(SC.RadioView.design({
+      layout: {width: 150, height: 60},
+      items: [ { title: "One", value: "one" },{ title: "Two", value: "two" },{ title: "Three", value: "three" } ],
+      itemTitleKey: "title", itemValueKey: "value",
+      value: ["one", "three"]
+    })),
+    horizontal: SC.FormView.row(SC.RadioView.design({
+      layout: {width: 450, height: 20},
+      layoutDirection: SC.LAYOUT_HORIZONTAL,
+      items: [ { title: "One", value: "one" },{ title: "Two", value: "two" },{ title: "Three", value: "three" } ],
+      itemTitleKey: "title", itemValueKey: "value",
+      value: null
+    }))
+  })
+});

data/lib/frameworks/sproutcore/apps/test_controls/resources/scroll_page.js

@@ -0,0 +1,76 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2011 Strobe Inc. and contributors.
+//            Portions ©2008-2010 Apple Inc. All rights reserved.
+// License:   Licensed under MIT license (see license.js)
+// ==========================================================================
+
+/*globals TestControls Forms*/
+TestControls.scrollPage = SC.View.design({
+  childViews: "scroll".w(),
+  scroll: SC.ScrollView.design({
+    contentView: SC.FormView.design({
+      flowPadding: { top: 0, bottom: 100, right: 0, left: 0},
+      classNames: ["sample_controls"],
+      layout: { left: 20, top: 40, right: 20, bottom: 40 },
+      childViews: "header list incrementalList imageList".w(),
+      header: SC.LabelView.design({
+        layout: { width: 300, height: 24 },
+        classNames: "header".w(),
+        value: "Scroll Views"
+      }),
+      list: SC.FormView.row(SC.ScrollView.design({
+        backgroundColor: "white",
+        layout: { width: 320, height: 460 },
+        contentView: SC.ListView.design({
+          computeNowShowing: function() {
+            return this.get('allContentIndexes');
+          },
+          classNames: ['big-list'],
+          rowHeight: 44,
+          content: function() {
+            var idx = 0, ret = [];
+            for (idx = 0; idx < 100; idx++) {
+              ret.push(SC.Object.create({"title": "Item " + idx}));
+            }
+            return ret;
+          }.property().cacheable(),
+          contentValueKey: "title"
+        })
+      })),
+      incrementalList: SC.FormView.row(SC.ScrollView.design({
+        backgroundColor: "white",
+        layout: { width: 320, height: 460 },
+        contentView: SC.ListView.design({
+          classNames: ['big-list'],
+          rowHeight: 44,
+          content: function() {
+            var idx = 0, ret = [];
+            for (idx = 0; idx < 1000; idx++) {
+              ret.push(SC.Object.create({"title": "Item " + idx}));
+            }
+            return ret;
+          }.property().cacheable(),
+          contentValueKey: "title"
+        })
+      })),
+      imageList: SC.FormView.row(SC.ScrollView.design({
+        backgroundColor: "gray",
+        canScale: YES,
+        layout: { width: 320, height: 460 },
+        contentView: SC.ListView.design({
+          classNames: ['big-list'],
+          rowHeight: 44,
+          content: function() {
+            var idx = 0, ret = [];
+            for (idx = 0; idx < 1000; idx++) {
+              ret.push(SC.Object.create({"title": "Item " + idx}));
+            }
+            return ret;
+          }.property().cacheable(),
+          contentValueKey: "title"
+        })
+      }))
+    })
+  })
+});

data/lib/frameworks/sproutcore/apps/test_controls/resources/segmented_page.js

@@ -0,0 +1,98 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2011 Strobe Inc. and contributors.
+//            Portions ©2008-2010 Apple Inc. All rights reserved.
+// License:   Licensed under MIT license (see license.js)
+// ==========================================================================
+
+/*globals TestControls Forms*/
+TestControls.segmentedPage = SC.View.design({
+  childViews: "form".w(),
+  form: SC.FormView.design({
+    classNames: ["sample_controls"],
+    layout: { left: 20, top: 40, right: 20, bottom: 40 },
+    childViews: "header small normal large jumbo disabled multiple multiple_side_by_side overflow".w(),
+    
+    header: SC.LabelView.design({
+      layout: {width:300, height:24},
+      classNames: "header".w(),
+      value: "Segmented Views "
+    }),
+    
+    small: SC.FormView.row(SC.SegmentedView.design({
+      allowsEmptySelection: YES,
+      layout: { left: 0, width: 350, height: 18, centerY: 0},
+      align: SC.ALIGN_LEFT,
+      controlSize: SC.SMALL_CONTROL_SIZE,
+      items: [ { title: "One", value: "one" },{ title: "Two", value: "two" },{ title: "Three", value: "three" } ],
+      itemTitleKey: "title", itemValueKey: "value",
+      value: null
+    })),
+    
+    normal: SC.FormView.row(SC.SegmentedView.design({
+      allowsEmptySelection: YES,
+      layout: { left: 0, width: 350, height: 24, centerY: 0},
+      align: SC.ALIGN_LEFT,
+      controlSize: SC.REGULAR_CONTROL_SIZE,
+      items: [ { title: "One", value: "one" },{ title: "Two", value: "two" },{ title: "Three", value: "three" } ],
+      itemTitleKey: "title", itemValueKey: "value",
+      value: null
+    })),
+
+    large: SC.FormView.row(SC.SegmentedView.design({
+      allowsEmptySelection: YES,
+      layout: { left: 0, width: 350, height: 30, centerY: 0},
+      align: SC.ALIGN_LEFT,
+      controlSize: SC.LARGE_CONTROL_SIZE,
+      items: [ { title: "One", value: "one" },{ title: "Two", value: "two" },{ title: "Three", value: "three" } ],
+      itemTitleKey: "title", itemValueKey: "value",
+      value: null
+    })),
+
+    jumbo: SC.FormView.row(SC.SegmentedView.design({
+      allowsEmptySelection: YES,
+      layout: { left: 0, width: 350, height: 44, centerY: 0},
+      align: SC.ALIGN_LEFT,
+      controlSize: SC.JUMBO_CONTROL_SIZE,
+      items: [ { title: "One", value: "one" },{ title: "Two", value: "two" },{ title: "Three", value: "three" } ],
+      itemTitleKey: "title", itemValueKey: "value",
+      value: null
+    })),
+    
+    disabled: SC.FormView.row(SC.SegmentedView.design({
+      layout: { left: 0, width: 350, height: 24, centerY: 0},
+      align: SC.ALIGN_LEFT,
+      isEnabled: NO,
+      items: [ { icon: "sc-icon-info-16", title: "One", value: "one" },{ title: "Two", value: "two" },{ title: "Three", value: "three" } ],
+      itemTitleKey: "title", itemValueKey: "value", itemIconKey: "icon",
+      value: "one"
+    })),
+    multiple: SC.FormView.row(SC.SegmentedView.design({
+      allowsEmptySelection: YES,
+      allowsMultipleSelection: YES,
+      layout: { left: 0, width: 350, height: 24, centerY: 0},
+      align: SC.ALIGN_LEFT,
+      items: [ { title: "One", value: "one" },{ title: "Two", value: "two" },{ title: "Three", value: "three" } ],
+      itemTitleKey: "title", itemValueKey: "value",
+      value: ["one", "three"]
+    })),
+    
+    multiple_side_by_side: SC.FormView.row(SC.SegmentedView.design({
+      allowsEmptySelection: YES,
+      allowsMultipleSelection: YES,
+      layout: { left: 0, width: 350, height: 24, centerY: 0},
+      align: SC.ALIGN_LEFT,
+      items: [ { title: "One", value: "one" },{ title: "Two", value: "two" },{ title: "Three", value: "three" } ],
+      itemTitleKey: "title", itemValueKey: "value",
+      value: ["one", "two"]
+    })),
+    
+    overflow: SC.FormView.row(SC.SegmentedView.design({
+      layout: { left: 0, width: 350, height: 24, centerY: 0},
+      align: SC.ALIGN_LEFT,
+      items: [ { title: "One", value: "one" },{ title: "Two", value: "two" },{ title: "Three", value: "three"},{ title: "Four", value: "four" },{ title: "Five", value: "five" },{ title: "Six", value: "six" },{ title: "Seven", value: "seven" },{ title: "Eight", value: "eight" } ],
+      itemTitleKey: "title", itemValueKey: "value",
+      value: null
+    }))
+  })
+});

data/lib/frameworks/sproutcore/apps/test_controls/resources/select_page.js

@@ -0,0 +1,60 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2011 Strobe Inc. and contributors.
+//            Portions ©2008-2010 Apple Inc. All rights reserved.
+// License:   Licensed under MIT license (see license.js)
+// ==========================================================================
+
+/*globals TestControls Forms*/
+TestControls.selectPage = SC.View.design({
+  childViews: "form".w(),
+  form: SC.FormView.design({
+    classNames: ["sample_controls"],
+    layout: { left: 20, top: 40, right: 20, bottom: 40 },
+    childViews: "header normal disabled".w(),
+    
+    // Plain Views
+    header: SC.LabelView.design({
+      layout: { width: 250, height: 18 },
+      value: "Select View",
+      classNames: "header".w()
+    }),
+    
+    normal: SC.FormView.row(SC.SelectView.design({
+      layout: { width: 150, height: 24 },
+      items: [
+        {"name": "Printer A", "value": "printer:a"},
+        {"name": "Printer B", "value": "printer:b"},
+        {"name": "Printer C", "value": "printer:c"},
+        {"separator": YES, name: "none" },
+        {"name": "Printer D", "value": "printer:d"},
+        {"name": "Printer E", "value": "printer:e"},
+        {"name": "Printer F", "value": "printer:f"},
+        {"name": "MICR 1", "value": "printer:m1"},
+        {"name": "MICR 2", "value": "printer:m2"}
+      ],
+      itemTitleKey: "name", itemValueKey: "value", itemSeparatorKey: "separator",
+      value: null
+    })),
+    disabled: SC.FormView.row(SC.SelectView.design({
+      layout: { width: 150, height: 24 },
+      
+      controlSize: SC.REGULAR_CONTROL_SIZE,
+      isEnabled: NO,
+      
+      items: [
+        {"name": "Printer A", "value": "printer:a"},
+        {"name": "Printer B", "value": "printer:b"},
+        {"name": "Printer C", "value": "printer:c"},
+        {"separator": YES, name: "none" },
+        {"name": "Printer D", "value": "printer:d"},
+        {"name": "Printer E", "value": "printer:e"},
+        {"name": "Printer F", "value": "printer:f"},
+        {"name": "MICR 1", "value": "printer:m1"},
+        {"name": "MICR 2", "value": "printer:m2"}
+      ],
+      itemTitleKey: "name", itemValueKey: "value", itemSeparatorKey: "separator",
+      value: null
+    }))
+  })
+});