Tapestry properties in jQuery

Question

I have two files: "Index.properties", "Index_es.properties" for multilenguage in Tapestry. I want to read literals from those files in a *.js file, for example:

 **Index.properties:**
    menu=Main menu
    menu-welcome=Welcome to my webpage


  **Index_es.properties:**
    menu=Menú principal
    menu-welcome=Bienvenido a mi página web


  **Index.tml:**
      ...
      <script type="text/javascript" language="JavaScript"
    src="${context:/javaScript/menu.js}"></script>
      ...

  **menu.js:**
       ...
       var currentOption=$('#activemenu').attr('name');
       if (currentOption=="menu"){
         $("#button1txt").text("${message:option1}");
       }
       ...

How can I read the files since "menu.js"? Thank you

Answer 1

About expansions

Expansions only work in your templates (.tml files) or in the component classes if you are using the @Component annotation, for example.

Component parameter documentation:

https://tapestry.apache.org/component-parameters.html

You cannot access files in JavaScript that are stored on the server. But you could pass them along with your script’s init script.

How to add custom scripts to your pages

Don’t do this to your template:

<script type="text/javascript" language="JavaScript" src="${context:/javaScript/menu.js}"></script>

Do this instead to your page class:

@Import(library = { "context:javaScript/menu.js" })
public class Index {

}

Read the documentation about this feature to learn more: http://tapestry.apache.org/javascript.html

Solution to your problem

With all that knowledge you’ll now rather want to pass the translations for your menu script like this:

@Import(library = { "context:javaScript/menu.js" })
public class Index {
    
    @Inject
    private Messages messages;

    @Inject
    private JavaScriptSupport javaScriptSupport;

    void afterRender() {

        javaScriptSupport.addInitializerCall("initMenu", new JSONObject()
            put("option1", messages.get("option1"))
        );
    }
}

menu.js

(function( $, window ) {

  'use scrict';

  $.extend(Tapestry.Initializer, {
    initMenu: function (spec) {
      var currentOption=$('#activemenu').attr('name');
      if (currentOption=="menu"){
        $("#button1txt").text(spec.option1);
      }
    }
  }
})(jQuery, window);