Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.4 The Navigation Page and Navigation Plugin

In this lesson, I'll show you how to use the navigation plugin. We'll create a navigation page and implement its functionality with the navigation plugin.

3.4 The Navigation Page and Navigation Plugin

Hello everyone. This is Reggie Dawson. Welcome to the building an app with Cordova course for touch plus. In this video we will configure our navigation page and our navigation plug in. Cordova includes a few different plug ins that work with the devices built in navigation. For this project we're going to use the directions plug in. When we enter an address navigation should start on the device. First, we're going to set up our navigation page. Go to index.html and add page three, then we will add our ui-content div, and then after that a ui-grid-solo div. Inside of the grid-solo div, we will add. This represent a label we are going to add for our text input. It has the text of intern address. Next we will add our text input. This text input has the type of text, the name text basic, and the id of text basic, then we add another with the button inside. This button will have a value of search in an id of SRCH. After that, go to a command prompt and navigate to your project directory, then we are going to add the directions plugin. After that, let's go to index.js. First we're going to add a click handler for the SRCH button in the on device ready method, then we add a call to app.navigate. After that of course, we need to add our navigate method. First, let's set up a variable to hold the value of our text input. We use the J.query .val method to grab this and then we use the directions plugin to look up the address that is typed in the text input, and that's all we need to set up navigation. After that, we can save and preview our app. Now with this plugin and the contact plugin we're going to use next, we will need to test on our device, since the emulators cannot open navigation properly. Make sure you navigate to your project folder and run cordova prepare, and then make sure your device is connected and run Cordova run Android. The project should be compiled and pushed to your device. Try and search an address and navigations should open, and that's all we need to configure navigation. In the next video we will configure our plug in to choose context.

Back to the top