fosdem2003/l10ntalk_06.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
   2 <html>
   3 <head>
   4   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15">
   5   <meta name="Author" content="KaiRo - Robert Kaiser">
   6   <title>L10n talk - FOSDEM 2003 - Mozilla Meeting</title>
   7   <link rel="stylesheet" type="text/css" href="l10ntalk.css">
   8   <link rel="contents" href="index.html" title="Contents">
   9   <link rel="index" href="l10ntalk_overview.html" title="Overview">
  10   <link rel="start" href="index.html" title="Start">
  11   <link rel="first" href="l10ntalk_01.html" title="First page">
  12   <link rel="previous" href="l10ntalk_05.html" title="Previous page">
  13   <link rel="next" href="l10ntalk_07.html" title="Next page">
  14   <link rel="last" href="l10ntalk_12.html" title="Last page">
  15 </head>
  16 <body>
  17
  18 <h1>using string bundles with JavaScript</h1>
  19
  20 <div class="explanation">
  21 For localization of text that gets displayed with JavaScript, there are <b>multiple techniques</b>.
  22 First, we could use <b>&lt;data&gt;&amp;some.text;&lt;/data&gt;</b> constructs (which don't get displayed in the UI),
  23 read their values from JS and use them for displaying. This isn't a very elegant solution though.
  24 <br>The normal solution for this situation is to use <b>string bundles</b>, which are saved in
  25 Java-style <b>.properties</b> files. String bundles can be accessed in two ways: First, they can be read by a XUL
  26 <b>&lt;stringbundle&gt;</b> element:
  27 </div>
  28
  29 <div class="sample">
  30 <p class="sampledesc">Sample XUL: openLocation.xul, calling some JS code</p>
  31 <div class="samplecontent">
  32 &lt;?xml version=&quot;1.0&quot;?&gt;
  33 <br>&lt;!DOCTYPE dialog SYSTEM &quot;chrome://communicator/locale/openLocation.dtd&quot;&gt;
  34 <br>&lt;dialog id=&quot;openLocation&quot; ... title=&quot;&amp;caption.label;&quot; onLoad=&quot;onLoad();&quot;&gt;
  35 <br>&lt;script type=&quot;application/x-javascript&quot; src=&quot;chrome://communicator/content/openLocation.js&quot;/&gt;
  36 <br>&lt;<b>stringbundle id=&quot;openLocationBundle&quot;</b> src=&quot;chrome://communicator/<b>locale/openLocation.properties</b>&quot;/&gt;
  37 <br>...
  38 <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;menuitem value=&quot;0&quot; id=&quot;currentWindow&quot; label=&quot;&amp;topWindow.label;&quot;/&gt;
  39 <br>...
  40 <br>&lt;/dialog&gt;
  41 </div>
  42 </div>
  43
  44 <div class="sample">
  45 <p class="sampledesc">Sample JavaScript: openLocation.js</p>
  46 <div class="samplecontent">
  47 ...
  48 <br>function onLoad()
  49 <br>{
  50 <br>&nbsp;&nbsp;dialog.main = document.getElementById("openLocation");
  51 <br>&nbsp;&nbsp;dialog.openTopWindow = document.getElementById("currentWindow");
  52 <br>&nbsp;&nbsp;<b>dialog.bundle = document.getElementById("openLocationBundle");</b>
  53 <br>&nbsp;&nbsp;if (!browser) {
  54 <br>&nbsp;&nbsp;&nbsp;&nbsp;// No browser supplied - we are calling from Composer
  55 <br>&nbsp;&nbsp;&nbsp;&nbsp;// Change string to make more sense for Composer
  56 <br>&nbsp;&nbsp;&nbsp;&nbsp;dialog.openTopWindow.setAttribute("label", <b>dialog.bundle.getString</b>("<span class="hilite">existingNavigatorWindow</span>"));
  57 <br>&nbsp;&nbsp;&nbsp;&nbsp;// change title to 'Open Location with Mozilla'
  58 <br>&nbsp;&nbsp;&nbsp;&nbsp;dialog.open.setAttribute("title", <b>dialog.bundle.getString</b>("<span class="hilite">caption2.label</span>"));
  59 <br>&nbsp;&nbsp;}
  60 <br>}
  61 </div>
  62 </div>
  63
  64 <div class="sample">
  65 <p class="sampledesc">Sample string bundle: openLocation.properties</p>
  66 <div class="samplecontent">
  67 <span class="hilite">existingNavigatorWindow</span>=Existing Navigator window
  68 <br><span class="hilite">caption2.label</span>=Open Location with Mozilla
  69 </div>
  70 </div>
  71
  72 </body>
  73 </html>