view

This is the root view helper. You can use it to generate almost any kind of view. All other view helpers also extend from it so any options you see listed here can be used with other helpers as well. All options listed here are optional except for :outlet and the :view_id, one of which must be defined.

Syntax:

NOTE: All options listed here are optional. They are also available for use on all other view helpers.

  <%= view :view_id, 
           :outlet => true | :outlet_name,
           :tag => :tag_name,
           :attributes => { :name => 'value' },
           :class => 'cssClassName',
           :style => 'style declaration',
           :width  => aNumber,
           :height => aNumber,
           :min_height => aNumber,
           :max_height => aNumber,
           :min_width => aNumber,
           :max_width => aNumber,
           :inner_html => 'HTML',
           :view => "Custom.ViewClass",
           :properties => { :name => 'value' },
           :bind => { :property_key => 'Path.toObject.property' },
           :enabled => true | false,
           :visible  =>  true | false,
           :pane => :panel | :dialog | :picker | :custom_pane_type,
           :content => 'Path.to.contentObject',
           :value => "Preset Value" (may be number, boolean, or string),
           :content_value_key => :key_name,
           :drop_target => true | false,
           :delegate => "Path.to.delegate",
           :accepts_first_responder =>  true | false,
           :validator => :number | :email | :credit_card %>

Where:

• :view_id :: This is a globally unique label for the view. If this is a top level view, you can use the camelized form of this name to reference the view through the page object. (i.e. if you name a view :preferences_panel, you can access it through SC.page.get(‘preferencesPanel’)). If your view is inside of another view or if you do not ever need to access the view by name, this option can be omitted.
• :outlet :: Identifies the view should be treated as an outlet of its parent view. You should always set this option for views that are inside of other views on the page. If you pass a string or symbol to this option, then the view will be stored on the parent view with the given name. If you just pass true, then the view helper will compute a name for you.
• :tag :: Optionally specify the HTML tag that should be used for the root HTML elemen.
• :attributes :: Optionally specify any arbitrary attributes you want defined on the root HTML element. There are a variety of special options listed below that generate common attributes for you. Using this hash is not common.
• :class :: Optionally specify one or more CSS class names to be applied to the root HTML element.
• :style :: Optionally specify one or more CSS style attributes to be applied to the root HTML element.
• :width :: Shorthand to set the width of the element in pixels.
• :height :: Shorthand to set the height of the element in pixels.
• :min_width :: Shorthand to set the min-width of the element in pixels.
• :min_height :: Shorthand to set the min-height of the element in pixels.
• :max_width :: Shorthand to set the max-width of the element in pixels.
• :max_height :: Shorthand to set the max-height of the element in pixels.
• :inner_html :: Optional method to specify the inner HTML for the view. Usually you will want to use do view/do method described below.
• :view :: Optionally specify a custom SproutCore View class to use for this view. Most of the view helpers will use the right view class out of the box. If you create your own subclass, however, you can use this option to set the class.
• :properties :: Optionally specify arbitrary properties to include in the SproutCore view instance. Any key names will be converted to camelCase. Most of the time view helpers will generate all of the properties you need for you, but you can use this override if needed.
• :bind :: Specify any bindings you want to setup. The key value should be the name of the property you want to bind to on the view and the value should be a path to another property you want to bind from. Usually you will use this to bind content and value properties from controller properties.
• :enabled :: Set the isEnabled property on the view to true or false.
• :visible :: Set the isVisible property on the view to true or false
• :pane :: Indicates that this view should open in a pane on the screen such as a dialog or popup. Name the type of pane you want to use here. It should be one of :panel, :dialog, :picker or a custom pane type.
• :content :: Optionally set the content property on the view to an initial value. Not all views understand what to do with the content property. Most of the time you will want to use a binding here instead.
• :value :: Optionally set the value property on the view to an initial value. Not all views understand what to do with the value property. Most of the time you will want to use a binding here instead.
• :delegate :: Optionally specify a delegate for the view. Not all views understand what to do with the delegate property.
• :accepts_first_responder :: Sets the acceptsFirstResponder property to true or false.
• :validator :: Specify a validator for the view. This works only for field views.

