{"id":1023,"date":"2012-05-07T19:31:18","date_gmt":"2012-05-08T02:31:18","guid":{"rendered":"http:\/\/zsprawl.com\/iOS\/?p=1023"},"modified":"2012-05-07T22:36:03","modified_gmt":"2012-05-08T05:36:03","slug":"navigation-bar-with-nativecontrols-in-cordova","status":"publish","type":"post","link":"http:\/\/zsprawl.com\/iOS\/2012\/05\/navigation-bar-with-nativecontrols-in-cordova\/","title":{"rendered":"Navigation Bar with NativeControls in Cordova"},"content":{"rendered":"<p><a href=\"https:\/\/github.com\/zSprawl\/NativeControls\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/zsprawl.com\/iOS\/wp-content\/uploads\/2012\/05\/IMG_1622-200x300.png\" alt=\"\" title=\"IMG_1622\" width=\"200\" height=\"300\" class=\"alignright size-medium wp-image-1027\" \/><\/a>I&#8217;ve written a <a href=\"http:\/\/zsprawl.com\/iOS\/2012\/04\/nativecontrols-plugin-for-cordovaphonegap\/\">few blog posts<\/a> in the past about NativeControls, a plugin for Cordova\/PhoneGap that let&#8217;s you use the Navigation Bar (the infamous app header) and the TabBar (the infamous app footer) in your web-based Apps. PhoneGap works as a layer between the native xCode and your javascript, giving you the responsiveness of a native app in your web app. On top of that, it feels really native, because it is native. In fact, it is one of my favorite ways to implement a simple UI in an app.<\/p>\n<p>I&#8217;ve finally gotten around to <a href=\"https:\/\/github.com\/zSprawl\/NativeControls\">updating the code on GitHub<\/a>. The hide\/show functions aren&#8217;t 100% right, but I got both portrait and landscape working. If someone wants to fork my code and fix some of the bugs, please feel free.<\/p>\n<p>Setup is pretty simple. Grab the following files and add them to the plugin section of your project:<\/p>\n<ul>\n<li>CDVNavigationBar.xib<\/li>\n<li>CDVNavigationBarController.h<\/li>\n<li>CDVNavigationBarController.m<\/li>\n<li>NativeControls.h<\/li>\n<li>NativeControls.m<\/li>\n<\/ul>\n<p>Include the javascript files at the top of your index file. I&#8217;ve included them all to show that order matters:<\/p>\n<p>[code]<script type=\"text\/javascript\" charset=\"utf-8\" src=\"js\/controls.js\"><\/script><br \/>\n<script type=\"text\/javascript\" charset=\"utf-8\" src=\"js\/cordova-1.7.0.js\"><\/script><br \/>\n<script type=\"text\/javascript\" charset=\"utf-8\" src=\"js\/NativeControls.js\"><\/script>[\/code]<\/p>\n<p>You will need to edit the controls.js file for your own button settings. Use my example to guide you. You need to setup a few javascript listeners in your document.ready function.<\/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>Then in your deviceready function, you need to setup your NavigationBar (header) and TabBar (footer).<\/p>\n<p>[code]function onDeviceReady() {<br \/>\n    newLoc = location.href.substring(0, location.href.lastIndexOf(&#8220;\/&#8221;)+1);<\/p>\n<p>    \/\/ Initializating TabBar<br \/>\n    nativeControls = window.plugins.nativeControls;<br \/>\n    nativeControls.createTabBar();<\/p>\n<p>    \/\/ Back Button<br \/>\n  nativeControls.createTabBarItem(<br \/>\n    &#8220;page1&#8221;,<br \/>\n    &#8220;Page 1&#8221;,<br \/>\n    &#8220;www\/images\/pound.png&#8221;,<br \/>\n    {&#8220;onSelect&#8221;: function() {<br \/>\n        $.mobile.changePage( &#8220;#page1&#8221;, { transition: &#8216;reverse slide&#8217; } );<br \/>\n        nativeControls.setNavBarTitle(&#8220;Page 1&#8221;);<br \/>\n        nativeControls.selectTabBarItem(&#8220;page1&#8221;);<br \/>\n        selectedTabBarItem = &#8220;page1&#8221;;<br \/>\n    }}<br \/>\n  );<\/p>\n<p>  \/\/ Home tab<br \/>\n  nativeControls.createTabBarItem(<br \/>\n    &#8220;page2&#8221;,<br \/>\n    &#8220;Page 2&#8221;,<br \/>\n    &#8220;www\/images\/pound.png&#8221;,<br \/>\n    {&#8220;onSelect&#8221;: function() {<br \/>\n        if ( selectedTabBarItem == &#8220;page1&#8221; ) {<br \/>\n            $.mobile.changePage( &#8220;#page2&#8221;, { transition: &#8216;slide&#8217; } );<br \/>\n        } else {<br \/>\n            $.mobile.changePage( &#8220;#page2&#8221;, { transition: &#8216;reverse slide&#8217; } );<br \/>\n        }<br \/>\n        nativeControls.setNavBarTitle(&#8220;Page 2&#8221;);<br \/>\n        nativeControls.selectTabBarItem(&#8220;page2&#8221;);<br \/>\n        selectedTabBarItem = &#8220;page2&#8221;;<br \/>\n    }}<br \/>\n  );<\/p>\n<p>  \/\/ About tab<br \/>\n  nativeControls.createTabBarItem(<br \/>\n    &#8220;page3&#8221;,<br \/>\n    &#8220;Page 3&#8221;,<br \/>\n    &#8220;www\/images\/question.png&#8221;,<br \/>\n    {&#8220;onSelect&#8221;: function() {<br \/>\n        $.mobile.changePage( &#8220;#page3&#8221;, { transition: &#8216;slide&#8217; } );<br \/>\n        nativeControls.setNavBarTitle(&#8220;Page 3&#8221;);<br \/>\n        nativeControls.selectTabBarItem(&#8220;page3&#8221;);<br \/>\n        selectedTabBarItem = &#8220;page3&#8221;;<br \/>\n    }}<br \/>\n  );<br \/>\n    \/\/ Compile the TabBar<br \/>\n    nativeControls.showTabBar();<br \/>\n    nativeControls.showTabBarItems(&#8220;page1&#8221;, &#8220;page2&#8221;, &#8220;page3&#8221;);<\/p>\n<p>    selectedTabBarItem = &#8220;page1&#8221;;<br \/>\n    nativeControls.selectTabBarItem(&#8220;page1&#8221;);<\/p>\n<p>    \/\/ Setup NavBar<br \/>\n    nativeControls.createNavBar();<br \/>\n    nativeControls.setNavBarTitle(&#8220;Page 1&#8221;);<\/p>\n<p>    nativeControls.setupLeftNavButton(<br \/>\n        &#8220;?&#8221;,<br \/>\n        &#8220;&#8221;,<br \/>\n        &#8220;onLeftNavButton&#8221;<br \/>\n    );<\/p>\n<p>    \/\/nativeControls.hideLeftNavButton();<\/p>\n<p>    nativeControls.setupRightNavButton(<br \/>\n        &#8220;About&#8221;,<br \/>\n        &#8220;&#8221;,<br \/>\n        &#8220;onRightNavButton&#8221;<br \/>\n    );<\/p>\n<p>    nativeControls.showNavBar();<br \/>\n}[\/code]<\/p>\n<p>Take the time to walk through the code and learn what is happening. First, we are setting up the TabBar (footer), and buttons. Then we are setting up the NavigationBar (header) and its two buttons. We will also need to create two functions for these buttons called &#8220;onLeftNavButton&#8221; and &#8220;onRightNavButton&#8221;.<\/p>\n<p>[code]function onLeftNavButton() {<br \/>\n    alert(&#8216;Left Button Pressed&#8217;);<br \/>\n}<\/p>\n<p>function onRightNavButton() {<br \/>\n    alert(&#8216;Right Button Pressed&#8217;);<br \/>\n}[\/code]<\/p>\n<p>Also, don&#8217;t forget to setup the function for orientation changes:<\/p>\n<p>[code]function orientationChange() {<br \/>\n    nativeControls = window.plugins.nativeControls;<br \/>\n    nativeControls.resizeTabBar();<br \/>\n}[\/code]<\/p>\n<p>Last but not least, don&#8217;t forget to add &#8220;NativeControls&#8221; to your Cordova.plist file to initialize the plugin, and start up xCode. If you are lucky, you will see the top and bottom bars as shown in the screenshot. <a href=\"https:\/\/github.com\/zSprawl\/NativeControls\">Download the demo and code<\/a> over at GitHub.<\/p>\n<p>Let me know how it works out for you!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I&#8217;ve written a few blog posts in the past about NativeControls, a plugin for Cordova\/PhoneGap that let&#8217;s you use the Navigation Bar (the infamous app header) and the TabBar (the infamous app footer) in your web-based Apps. PhoneGap works as a layer between the native xCode and your javascript, giving you the responsiveness of a <a href=\"http:\/\/zsprawl.com\/iOS\/2012\/05\/navigation-bar-with-nativecontrols-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,4],"tags":[121,53,34,40],"class_list":["post-1023","post","type-post","status-publish","format-standard","hentry","category-blog","category-cordova","category-featured","tag-cordova","tag-nativecontrols","tag-phonegap","tag-xcode"],"aioseo_notices":[],"_links":{"self":[{"href":"http:\/\/zsprawl.com\/iOS\/wp-json\/wp\/v2\/posts\/1023"}],"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=1023"}],"version-history":[{"count":8,"href":"http:\/\/zsprawl.com\/iOS\/wp-json\/wp\/v2\/posts\/1023\/revisions"}],"predecessor-version":[{"id":1036,"href":"http:\/\/zsprawl.com\/iOS\/wp-json\/wp\/v2\/posts\/1023\/revisions\/1036"}],"wp:attachment":[{"href":"http:\/\/zsprawl.com\/iOS\/wp-json\/wp\/v2\/media?parent=1023"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/zsprawl.com\/iOS\/wp-json\/wp\/v2\/categories?post=1023"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/zsprawl.com\/iOS\/wp-json\/wp\/v2\/tags?post=1023"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}