-
Notifications
You must be signed in to change notification settings - Fork 0
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.
Views 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 will not work with HTML or the DOM directly unless you are writing a custom 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 classes and utilities that will help you to layout your application. 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.
All CSS, images and other static resources for an app 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. To make things easy, you usually put common resources shared by all languages in this folder as well.
If you open the folder in apps/hello_world/english.lproj you will find a file called loading.rhtml. This is the file that contains the body 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 edit it; you can just insert plain html.
Any HTML in this file will be visible on screen while your page loads its application JavaScript. SproutCore applications are optimized for caching and startup very fast, so your users will often only see this content for a brief moment on their first app load, if at all.
There are two other files inside “english.lproj”: string.js which will contain all the strings necessary for localization purposes and main_page.js, which describes the main user interface for your application.
At the app root level you have core.js and main.js. The former contains all your global variables and initial app setup. The latter will start your app running (as you develop your application you will probably modify this file to do some initial controller setup.)
Open the main_page.js file in apps/hello_world/english.lproj and replace the text inside the labelView as follows:
value: "Hello World! I'm Using Sproutcore"
Now reload the page and you should see the phrase “Hello World! I’m Using Sproutcore” . If you see this, congratulations, you’ve modified your first view.
Of course, just displaying some text 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 HelloWorld.appController
This will create a controller in the hello_world application named “HelloWorld.appController”. Go open the file that was created at apps/hello_world/controllers/appController.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!"
Now switch back to your main_page.js and replace the LabelView value with this line instead:
valueBinding: "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.
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 Safari with the Develop Menu enabled or FireFox with Firebug and on the JavaScript command line type:
HelloWorld.appController.set('greeting', 'I am changing!')
And you should see the text of the label change as well.
This works because of the binding you just added 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.
Go to Hello World Tutorial 3: Adding Buttons »
edit this page to add comments here