Defining Inner HTML with view/do

Most of the time when you use a view, you do not need to specify the inner HTML because it will be created for you by the view helper. For example, a button view like this:

However, if you do need to describe the contents of the view, especially if you need to include other views then you should omit the = sign at the beginning and place the content inside of a “do/end” block. For example, when you setup a dialog you might do something like:

This will generate a view called “panel” with a button view inside of it.

Related Links

Comments

I tried to use view in haml and got the following error:

#<SproutCore::Bundle:0x17b3760>
~ Building Html: index.html
 ~ Started request handling: Fri Aug 15 17:21:38 -0400 2008
 ~ Params: {"action"=>"main", "controller"=>"sprout_core_bundle_controller_0"}
 ~ undefined method `capture_haml' for SproutCore::ViewHelperSupport:Module - (NoMethodError)
/Library/Ruby/Gems/1.8/gems/sproutcore-0.9.16/lib/sproutcore/helpers/capture_helper.rb:36:in `content_for'
/Library/Ruby/Gems/1.8/gems/sproutcore-0.9.16/lib/sproutcore/view_helpers.rb:554:in `render_view'
(eval):3:in `view'
(haml):2:in `to_html'
/Library/Ruby/Gems/1.8/gems/haml-2.0.2/lib/haml/helpers.rb:400:in `call'
/Library/Ruby/Gems/1.8/gems/haml-2.0.2/lib/haml/helpers.rb:400:in `capture_haml_with_buffer'
/Library/Ruby/Gems/1.8/gems/haml-2.0.2/lib/haml/helpers.rb:257:in `capture_haml'
/Library/Ruby/Gems/1.8/gems/sproutcore-0.9.16/lib/sproutcore/helpers/capture_helper.rb:16:in `capture'
(eval):1:in `content_for'
(haml):1:in `eval'
/Library/Ruby/Gems/1.8/gems/sproutcore-0.9.16/lib/sproutcore/helpers/capture_helper.rb:36:in `content_for'
(haml):1:in `to_html'
/Library/Ruby/Gems/1.8/gems/haml-2.0.2/lib/haml/engine.rb:148:in `to_html'
/Library/Ruby/Gems/1.8/gems/haml-2.0.2/lib/haml/engine.rb:148:in `instance_eval'
/Library/Ruby/Gems/1.8/gems/haml-2.0.2/lib/haml/engine.rb:148:in `to_html'
/Library/Ruby/Gems/1.8/gems/sproutcore-0.9.16/lib/sproutcore/build_tools/html_builder.rb:98:in `_render_one'
/Library/Ruby/Gems/1.8/gems/sproutcore-0.9.16/lib/sproutcore/build_tools/html_builder.rb:65:in `build'
/Library/Ruby/Gems/1.8/gems/sproutcore-0.9.16/lib/sproutcore/build_tools/html_builder.rb:65:in `each'
/Library/Ruby/Gems/1.8/gems/sproutcore-0.9.16/lib/sproutcore/build_tools/html_builder.rb:65:in `build'
/Library/Ruby/Gems/1.8/gems/sproutcore-0.9.16/lib/sproutcore/build_tools/html_builder.rb:122:in `build_html'
/Library/Ruby/Gems/1.8/gems/sproutcore-0.9.16/lib/sproutcore/bundle.rb:482:in `send'
/Library/Ruby/Gems/1.8/gems/sproutcore-0.9.16/lib/sproutcore/bundle.rb:482:in `build_entries'
/Library/Ruby/Gems/1.8/gems/sproutcore-0.9.16/lib/sproutcore/bundle.rb:452:in `each'
/Library/Ruby/Gems/1.8/gems/sproutcore-0.9.16/lib/sproutcore/bundle.rb:452:in `build_entries'
/Library/Ruby/Gems/1.8/gems/sproutcore-0.9.16/lib/sproutcore/bundle.rb:493:in `build_entry'
/Library/Ruby/Gems/1.8/gems/sproutcore-0.9.16/lib/sproutcore/merb/bundle_controller.rb:108:in `handle_resource'
/Library/Ruby/Gems/1.8/gems/sproutcore-0.9.16/lib/sproutcore/merb/bundle_controller.rb:79:in `main'
/Library/Ruby/Gems/1.8/gems/merb-core-0.9.4/lib/merb-core/controller/abstract_controller.rb:269:in `send'
/Library/Ruby/Gems/1.8/gems/merb-core-0.9.4/lib/merb-core/controller/abstract_controller.rb:269:in `_call_action'
/Library/Ruby/Gems/1.8/gems/merb-core-0.9.4/lib/merb-core/controller/abstract_controller.rb:249:in `_dispatch'
/Library/Ruby/Gems/1.8/gems/merb-core-0.9.4/lib/merb-core/controller/merb_controller.rb:198:in `_dispatch'
/Library/Ruby/Gems/1.8/gems/merb-core-0.9.4/lib/merb-core/dispatch/dispatcher.rb:76:in `dispatch_action'
/Library/Ruby/Gems/1.8/gems/merb-core-0.9.4/lib/merb-core/dispatch/dispatcher.rb:76:in `synchronize'
/Library/Ruby/Gems/1.8/gems/merb-core-0.9.4/lib/merb-core/dispatch/dispatcher.rb:76:in `dispatch_action'
/Library/Ruby/Gems/1.8/gems/merb-core-0.9.4/lib/merb-core/dispatch/dispatcher.rb:50:in `handle'
/Library/Ruby/Gems/1.8/gems/merb-core-0.9.4/lib/merb-core/rack/application.rb:7:in `call'
/Library/Ruby/Gems/1.8/gems/merb-core-0.9.4/lib/merb-core/rack/middleware/static.rb:22:in `call'
/Library/Ruby/Gems/1.8/gems/merb-core-0.9.4/lib/merb-core/rack/handler/mongrel.rb:72:in `process'
/Library/Ruby/Gems/1.8/gems/mongrel-1.1.5/lib/mongrel.rb:159:in `process_client'
/Library/Ruby/Gems/1.8/gems/mongrel-1.1.5/lib/mongrel.rb:158:in `each'
/Library/Ruby/Gems/1.8/gems/mongrel-1.1.5/lib/mongrel.rb:158:in `process_client'
/Library/Ruby/Gems/1.8/gems/mongrel-1.1.5/lib/mongrel.rb:285:in `run'
/Library/Ruby/Gems/1.8/gems/mongrel-1.1.5/lib/mongrel.rb:285:in `initialize'
/Library/Ruby/Gems/1.8/gems/mongrel-1.1.5/lib/mongrel.rb:285:in `new'
/Library/Ruby/Gems/1.8/gems/mongrel-1.1.5/lib/mongrel.rb:285:in `run'
/Library/Ruby/Gems/1.8/gems/mongrel-1.1.5/lib/mongrel.rb:268:in `initialize'
/Library/Ruby/Gems/1.8/gems/mongrel-1.1.5/lib/mongrel.rb:268:in `new'
/Library/Ruby/Gems/1.8/gems/mongrel-1.1.5/lib/mongrel.rb:268:in `run'
/Library/Ruby/Gems/1.8/gems/merb-core-0.9.4/lib/merb-core/rack/adapter/mongrel.rb:22:in `start'
/Library/Ruby/Gems/1.8/gems/merb-core-0.9.4/lib/merb-core/server.rb:53:in `start'
/Library/Ruby/Gems/1.8/gems/merb-core-0.9.4/lib/merb-core.rb:91:in `start'
/Library/Ruby/Gems/1.8/gems/sproutcore-0.9.16/bin/sc-server:73
/usr/bin/sc-server:19:in `load'
/usr/bin/sc-server:19

Here’s what I put in my body.haml file:

- view :header, :class => 'sc-header sc-square-theme' do
  .left.app-label{:onClick => 'ScAdmin.appController.showAbout();'}