TableView is still under construction.
Forms
SproutCore has built in support for form validation, and for buffering form input into a controller before it is committed to your backend model. The examples below demonstrate the built in validators and the variety of controls that are supported.
| First Name: | |
| Last Name: | |
| Email: | |
| Phone Number: | |
| Credit Card: | |
| Address: | |
| Crazinness: |  |
SC.ImageView can automatically display sprited icons if you set a CSS class name as the value instead of a URL. SproutCore also comes with the some default icons built right into the framework. Just use the class names below. If you would like to get more icons in this style, you can find them at Icon Drawer.
Built-In Buttons & Widgets
The widgets below can be created easily using view helpers. The helper examples show you the specific options accepted by the view. Unless the options is in bold, all options are optional. Helpers also take the standard options accepted by all views such as :outlet, :field, :width, etc.
Regular Push Button
<%= button_view :label => 'Label Name', :action => 'Appname.someController.methodName', :default => true|false, :enabled => true|false %>
Segments
<%= segmented_view :segments => [:one, :two, :three], :enabled => true|false %>
Checkboxes
<%= checkbox_view :label => 'Label Name', :enabled => true|false, :selected => true|false|:mixed %>
Radio Buttons
<%= radio_view :label => 'Label Name', :enabled=> true|false, :selected => true|false|:mixed %>
<%= radio_group_view :values => [[:item_1, 'First Item'], :item_2, [:item_3, 'Last Item']], :enabled => true|false, :value => :item_1, :layout => :horizontal|:vertical %>
Slider View
<%= slider_view :value => 100, :minimum => 50, :maximum => 250, :step => 10 %>
Disclosure Triangle
<%= disclosure_view :label => 'Label Name', :enabled => true|false, :value => true|false %>
Square Buttons
<%= button_view :label => 'Label Name', :theme => :square %>
Popup and Drop Down Menus Buttons
<%= button_view :label => 'Label Name', :theme => :popup|:dropdown %>
Toggle Buttons
<%= button_view :label => 'Label Name', :behavior => :toggle|:on|:off %>
Native Widgets
SproutCore also supports rendering native UI components. In general these can be bound to SproutCore values, just like the SproutCore widgets above:
Checkbox
<%= checkbox_field_view :outlet => true, :label => 'Label Name', :enabled => true|false, :selected => true|false %>
Panes
Panes, make it easy to display overlays such as dialogs, popup-menus and pickers. To use one of the predefined panes shown below in your own application, you just need to create a new with the :pane property set to the type of pane you want the view to display in. You can also create your own types of panes by subclassing SC.PaneView or any of its children.
Dialog
Dialogs should be used for system alert messages that need to block all other interaction with the application such as when the user's connection to the internet is down or simple OK/Cancel type messages.
Panel
Panels are used to present modal parts of the application such as preferences. Unlike dialogs, you typically expect the user to interact with the controls on a panel for awhile and then exit.
Pickers
Pickers are semi-modal interfaces used to select some content or set some temporary options. In the web-based UI world, this is often a better way of helping users edit some properties than floating palettes or other "window-like" interfaces.
To close this picker just click anywhere outside of it.
Sample Controls
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.