Park It is a web app. What better way to test it than using Cordova's browser platform? In this video, Tom Duffy demonstrates how to install the browser platform and use it for testing Park It.
- I know you're dying to try this thing out. But before we do that, we have a couple Of edits to make in the html file. First, let's remove the link element We added pointing to the iOS specific style sheet. You'll find that on line 13. You can just highlight the line And then delete it. Second, we need to add an onload event Handler to the body element that gets Everything rolling by calling the init function. You'll find the body element on line 17. Save that. Now that that's done it's time to create A platform for testing and debugging.
Since parkIt is a web application It makes sense to test and debug It in a browser. The good news is that Cordova provides A browser platform for us to use For testing and debugging. Let's install the browser platform And then test the current state of the app. Installing a platform in Cordova Is really easy. You simply use the platform command And then follow it with the word add And then the name of the platform. So I'll type in cordova platform add browser.
In NetBeans you can now expand The platforms node to see the browser Platform files. Just move that to the right a little bit. And now you'll see in the browser folder There's also a www folder. These are the platform specific files Where your web app will execute. It's important to note that you Shouldn't modify the files for any platform. Doing so would mean that you no longer Have a single code base for your app.
Instead, all of your editing should be Done in the top level www folder. When you've made edits you can issue The cordova platform update command To update the files in any of The platforms you support. Alternatively, you could also remove any Installed platforms after editing files And then re-add them to the project By issuing the cordova platform remove command Followed by the cordova platform add command. To test the app, find the index.html file In the browsers www folder, right-click on it, And choose Run File.
When you do this you should see The app in the browser with the Android styles applied. Remember, the code we wrote loaded The iOS specific styles if the platform was iOS. All other platforms use the Android styles. In the html file, the gotIt buttons click event Called a function name setCss. You'll find that reference on line 27 In the button whose id is gotIt. Open the parkIt.js file in the top level Www folder and add the setCss function.
Here's a tip. Minimize the browser platform so that you're Not tempted to edit the files inside the platform. Instead, focus on the top level Www folder and make all of your edits there. Open the parkIt.js file in the top level Www folder and lets add the setCss function Associated with the gotIt button. Start with the function declaration. SetCss takes three arguments.
The first one is the element whose css you'll change. The second one is the property you wish to change. And then the third is the value You want to change the property to. Start by creating a variable that points To the style object of the element. Once you've declared the node object It's a simple call to set property To change the value of the property.
As you can see, setProperty takes two arguments. The property you'd like to change And the value you want to change it to. Save your work. And now that we've made changes in The top level www folder we're going to Have to update the browser platform To propagate those changes to the platform. So, back in the command line, issue the cordova platform update browser command.
And what that will do is it will take The latest version of your top level Www folder and copy it into the browser Platform specific www folder. Once you've done that, it's a simple Matter of refreshing in the browser And now you can click gotIt and you'll See that the instructions go away. Don't worry about the status bar Not changing color. The status bar isn't supported On the browser platform.
- Understanding Cordova's value proposition
- Installing the Cordova CLI
- Accessing mobile device capabilities, including geolocation and data storage
- Using Android Studio and Xcode in conjunction with Cordova
- Creating platform-specific stylings to match native interfaces