Search code examples
javascriptandroidappcelerator-mobile

Creating a menu from and array that includes a title and a filename - Javascript/ Appcelerator


I'm not a programmer by trade but more of a tinkerer (noob)

I want to create a menu from titles contained in an array. I have done this successfully by looping through the array and using the value at each step of the loop as a title for my buttons/tabs.

I want to add an eventlistener to each button with a link to unique pages. I had intended to do this by checking the label of the button and if it is value A then it gets a corresponding link and so on, and then assigning it to currentLink which is then referenced by theLink[t] each time it goes through the loop.

I think I nearly have it working but just lost on the dynamically adding a link bit.

Any help would be much appreciated.

Here is my code:

//function to check the label name and assign the relevant filename to be passed on
    function winLink(currentTab){
     if (currentTab == 'Audio'){
      currentLink = 'audioPlayer.js';
      pageWin.url = currentLink;

     } else{
      if (currentTab == 'Images'){
      currentLink = 'images.js';
      }
     } 
    }

//function to change button colours according to active button
function button_colour(e){
 if (clickedButton == ''){
  clickedButton = e.source; 
  clickedButton.backgroundImage = tabBckImgSel;

 } else {
  clickedButton.backgroundImage = tabBckImg;
  clickedButton = e.source; 
  clickedButton.backgroundImage = tabBckImgSel;
  }
}


    //Array that contains button names
    var tabsArray =['Audio','Images','Video','Info','Materials','Further Reading','Map'];

//loop through array and create a holder, label and eventlistener to attach
for (var t=0;t<tabsArray.length;t++) {
 //create view to act as button/tab area
 viewButton[t] = Titanium.UI.createView({
  borderWidth:1,
  borderColor: tabBrdrColour,
  width:tabWidth,
  height:tabHeight,
  left:leftTab + padding
 });

 //add the tab to the main menu view/area
 menu.add(viewButton[t]);

 //increment the left position for the next button to be placed to the right of the previous button
 leftTab = viewButton[t].left + tabWidth;

 Buttonlabel[t] = Titanium.UI.createLabel({
  text: tabsArray[t],
  font:{fontSize:13},
  color:'#fff',
  width:labelWidth,
  textAlign:'center',
  height:'auto'
 });

 viewButton[t].add(Buttonlabel[t]);

    //pre declared variable  to hold the title of the current label
 currentTab = tabsArray[t];
//call to function to check label and set the relevant file to load
 winLink(currentTab);

 viewButton[t].addEventListener('singletap', function(e)
  {

  button_colour(e);
  win.add(pageWin);
var theLink[t] = currentLink;
  // alert (' Current link' + currentLink);
 });

}

Solution

  • Would a hashtable be what you're looking for? It'll allow you to dynamically create and use those links.

    http://download.oracle.com/javase/1.4.2/docs/api/java/util/HashSet.html

    also I'd change this...

      //function to check the label name and assign the relevant filename to be passed on
    function winLink(currentTab){
     if (currentTab == 'Audio'){
      currentLink = 'audioPlayer.js';
      pageWin.url = currentLink;
      } else{
      if (currentTab == 'Images'){
      currentLink = 'images.js';
      }
     } 
    }
    

    to...

           //function to check the label name and assign the relevant filename to be passed on
    function winLink(currentTab){
     if (currentTab == 'Audio'){
      currentLink = 'audioPlayer.js';
      pageWin.url = currentLink;
      } else if(currentTab == 'Images'){
      currentLink = 'images.js';
      }
     } 
    

    It was bugging me :)