Ux.locale.Manager

[Stoot98]

The autoupdate currently works for components as that's the only thing that displays things.

However there are classes that contain text. There are a couple ways we can proceed with these things... in applyLocales method of Ux.locale.Manager we can fire an event and your application can listen to this and handle it. Or we can create mixins for these other classes that we can use and those can have the individual logic for each class... any other suggestions for that?

For the dataview, wonder if you could use prepareData or hook into the container's updateListItem method

Hi Mitchell,

I'm coming across a similar issues where DataViews/Templated components need to be refreshed (where there are string literals inside) and Stores regenerated which requires a little more specific logic than the standard component properties do for updating.

I like the idea of an event being fired which these troublesome components can listen to it and do what they need to.

Another option might be to allow a function to be passed in the locales config which would get executed in the scope of the component when the locale is changed and this logic can reside there.

Anyways, I'll try and report back on what I end up doing and seeing what works best.

Thanks for your work on this - it certainly takes the pain out of localising apps!

Stuart

[intellix]

I spent a couple of days trying to get the DataView/Item done but just couldn't get it sorted properly.

In the end I just did this inside DataView override:

setLocale : function(locale) {
        var me          = this,
            locales     = me.locales || me.getInitialConfig().locales,
            manager     = me.locale,
            store = me.getStore();


        store.each(function (data) {
            var text  = defaultText = data.get('text');
            data.set('text', manager.get(text, defaultText));
        });


        me.callOverridden(arguments);
    },

It changes the original content so you can't translate it back/again... but I'm going to have to move onto more important things for now.

I tried overriding prepareData() but it's called before the item get's the locale manager stuck to it so it's too early to do it for me.

Also: I was talking about having a default locale that doesn't need translations. In the end I just made the defaultText the original text that get's passed into the translation tool so you don't need english translations and if the text hasn't been done then it will display english anyway... better in english than in nothing.

[pepperseb]

Hi everyone,

First, I want to thank Mitchell for this great plugin...

Now, I have a newbie question, how can I use the plugin to translate my defaultBackButtonText and the loadingText properties?

[intellix]

Just looking at translating the Title within NavigationView/Bar and it's peppered all over the code.
Looks like it's going to require quite a bit of know-how to edit this one and I bet it changes massively in the next release.

Edit: I decided to kill all NavigationView/Bar's in my application as I feel they're annoying for adding Back Button as well. I think you either use the NV/Bar for your entire application or not at all...

[intellix]

So that my translation files are smaller and alot of my application pulls in translated data/information from the server my API calls are something like:

/en/get-events
/de/get-events

To do this, for all of my proxy, ajax calls I do: /{locale}/get-events

And this code to replace the {locale} variable:

Ext.define('Ux.data.Connection', {
    requires: [
        'Ext.data.Connection',
    ]
}, function() {
    Ext.override(Ext.data.Connection, {
        request: function (options) {


            var locale = 'en';


            if (Ux.locale.Manager.getLanguage()) {
                locale = Ux.locale.Manager.getLanguage();
            }


            options.url = options.url.replace('{locale}', locale);
            this.callParent(arguments);


        }
    });
});

[intellix]

Had to translate selectfields. As you can't set a locales: {} with everything in there (doesn't really make sense). I removed all the placeholder stuff as I'm not really using it (strings default to EN for me). It's easy looking at the others to add it back. I see that if you translate a label on the selectfield as well then setLocale gets called twice on the same component, which I guess need to be merged somehow.

Basically, upon setLocale it sets the _originalString field to the store to hold the displayField so that when you change the locale again, it will still know the original string.

Also, at least have a locales: {} set on the dropdown

Ext.define('Ux.locale.override.st.field.Select', {
    override : 'Ext.field.Select',


    requires : [
        'Ux.locale.override.st.Component'
    ],


    setLocale: function(locale) {


        // TODO: Merge this and Ux.locale.override.st.field.Field as they're both running the same function?


        var me                 = this,
            locales            = me.locales || me.getInitialConfig().locales,
            manager            = me.locale,
            displayField = me.getDisplayField(),
            label = locales.label,
            store = me.getStore(),
            fields;


        // Translate the label if set
        if (label) {
            if (Ext.isObject(label)) {
                label = label.key;
            }


            label = manager.get(label);


            if (Ext.isString(label)) {
                me.setLabel(label);
            }
        }


        // There's a store as well, translate stuff
        if (!store) {
            return;
        }
        fields = store.getFields();


        if (manager && fields) {


            // Allow saving original value for re-translation later
            fields.push("_originalString");
            store.setFields(fields);


            store.each(function (record) {


                if (record.get('_originalString') === undefined) {
                    record.set('_originalString', record.get(displayField));
                }


                record.set(
                    displayField, 
                    manager.get(record.get('_originalString'))
                );


            });


            me.updateStore(store);


        }


    }


});

