1. #1
    Sencha Premium Member
    Join Date
    Mar 2013
    Posts
    39
    Vote Rating
    1
    cassinisolutions is on a distinguished road

      0  

    Default How to put a function as a label for a button (for example) ?

    How to put a function as a label for a button (for example) ?


    Hello,

    First, I'm testing Architect & extjs for several days ago, so maybe my question is a nonsense, please forgive my lack of knowledge on extjs...

    Concerning my question, you may answer me to use a Process Config in last Architect. It will work I agree,
    but I'd like to directly put a function in the name (in order for the name to be an argument of the function), for example in my js code, generated by Architect :

    Code:
    {
        xtype: 'button',
        text: 'MyButton'
    }
    I'd like to change the text shown, in order to wrap it into a function, for example:

    Code:
    {
        xtype: 'button',
        text: mySuperFunction('xx', 'MyButton')
    }
    => Is it possible to have that ? (I think it's not)

    It would very nice to have such a feature in Architect. By choosing between a string or a function as a text
    (we could rely on displayName to have something readable into Architect)

    You may ask why such a need ?


    It's indeed for a localization process.
    With such strings "myLocalizationFunction('some context', 'some string');" all over the GUI, it's easy afterwards to scan all javascript sources in order to regex all occurences, and automatically build an xml (indeed xliff) file that contains all strings to translate, sorted by context

    and after that, easy to code the function myLocalizationFunction to get xliff localized file from server as a json file and return the translated string, according to context.

    Or maybe you know an easier way to perform localization ?
    (I mean, without coding manually extjs override, or manually keep updated a file with all strings to update. I want all that to be automatic)

    Thanks for your help!

  2. #2
    Ext JS Premium Member tangix's Avatar
    Join Date
    Mar 2010
    Location
    Stockholm, Sweden
    Posts
    560
    Vote Rating
    50
    tangix is a jewel in the rough tangix is a jewel in the rough tangix is a jewel in the rough

      0  

    Default


    Starting with SA 2.2 you can use Process Configs for components. In the Process Config function you can put any valid JS.

  3. #3
    Ext JS Premium Member tangix's Avatar
    Join Date
    Mar 2010
    Location
    Stockholm, Sweden
    Posts
    560
    Vote Rating
    50
    tangix is a jewel in the rough tangix is a jewel in the rough tangix is a jewel in the rough

      0  

    Default


    To add this to a Process Config, these are the steps in version 2.2;
    1. Click the button in Project Inspector
    2. Find "Process Config" in the Config panel and "+"
    3. The function will receive the config object as argument. Do you stuff there.
    4. Return the config object
    Cheers,
    /Mattias

  4. #4
    Sencha Premium Member
    Join Date
    Mar 2013
    Posts
    39
    Vote Rating
    1
    cassinisolutions is on a distinguished road

      0  

    Default


    Thanks tangix for your reply,

    but, as indicated in my previous message, I've already used this function. It works, but it doesn't suite my needs

    I'd like to be able to automatically parse the javascript code to regex all function (that I would put into the Process Config) AND the arguments (I insist on these)
    Have a look at my full message, I explain why I need this (I need localization with automation as much as possible)

  5. #5
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,358
    Vote Rating
    128
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    and why wouldn't
    config.text = mySuperFunction('xx', 'MyButton');

    in your processConfig work?
    Aaron Conran
    @aconran
    Sencha Architect Development Team

  6. #6
    Sencha Premium Member
    Join Date
    Mar 2013
    Posts
    39
    Vote Rating
    1
    cassinisolutions is on a distinguished road

      0  

    Default


    For now, I use the following command, in order to process the config.text by a function:
    config.text = mySuperFunction('context', config.text);

    As you mention, I could do:
    config.text = mySuperFunction('context', "some label for the button");

    => pros: Yes, an automatic script could regex all strings to translate
    => cons: the label of the button appears twice !, in this function, and also in the common config text in Architect. So duplication I'd like to avoid

  7. #7
    Ext JS Premium Member tangix's Avatar
    Join Date
    Mar 2010
    Location
    Stockholm, Sweden
    Posts
    560
    Vote Rating
    50
    tangix is a jewel in the rough tangix is a jewel in the rough tangix is a jewel in the rough

      0  

    Default


    Just my two cents,
    in SA I create the buttons etc and place a simple place-holder in the "text" config. In the Process Config i then do ("L" is the localization function simply returning the localized string):
    Code:
    config.text = L(config.text);
    return config;

  8. #8
    Sencha Premium Member
    Join Date
    Mar 2013
    Posts
    39
    Vote Rating
    1
    cassinisolutions is on a distinguished road

      0  

    Default


    Yes tangix, you have the idea !
    (except I use the _() or i18n() name function instead of L(), but the idea is the same)
    For now, I have no better solution than the one you use.

    But you can't easily regex all L(.*) in order to build, automatically, all strings to translate
    Or the regex has to be more clever and fetch the native text in the original config.text in the javascript code (needs javascript parsing)

    Further more, the drawback of using the Process Config massively, in order to process all labels by a Process Config, is the readability of the Project Inspector in Architect.
    => It multiplies massively the size of this tree, which makes it less readable

    However, for now, It's the only solution in Architect

    Hence, my proposal: it would be nice for all labels, text, to be able to put a string (like currently), but also an inline function.
    Pros:
    * regex to fetch all strings to translate is easy
    * doesn't pollute the Project Inspector window in Architect

    Cons:
    * sencha has to evolve Architect, but would be a nice feature I think. And Architect needs to extract the text from the nth argument of the function in order to get the label to show in the designer.

    Hope to have this feature one day in Architect or it's excluded ?
    fallback is to use tangix option

  9. #9
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,358
    Vote Rating
    128
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    Quote Originally Posted by cassinisolutions View Post
    => cons: the label of the button appears twice !, in this function, and also in the common config text in Architect. So duplication I'd like to avoid
    The "common config" is required so that we have something to render it in the canvas with (as we can't reliably execute standard JS Expressions)
    Aaron Conran
    @aconran
    Sencha Architect Development Team

  10. #10
    Sencha Premium Member
    Join Date
    Mar 2013
    Posts
    39
    Vote Rating
    1
    cassinisolutions is on a distinguished road

      0  

    Default


    I see your point, no js engine to execute js on the fly
    But I was thinking about a scan of the code to get the label to show in the canvas

    For example for the text of a label, it would be possible to put an i18n function that accepts only 2 params, first is the context, and second is the label to use in the canvas

    As a result, SA has to take the second param of this i18n function, in order to have the text to show in the canvas...


    But well, not quite generic I agree, so let's keep with the Process Config...
    And I need to parse the js code thanks to a js tokenizer, or process json files generated by SA, in order to get automatically the strings to translate
    Need some scripting and it will be ok

    Thanks for your help