1. Getting started:

I thought I'd start by trying to get through the original Hello World tutorial and document the differences that I come across, since it seems obvious you won't get very far trying to follow at it is.  I'll note what I had to do for each step as I can.

1. First off, you'll need to follow the instructions for setting up Abbot.  Make sure you have run git submodule update --init after you check out.
2. It seems the sproutcore command from abbot doesn't work, but running sc-init hello_world is what you want to do.
3. Now, cd into hello_world.  Run <path_to_abbot>/bin/sc-server.  You should now be able to hit your application on the server at the URL - "http://localhost:4020/hello_world".

You will see the text "Hello World" in the middle of the screen.

The source of this text lies in the file main_page.js in the directory english.lproj. In main_page.js, you can see the source as below:

This is the code which is responsible for getting our "Hello World" on the screen.

Now, change the value attribute of the label view to "I am changing!". Go back to the browser and refresh the screen. You can see the new text on the screen.

2. Adding a controller:

OK, now we move on to add our first controller to the "hello world" application. Type the following command at the terminal to generate the controller:

<path_to_abbot>/bin/sc-gen controller HelloWorld.appController

This will create a controller for the application under the directory "controllers". The code in the controller would look like:

The create method on the Object class is creating new instance of Object. Now, we will be adding some code to our controller. Replace the line with TODO with the line below:

greeting: "Hello World!"

3. Adding the binding:

Now switch back to main_page.js and replace the text value: "Hello World" with the below text:

valueBinding: 'HelloWorld.appController.greeting'

If you refresh the page in the browser, you will see "Hello World" again. But now the text of the label is coming from the property of the controller. It is live binding of the text of the label to the property of the controller. This can be verified by typing the below line in the FireBug console:

HelloWorld.appController.set('greeting', 'I am changing again!!!')

You will see that the text will change to the value set by you above.

4. Adding button:

Now we move on to the next step. We will add a button to our page. But before that, we will add a function to our controller which will look like:

This function is to toggle the greeting message. If the current greeting message is "Hello World", it will change it to "I am SproutCore!" and vice versa. This function can be tested by calling it on the FireBug console as:

HelloWorld.appController.toggleGreeting()

Now we add a button on click of which we can call this finction. For this we need to add the below code to main_page.js, just below the labelView:

Make sure that a comma is present after labelView design. Otherwise you'll get an error in your browser when you refresh. Now refresh the page in the browser. But where is our button :-(

Oh.. we forgot to add it the childViews array. Add it as below:

childViews: 'labelView buttonView'.w(),

w() is a function provided by SproutCore. If we have a string of substrings delimited by whitespaces, this function can convert such a string to an array of given substrings.

Now refresh the page. Good! Now we can see the button. Now click the button and see if the label text changes. :-)

Cool!

5. Observers:

One more key concept in SproutCore is observers. Observers are normal functions which observe the value of a specified property and execute the statements of the function whenever the property changes.

Above, we used button to toggle the text of the label. Now, we will implement something similar using a checkbox, where we can see a status as on or off.

In the app controller, just after the function, add the below property and the observer:

In SproutCore, we use YES or NO alternatively for true or false. There is no difference between the two, but we use it this way as a convention.

Here, note that isClockShowingObserver is an observer which is like a normal function. By just adding .observes function it becomes an observer which will observe the value of isClockShowing.

This can be tested by typing the below statement in FireBug:

HelloWorld.appController.set('isClockShowing', YES)

Next, we create a checkbox in our view. We replace the buttonView code with the following code:

and add the above views to child views

childViews: 'labelView checkbox checkBoxLabel'.w(),

The checkbox’ value property is now bound to the isClockShowing property, which means whenever you click the checkbox, the isClockShowing property will update causing your observer to fire which will change the greeting property and update the label. It all works like magic we hope. Refresh the web browser and try it out.

Finally, we add the clock functionality. We will add some functions in the controller and use the SproutCore Timers and date formatting functions. Add the below functions to the controller. Again, do not miss the comma after the previous property or function. This small miss can lead you to error on your page.

Modify the isClockShowingObserver observer as below:

Ok, done! Refresh the page and your clock should be ticking.

6. Localization:

Now, lets talk about localization i.e. customizing your application to work in languages other than English.  

To activate localization in your application, you just need to add a language folder for each language you want to support.  A language folder ends in the ".lproj" extension and contains all of the resources for your application that you want to appear localized.  Let's add your first language to the HelloWorld app.  On the command line, from the project directory type:

sc-gen language HelloWorld en

You should now find a new directory called "en.lproj" in your application with a string.js file in it.  In these string.js files we put the language specific strings. For our "Hello World" application, we can modify the strings.js file as:

To use these strings, you just need to tell SproutCore which strings you want to location.  Modify your main_page.js file like so:

So, we see that the application is actually language independent. If the application has to be deployed in some other locality, we just need to add strings.js file to the specific language's ".lproj" directory and add the property "_HelloWorld.ShowClock" in the file. The value of the property will be the language specific string in that language meaning, "Show Clock".

Note:

Statements executed with light green background are to be executed on FireBug console.