[georgesq]

Hi Mitchell... i´m trying to put your component on my app, but nothing key is loaded from .json... my code:

Ext.Loader.setConfig({
    enabled : true,
    paths   : {
        Ux : 'Ux'
    }
});


Ext.application({
    name: 'selfservice',
	bundle: '',


    requires: [
    	'Ext.Ajax',
        'Ext.MessageBox',
		'Ext.i18n.Bundle',
	    'Ux.locale.Manager',
	    'Ux.locale.Manager',
	    'Ux.locale.override.st.Component',
	    'Ux.locale.override.st.Button',
	    'Ux.locale.override.st.Container',
	    'Ux.locale.override.st.TitleBar',
	    'Ux.locale.override.st.field.Field',
	    'Ux.locale.override.st.field.DatePicker',
	    'Ux.locale.override.st.picker.Picker',
	    'Ux.locale.override.st.picker.Date'
    ],


    models: ["User"],


    stores: ["Users"],


    controllers: ["Users"],


    views: ["AuthenticateForm"],
	
    icon: {
        '57': 'resources/icons/Icon.png',
        '72': 'resources/icons/Icon~ipad.png',
        '114': 'resources/icons/Icon@2x.png',
        '144': 'resources/icons/Icon~ipad@2x.png'
    },


    isIconPrecomposed: true,


    startupImage: {
        '320x460': 'resources/startup/320x460.jpg',
        '640x920': 'resources/startup/640x920.png',
        '768x1004': 'resources/startup/768x1004.png',
        '748x1024': 'resources/startup/748x1024.png',
        '1536x2008': 'resources/startup/1536x2008.png',
        '1496x2048': 'resources/startup/1496x2048.png'
    },


    launch: function() {
        // Destroy the #appLoadingIndicator element
        Ext.fly('appLoadingIndicator').destroy();
		
		var userLang = (navigator.language) ? navigator.language : navigator.userLanguage;
	
	    Ux.locale.Manager.setConfig({
	        ajaxConfig : {
	            method : 'GET'
	        },
	        language   : 'en',
	        tpl        : 'resources/{locale}.json',
	        type       : 'ajax'
	    });
        Ux.locale.Manager.init();
	    
  		Ext.i18n.Bundle.configure({
			bundle: 'SelfService',
			language: userLang,
			path: 'resources',
			noCache: false
  		});
		
        var authenticateForm = {
                xtype: "authenticateform"
        };
        
        // Initialize the main view
        Ext.Viewport.add([authenticateForm]);
    },


    onUpdated: function() {
        Ext.Msg.confirm(
            "Application Update",
            "This application has just successfully been updated to the latest version. Reload now?",
            function(buttonId) {
                if (buttonId === 'yes') {
                    window.location.reload();
                }
            }
        );
    }
});

partial code from my view

Ext.define('selfservice.view.AuthenticateForm', {
    extend: 'Ext.form.FormPanel', 
    alias: "widget.authenticateform",
    config: {
    	fullscreen: true,
        scrollable: 'vertical'
    },
    
    initialize: function() {
        var titlebar, buttonbar, authenticateButton, fields;


        titlebar = {
            id: 'authenticateFormTitlebar',
            xtype: 'toolbar',
            locales : {
                title : 'toolbar.all.upTitle'
            }
        };

Tks for your help
George

[demon222]

yeeeee

some support for SA2 (extjs 4.1.1) ?????????????????????????????????

[mitchellsimoens]

yeeeee

some support for SA2 (extjs 4.1.1) ?????????????????????????????????

Are you asking if it works for Ext JS 4.1.1 or if it can be included into Sencha Architect 2?

[demon222]

Yes. Is it possible to integrate sencha extjs Architect 2 for 4.1.1?