O'Reilly logo

SproutCore Web Application Development by Tyler Keating

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Styling views

At this point, we have laid out all our views according to how we want them to appear on the page and so, we can begin to look at styling them appropriately. There are three properties on SC.View that are useful for styling: classNames, tagName, and layerId.

First, we use the classNames property of the view to name one or more CSS class names that the view element will include. For example, to have the classes title-view and blue included as class names, we would add the following code lines:

titleView: SC.View.extend({
  // <div class="title-view blue …
  classNames: ['title-view', 'blue']
}),

It is a bit surprising though if you inspected the class attribute of the resulting element. You would find it doesn't just contain only the title-view ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required