Search code examples
titaniumappceleratortitanium-mobileappcelerator-mobile

How to update a text label in the current window


I need to update win1.title (a label) with new data returned from a JSON response. I can print on my console win1.title value, but I cannot assign to it new value!

app.js

var win1 = Titanium.UI.createWindow({
    title:'Tab 1',
    backgroundColor: 'black',
    layout: 'vertical',
    url: 'win1.js',
    title: 'Loading...',
    artist: '' });


win1.open();

//Fetching data

var jsonData = ''; var pointer = 0;

var url = "http://example.com"; var xhr = Ti.Network.createHTTPClient({
    onload: function(e) {

        jsonData = JSON.parse(this.responseText).response.songs;



        //HERE I NEED TO UPDATE win1.title with title returned by JSON
        /*
           if a print win1.title it works correctly.
             console.log(win1.title);

           but if I try to assign data to win1.title nothing happens, even a error!

        */


        win1.addEventListener('swipe', function(e) {
                        console.log("win1 title:" + win1.title);            win1.title = jsonData[pointer].title;           win1.artist = jsonData[pointer].artist_name;            win1.image = jsonData[pointer].tracks[0].release_image;

                    });

    },
    onerror: function(e) {
        console.log(e);
    },
    timeout:20000  /* in milliseconds */ }); xhr.open("GET", url); xhr.send();  // request is actually sent with this statement

win1.js

(function() {

    var win1 = Ti.UI.currentWindow;

    var image = Ti.UI.createImageView({
      image:win1.image,
      top: 40
    });

    var title = Ti.UI.createLabel({
      color: 'white',
      font: { fontSize:38 },
      text: win1.title,
      textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER,
      top: 20,
      width: 'auto', height: 'auto'
    });

    var artist = Ti.UI.createLabel({
      color: 'white',
      font: { fontSize:28 },
      text: win1.artist,
      textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER,
      top: 30,
      width: 'auto', height: 'auto'
    });


    win1.add(title);
    win1.add(artist);
    win1.add(image);


})();

Solution

  • Setting win1.title = 'some title'; isn't going to do what you think it will in this case. Titanium Window objects have a title property, and depending on whether you build for iOS or Android, you will see this title at the top of a modal window or when the window is in a tabgroup or navgroup.

    Your code is updating this title, but you probably aren't seeing it. (Try adding modal:true to your createWindow() declaration.) Also, you have set 2 title properties, so remove one of them.

    To change the label text in the variable named 'title' on win1.js, you can do the following:

    In win1.js, add the following:

    win1.updateTitle = function(newTitle){
        title.text = newTitle;
    } 
    

    Then, back on app.js, go to wherever you want to update the title and do:

    win1.updateTitle('new title');
    

    Also, you should consider using CommonJS with your Titanium projects:

    CommonJS Best Practices