In the JS framework what you have to do is go back to the main_page.js and change some things:
labelView: SC.LabelView.design({
layout: { centerY: 0, height: 24, left: 8, width: 200 },
controlSize: SC.LARGE_CONTROL_SIZE,
fontWeight: SC.BOLD_WEIGHT,
value: "_appTitle".loc()
})
addButton: SC.ButtonView.design({
layout: {centerY: 0, height: 24, right: 12, width: 100},
title: "_appButtonAddTask".loc(),
target: 'Todos.taskController',
action: 'addTask'
})
in the controllers/task.js change:
if (len && len > 0) {
ret = len === 1 ? "1 " + "_appSummaryCounter0".loc() : "%@ tasks".fmt(len);
} else {
ret = "No tasks";
}
if (sel && sel.get('length') > 0) {
ret = ret + " (%@ "_appSummaryCounter1".loc())".fmt(sel.get('length'));
}
and if you reload the page you can now see the page didn't change, but now the text that you see in the buttons labels, etc is comming from that "dictionary" that you created.
Localizing used by creating some key:value properties in the file <path to project>\apps\<project name>\english.lproj\strings.js.
In this file we can see something like this:
// ==========================================================================
// Project: Project Name Strings
// Copyright: ©2009 My Company, Inc.
// ==========================================================================
/*globals Project Name */
// Place strings you want to localize here. In your app, use the key and
// localize it using "key string".loc(). HINT: For your key names, use the
// english string with an underscore in front. This way you can still see
// how your UI will look and you'll notice right away when something needs a
// localized string added to this file!
//
SC.stringsFor('English', {
// "_String Key": "Localized String"
});
We need to make a kind of dictionary of keys and values, something like this:
SC.stringsFor('English', {
"_appTile": "Todos 0.1a",
"_appButtonAddTask": "Add Task",
"_appSummaryCounter0": "task",
"_appSummaryCounter1": "selected"
});
To get the localization done for other language, you have to create a lproj directory for a specify language :
sc-gen language <project name>.fr fr
Then you can edit your new strings files to add your localization
SC.stringsFor('fr', {
"_appTile": "Todos 0.1a",
"_appButtonAddTask": "Ajouter une tâche",
"_appSummaryCounter0": "tâche",
"_appSummaryCounter1": "sélectionnés"
});
If you go back to your app http://localhost:4020/appname, nothing has changed (except if you made mistakes, in that case you will see '_strings')
To test your localized app, go to http://localhost:4020/appname/lang, in the example above http://localhost:4020/appname/fr
Note: By placing into JS framework strings beginning with '_', you will easily find in strings you forgot to localised.
You can also localize strings into HTML of your web page.
This is done by localizing text with <%= loc("My Key") %> command. For example, you can edit into english.lproj, the loading.rhtml file:
<% content_for :loading do %>
<% # 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.
%>
<p class="loading"><%= loc("_loading") %>...<p>
<% end %>
strings.js has to be edited accordingly:
english.lproj/strings.js
SC.stringsFor('English', {
"_loading":"Loading",
"_appTile": "Todos 0.1a",
"_appButtonAddTask": "Add Task",
"_appSummaryCounter0": "task",
"_appSummaryCounter1": "selected"
});
fr.lproj/strings.js
SC.stringsFor('fr', {
"_loading": "Chargement",
"_appTile": "Todos 0.1a",
"_appButtonAddTask": "Ajouter une tâche",
"_appSummaryCounter0": "tâche",
"_appSummaryCounter1": "selectionnés"
});
Note: I manage to make a fr.lproj working but I didn't manage to make a french.lproj directory working, I don't know why