How to Set and use the NativeControls plug-in PhoneGap

Many people may also know that NativeControls and ChildBrowser are the two most popular iOS plug-ins in PhoneGap, but the plug-ins are tricky to install, you cannot easily find this help on the Internet. Take me as an example. I have read the instructions on installing and testing the PhoneGap plug-in. So in this article, I will introduce the entire process of setting and using NativeControls, but this process is also applicable to any other plug-ins in the iOS source code library), and strive to be very concise and concise, and even the PhoneGap beginners can understand.
I suppose you have installed and configured the Xcode environment on a Mac machine, and are familiar with the latest version of Xcode.
The first thing you need to do is download the phonegap-plugins source code library zip document https://github.com/purplecabbage/phonegap-plugins) and decompress it to any folder you like. Now go to the decompressed folder, find iPhone/NativeControls, and set NativeControls. h and NativeControls. copy m to the/<Project Name>/Plugins folder on Xcode, and then copy NativeControls. js moves to the place you want in the www folder. After copying and pasting all these Files, you must open PhoneGap under/<Project Name>/Supporting Files. plist: Use Key NativeControls, Value NativeControls, and Type String to add a new entry for the Plugins data. Finally, your project looks like this:

 
Now you can prepare to study the code. The first thing you need to do is add the necessary Javascript files to your indexed HTML source code in this order.
<Script src = "phonegap-1.0.0.js" type = "text/javascript" charset = "UTF-8"> </script>
<Script src = "NativeControls. js" type = "text/javascript" charset = "UTF-8"> </script>
Next, find your main Javascript file, which contains the onDeviceReady event set, and put the NativeControls initialization code there. In this example, the TabBar component is used to output the following content:

 
You may have noticed that I used the Glyphish Pro icon library there, and you can buy it for $25, but the price is high, because it is a very complete icon library for your TabBars and more components. First, you should initialize the NativeControls variable and assign it a TabBar. Please use this code:
NativeControls = window. plugins. nativeControls;
NativeControls. createTabBar ();
Then you can start to use the JSON structure to create a tab icon/button:
NativeControls. createTabBarItem (
"Books ",
"Books ",
"/Www/tabs/book.png ",
{"OnSelect": function (){
// Do something
}}
);
The first item is the name variable, the second item is the icon label, the third item is the icon path, and the last item is the function that should be called whenever the icon is clicked. Note: You should insert the icon path corresponding to the project folder! As for the retina icon, I do encourage you to take a closer look at this http://stackoverflow.com/questions/3666963/iphone-4-tab-bar-icons/3667247#3667247 on how to organize the retina icon ). After you add all the icons you want to add to the TabBar, you should display them on the screen. Then, place the icon in the order you declare in the function.) Finally, specify the active TabBar after the application is enabled, as shown in the following figure:
NativeControls. showTabBar ();
NativeControls. showTabBarItems ("books", "finished", "about ");
NativeControls. selectTabBarItem ("books ");
If you want to use these keywords as icon items, you can select between the predefined TabBar icons that apple contains by default in its software development kit SDK:
-TabButton: More
-TabButton: Favorites
-TabButton: Featured
-TabButton: TopRated
-TabButton: Recents
-TabButton: Contacts
-TabButton: History
-TabButton: Bookmarks
-TabButton: Search
-TabButton: Downloads
-TabButton: MostRecent
-TabButton: MostViewed
Note: labels cannot be used, because these icons will overwrite labels, but you should place something on the label item; otherwise, they cannot be used.
I uploaded the entire source code to my Gist. You can view it carefully in Example of NativeControls in PhoneGap-Gisthttps: // gist.github.com/1384250.
After completing these difficult tasks, you can compile and test the application. If you have followed the above steps correctly, everything should go smoothly.

Address: http://www.dreamintech.net/2011/11/how-to-setup-and-use-nativecontrols-in-phonegap/