![]() You can see below how the home page is composed of HTML elements with data-role attributes. For example, the data-role attribute tells jQueryMobile the role of the HTML element and the data-icon attribute specifies what icon will be shown inside the element. We describe semantic information about each of these elements by defining data attributes. Pages in our app are elements, buttons are or elements and lists are made up of and elements. jQueryMobile allows us to define our user interface using standard HTML tags. You should be able to launch this in your emulator and recieve no errors. This will include all of the JavaScript and CSS dependencies ExerciseTracker will have.īe sure to replace YOUR_API_KEY_HERE with your actual Google Maps API Key. Let's write the first version of index.html. Note it down, as we will need it in the next step! Skeleton index.html Follow the guide that Google provides to register your API key. API keys are free to get and support up to 25,000 queries per day. In order for our application to use Google Maps, we must have an API key. Your directory structure should look like this. ![]() exercisetracker.js (create this, our JS will go here)ĭownload and copy each of these files into the same directory as the index.html and cordova-1.7.0.js files.Īt this stage, the directory structure of my Android app looks like this:.Let's start development of our app by downloading and including all of the required JavaScript and CSS files. You should now have a minimal index.html file which you can view on your device emulator. In this tutorial, I will be developing on an Android setup (Android 4.0.3 API v15), however the code in this tutorial should work on all platforms. Choose the platform you want to develop for and follow the instructions to set up the basic PhoneGap application. PhoneGap provides a great Start Page which walks you through setting up the PhoneGap development environment for each of the different mobile platforms. The first thing we need to do is set up the PhoneGap development environment. In this two-part series of tutorials, you will learn how to use the above to build a complete PhoneGap application. The exercise tracker app we will be building utilizes the following technologies: PhoneGap allows us to easily create mobile applications using familiar web technologies such as HTML 5, CSS, and JavaScript, and then seamlessly deploys them as native apps on platforms such as iOS, Android, and Windows Phone. Our application, ExerciseTracker, is going to run on the PhoneGap mobile platform. It displays the total distance travelled in kilometers and the total time taken for the workout, and it then plots the route the user travelled on a Google Map. The Track Info page presents workout specific information.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |