You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@pivot.apache.org by gb...@apache.org on 2009/10/12 22:51:38 UTC

svn commit: r824495 - in /incubator/pivot/trunk/tutorials: .settings/ src/org/apache/pivot/tutorials/databinding/ src/org/apache/pivot/tutorials/localization/ www/

Author: gbrown
Date: Mon Oct 12 20:51:38 2009
New Revision: 824495

URL: http://svn.apache.org/viewvc?rev=824495&view=rev
Log:
Add localization tutorial documentation; update data binding tutorial.

Added:
    incubator/pivot/trunk/tutorials/src/org/apache/pivot/tutorials/localization/Localization.json
      - copied unchanged from r824382, incubator/pivot/trunk/tutorials/src/org/apache/pivot/tutorials/localization/Localization_en.json
Removed:
    incubator/pivot/trunk/tutorials/src/org/apache/pivot/tutorials/localization/Localization_en.json
Modified:
    incubator/pivot/trunk/tutorials/.settings/org.eclipse.core.resources.prefs
    incubator/pivot/trunk/tutorials/src/org/apache/pivot/tutorials/databinding/data_binding.wtkx
    incubator/pivot/trunk/tutorials/src/org/apache/pivot/tutorials/localization/Localization.java
    incubator/pivot/trunk/tutorials/src/org/apache/pivot/tutorials/localization/localization.wtkx
    incubator/pivot/trunk/tutorials/www/data_binding.html
    incubator/pivot/trunk/tutorials/www/localization.html

Modified: incubator/pivot/trunk/tutorials/.settings/org.eclipse.core.resources.prefs
URL: http://svn.apache.org/viewvc/incubator/pivot/trunk/tutorials/.settings/org.eclipse.core.resources.prefs?rev=824495&r1=824494&r2=824495&view=diff
==============================================================================
--- incubator/pivot/trunk/tutorials/.settings/org.eclipse.core.resources.prefs (original)
+++ incubator/pivot/trunk/tutorials/.settings/org.eclipse.core.resources.prefs Mon Oct 12 20:51:38 2009
@@ -1,7 +1,7 @@
-#Thu Oct 08 11:59:56 EDT 2009
+#Mon Oct 12 16:24:54 EDT 2009
 eclipse.preferences.version=1
+encoding//src/org/apache/pivot/tutorials/localization/Localization.json=UTF-8
 encoding//src/org/apache/pivot/tutorials/localization/Localization_de.json=UTF-8
-encoding//src/org/apache/pivot/tutorials/localization/Localization_en.json=UTF-8
 encoding//src/org/apache/pivot/tutorials/stocktracker/StockTracker.json=UTF-8
 encoding//src/org/apache/pivot/tutorials/stocktracker/StockTracker_fr.json=UTF-8
 encoding//www/stock_tracker.localization.html=UTF-8

Modified: incubator/pivot/trunk/tutorials/src/org/apache/pivot/tutorials/databinding/data_binding.wtkx
URL: http://svn.apache.org/viewvc/incubator/pivot/trunk/tutorials/src/org/apache/pivot/tutorials/databinding/data_binding.wtkx?rev=824495&r1=824494&r2=824495&view=diff
==============================================================================
Binary files - no diff available.

Modified: incubator/pivot/trunk/tutorials/src/org/apache/pivot/tutorials/localization/Localization.java
URL: http://svn.apache.org/viewvc/incubator/pivot/trunk/tutorials/src/org/apache/pivot/tutorials/localization/Localization.java?rev=824495&r1=824494&r2=824495&view=diff
==============================================================================
--- incubator/pivot/trunk/tutorials/src/org/apache/pivot/tutorials/localization/Localization.java (original)
+++ incubator/pivot/trunk/tutorials/src/org/apache/pivot/tutorials/localization/Localization.java Mon Oct 12 20:51:38 2009
@@ -46,9 +46,9 @@
         Theme theme = Theme.getTheme();
         Font font = theme.getFont();
 
+        // Search for a font that can support the sample string
         String sampleResource = resources.getString("firstName");
         if (font.canDisplayUpTo(sampleResource) != -1) {
-            // Search for a font that can support the sample string
             Font[] fonts = GraphicsEnvironment.getLocalGraphicsEnvironment().getAllFonts();
 
             for (int i = 0; i < fonts.length; i++) {

Modified: incubator/pivot/trunk/tutorials/src/org/apache/pivot/tutorials/localization/localization.wtkx
URL: http://svn.apache.org/viewvc/incubator/pivot/trunk/tutorials/src/org/apache/pivot/tutorials/localization/localization.wtkx?rev=824495&r1=824494&r2=824495&view=diff
==============================================================================
Binary files - no diff available.

Modified: incubator/pivot/trunk/tutorials/www/data_binding.html
URL: http://svn.apache.org/viewvc/incubator/pivot/trunk/tutorials/www/data_binding.html?rev=824495&r1=824494&r2=824495&view=diff
==============================================================================
--- incubator/pivot/trunk/tutorials/www/data_binding.html (original)
+++ incubator/pivot/trunk/tutorials/www/data_binding.html Mon Oct 12 20:51:38 2009
@@ -34,11 +34,11 @@
 </head>
 <body>
 <h1>Data Binding</h1>
-<p>Data binding refers to the process of automatically populating or extracting data from a set of user interface elements. In Pivot, data binding is driven entirely by two methods of the <tt>Component</tt> class: <tt>load()</tt> and <tt>store()</tt>. The primary version of each method takes an instance of <tt>Dictionary&lt;String, ?&gt;</tt> called the "context". During a load operation, data is extracted from the context and "loaded" into the component; during a store, data is taken from the component and "stored" back into the context. Overloaded versions of both <tt>load()</tt> and <tt>store()</tt> allow a caller to pass a JavaBean value as a bind context, which will be wrapped in a <tt>BeanDictionary</tt> and passed to the version that takes a dictionary argument.</p>
+<p>Data binding refers to the process of automatically populating or extracting data from a set of user interface elements. In Pivot, data binding is driven primarily by two methods of the <tt>Component</tt> class: <tt>load()</tt> and <tt>store()</tt>. Each method takes an instance of <tt>Dictionary&lt;String, ?&gt;</tt> called the "context". Calling <tt>load()</tt> causes data from the context to be "loaded" into the component; calling <tt>store()</tt> performs the reverse operation and "stores" data from the component into the context. Overloaded versions of both methods allow a caller to pass a JavaBean value as a bind context, which will be wrapped in a <tt>BeanDictionary</tt> and passed to the version that takes a dictionary argument. A third method, <tt>clear()</tt> allows a caller to reset any bindings.</p>
 
 <p>The <tt>Container</tt> class overrides <tt>load()</tt> and <tt>store()</tt> to facilitate the use of nested contexts. When a container is assigned a context key, if a value with that key exists in the context passed to <tt>Container#load()</tt> or <tt>store()</tt>, that value becomes the context that is propagated to sub-components in further binds. This can significantly simplify the task of binding to complex data structures.</p>
 
-<p>The following application demonstrates data binding. It allows the user to load a form with address data either from a JSON file or from a JavaBean object:</p>
+<p>The following application demonstrates data binding. It allows the user to load a form with address data either from a JSON file or from a JavaBean object, as well as clear the form:</p>
 
 <script src="version.js"></script>
 <script>
@@ -47,8 +47,8 @@
         + ",lib/pivot-wtk-" + version + ".jar"
         + ",lib/pivot-wtk-" + version + ".terra.jar"
         + ",lib/pivot-tutorials-" + version + ".jar",
-    width:260,
-    height:260
+    width:250,
+    height:230
 };
 var parameters = {application_class_name:"org.apache.pivot.tutorials.databinding.DataBinding",
     codebase_lookup:false,
@@ -64,7 +64,7 @@
     xmlns:wtkx="http://pivot.apache.org/wtkx"
     xmlns="org.apache.pivot.wtk"&gt;
     &lt;content&gt;
-        &lt;Border styles="{thickness:0, padding:8}"&gt;
+        &lt;Border styles="{padding:6}"&gt;
             &lt;content&gt;
                 &lt;BoxPane orientation="vertical" styles="{spacing:10, fill:true}"&gt;
                     &lt;Form wtkx:id="form"&gt;
@@ -109,9 +109,9 @@
 &lt;/Window&gt;
 </pre>
 
-<p>Note that the &lt;BoxPane&gt; for the address section defines a context key. This creates a nested bind context for its sub-elements, allowing the sub-elements to refer to the bound values using a relative key (e.g. "street"). However, since the &lt;BoxPane&gt; for the IM account section does not define a context key, its sub-elements must refer to their bound values using a path that is relative to the root context (e.g. "imAccount.id").</p>
+<p>Note that the <tt>&lt;BoxPane&gt;</tt> for the address section defines a context key. This creates a nested bind context for its sub-elements, allowing the sub-elements to refer to the bound values using a relative key (e.g. "street"). However, since the <tt>&lt;BoxPane&gt;</tt> for the IM account section does not define a context key, its sub-elements must refer to their bound values using a path that is relative to the root context (e.g. "imAccount.id").</p>
 
-<p>The application's <tt>startup()</tt> method attaches button press listeners to each button that loads the form from a JSON file, loads the form from an instance of a <tt>Contact</tt> JavaBean, or clears the form:</p>
+<p>The application's <tt>startup()</tt> method defines the button press listeners that load or clear the form:</p>
 
 <pre class="brush:java">
 package org.apache.pivot.tutorials.databinding;
@@ -216,7 +216,7 @@
 }
 </pre>
 
-<p>The JSON representation of the sample contact record is defined as follows:</p>
+<p>The JSON representation of the sample contact record is defined as follows (note that, while JSON is used to represent the data in this example, any class that implements the <tt>Dictionary</tt> interface, including <tt>HashMap</tt>, can be used):</p>
 
 <pre class="brush:javascript">
 {   id: 101,

Modified: incubator/pivot/trunk/tutorials/www/localization.html
URL: http://svn.apache.org/viewvc/incubator/pivot/trunk/tutorials/www/localization.html?rev=824495&r1=824494&r2=824495&view=diff
==============================================================================
--- incubator/pivot/trunk/tutorials/www/localization.html (original)
+++ incubator/pivot/trunk/tutorials/www/localization.html Mon Oct 12 20:51:38 2009
@@ -25,6 +25,7 @@
 <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js"></script>
 <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js"></script>
 <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js"></script>
+<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js"></script>
 <link type="text/css" rel="stylesheet" href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css"/>
 <link type="text/css" rel="stylesheet" href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css"/>
 <script type="text/javascript">
@@ -33,6 +34,187 @@
 </head>
 <body>
 <h1>Localization</h1>
-<p>This section is not yet complete.</p>
+
+<p>In Java, any translatable text is generally stored in a set of localized property files called "resource bundles". The appropriate file is loaded at runtime for either the default locale or an explicitly selected non-default locale. While it is possible to use standard Java resource bundles in a Pivot application, Pivot adds support for JSON-based resource bundles that are slightly more flexible the built-in properties-based bundles. JSON resource bundles allow developers to more easily work with UTF-8 encoded resource strings, and also natively support hierarchical data, which can only be simulated when using properties files.</p>
+
+<p>The following application provides a simple demonstration of localization in Pivot:</p>
+
+<script src="version.js"></script>
+<script>
+var attributes = {code:"org.apache.pivot.wtk.BrowserApplicationContext$HostApplet",
+    archive:"lib/pivot-core-" + version + ".jar"
+        + ",lib/pivot-wtk-" + version + ".jar"
+        + ",lib/pivot-wtk-" + version + ".terra.jar"
+        + ",lib/pivot-tutorials-" + version + ".jar",
+    width:320,
+    height:240
+};
+var parameters = {application_class_name:"org.apache.pivot.tutorials.localization.Localization",
+    codebase_lookup:false,
+    java_arguments:"-Dsun.awt.noerasebackground=true -Dsun.awt.erasebackgroundonresize=true"
+};
+deployJava.writeAppletTag(attributes, parameters);
+</script>
+
+<p>The following resource bundles are provided; if your default system locale is among these, you should see a localized version of the application. Otherwise, the default locale ("en") will be used:</p>
+
+<ul>
+<li>Localization.json</li>
+<li>Localization_cn.json</li>
+<li>Localization_de.json</li>
+<li>Localization_it.json</li>
+<li>Localization_ph.json</li>
+</ul>
+
+<p>The resource bundle for the default locale is shown below:</p>
+
+<pre class="brush:jscript">
+{   firstName: "First name",
+    lastName: "Last name",
+    street: "Street",
+    city: "City",
+    state: "State",
+    postalCode: "Zip",
+    country: "Country"
+}
+</pre>
+
+<p>The WTKX source for the application is as follows. Note the use of the "%" prefix in the form label attributes. This prefix is known as the "resource resolution operator" in WTKX. As the WTKX is read, attribute values that begin with the "%" character are replaced by the corresponding values defined in the resource bundle:</p>
+
+<pre class="brush:xml">
+&lt;Window title="Localization" maximized="true"
+    xmlns:wtkx="http://pivot.apache.org/wtkx"
+    xmlns="org.apache.pivot.wtk"&gt;
+    &lt;windowStateListeners&gt;
+        &lt;wtkx:script&gt;
+        &lt;![CDATA[
+        function windowOpened(window) {
+            window.requestFocus();
+        }
+        ]]&gt;
+        &lt;/wtkx:script&gt;
+    &lt;/windowStateListeners&gt;
+
+    &lt;content&gt;
+        &lt;Border styles="{padding:6}"&gt;
+            &lt;content&gt;
+                &lt;Form&gt;
+                    &lt;sections&gt;
+                        &lt;Form.Section&gt;
+                            &lt;TextInput Form.label="%firstName"/&gt;
+                            &lt;TextInput Form.label="%lastName"/&gt;
+                            &lt;TextInput Form.label="%street"/&gt;
+                            &lt;TextInput Form.label="%city"/&gt;
+                            &lt;TextInput Form.label="%state" textSize="4"/&gt;
+                            &lt;TextInput Form.label="%postalCode"/&gt;
+                            &lt;TextInput Form.label="%country"/&gt;
+                        &lt;/Form.Section&gt;
+                    &lt;/sections&gt;
+                &lt;/Form&gt;
+            &lt;/content&gt;
+        &lt;/Border&gt;
+    &lt;/content&gt;
+&lt;/Window&gt;
+</pre>
+
+<p>The Java source for the application is shown below:</p>
+
+<pre class="brush:java">
+package org.apache.pivot.tutorials.localization;
+
+import java.awt.Font;
+import java.awt.GraphicsEnvironment;
+import java.util.Locale;
+
+import org.apache.pivot.collections.Map;
+import org.apache.pivot.util.Resources;
+import org.apache.pivot.wtk.Application;
+import org.apache.pivot.wtk.DesktopApplicationContext;
+import org.apache.pivot.wtk.Display;
+import org.apache.pivot.wtk.Theme;
+import org.apache.pivot.wtk.Window;
+import org.apache.pivot.wtkx.WTKXSerializer;
+
+public class Localization implements Application {
+    private Window window = null;
+
+    public static final String LANGUAGE_KEY = "language";
+
+    @Override
+    public void startup(Display display, Map&lt;String, String&gt; properties) throws Exception {
+        String language = properties.get(LANGUAGE_KEY);
+        if (language != null) {
+            Locale.setDefault(new Locale(language));
+        }
+
+        Resources resources = new Resources(getClass().getName(), "UTF-8");
+
+        Theme theme = Theme.getTheme();
+        Font font = theme.getFont();
+
+        // Search for a font that can support the sample string
+        String sampleResource = resources.getString("firstName");
+        if (font.canDisplayUpTo(sampleResource) != -1) {
+            Font[] fonts = GraphicsEnvironment.getLocalGraphicsEnvironment().getAllFonts();
+
+            for (int i = 0; i &lt; fonts.length; i++) {
+                if (fonts[i].canDisplayUpTo(sampleResource) == -1) {
+                    theme.setFont(fonts[i].deriveFont(Font.PLAIN, 12));
+                    break;
+                }
+            }
+        }
+
+        WTKXSerializer wtkxSerializer = new WTKXSerializer(resources);
+
+        window = (Window)wtkxSerializer.readObject(this, "localization.wtkx");
+        window.open(display);
+    }
+
+    @Override
+    public boolean shutdown(boolean optional) {
+        if (window != null) {
+            window.close();
+        }
+
+        return false;
+    }
+
+    @Override
+    public void suspend() {
+    }
+
+    @Override
+    public void resume() {
+    }
+
+    public static void main(String[] args) {
+        DesktopApplicationContext.main(Localization.class, args);
+    }
+}
+</pre>
+
+<p>Note that the application accepts a startup property named "language" to allow a caller to override the default locale. The following example shows the application loaded with "language" value of "de" (the applet is signed to allow the code to set the locale):</p>
+
+<script src="version.js"></script>
+<script>
+var attributes = {code:"org.apache.pivot.wtk.BrowserApplicationContext$HostApplet",
+    archive:"lib/pivot-core-" + version + ".signed.jar"
+        + ",lib/pivot-wtk-" + version + ".signed.jar"
+        + ",lib/pivot-wtk-" + version + ".terra.signed.jar"
+        + ",lib/pivot-tutorials-" + version + ".signed.jar",
+    width:320,
+    height:240
+};
+var parameters = {application_class_name:"org.apache.pivot.tutorials.localization.Localization",
+    codebase_lookup:false,
+    java_arguments:"-Dsun.awt.noerasebackground=true -Dsun.awt.erasebackgroundonresize=true",
+    startup_properties:"language=de"
+};
+deployJava.writeAppletTag(attributes, parameters);
+</script>
+
+<p>Notice that the <tt>startup()</tt> method includes code to search for a font that can display a sample set of characters obtained from the "firstName" resource. This is because all fonts are not guaranteed to include support for all possible Unicode characters. If the current theme font is not capable of displaying the sample string, this block of code attempts to identify and set one that can. This code must be executed prior to constructing any user interface elements so that the correct font will be used.</p>
+
 <p>Next: <a href="scripting.html">Scripting</a></p>
 </html>