Hello World Tutorial 2: Your First Views
In the last tutorial you installed SproutCore and created your first application. Now we are going to add some views. View are JavaScript classes that manage part of your web page for you. They create dom elements, handle events, perform animation and lots of other useful things. In fact, in SproutCore you often will not work with HTML or the DOM directly unless you are writing a view. Instead, you should let the SproutCore view classes handle it for you.
Although views are JavaScript, they have an HTML component to them also, of course. Rather than make you write some HTML and JavaScript to build your views, SproutCore comes with a useful set of view helpers that can automatically generate both the HTML and JavaScript for you. This can make your life much easier when it comes to designing the visual part of your application.
So let’s get started adding your first view.
Step 1. Finding your HTML
All HTML, CSS, images and other static resources for a client are stored inside a folder called “english.lproj”. They are stored here because SproutCore supports localization. You can add lproj directories for virtually any language you like, and SproutCore will handle building that language for you. The default language, however, is usually english, so to make things easy, you usually put common resources shared by all languages in this folder as well.
If you open the folder in clients/hello_world/english.lproj you will find a file called body.rhtml. This is the file that contains the HTML that will be displayed when your page loads. The extension is rhtml because it uses a templating language called Erubis that is based on Ruby. You do not need to know Ruby to use SproutCore templates though, just how to use the view helpers.
Step 2. Adding Your First Helper
Open the body.rhtml file in clients/hello_world/english.lproj and replace all of the text inside of the <div class=”messages”> element with the following:
<%= label_view :my_label, :tag => 'h1', :inner_html => 'Hello World!' %>
NOTE: If do not see a div with a class name “messages” in your body.rhtml, you probably have a older version of the SproutCore build tools installed. Make sure you update to at least version 0.9.2 and recreate your project before continuing this tutorial.
Now reload the page and you should see the phrase “Hello World” in large text. If you see this, congratulations, you’ve added your first view. If you want to see what you did, view the source of the HTML in your web browser and look at both at the HTML at the top (where you will see the “Hello World” h1 tag) and then at the JavaScript at the bottom. You will notice some JavaScript there that references the my_label div at the top. This JavaScript is the label view that will bring your application to life in just a moment.
Step 3. Add a Controller
Of course, just displaying static HTML doesn’t really require JavaScript. Let’s do something more interesting. Most of the actual JavaScript you write will be held in controller objects. These are JavaScript objects that control your views and your model data. To do anything useful with our label view, we first need a controller to play with, so open your terminal again so that you are in the root project directory (the one with the clients folder) and type:
sc-gen controller hello_world/app
This will create a controller in the hello_world client named “HelloWorld.appController”. Go open the file that was created at clients/hello_world/controllers/app.js. You should see something like this:
HelloWorld.appController = SC.Object.create(
/** @scope HelloWorld.appController */ {
// TODO: Add your own code here.
}) ;
This is a controller class. The create() method is what you use to create a new object. Unlike most object-oriented systems, SproutCore makes it really easy to create custom objects. Instead of creating constructor methods with different parameters, you create a SproutCore object just by calling create() and setting the properties you want directly on the new object. This is much faster in JavaScript and more convenient for building JavaScript applications than forcing you to write constructor methods all the time.
For this controller, we need to add a property that will contain the string we want to display on screen. Replace the line that says “TODO” with the following:
greeting: "Hello World!"
Step 4. Add a binding.
Now switch back to your body.rhtml and replace the label_view you created with this line instead:
<%= label_view :my_label, :tag => 'h1', :bind => { :value => 'HelloWorld.appController.greeting' } %>
If you hit refresh now on your web browser, you should still see Hello World! but now it is coming from the controller. (You can tell because the text will not be visible at first.) The connection between the greeting property and the value property is actually a live one. Anytime you change the greeting property, it will automatically update the label. To try this yourself, open your app in FireFox with Firebug and on the command line type:
HelloWorld.appController.set('greeting', 'I am changing!')
And you should see the text of the label change as well.
The reason this works is because you just added a binding to the label view. A binding is like a wire that connects a property on one object to a property on another. Whenever the value of one property changes, the other one will be updated automatically. It’s one of the most central ways SproutCore keeps things in sync across you app. Bindings also help you write more maintainable code since you can often write modules independently and then hook them together at the end using bindings.
That’s it for this step of the tutorial. In the next step, we’ll learn more about how to use bindings and properties along with buttons to change your UI dynamically.
