Develop iOS, Android and Windows applications using HTML – Part 2
This post is in the continuation of my previous post . In this post, I will tell you about :
How to deploy HTML code to build iOS , Android and Windows application.
How to retrive the value of the data from the form that we created in my previous post.
For the popup, you need create a separate “div” tag. Place the code shown above the closing “
The “data-role” defines that the element will be a pop-up and the id “popupText” will be explained later. Now we will call this popup on click of the submit button. For this, we need to write a function that will show this. Open your text editor and create a new file “custom.js” in the “js” folder that you have just created and paste the code below :
name= document.getElementById("name").value; //code to get the user input of "name" field
phone= document.getElementById("phone").value; //code to get the user input of "phone" field
address= document.getElementById("address").value; //code to get the user input of "address" field
$("#submitPopup").popup("open"); // this will open the pop up
$("#popupText").html("Hi " +name+", please verify your phone :"+phone +" and address : "+address+". Thanks."); //setting the value in the "popupText" id span
Here we are binding the “div” id(s) to the function.
Now we need to call the “getData()” function on the press of the “Submit” button. To do this, add
Just run the code, and you will see the following screenshot after pressing Submit button :
Now comes the main part to deploy this code on actual mobile. We will do this with the help of Phonegap. To know what actual is Phonegap and what it does, click here.
You need to download the “cordova.js”. You can download it from here. Paste the contents (3 JS files) in “HelloWorld” folder . Update the “index.html” to give it the reference of the Cordova files. The complete code looks like this :
You are almost done. Now create a new account on https://build.phonegap.com . Once created, you need to upload your code using a .zip format. Just zip all the contents of the Helloworld and upload and you will see something like this :
Just scan the code using any bar code reader on your mobile and run the app. It will run smoothly.
To run on iOS device, you need to upload the developer certificate and configuration file.
This was all about building Android, iOS and Windows app using HTML5 and CSS. We will be sharing more tutorials in few days.