javascript i18n with gettext and .po files - javascript

My translation mechanism works serverside with the jinja2 template engine, webapp2's i18n function with the magic _ function and now I need it for Javascript to localize just a few strings but I couldn't find a good implementation. Is there one?
I'd like a solution for localizing my web app. The javascript strings are just a few but I need a translation mechanism and the dictionary is .po and .mo files. Ideally I'd like javascript to take the same dictionaries as python does (the .po files)
I don't need extractions, what I need is the _ function plus some way of determining user language and loading the translations, not just for a single language but for all my languages. I looked at some solutions but they only handla one translation at a time and I need to handle many.
For instance, http://www.zomeoff.com/jsin/jsin.1.2.unit.test.html does a successful job but this is only one localization. I need to harmonize the translations so that the same language is used by both the python jinja2 templates and javascript.
Do you have s suggestion or can comment my situation?
Thank yo

Javascript Gettext
You could probably use polib and json to generate the JSON on the fly though.

Related

Interpolating org.mozilla.javascript.NativeDate into FreeMarker

I'm developing web script for Alfresco 5.0d CE and encountered an issue: I cannot interpolate datetime value of type org.mozilla.javascript.NativeDate in my FreeMarker template directly (or with embedded FreeMarker methods ?date, ?time or ?datetime).
${var.startDate}
interpolates into
org.mozilla.javascript.NativeDate#<some_hash>
Please, advise me, how can I do that?
Can you introduce your own FreeMarker utility methods in Alfresco? Because then there you can call the static org.mozilla.javascript.Context.toType(valueFromRhyno, Date.class) method to convert the Rhyno JavaScript date to a Java java.util.Date. So let's say you implement that in Java, then expose that utility to FreeMarker. I don't know how to do that in Alfresco, but FreeMarker itself supports that. Then you can do something like ${myJsUtils.toJava(var.startDate)}.
Actually, FreeMarker's ObjectWrapper facility is designed to deal with these kind of mismatches. If you can use a custom ObjectWrapper, then it could just work magically, as then FreeMarker will know how to convert the Rhyno objects automatically. But I guess changing such a core setting under Alfrescho can be tricky. Too bad they themselves didn't do that.

Translation with Thymeleaf in JavaScript

In my HTML page I'm loading my translation with Thymeleaf like that:
<button type="button" ng-click="$ctrl.resetData()" th:text="#{general.reset}">Reset</button>
Is it possible to translate text wich is hard coded in my JavaScript code?
'Loading Data...' should be translated with th:text="#{general.loadingData}" <- but this is the way I would translate it im my HTML page, this doesn't work for JavaScript Code. All the translations are in a messeges_en.properties file.
How can I translate the text in JavaScript?
function(request: any) {
asLoading.show('Loading Data...');
return request || $q.when(request);
}
You should use javascript Intl API.
FormatJs is a modular collection of JavaScript libraries for internationalization that are focused on formatting numbers, dates, and strings for displaying to people.
It has support for ICU message format (International Components for Unicode) which is also well supported in java as well.
So you can expose your translations in ICU message format and consume them from both java and javascript.
In general, it is better to treat javascript and java code as separate applications as opposed to treating javascript as something that is tacked on top of a java template language like thymeleaf.

Using resource files (.resx) in javascript

I'm trying to use localization in my project but I can't find a way to access my resx files from javascript. I have been looking around a bit and I don't think the 'AJAX call' method would be ideal for my project since I have quiet a lot of string that need to be fetched and it would just have to spam the server hard!
if I just put it in my HTML then it works with this code:
#using Resources
<p>#Html.Raw(ISt_Localization.January)</p>
I guess one of the things I could do is put all the strings in a hidden div and then get the content from the divs in my javascript but this wouldn't be very effective..
I had a similar situation and in my case, I created a separate partial view which only contained a javascript block where I put all the resource strings required for use in client side logic. Every resource string was defined as a javascript variable. You could also create an associative array.
In your partial view:
var Resources = {
January : "#Html.Raw(ISt_Localization.January)",
February : "#Html.Raw(ISt_Localization.February)",
...
};
You can also try the below thing directly
#using Resources
<script>
var value = '#Resource.January';
/* work with value
.......
.....
*/
</script>
I took a totally different approach.
I want to have the resource strings required by my Javascript files be part of my resx files.
Every key in my resource file which starts with js has to become available in Javascript.
In global.asax, in Application_OnStart I build Javascript files for all supported languages on the fly.
Because this only happens at the start of the application, it does not matter if it takes a few seconds.
Advantages:
All translations in one place (in the rex files which you use for your .NET application (C# or VB), but also for your Javascript code
Always up to date
Very fast, because we are going to use variables to get the translations
Building the Javascript file is easy.
Iterate through all key value pairs in all resx-files. Just pick out the keys starting with _js_.
Save the key value pair in the Javascript file.
So if the key value pair in the resx-file (languageSupport_es.resx) is '_js_Hello', 'Hola',
I write in my Javascript file (languageSupport_es.js) var Hello = 'Hola';
So alert(Hello) will give you 'Hola' if the current language is Spanish.
The only thing I now have to take care of, is using the right 'language Javascript file' is loaded before my other Javascript files.
So if the language is Spanish, I ONLY include my 'Spanish language Javascript file' (languageSupport_es.js) first.
Easy no? If somebody is interested, I can show some example code...

Relation between HandleBar js and Mustache js

i'm very new to Handlebar js. In every article about the HandleBar js there is a word called (mustache js). So,
1. What is the relation between Handllebar js and Mustache js?
2. Is it necessary to read mustache js before handlebar js?
3. What s advantage of HandleBar js over Mustache js?
Thanks.
Handlebars.js is a superset of Mustache.js. It offers all the same ability to insert JSON into templates plus additional abilities to do some basic if/then, etc. In general, I find it much easier to do templating with Handlebars.
Mustache is very much about not having any logic in your template at all. Every piece that gets inserted into it should be pre-chewed so there's no need for any logic. I find that to not at all be realistic.
Just realized that I didn't answer one of your questions. No, it is not necessary to read about Mustache before using Handlebars. The Handlebars documentation is sufficient on its own.
P.S. One of our favorite Handlebars features is "helpers" which allow you to create new keywords in the language for specific things (for example, we use one to format numbers and sometimes replace them with "N/A" for zero values).
P.P.S. A great way to try out Handlebars and see some templates in action (and also to play with your own templates and JSON) is http://www.tryhandlebarsjs.com/
According to this website (which also provides a benchmark between the two)
handlebars.js is a compiled mustache implementation with some additional
features

Can JQuery or JavaScript be used to manipulate XML/DOM without a browser?

I am starting to study some web technologies to integrate content, markup, layout, styling and behaviors of stuff for personal use (NOT web developing for now) and am amazed with the power of JQuery selectors and functions.
I have heard that there are some ways to use javascript "outside" a browser, to do some DOM selection, manipulation, etc. I wonder if JQuery could be used that way too.
So, what I would like to do is:
Using some programming/scripting language (I use Python), access a XML file and parse its DOM;
Programmatically manipulate and modify the DOM with javascript/jquery selectors and functions;
Save the results to (possibly another) XML file.
If you like jQuery syntax, check out pyQuery:
from pyquery import PyQuery
_ = PyQuery('<body><p></p></body>')
_("p").text("hello").css({'color': 'red'})
print _.html()
>>> <p style="color: red">hello</p>
yeah, you just need a Javascript run time.
Check out node.js
What you're looking for is called a "headless" browser.
This SO post may help:
Real headless browser
Basically you need a javascript interpreter (ex: V8) + wrapper for your language of choice (ex: pyv8). Then you can do this (from pyv8 page):
import PyV8
ctxt = PyV8.JSContext()
ctxt.enter()
ctxt.eval("1+2") # 1+2 is a javascript code

Categories