Comments (38)
Any update on supporting RTL? We need this support for our application. without this, we can't surely go ahead with NativeScript.
from nativescript.
@valentinstoychev Umm sorry i wasn't clear enough.. I mean RTL direction in layout. and the ability to change it any time. pretty important can't live without it.
from nativescript.
Please check this solution for i18n by Dan Tamas:
https://www.nativescript.org/blog/i18n-internationalization-support-for-different-languages-in-nativescript
from nativescript.
Any news about this ?
from nativescript.
Hi @AntonioCuevaUrraco, great work.
Any specific release dates or this is only available in the development branch ?
Is there any RTL/ LTR support built into NativeScript.
Thanks and again great work.
from nativescript.
Hi @valentinstoychev
The i18n
plugins did not handle the rtl version for right to left language with i18n: bi-directional
...
from nativescript.
Couple of thoughts. Using strings.xml, one of the targetted platforms resources files are already done for us. It requires building localized resources files for iOS. I'd also add, that there are a number of online sites that are setup to assist in the translation of strings.xml.
If a json format is used, then native resources for both platforms need to be generated. Why use native resources? Because these are used by the app managers for things like app names, or in settings screens, things that are not being controlled by the js engines. Using a custom json format would negate the value of existing translation tools.
i18n support is also much more than just strings, but as mentioned includes images, videos and other resources. Funny as it seems, android is probably the easiest native platform to handle all this in. Sort them out by folders and 'it just works' (are you allowed to say that regarding android?). iOS requires sub projects and asset containers and witchcraft.
@alejonext approach of a simple L('resourceTag') for strings works for me, module may need some fallback features. I know this, use this regularly, and its second nature.
That being said, I have code used to swap strings 'on the fly' meaning, load a language into an app regardless the language set in the system. So you could have english (en) system but force the app to display in spanish (en). Was used to swap documents and pamphlets between 4 languages. In that case, we used JSON resources files.
But lets get this topic back up and running.
from nativescript.
The easiest way will be to create a view-model with desired properties, get localized properties values from resources:
http://developer.android.com/guide/topics/resources/localization.html
http://www.raywenderlich.com/64401/internationalization-tutorial-for-ios-2014
and bind your UI components to the view-model properties.
from nativescript.
Well... I create a module for Native, well use the strings natives. look
from nativescript.
As a part of the this task we can add support for loading different files based on the language similar to the resolution specific views.
For example loading one of the following files based on the language:
strings.lang-en.json
- English languagestrings.lang-fr.json
- French languagestrings.json
- default language
from nativescript.
@vakrilov Very interesting! in fact it is much easier than the way I propose.
from nativescript.
I like the proposed solution, @vakrilov . Is there any chance that this would affect performance adversely?
from nativescript.
Something to look into as well is the globalize
library part of jQuery foundation: https://github.com/jquery/globalize
from nativescript.
@vakrilov @enchev Are you saying that it will be added in the NativeScript core or different module? And other question. What do you think that it will be available? Next Version? Regards.
+1
from nativescript.
+1 for localization, keeping an eye on this one
from nativescript.
I need to be able to pull in and set the resource labels on load as well (from remote source, not static in the app)...hope the API can accomodate
from nativescript.
I know this is in progress, but can someone help me to get strings from an strings.xml in Android.
I try application.android.context.getResources().getString("app_name")
, but it doesn't work and quiet with an android.content.res.Resources$NotFoundException.
I think it is not possible to pass an string
as an resource key, but how do i express R.string.app_name
in NativeScript?
from nativescript.
Well... My module, thats take look. Bat vakrilov, say thats cool!
from nativescript.
I had a look at your module before and had the same issue that i described.
from nativescript.
Hmm, interesting; I actually have a simple plugin I made that is something similar to @vakrilov suggested where it uses a language.en.js or language.ru.js file to pull in the required resources.
So for example my language.en.js has
exports = {
main-screen: {'L_HELLO': "Hello", 'L_BLAH': "Blah"...},
about-screen: {'L_ABOUT': ...}
};
However, it is very simple system and doesn't support things like "0 items" "1 item" "2 items". (notice the missing "s" in 1 item) So my text has to be "x item(s)". I haven't decided how (or if) I want to support that. There is a lot to translating; but at this point the simplicity to be able to get things going it is what I need.
However, one thing that I do do is monkey patch the builder system to have it automatically replace all Declarative UI screens "L_*" with the text in the language.JS file while it is generating the ui. This makes it something I can require in the app.js file and forget for the most part it is their...
So my DCUI look like
<Label text="L_HELLO"/>
<ActionBar title="L_BLAH"/>
from nativescript.
+1 for this one, we are trying to get the multi language in our app. We tried already to use the plugin with no success...
from nativescript.
+1 please. we only need two languages at present so may just go with two apps, but it would be neat to have one app, many languages/locales.
from nativescript.
We are adding French support to our app soon, our approach to get it going before NS support is like this:
As soon as possible on your app load the language
//Get node modules data
var Jed = require('jed');
var lang = platformModule.device.language;
lang = lang.substring(0, 2);
global.sprintf = /*require("sprintf-js")*/Jed.sprintf
function loadI18n(lc) {
var lcobj = {}
try {
//this is the path to your json file with the language strings
//use po2json to have something readable
lcobj = require("./Localization/" + lc + "/" + lc + ".json");
} catch (e) {
if (lc) {
console.warn(lc + " not found, using default")
} else {
console.warn("using default")
}
}
var i18n = new Jed(lcobj);
global._ = function(arg1) {
return i18n.gettext(arg1);
}
};
loadI18n(lang);
Then later on you have to change all the xml strings to use the bindingcontext
<Label text="{{ Log in }}" />
and on the code
export function pageLoaded(args: EventData) {
var page: Page = <any>args.object;
page.bindingContext = source;
//Localization
source.set("Log in", sprintf(_("Log in")));
}
Take into account that you will have to change all the xml plain text to be set programmatically
from nativescript.
@AntonioCuevaUrraco isn't it loading all the text right in the memory or it executes a open/read file routine on every check?
Beside that i would like to share my thoughts about a possible pattern, but as i'm not a iOS i will focus on android only :/
- The string itself should be defined on a
i18n.json
i think. Like android already does it should receive a label as index
{
"main_window_title": {
"default": "Main Title",
"fr": "Titre Principal",
}
}
Ok. This file should be translated (for android) to the native valeus/strings.xml
format :)
- default language as english
res/values/strings.xml
<resources>
<string name="main_window_title">Main Title</string>
</resources>
- French
res/values-fr/strings.xml
<resources>
<string name="main_window_title">Titre Principal</string>
</resources>
- But why holding tight to the current native pattern?
Based on the affirmative that nativescript is actually generating native .xml layout we can make use of this right over the current text
attribute. So a nativescript button <Button text="@string/main_window_title" />
will work flawlessly. Like no need to extra parsing :3
- Ok, but we want support for multiple platforms
This (maybe) could be achieved by using one of this two extra syntax <Button text="i18n/main_window_title" />
?
As i try to highlight before, i don't have experience on this topic with iOS but i think half of this pattern would be nice :)
from nativescript.
@jalchr This is our personal implementation for localization using some standard javascript libraries. I think the guys of NS can answer you better about when NS will start to provide localization.
@vyscond we used this approach because jed is already a solid think and takes care of a lot of things, we didn't want to make everything from 0.
Also to create a .po file and use some of the editors freely available is easier for the translators to do their job and there is tools that can create a .json from the .po
I am not an expert in localization so I have some questions for you or whoever knows.
- What is the advantages of creating the i18n.json and how do you ask the translators to edit it?
- do they have to make it manually?
- what about several translators working in different languages can two i18n.json files be merged?
I think the
<Button text="@string/main_window_title" />
looks great, I was thinking to use something like that and modify the node modules to return a translation even if that property is not found in the binding context but It was really deep in the core and it would take a good while to make it and don't break something else. As a final thing I think we should use the native localization on the background somehow
from nativescript.
- What is the advantages of creating the i18n.json and how do you ask the translators to edit it?
The format is not really the point here. The goals is make an agnostic platform way to express this division between the strings. The .json
format was intent to make it easier to read through node. But i would strongly agree if they choose a more human way like a .yml
.
- do they have to make it manually?
Yes or no. With this "loose" separated file it could be build a external app to update/edit thing? I don't know. Right know i didn't need to translate my apps for more than 2 languages (native and english) so i never need external people to do that :/
I can't really understand the concern about gathering this kind of work from a "translator" and merging it.
- what about several translators working in different languages can two i18n.json files be merged?
Good point. On this way we could think on make the i18n
a directory with sub-directories with the names using the global pattern e.g.: en_US, pt_BR. This could avoid all things related to merging procedures :)
My base concern was just to know with your method is using too much memory from the too little with have on most of the devices and the second is about apply the same design/idea of the native script which is try to "translate" every possible routine to native handling lib/routines :)
from nativescript.
@vakrilov I understand your concern about memory and yes the method var i18n = new Jed(lcobj); is creating an object with all the key-values so that is probably loading the heap.
But I have been checking with the device monitor and I can't see a difference before creating the object and after so I am not sure it is really bad. Maybe we have an android heap guru to answer this because I have been working enough already to know that thing is really really complex
from nativescript.
@AntonioCuevaUrraco i see. A guru about that would be really nice and insightful. I can even be sure how android actually use the .xml
files itself.
from nativescript.
for first step please support direction
css property in framework
tanx
from nativescript.
Hi @valentinstoychev
Can you give me the full list of the supported languagesin the i18n npm solution? Because only es (Espanol) Works for me.. as your example.
Thanks
from nativescript.
Hi,
I believe multiple screen based on language is not defined and implemented at currently release. I wonder is there any way to specify code behind file manually to be used for time being? So if I have following.
page2.xml
page2.en_US.xml
page2.fr.xml
page2.ts
No matter which language xml file is loaded, I still could use page2.ts as code behind.
from nativescript.
Please add this feature asap or at least provider some 'basic' guide for it. I really need it in every app i'll ever gonna make here.
from nativescript.
@aboalwi which feature exactly you refer to? What functionality are you missing from the i18n plugin?
from nativescript.
@valentinstoychev I'm also curious about what @aboalwi is mentioning. Is there anything currently in Nativescript that supports UIs that need to display RTL such as Arabic?
from nativescript.
@valentinstoychev RTL is working partially almost 90% in iOS. but in android it is moving from right to Left in action bar. Is there a work around to achive this
<ActionBar title="{{'Contactus' | L}}">
<NavigationButton android.systemIcon="ic_menu_back" (tap)="goBack()"></NavigationButton>
<ActionItem ios.systemIcon="0" android.systemIcon="ic_menu_send" ios.position="right" (tap)="Submit()" [disabled]="contactUsData==contactUsDataOld"></ActionItem>
</ActionBar>
from nativescript.
We haven't plan anything particular around this feature for the upcoming 4.0 release.
from nativescript.
Update regarding the i18 support.
At this very moment, the localization in NativeScript Core projects is supported via a great community driven plugin called nativescript-localize. The plugin provides all must-have features for localization and can be used in Core and Angular based projects.
Based on the above, we are not currently planning to implement the i18n directly into the Core framework and the team recommendation is to use the available plugin in your projects.
from nativescript.
This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
from nativescript.
Related Issues (20)
- minHour and minMinute crash the app on TimePicker HOT 1
- TextField with [secure] string don't work on Android with core plugin 8.6.2 HOT 10
- ns build iOS and Xcode build not working after upgrade to xcode 15 HOT 5
- ResumeEvent in a component's constructor not triggering
- TypeError: Cannot read properties of undefined (reading 'env')
- Transfer nativescript.org Domain To The OpenJS Foundation
- RootLayout enterFrom animation bugged on iOS
- ReferenceError: NSURLSessionConfiguration is not defined HOT 12
- Missing API declarations & calling of restricted APIs HOT 8
- Android apps becomes unresponsive after resolution change
- NS PREVIEW don't working properly HOT 8
- Overlap using GridLayout iOS issue HOT 1
- [Known Issue] `npm i -g nativescript` error: gyp: binding.gyp not found HOT 1
- [feature] Allow bundler, eslint and typings generator to show API/SDK version availability warnings
- Upgrading to @nativescript/webpack-5.0.19 requires upgrade to @nativescript/core-8.7.0 HOT 3
- Devtools 0.0.1 Error: java.lang.ClassCastException: java.lang.Boolean cannot be cast to java.lang.String HOT 1
- [android] Image tintColor set to null will cause a throwable
- Uncaught ReferenceError: NativeScriptViewFactory is not defined on iOS built with mode --release. HOT 18
- Frequent ANR: __cxa_throw ANR triggered by slow operations in main thread HOT 1
- ActionBar Blocking Events on Android by default HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from nativescript.