i18n guide: add screenshots and explain localize method

6 files changed, 39 insertions, 8 deletions

diff --git a/railties/doc/guides/source/i18n.txt b/railties/doc/guides/source/i18n.txt
index 4f5c27647d..d2cfbdad5d 100644
--- a/railties/doc/guides/source/i18n.txt
+++ b/railties/doc/guides/source/i18n.txt
@@ -128,7 +128,9 @@ end
 <p><%= flash[:notice] %></p>
 -------------------------------------------------------
 
-TODO screenshot
+image:images/i18n/demo_untranslated.png[rails i18n demo untranslated]
+
+=== Adding Translations
 
 Obviously there are two strings that are localized to English. In order to internationalize this code replace these strings with calls to Rails' #t helper with a key that makes sense for the translation:
 
@@ -148,7 +150,7 @@ end
 
 When you now render this view it will show an error message that tells you that the translations for the keys :hello_world and :hello_flash are missing.
 
-TODO screenshot
+image:images/i18n/demo_translation_missing.png[rails i18n demo translation missing]
 
 NOTE: Rails adds a +t+ (+translate+) helper method to your views so that you do not need to spell out +I18n.t+ all the time. Additionally this helper will catch missing translations and wrap the resulting error message into a &lt;span class="translation_missing"&gt;.
 
@@ -156,27 +158,56 @@ So let's add the missing translations (i.e. do the "localization" part):
 
 [source, ruby]
 -------------------------------------------------------
-# lib/locale/en.yml
+# config/locale/en.yml
 en:
   hello_world: Hello World
   hello_flash: Hello Flash
   
-# lib/locale/pirate.yml
+# config/locale/pirate.yml
 pirate:
   hello_world: Ahoy World
   hello_flash: Ahoy Flash
 -------------------------------------------------------  
 
-There you go. Your application now shows:
+There you go. Because you haven't changed the default_locale I18n will use English. Your application now shows:
+
+image:images/i18n/demo_translated_english.png[rails i18n demo translated to english]
+
+And when you change the URL to pass the pirate locale you get:
+
+image:images/i18n/demo_translated_pirate.png[rails i18n demo translated to pirate]
+
+NOTE You need to restart the server when you add new locale files.
 
-TODO screenshot
+=== Adding Date/Time formats
+
+Ok, let's add a timestamp to the view so we can demo the date/time localization feature as well. To localize the time format you pass the Time object to I18n.l or (preferably) use Rails' #l helper. You can pick a format by passing the :format option, by default the :default format is used.
 
 [source, ruby]
 -------------------------------------------------------
-I18n.t 'store.title'
-I18n.l Time.now
+# app/views/home/index.html.erb
+<h1><%=t :hello_world %></h1>
+<p><%= flash[:notice] %></p
+<p><%= l Time.now, :format => :short %></p>
 -------------------------------------------------------
 
+And in our pirate translations file let's add a time format (it's already there in Rails' defaults for English):
+
+[source, ruby]
+-------------------------------------------------------
+# config/locale/pirate.yml
+pirate:
+  time:
+    formats:
+      short: "arrrround %H'ish"
+-------------------------------------------------------
+
+So that would give you:
+
+image:images/i18n/demo_localized_pirate.png[rails i18n demo localized time to pirate]
+
+NOTE Right now you might need to add some more date/time formats in order to make the I18n backend work as expected. See the http://github.com/svenfuchs/rails-i18n/tree/master/rails/locale[rails-i18n repository] for starting points.
+
 
 == Overview of the I18n API features
 
diff --git a/railties/doc/guides/source/images/i18n/demo_localized_pirate.png b/railties/doc/guides/source/images/i18n/demo_localized_pirate.png
new file mode 100644
index 0000000000..22b93416a0
--- /dev/null
+++ b/railties/doc/guides/source/images/i18n/demo_localized_pirate.png
diff --git a/railties/doc/guides/source/images/i18n/demo_translated_en.png b/railties/doc/guides/source/images/i18n/demo_translated_en.png
new file mode 100644
index 0000000000..7ea0c437a5
--- /dev/null
+++ b/railties/doc/guides/source/images/i18n/demo_translated_en.png
diff --git a/railties/doc/guides/source/images/i18n/demo_translated_pirate.png b/railties/doc/guides/source/images/i18n/demo_translated_pirate.png
new file mode 100644
index 0000000000..60ef370158
--- /dev/null
+++ b/railties/doc/guides/source/images/i18n/demo_translated_pirate.png
diff --git a/railties/doc/guides/source/images/i18n/demo_translation_missing.png b/railties/doc/guides/source/images/i18n/demo_translation_missing.png
new file mode 100644
index 0000000000..86a3121cc1
--- /dev/null
+++ b/railties/doc/guides/source/images/i18n/demo_translation_missing.png
diff --git a/railties/doc/guides/source/images/i18n/demo_untranslated.png b/railties/doc/guides/source/images/i18n/demo_untranslated.png
new file mode 100644
index 0000000000..e6717fb7d1
--- /dev/null
+++ b/railties/doc/guides/source/images/i18n/demo_untranslated.png