[ALOY-1204] Override L behavior and id attributes in views

GitHub Issue	n/a
Type	Improvement
Priority	n/a
Status	Closed
Resolution	Invalid
Resolution Date	2014-12-17T17:05:37.000+0000
Affected Version/s	n/a
Fix Version/s	n/a
Components	I18N
Labels	i18n
Reporter	Shuo Liang
Assignee	Tim Poulsen
Created	2014-12-15T08:48:32.000+0000
Updated	2018-03-07T22:28:28.000+0000

Description

You can't override *L*, but you can override *Ti.Locale.getString*. Here's an example in the alloy.js :

var getString = Ti.Locale.getString;
Ti.Locale.getString = function() {
    return '@' + getString.apply(this, arguments) + '@';
};

Now a little strings.xml :

<?xml version="1.0" encoding="UTF-8"?>
<resources>
  <string name="test1">I am test 1</string>
  <string name="test2">I am test 2</string>
  <string name="test3">I am test 3</string>
</resources>

An now a simple view :

<Alloy>
    <Window class="container">
        <Label text="L('test1')" />
        <Label>L('test2')</Label>
        <Label textid="test3" />
    </Window>
</Alloy>

The output of this views will be :

@I am test 1@
@I am test 2@
I am test 3

When you use an id attribute in a view (textid, titleid, etc ...), it doesn't call *Ti.Locale.getString*. So you can't override completely the behavior of L.

Comments

Tim Poulsen 2014-12-17 The fact that you can do this at all in Alloy must be a quirk of Alloy. This Classic example demonstrates that you cannot extend Ti.Locale.getString() outside of Alloy.

   var win = Ti.UI.createWindow({
       layout:'vertical',
       backgroundColor: 'white'
   });
   
   var getString = Ti.Locale.getString;
   Ti.Locale.getString = function() {
   	console.log('extending getString');
       return '@' + getString.apply(this, arguments) + '@';
   };
   
   win.add(Ti.UI.createLabel({
   	top: 20,
   	text: Ti.Locale.getString('lbl1')
   }));
   win.add(Ti.UI.createLabel({
   	top: 10,
   	text: L('lbl2')
   }));
   win.add(Ti.UI.createLabel({
   	top: 10,
   	textid: 'lbl3'
   }));
   
   win.open();

   <?xml version="1.0" encoding="UTF-8"?>
   <resources>
       <string name="lbl1">Label 1</string>
       <string name="lbl2">Label 2</string>
       <string name="lbl3">Label 3</string>
   </resources>

The app shows three labels with the text Label 1, Label 2, and Label 3. Our guides specifically say [don't extend the Titanium proxies](http://docs.appcelerator.com/titanium/latest/#!/guide/Coding_Best_Practices-section-30082362_CodingBestPractices-Don%27tExtendTitaniumPrototypes). The best way to override Ti.Locale.getString is to wrap it in a helper function. Something like:

   exports.getString = function(key) {
   	if(typeof key === 'string') {
   		return "@" + Ti.Locale.getString(key) + "@";
   	}
   	return '';
   }

   var getString = require('localehelper').getString;
   
   win.add(Ti.UI.createLabel({
   	top: 20,
   	text: getString('lbl1')
   }));

Tim Poulsen 2014-12-17 Goes against best practices. Proper technique demonstrated in the comment.
Tim Poulsen 2014-12-17 Reopening to change resolution type
Eric Merriman 2018-03-07 Closing as invalid. If this is incorrect, please reopen.

JSON Source