• If you are citizen of an European Union member nation, you may not use this service unless you are at least 16 years old.

  • Work with all your cloud files (Drive, Dropbox, and Slack and Gmail attachments) and documents (Google Docs, Sheets, and Notion) in one place. Try Dokkio (from the makers of PBworks) for free. Now available on the web, Mac, Windows, and as a Chrome extension!


Todos 08-Localizing

Page history last edited by Nicolas Zin 12 years, 1 month ago

1. Prepare your code for localization


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.



2. Localize your strings


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"




3. Test your localization


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. 



4. Change also html pages

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:



SC.stringsFor('English', {


     "_appTile": "Todos 0.1a",

     "_appButtonAddTask": "Add Task",

     "_appSummaryCounter0": "task",

     "_appSummaryCounter1": "selected"





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

Comments (1)

Pedro Luz said

at 8:56 am on Sep 2, 2009

Has a personal opinion i think that the things related to languages and localizing should be changed to the country code languages like EN, pt-PT, pt-BR, etc.

This for the folders as well for the names in the string.js

You don't have permission to comment on this page.