PhoneGap NativeControls not working

I have read and followed tutorials on this site or on the internet on how to add the NativeControls plugin to PhoneGap (Cordova 1.5) using JQuery Mobile. I have not been able to get the toolbar to work correctly.

I've tried a lot of different things with no luck. Here is my code:

HTML:

    <!DOCTYPE html>
<html>
  <head>
  <!--<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />-->
  <meta name="viewport" content="width=device-width,initial-scale=1"/>
  <link rel="stylesheet" href="jquery/jquery.mobile-1.0.1.min.css"/>
  <script src="jquery/jquery-1.6.4.min.js"></script>
  <link rel="stylesheet" type="text/css" href="styles.css"/>
  <script src="jquery/jquery.mobile-1.0.1.min.js"></script>
  <title></title>  

    <!-- iPad/iPhone specific css below, add after your main css >
    <link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="ipad.css" type="text/css" />
    <link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" />-->        

    <!-- If your application is targeting iOS BEFORE 4.0 you MUST put json2.js from http://www.JSON.org/json2.js into your www directory and include it here -->
    <script type="text/javascript" charset="utf-8" src="cordova-1.5.0.js"></script>
    <script src="NativeControls.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/main.js" type="text/javascript" charset="utf-8"></script>
  </head>
    <body onload="onBodyLoad()">
      <div data-role="page" id="mainpage"> 
          <div data-role="header">
              <h1>LOGIN</h1>
          </div>
          <div data-role="content">
            <img src="images/cslogosmall2.png" style="margin-top: -10px; margin-left: -5px;"/>
            <form id="login" method="post">
              <p>
              <ul data-role="listview" data-theme="g" id="contentlist">
                  <b>Program:</b>
                  <input type="text" id="program"/>
                  <b>Username:</b>
                  <input type="text" id="username"/>
                  <b>Password:</b>
                  <input type="password"  id="password"/>
              </ul>
              </p>
              <br/>
                <button type="submit" data-theme="a" id="submit" value="Submit"></button>
            </form>
          </div>
          <!--<div data-role="footer"> 
              <h1> Main Page Footer </h1>
          </div>-->
      </div>
      <div data-role="page" id="contentpage"> 
          <div data-role="header"> 
              <h1> Content Page </h1>

          </div>
          <div data-role="content">
              <a href="#" data-role="button" onclick="history.go(-1);return false;" onClick=buttonDemo()> Back to Main Page </a>
              <a href="#" data-role="button" id="beepbtn" onClick=beepbeep()> Beep!</a>
          </div>
          <div data-role="footer"> 
              <h1> Content Page Footer </h1>
          </div>
      </div>      
  </body>
</html>

      

main.js:

function onBodyLoad()
{       
    $('#submit').click(function() {
        var program = document.getElementById('program').value;
        var username = document.getElementById('username').value;
        var password = document.getElementById('password').value;

        if (!program || program == "") {
            alert("Please enter a program");
            return false;
        }
        else if (!username || username == "") {
            alert("Please enter a username");
            return false;
        }
        else if (!password || password == "") {
            alert("Please enter a password");
            return false;
        }
        return true;
    });

    document.addEventListener("deviceready", onDeviceReady, false);
}

/* When this function is called, Cordova has been initialized and is ready to roll */
/* If you are supporting your own protocol, the var invokeString will contain any arguments to the app launch.
 see http://iosdevelopertips.com/cocoa/launching-your-own-application-via-a-custom-url-scheme.html
 for more details -jm */
function onDeviceReady() {
  // Initializating TabBar
  navigator.notification.alert("Cordova is working");

  nativeControls = window.plugins.nativeControls;
  navigator.notification.alert(nativeControls);
  nativeControls.createTabBar();

  // Books tab
  nativeControls.createTabBarItem(
    "books",
    "Books",
    //"/www/tabs/book.png",
    "",
    {"onSelect": function() {
      books();
    }}
  );

  // Stats tab
  nativeControls.createTabBarItem(
    "finished",
    "Finished",
    //"/www/tabs/box.png",
    "",
    {"onSelect": function() {
      finished();
    }}
  );

  // About tab
  nativeControls.createTabBarItem(
    "about",
    "About",
    //"/www/tabs/info.png",
    "",
    {"onSelect": function() {
      about();
    }}
  );

  // Compile the TabBar
  nativeControls.showTabBar();
  nativeControls.showTabBarItems("books", "finished", "about");
  nativeControls.selectTabBarItem("books");
}


function books() {


}

function about() {

}

function finished(){

}

      

As you can see, I am doing a:

  navigator.notification.alert("Cordova is working");
  nativeControls = window.plugins.nativeControls;
  navigator.notification.alert(nativeControls);
  nativeControls.createTabBar();

      

to check if the nativeControls variable has anything in it. I am not getting any warnings. I even tried:

navigator.notification.alert(window);

      

bad luck. I have added NativeControls key to Cordova.plist as NativeControls - NativeControls.

Any help would be greatly appreciated!

+3


source to share


4 answers


I have uploaded the source code to my jQM app in the iTunes store, which has an example of a Tabbar working on both iPhone and iPad, in both orientations. Hope this helps!



http://zsprawl.com/iOS/2012/04/nativecontrols-plugin-for-cordovaphonegap/

+6


source


I also suffered the same struggle. There may be some misunderstanding in the constructor.



I saw a post where some extra lines were added to avoid conflict and it works!

+4


source


This is my code and it works:

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

  nc.createTabBar();
  nc.createTabBarItem('whoTabItem', 'Quem?', '', null);
  nc.createTabBarItem('whereTabItem', 'Onde?', '', null);
  nc.createTabBarItem('whatTabItem', 'O que?', '', null);
  nc.showTabBar();
  nc.showTabBarItems('whoTabItem', 'whereTabItem', 'whatTabItem');

}

      

At the very end of NativeControls.js window.plugins.nativeControls is initialized, so it should be fine:

if(!window.plugins)
  window.plugins = {};

 window.plugins.nativeControls = new NativeControls();

      

Your call to createTabBarItem has 5 parameters - that's just 4. Eliminate that fourth empty parameter and run the test. This may be why your onSelect function is not working.

+4


source


You need to define nativeControls as a variable at the top of your main.js file, then you can use it on that line, otherwise js will be thrown through an undefined variable

 nativeControls = window.plugins.nativeControls;

      

0


source







All Articles