0

About page

Hi !
I just receive the result of the tests of QA!
One is : "About page is not completely localized in French"
and a photo show the description in the AboutView.
I don't know how to change the description in the widget.xml to have a French version
and an English version.

Can you help me ?

Thanks in advance

by
16 Replies
  • We are interested in this one as well. :)We are not aware of a way to do this in the main screen, but it can be done in the button areas via your localized string file.
    0
  • QUOTE (Joomeo Airsens @ Oct 20 2010, 12:28 AM) <{POST_SNAPBACK}>
    Hi !
    I just receive the result of the tests of QA!
    One is : "About page is not completely localized in French"
    and a photo show the description in the AboutView.
    I don't know how to change the description in the widget.xml to have a French version
    and an English version.

    Can you help me ?

    Thanks in advance

    Hi,
    To localize this in your widget, create a directory underneath Resources where the name of the directory would be the ISO country code for that country. For example, for French, you would create Resources/fr. Within that directory create a Localizable.strings file where you would put the following strings:

    CODE
    /* Framework Strings */
    "_framework_string_PAGE" = "PAGE";
    "_framework_string_OF" = "DE";
    "_framework_string_Cancel" = "Annuler";
    "_framework_string_OK" = "OK";
    "_framework_string_Search" = "Rechercher";
    "_framework_string_Settings" = "Paramètres";
    "_framework_string_Back" = "Précédent";
    "_framework_string_PRIVACY" = "Données personnelles";
    "_framework_string_TOS" = "Conditions d'utilisation";
    "_framework_string_COPY" = "Copyrights";
    "_framework_string_MORE_INFO" = "Pour plus d'informations...";
    "_framework_string_COPYRIGHT" = "©";
    "_framework_string_RIGHTS_RESERVED" = "Tous droits réservés";
    "_framework_string_WIDGET_BY" = "Widget de";
    "_framework_string_ABOUT" = "À propos de";


    You would do this for every language you would like to support.

    We are aware this isn't well documented, and we're going to remedy that shortly. Sorry for the confusion.

    - Ben
    0
  • Thanks for your response.
    I already have these files and the translation in french works.
    But the error i receive in the YQA result is : "Observe About page is not completely localized in France".
    You can see in this photo that only the description is in english.


    So, is it possible to change the description and have an english and a french version ?

    I hope you'll be able to help me.
    0
  • The issue is that these items are pulled directly from the widget.xml file directly.
    0
  • QUOTE (Joomeo Airsens @ Oct 22 2010, 04:07 AM) <{POST_SNAPBACK}>
    So, is it possible to change the description and have an english and a french version ?

    I hope you'll be able to help me.

    Ah, sorry, I had misunderstood.

    Unfortunately, it is not possible to localize the description text. This was a business decision made a while ago. I was just talking to some team members about it, and we all agreed that this should be revisited.

    In the meantime, if you only want to target one language, you can change the contents of the description tag in widget.xml. If, like you said, you'd like to localize it for multiple languages, you cannot do that right now.

    - Ben
    0
  • This works for me on the simulator and on a Vizio TV. It should never error, and should keep working until Yahoo changes some things about the WDK. Your milage may vary, this code has not made it through the Yahoo! QA process.

    CODE
    TVL4.views.SettingsView = new KONtx.Class({
    ClassName: "SettingsView",
    Extends: KONtx.views.AboutBox,
    // ...

    localize_description: function (non_localized_description, localized_description) {
    // first parameter is the non-localized description of the widget from the .xml file
    // second parameter is the desired localized description of the widget
    var i, j, len, len2;
    if (this.children && this.children.length) {
    len = this.children.length;
    for (i = 0; i < len; i += 1) {
    if (this.children[i].ClassName && ("BaseContainer" == this.children[i].ClassName)) {
    if (this.children[i].children && this.children[i].children.length) {
    len2 = this.children[i].children.length;
    for (j = 0; j < len2; j += 1) {
    if (this.children[i].children[j].ClassName &&
    ("BaseText" == this.children[i].children[j].ClassName) &&
    (non_localized_description == this.children[i].children[j].data) &&
    (non_localized_description == this.children[i].children[j].text)) {
    this.children[i].children[j].setText(localized_description);
    }
    }
    }
    }
    }
    }
    },

    createView: function() {
    // ...
    this.parent();
    this.localize_description("Connections", $_("widget-description"));
    // ...
    },

    // ...
    });


    Hope that helps!
    0
  • Here is script we threw together.

    Changes:
    1) It allows the Aboutview to accept persist data being passed in.
    2) It fixes the Widget Naem truncation not being set

    Passing in data to the view:
    CODE
    {BackButtonTitle: 'Sample Widget Information'+temp,
    pages: [
    {
    id: 'copyright',
    name: $_('copyright_policy'),
    srcString: $_('copyright_policy_body_string')
    },
    {
    id: 'tos',
    name: $_('tos'),
    srcString: $_('tos_body_string')
    },
    {
    id: 'privacy',
    name: $_('privacy_policy'),
    srcString: $_('privacy_policy_body_string')
    }
    ]}



    Full source:
    CODE
    // JavaScript Document

    KONtx.views.AboutBox = new KONtx.Class({
    ClassName: 'AboutBoxView',

    Extends: KONtx.views.AboutBox,

    config: {
    BackButtonTitle: 'About',
    buttons: {}
    },

    updateView: function() {

    //fix the truncation on the title
    var wid = Theme.keys.sidebar.width - 10*(screen.availHeight/540);
    this.metadataName.setStyles({width: wid, truncation:"end"});

    print($dump(this.persist));

    if(!this.persist){return;}

    if(this.persist.BackButtonTitle) {this.backButton.setText(this.persist.BackButtonTitle);}

    if(this.persist.name){ this.metadataName.setText(this.persist.name); }
    if(this.persist.description) { this.metadataDescription.setText(this.persist.description); }

    if (this.metadataUrl && (widget.authorURL || widget.url)) {
    this.metadataUrl.setText(this.persist.authorURL || this.persist.url)
    }
    if(this.persist.copyright){ this.metadataCopyright.setText( KONtx.utility.INTL.get('COPYRIGHT') + ' ' + this.persist.copyright); }

    if(this.persist.pages){this.updateButtons(this.persist.pages);}

    },

    updateButtons: function(set) {
    for(i in set)
    {
    this.config.buttons[set[i].id].setText(set[i].name)
    this.config.buttons[set[i].id].config.value = set[i].srcString || "";
    }
    },

    createView: function() {
    KONtx_automation_log("function","KONtx.views.AboutBox","createView");
    var providedPages = ['copyright', 'tos', 'privacy'];
    var buttonHeight = Theme.getStyles('ControlTextButton', 'normal').height;

    this.backButton = new KONtx.control.BackButton({
    guid: this._ktxID+'.BackButton',
    label: this.config.BackButtonTitle,
    }).appendTo(this);

    //log("this.config.pages",$dump(this.config.pages));
    var list = [];

    // validate the pages
    if (this.config.pages instanceof Array) {
    var page = null;
    for (var i = 0; i < this.config.pages.length; i++) {
    page = this.config.pages[i];
    if (providedPages.indexOf(page.id) > -1) {
    // this check allows someone to provide a srcString in their config
    // if one isn't provided, then we do the XML lookup below
    if(!('srcString' in page)) {
    try {
    page.srcString = filesystem.readFile('About/' + yahooSettings.get('countryCode') + '/' + page.id + '.txt');
    } catch (e) {
    page.srcString = '';
    }
    }
    list.splice(0, 0, page);
    } else {
    list.push(page);
    }
    }
    //this.config.pages.length = (this.config.pages.length > 5) ? 5 : this.config.pages.length;
    list.length = (list.length > 5) ? 5 : list.length;
    //log("this.config.pages",$dump(this.config.pages,3));
    } else {
    this.config.pages = [];
    }

    var menuHeight = buttonHeight * this.config.pages.length;
    var contentHeight = this.height - (menuHeight + this.backButton.height);

    var contentContainer = new KONtx.element.Container({
    styles: {
    width: this.width,
    height: contentHeight,
    vOffset: this.backButton.height
    }
    }).appendTo(this);

    var containerBackground = new KONtx.element.Image({
    src: Theme.storage.get('AboutBoxView.containerBackground', 'source'),
    styles: Theme.storage.get('AboutBoxView.containerBackground', 'styles')
    }).appendTo(this);

    var widgetIcon = widget.getImage(Theme.keys.screen + '.icon'),
    themeIcon = Theme.storage.get('AboutBoxView.metadataIcon', 'source');

    var metadataIcon = new KONtx.element.Image({
    element: widgetIcon || Image,
    styles: Theme.storage.get('AboutBoxView.metadataIcon', 'styles')
    }).appendTo(contentContainer);

    widgetIcon || metadataIcon.setSource(themeIcon);

    var metadataIconOverlay = new KONtx.element.Image({
    src: Theme.storage.get('AboutBoxView.metadataIconOverlay', 'source'),
    styles: Theme.storage.get('AboutBoxView.metadataIconOverlay', 'styles')
    }).appendTo(contentContainer);

    //
    // vOffset is provided in theme for metadataName
    // rest are y-positioned relative to previous node
    //
    this.metadataName = new KONtx.element.Text({
    label: widget.name,
    styles: Theme.storage.get('AboutBoxView.metadataName', 'styles')
    }).appendTo(contentContainer);

    this.metadataDescription = new KONtx.element.Text({
    label: widget.description,
    styles: Theme.storage.get('AboutBoxView.metadataDescription', 'styles')
    }).setStyles({
    vOffset: this.metadataName.height + this.metadataName.vOffset
    }).appendTo(contentContainer);

    var PAD = Theme.storage.get('AboutBoxView.metadataAuthorNote', 'PAD_TOP');

    this.metadataAuthorNote = new KONtx.element.Text({
    label: KONtx.utility.INTL.get('WIDGET_BY') + '...',
    styles: Theme.storage.get('AboutBoxView.metadataAuthorNote', 'styles')
    }).setStyles({
    vOffset: this.metadataDescription.height + this.metadataDescription.vOffset + PAD
    }).appendTo(contentContainer);

    this.metadataAuthor = new KONtx.element.Text({
    label: ($empty(widget.author) || (widget.author == widget.company)) ? widget.company : widget.author + ', ' + widget.company,
    styles: Theme.storage.get('AboutBoxView.metadataAuthor', 'styles')
    }).setStyles({
    vOffset: this.metadataAuthorNote.height + this.metadataAuthorNote.vOffset
    }).appendTo(contentContainer);

    this.metadataVersion = new KONtx.element.Text({
    label: widget.version,
    styles: Theme.storage.get('AboutBoxView.metadataVersion', 'styles')
    }).setStyles({
    vOffset: this.metadataAuthor.height + this.metadataAuthor.vOffset,
    }).appendTo(contentContainer);

    if (widget.authorURL || widget.url) {

    PAD = Theme.storage.get('AboutBoxView.metadataUrlNote', 'PAD_TOP');

    this.metadataUrlNote = new KONtx.element.Text({
    label: KONtx.utility.INTL.get('MORE_INFO') + '...',
    styles: Theme.storage.get('AboutBoxView.metadataUrlNote', 'styles')
    }).setStyles({
    vOffset: this.metadataVersion.height + this.metadataVersion.vOffset + PAD
    }).appendTo(contentContainer);

    this.metadataUrl = new KONtx.element.Text({
    label: widget.authorURL || widget.url,
    styles: Theme.storage.get('AboutBoxView.metadataUrl', 'styles')
    }).setStyles({
    vOffset: this.metadataUrlNote.height + this.metadataUrlNote.vOffset
    }).appendTo(contentContainer);
    }

    PAD = Theme.storage.get('AboutBoxView.metadataCopyright', 'PAD_BOTTOM');

    this.metadataCopyright = new KONtx.element.Text({
    label: KONtx.utility.INTL.get('COPYRIGHT') + ' ' + widget.copyright,
    styles: Theme.storage.get('AboutBoxView.metadataCopyright', 'styles')
    }).setStyles({
    vOffset: contentContainer.height - PAD
    }).appendTo(contentContainer);

    PAD = Theme.storage.get('AboutBoxView.metadataReserved', 'PAD_BOTTOM');

    this.metadataReserved = new KONtx.element.Text({
    label: KONtx.utility.INTL.get('RIGHTS_RESERVED'),
    styles: Theme.storage.get('AboutBoxView.metadataReserved', 'styles')
    }).setStyles({
    vOffset: contentContainer.height - PAD
    }).appendTo(contentContainer);

    if (list.length) {

    var button = null;

    this.buttonContainer = new KONtx.element.Core({
    styles: {
    height: (buttonHeight * list.length),
    vAlign: 'bottom'
    }
    }).appendTo(this);
    //log("page.srcString",page.srcString);

    for( i in list)
    {
    if (list[i] instanceof KONtx.element.Button) {
    button = page;
    } else {
    button = new KONtx.control.TextButton({
    id: list[i].id,
    label: list[i].name,
    value: list[i].srcString,
    styles: {
    vOffset: button ? button.outerHeight : 0
    },
    events: {
    onSelect: function(event) {
    var viewClass = KONtx.system.AboutDocView;
    //log("this.config.value",this.config.value);
    var viewConfig = {
    id: this._ktxID + '.' + viewClass.prototype.ClassName + '.' + animator.milliseconds,
    data: {
    guid: this.config.guid,
    backLabel: this.config.label,
    value: this.config.value
    },
    viewClass: viewClass
    };

    KONtx.application.addViewConfig(viewConfig);
    KONtx.application.loadView(viewConfig.id, {
    documentText: this.config.value
    });
    }
    }
    });
    }
    this.config.buttons[list[i].id] = button;
    button.appendTo(this.buttonContainer);
    }
    }

    // EJF : 2009-06-04 : adding missing custom content area back into about box
    if ( this.config.customContent ) {
    // lock down this custom content so it can't destroy the rest of the page
    var customContentHeight = KONtx.utility.scale( 100 ),
    customContentWidth = KONtx.utility.scale( 100 );
    this.customContent = new KONtx.element.Container( {
    styles: {
    height: customContentHeight,
    width: customContentWidth,
    hOffset: this.width - ( customContentWidth + KONtx.utility.scale( 5 ) ),
    vAlign: 'bottom',
    vOffset: this.height - ( buttonContainer.height + KONtx.utility.scale( 5 ) ),
    }
    } ).appendTo( contentContainer );

    this.config.customContent.appendTo( customContent );

    }

    }

    });
    0
  • Thank you very much ! It worked !
    I used the last post and change the description and the button title by : $_('_framework_string_ABOUT') and $_('description')
    it's a good thing done !
    0
  • Glad it helped! :D
    0
  • Ok i'm in the process of doing the same thing for localizing the aboutbox, if i understood correctly i need to create a new file to include in init js, and then when i'm calling the about box in init view i need to pass all the metadata needed by the about box right?
    0
  • Also the string
    CODE
    "_framework_string_ABOUT" = "A proposito di";

    Is not localizing the title of the about view, the other infos are being localized without problems
    0
  • Can you shed some light on how you are using this? We need a lot more context.

    You are the only one who knows how your application works and any line of code needs to be seen in context for anyone to help.
    0
  • It's in the localizable.strings file just together with all the other needed localization string:
    CODE
    "regione"="it";
    "vita_di_bordo"= "Vita di bordo";
    "destinazioni"= "Destinazioni";
    "azienda"= "Azienda";
    "advertising" = "Advertising";
    "eventi" = "Eventi";
    "la_flotta" = "La flotta";
    "cambia_categoria" = "Cambia Categoria";
    "dettagli_categoria" = "Dettagli Categoria";
    "caricamento" = "Sto caricando ";
    "titolo" = "Titolo ";
    "data_inserimento" = "Inserito il ";
    "alle" = " alle ";
    "voto"= "Voto: ";
    "valutazioni" = "Numero Voti: ";
    "descrizione" = "Descrizione:";
    "visualizzazioni" = " visualizzazioni";
    "video_recente"= "Video più recente";
    "video_visualizzati" = "Video più visualizzati";
    "video_votati" = "Video più votati";
    "torna_playlist" = "Torna alla playlist";
    "video_simili" = "Video Simili";
    "no_meta" = "Dati del contenuto non disponibili al momento";
    "durata" = "Durata ";
    "categorie" = "Categorie :";
    "tag"= "Tag :";
    "video_error_dialog_title"= "Caricamento Fallito";
    "video_error_dialog_message"="Impossibile carica il video selezionato";
    "dialog_retry_button" = "Riprova";
    "dialog_cancel_button" = "Annulla";
    /* Framework Strings */
    "_framework_string_PAGE" = "PAGINA";
    "_framework_string_OF" = "DI";
    "_framework_string_Cancel" = "Annulla";
    "_framework_string_OK" = "OK";
    "_framework_string_Search" = "Ricerca";
    "_framework_string_Settings" = "Parametri";
    "_framework_string_Back" = "Indietro";
    "_framework_string_PRIVACY" = "Privacy";
    "_framework_string_TOS" = "Condizioni d'utilizzo";
    "_framework_string_COPY" = "Copyrights";
    "_framework_string_MORE_INFO" = "Per ulteriori informazioni";
    "_framework_string_COPYRIGHT" = "©";
    "_framework_string_RIGHTS_RESERVED" = "Tutti i diritti riservati";
    "_framework_string_WIDGET_BY" = "Widget di";
    "_framework_string_ABOUT" = "A proposito di";
    "_framework_string_NO_CONNECTION_DIALOG_TITLE" = "Connessione disconnessa";
    "_framework_string_NO_CONNECTION_DIALOG_MESSAGE" = "La connessione di rete non è disponibile. Controllare le impostazioni della tv, la connessione ethernet, e/o la connessione wireless network e riprovare.";
    "_framework_string_CLOSE_WIDGET_DIALOG_BUTTON" = "Chiudi la widget";
    "_framework_string_NO_NETWORK_DIALOG_TITLE" = "Connessione non disponibile";
    "_framework_string_NO_NETWORK_DIALOG_MESSAGE" = "La Widget non riesce a caricare i dati e sarà chiusa. Si prega di riprovare più tardi.";
    "_framework_string_NO_RESULTS_FOUND" = "Nessun risultato trovato";
    "_framework_string_PAGE_X_OF_X" = "PAGINA %1$s DI %2$s";


    I just added on that file the strings that Benjamin wrote to localize the about box, my about view just extends the standard about view:
    CODE
    var ToolboxAboutView = new KONtx.Class({
    ClassName: 'ToolboxAboutView',

    Extends: KONtx.views.AboutBox,
    });
    0
  • Sorry, cannot to speak to what Ben wrote. We have not played around with it.

    We posted some code in the thread that allows you to pass in data like you would persist data to localize the view.
    0
  • QUOTE (Gades @ Nov 11 2010, 02:38 AM) <{POST_SNAPBACK}>
    Ok i'm in the process of doing the same thing for localizing the aboutbox, if i understood correctly i need to create a new file to include in init js, and then when i'm calling the about box in init view i need to pass all the metadata needed by the about box right?

    Couple of things. First, if you're only wanting to add the framework strings to your widget, review my post in this thread that shows you how to do that. So, if this is the solution you want, it's not necessary to include any file in init.js or pass any data in the persist object.

    QUOTE (Gades @ Nov 11 2010, 02:48 AM) <{POST_SNAPBACK}>
    Also the string
    CODE
    "_framework_string_ABOUT" = "A proposito di";

    Is not localizing the title of the about view, the other infos are being localized without problems

    Second, you're correct, it's not working. Unfortunately, the about view needs to be refactored :(- Ben
    0
  • Working now, thanks :D
    0

Recent Posts

in Non-Technical / Business - Yahoo! TV Widgets