tabstitaniumtitanium-mobileappceleratortitanium-alloy

How to reload the tab in tab group in titanium alloy


I have three tabs in my tab group. One tab is for change language. If user changes the language I should need to change the selected language for all the tabs. my tab group code is as follows,

<Alloy>
  <TabGroup id="myTabGrp"> //Tabgroup Added
    <Tab id="one">
        <Window class="container">
            <Label>This is the Home View</Label>
        </Window>
    </Tab>

    <Tab id="two">
        <Window class="container" id="winTwo">
            <Label>This is the second View</Label>
        </Window>
    </Tab>

    <Tab id="three">
        <Window class="container">
            <Button onClick="saveLang">Proceed</Button>
        </Window>
     </Tab>
  </TabGroup>
</Alloy>

All the ui text is losing from database. So How can I reload the tab on clock of proceed button in tab3.

I tried the following code,

function saveLang() {
  $.myTabGrp.setActiveTab($.two);
}
$.winTwo.addEventListener('focus',function(e) { 
   // How can I reload the tab2 here....
alert('focus');
});

If I try the following code everything is working fine but, It is taking too long to load it will struct for 3 sec and then loading the required output. I need to avoid the long loading time.

var homeWindow = Alloy.createController('index').getView();
homeWindow.open({transition:Titanium.UI.iPhone.AnimationStyle.FLIP_FROM_LEFT});

Any suggestions that how can we reload the tab with less loading time..


Solution

  • Some part of your question answered here ( how to redirect from one page to tab in another page in titanium? ).

    When you switch to tab two or winTwo or when you open tabGroup, there would be some function which you call to update your window UI. Maybe you will have something like following in index.js :

    $.myTabGrp.open();
    updateWin1();
    updateWin2();
    updateWin3();
    
    function updateWin1() {
      var value = "Win1"; //fetched from local db
      $.win1Label.text = value;
    }
    
    function updateWin2() {
      var value = "Win2"; //fetched from local db
      $.win2Label.text = value;
    }
    
    function updateWin3() {
      var value = "Win3"; //fetched from local db
      $.win3Label.text = value;
    }
    

    Now in your winTwo's focus EventListener call the updateWin2 method ( like following ):

    $.winTwo.addEventListener('focus',function(e) { 
      //Reloaded
      updateWin2();
    });
    

    Note : You can have any complex amount of UI manipulation in the method updateWin2(), according to your requirement.

    P.S : If you are using Alloy models and collection concept, you should try Alloy Data Binding.