{"id":576,"date":"2012-03-26T00:20:10","date_gmt":"2012-03-26T07:20:10","guid":{"rendered":"http:\/\/zsprawl.com\/iOS\/?p=576"},"modified":"2012-05-07T19:34:15","modified_gmt":"2012-05-08T02:34:15","slug":"using-the-native-tabbar-plugin-in-cordova","status":"publish","type":"post","link":"http:\/\/zsprawl.com\/iOS\/2012\/03\/using-the-native-tabbar-plugin-in-cordova\/","title":{"rendered":"Using the Native TabBar Plugin in Cordova"},"content":{"rendered":"<p><b>Update: This post is a bit outdated. NativeControls has been updated. Click <a href=\"http:\/\/zsprawl.com\/iOS\/2012\/05\/navigation-bar-with-nativecontrols-in-cordova\/\">here<\/a> to read more.<\/b><\/p>\n<p><a href=\"http:\/\/zsprawl.com\/iOS\/wp-content\/uploads\/2012\/03\/iOS-Simulator-Screen-shot-Mar-25-2012-10.56.42-PM.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/zsprawl.com\/iOS\/wp-content\/uploads\/2012\/03\/iOS-Simulator-Screen-shot-Mar-25-2012-10.56.42-PM-200x300.png\" alt=\"\" title=\"iOS Simulator Screen shot Mar 25, 2012 10.56.42 PM\" width=\"200\" height=\"300\" class=\"alignright size-medium wp-image-588\" \/><\/a>A couple of people that I know have been struggling with getting the Native TabBar in Cordova functioning since the name change from PhoneGap to Cordova. This plugin, called NativeControls, allows a Cordova developer to access the native Tabbar (as well as a few other windows and popups). Given all the issues that we&#8217;ve had over the years with fixed footers, this is an excellent way to use xCode&#8217;s native navigation tool and tie it back into your web-based App with calls to javascript.<\/p>\n<p>If you aren&#8217;t already familiar with Cordova (or PhoneGap) plugins, then this short tutorial will seem impossible.<\/p>\n<ol>\n<li> Download the <a href=\"https:\/\/github.com\/phonegap\/phonegap-plugins\/pull\/386\/files\" target=\"_blank\">updated version of NativeControls<\/a> from GistHub.<\/li>\n<li>Drag the .h and .m files into the Plugin folder of your xCode project and add &#8220;NativeControls&#8221; to the Cordova.plist plugins list as both the key and value.<\/li>\n<li>Add the javascript file to your index.html header.<\/li>\n<p>[code]script src=&#8221;js\/cordova-1.5.0.js&#8221;><\/script><br \/>\n<script src=\"js\/NativeControls.js\"><\/script>[\/code]<\/p>\n<li> Add the code for your own javascript.<\/li>\n<p>[code]<xmp><script src=\"js\/controls.js\"><\/script><\/xmp>[\/code]<\/p>\n<p>And then the <a href=\"https:\/\/gist.github.com\/1384250\" target=\"_blank\">body of this javascript file<\/a>.<\/p>\n<p>[code]$(document).ready( function() {<br \/>\n    document.addEventListener(&#8220;deviceready&#8221;, onDeviceReady, false);<br \/>\n});<\/p>\n<p>function onDeviceReady() {<\/p>\n<p>  \/\/ Initializating TabBar<br \/>\n  nativeControls = window.plugins.nativeControls;<br \/>\n  nativeControls.createTabBar();<\/p>\n<p>  \/\/ Books tab<br \/>\n  nativeControls.createTabBarItem(<br \/>\n    &#8220;books&#8221;,<br \/>\n    &#8220;Books&#8221;,<br \/>\n    &#8220;tabButton:Recents&#8221;,<br \/>\n    {&#8220;onSelect&#8221;: function() {<br \/>\n      alert(&#8216;books&#8217;);<br \/>\n    }}<br \/>\n  );<\/p>\n<p>  \/\/ Stats tab<br \/>\n  nativeControls.createTabBarItem(<br \/>\n    &#8220;finished&#8221;,<br \/>\n    &#8220;Finished&#8221;,<br \/>\n    &#8220;tabButton:Recents&#8221;,<br \/>\n    {&#8220;onSelect&#8221;: function() {<br \/>\n      alert(&#8216;stats&#8217;);<br \/>\n    }}<br \/>\n  );<\/p>\n<p>  \/\/ About tab<br \/>\n  nativeControls.createTabBarItem(<br \/>\n    &#8220;about&#8221;,<br \/>\n    &#8220;About&#8221;,<br \/>\n    &#8220;tabButton:Recents&#8221;,<br \/>\n    {&#8220;onSelect&#8221;: function() {<br \/>\n      alert(&#8216;about&#8217;);<br \/>\n    }}<br \/>\n  );<br \/>\n  \/\/ Compile the TabBar<br \/>\n  nativeControls.showTabBar();<br \/>\n  nativeControls.showTabBarItems(&#8220;books&#8221;, &#8220;finished&#8221;, &#8220;about&#8221;);<br \/>\n  nativeControls.selectTabBarItem(&#8220;books&#8221;);<br \/>\n}[\/code]<\/p>\n<li>I had an issue with the NativeControl where nothing would happen, so I created the following function at the end of the javascript file. Be sure that if you do this that you delete the function that looks kinda like this one at the end of the file.<\/li>\n<p>[code]NativeControls.install = function() {<br \/>\n    if ( !window.plugins )<br \/>\n        window.plugins = {};<br \/>\n    if ( !window.plugins.NativeControls ) {<br \/>\n        window.plugins.nativeControls = new NativeControls();<br \/>\n    }<br \/>\n}<br \/>\nCordova.addConstructor(NativeControls.install);[\/code]\n<\/ol>\n<p>While we are at it, let&#8217;s add support for orientation changes. Perhaps it will teach us a little about plugins. Don&#8217;t worry, I will make the code available to download.<\/p>\n<p>Add the following function to your javascript.<\/p>\n<p>[code]function orientationChange() {<br \/>\n    var nativeControls = window.plugins.nativeControls;<br \/>\n    nativeControls.resizeTabBar();<br \/>\n}[\/code]<\/p>\n<p>And of course, make sure you call this with a listener (the second one).<\/p>\n<p>[code]$(document).ready( function() {<br \/>\n    document.addEventListener(&#8220;deviceready&#8221;, onDeviceReady, false);<br \/>\n    window.addEventListener(&#8220;resize&#8221;, orientationChange, false);<br \/>\n});[\/code]<\/p>\n<p>Now for the meat of the code. Add the following to your .m file.<\/p>\n<p>[code]\/**<br \/>\n * Resize the tab bar on Orientation Change<br \/>\n * @brief resize the tab bar on rotation<br \/>\n * @param arguments unused<br \/>\n * @param options unused<br \/>\n *\/<br \/>\n&#8211; (void)resizeTabBar:(NSArray*)arguments withDict:(NSDictionary*)options {<br \/>\n    CGFloat height   = 49.0f;<br \/>\n    CGRect webViewBounds = self.webView.bounds;<br \/>\n    webViewBounds.size.height += height;<br \/>\n    CGRect tabBarBounds = CGRectMake(<br \/>\n         webViewBounds.origin.x,<br \/>\n         webViewBounds.origin.y + webViewBounds.size.height &#8211; height,<br \/>\n         webViewBounds.size.width,<br \/>\n         height<br \/>\n    );<br \/>\n    webViewBounds = CGRectMake(<br \/>\n         webViewBounds.origin.x,<br \/>\n         webViewBounds.origin.y,<br \/>\n         webViewBounds.size.width,<br \/>\n         webViewBounds.size.height &#8211; height<br \/>\n    );<\/p>\n<p>    [tabBar setFrame:tabBarBounds];<br \/>\n    [self.webView setFrame:webViewBounds];<br \/>\n}[\/code]<\/p>\n<p>And as every good developer knows, don&#8217;t forget to add the header declaration in the .h file.<\/p>\n<p>[code]<\/p>\n<pre>- (void)resizeTabBar:(NSArray*)arguments withDict:(NSDictionary*)options;<\/pre>\n<p>[\/code]<\/p>\n<p>Last but not least, add the following code to the NativeControls.js file.<\/p>\n<p>[code]<\/p>\n<pre>NativeControls.prototype.resizeTabBar = function() {<br \/>\n    Cordova.exec(\"NativeControls.resizeTabBar\");<br \/>\n};[\/code]<\/p>\n<p>Then when you hit compile in xCode, the magic happens. If you have any questions or require additional assistance, feel free to leave a comment below and I shall try my best. Also, be sure to look at all the comments included in the NativeControls.m file. They really detailed what all the parameters mean within each function.<\/p>\n<p>Download: [download id=2 format=1]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Update: This post is a bit outdated. NativeControls has been updated. Click here to read more. A couple of people that I know have been struggling with getting the Native TabBar in Cordova functioning since the name change from PhoneGap to Cordova. This plugin, called NativeControls, allows a Cordova developer to access the native Tabbar <a href=\"http:\/\/zsprawl.com\/iOS\/2012\/03\/using-the-native-tabbar-plugin-in-cordova\/#more-'\" class=\"more-link\"><br \/>more \u00bb<\/a><\/p>\n","protected":false},"author":318,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[24,38,3,25],"tags":[121,9,34,39,40],"class_list":["post-576","post","type-post","status-publish","format-standard","hentry","category-blog","category-cordova","category-ios-development","category-jquery-mobile","tag-cordova","tag-development","tag-phonegap","tag-plugin","tag-xcode"],"aioseo_notices":[],"_links":{"self":[{"href":"http:\/\/zsprawl.com\/iOS\/wp-json\/wp\/v2\/posts\/576"}],"collection":[{"href":"http:\/\/zsprawl.com\/iOS\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/zsprawl.com\/iOS\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/zsprawl.com\/iOS\/wp-json\/wp\/v2\/users\/318"}],"replies":[{"embeddable":true,"href":"http:\/\/zsprawl.com\/iOS\/wp-json\/wp\/v2\/comments?post=576"}],"version-history":[{"count":20,"href":"http:\/\/zsprawl.com\/iOS\/wp-json\/wp\/v2\/posts\/576\/revisions"}],"predecessor-version":[{"id":589,"href":"http:\/\/zsprawl.com\/iOS\/wp-json\/wp\/v2\/posts\/576\/revisions\/589"}],"wp:attachment":[{"href":"http:\/\/zsprawl.com\/iOS\/wp-json\/wp\/v2\/media?parent=576"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/zsprawl.com\/iOS\/wp-json\/wp\/v2\/categories?post=576"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/zsprawl.com\/iOS\/wp-json\/wp\/v2\/tags?post=576"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}