CODEWITHSUNDEEP
iphonecordovaphonegap-plugins
Nina
Nina

Reputation: 1679

PhoneGap NativeControls Tabbar selection

I am using XCode version 4.2 and PhoneGap version 1.5.0 to develop iOS app. Using the following code, I was able to add tab bar on the page, but I couldn't make it to navigate to another page on selection. I have created the tab bar using NativeControls plugin of PhoneGap.

function onDeviceReady()
{
    Cordova.exec("NativeControls.createTabBar"        
    var options = "bottom";

    window.onorientationchange = function() {
            var orientation = window.orientation;

            switch(orientation) {
                case 0:

                Cordova.exec("NativeControls.showTabBar", options);


                /* Add a descriptive message on "Handling iPhone or iPod touch Orientation Events"  */
                document.getElementById("currentOrientation").innerHTML="Now in portrait orientation (Home button on the bottom).";
                break; 

                case 90:

                Cordova.exec("NativeControls.showTabBar", options);

                document.getElementById("currentOrientation").innerHTML="Now in landscape orientation and turned to the left (Home button to the right).";
                break;

                case -90: 

                Cordova.exec("NativeControls.showTabBar", options);

                document.getElementById("currentOrientation").innerHTML="Now in landscape orientation and turned to the right (Home button to the left).";
                break;

                default:

                Cordova.exec("NativeControls.showTabBar", options);

                document.getElementById("currentOrientation").innerHTML="Now the orientation must be -180. default: case: ";
                break;         
            }//end switch
        }//end window.orientationchange

        Cordova.exec("NativeControls.showTabBar", options);
        Cordova.exec("NativeControls.createTabBarItem", "Wineries", "Wineries", null, "1", options);
        Cordova.exec("NativeControls.createTabBarItem", "Wines", "Wines", "www/Wine.png", "2", {onSelect: function() {location.href = "Review.html" }});
        Cordova.exec("NativeControls.createTabBarItem", "Tours", "Tours", null, "3", options);
        Cordova.exec("NativeControls.createTabBarItem", "Non-Mobile", "Non-Mobile", null, "4", options);

        Cordova.exec("NativeControls.showTabBarItems", "Wineries", "Wines", "Tours", "Non-Mobile"); 
        Cordova.exec("NativeControls.selectTabBarItem", "Wineries");
}

But this code is not working at all for changing the page on selection.

Cordova.exec("NativeControls.createTabBarItem", "Wines", "Wines", "www/Wine.png", "2", {onSelect: function() {location.href = "Review.html" }});

EDIT Same happens when I use the following code. Should I repeat the same code on second page? If so on which method I should invoke this?

    function onDeviceReady()
    {            

        var nc = window.plugins.nativeControls;

        nc.createTabBar();
        nc.createTabBarItem("Wineries", "Wineries", "www/grape.png", {onSelect: function() {location.href = "index.html" }});
        nc.createTabBarItem("Wines", "Wines", "www/Wine.png", {onSelect: function() {location.href = "Review.html" }});
        nc.createTabBarItem("Tours", "Tours", "www/tour.png", null);
        nc.createTabBarItem("Non-Mobile", "Non-Mobile", "", null);
        nc.showTabBar();
        nc.showTabBarItems("Wineries", "Wines", "Tours", "Non-Mobile");
        nc.selectTabBarItem("Wineries");
    }

Upvotes: 1

Views: 798

Answers (2)

Ryan Walton
Ryan Walton

Reputation: 1127

I had this problem, and my way around it, though intensive, was to use a framework like backbone.js. I set up a router, which calls various views based on the url (e.g., #newsfeed). This works well because you can then easily tie those views to models and templates.

Relevant code looks something like this. This is based off the full example at http://blog.viison.com/post/11097185009/how-to-switch-views-using-backbonejs.

var ApplicationRouter = Backbone.Router.extend({

    initialize: function(el) {
        this.el = el;          
        this.newsfeedView = new NewsContentView({template: '#newsfeed-template'});
    },

    onDeviceReady: function() {

        plugins.tabBar.createItem("feed", "", "tabButton:Contacts", {onSelect: function() {location.href = "#newsfeed" }});
    },

    routes: {
        "": "newsfeed",
        "newsfeed": "newsfeed",
    },

    newsfeed: function() {
        console.log('switch to newsfeed');
        this.switchView(this.newsfeedView);
        this.setActiveEntry('#newsfeed');
    },
});

Upvotes: 0

Nina
Nina

Reputation: 1679

Just found a way around for my problem. Instead of assigning a new html page to each tab, connected it to functions. On each call, it changes the body content accordingly. But, still I would like to know if any other solution exists!!

function onDeviceReady()
{            
    var title = "WineWeb";
    nc = window.plugins.nativeControls;

    nc.createTabBar();
    nc.createTabBarItem("Wineries", "Wineries", "www/grape.png", {onSelect: Wineries});
    nc.createTabBarItem("Wines", "Wines", "www/Wine.png", {onSelect: Review});
    nc.createTabBarItem("Tours", "Tours", "www/tour.png", null);
    nc.createTabBarItem("Non-Mobile", "Non-Mobile", "", null);
    nc.showTabBar();
    nc.showTabBarItems("Wineries", "Wines", "Tours", "Non-Mobile");
    nc.selectTabBarItem("Wineries");
}

function Wineries () {

    nc = window.plugins.nativeControls;
    nc.setNavBarTitle("Wineries");
    nc.hideLeftNavButton();

    document.getElementById('Review').style.display='none';
    document.getElementById('Wineries').style.display='block';
    document.getElementById('AboutUs').style.display='none';
}

Upvotes: 1

Related Questions