Category Archives: HTML5
Developing Windows Phone App with HTML5 (PhoneGap)
In this post I will show how to develop To-Do app for Windows Phone with Html5 using Cordova (PhoneGap).
1- Download and Install Cordova
Get the package for Cordova projet from this links :
or
cordova-wp8 repository on GitHub
When downloaded, Un-package the project and copy the zip file and execute “createTemplates.bat” to generate projects template for both wp7 and wp8.
Copy CordovaWP8.zip generated file under C:\Users\User\Documents\Visual Studio 2012\Templates\ProjectTemplates folder.
Here we go, you are now able to create a windows phone app from Cordova template.
2- Create an Empty Project
Open Visual Studio Create New Project and select Visual C#. In the list of installed Templates you will found a new Template for Cordova.
Give the Solution a name (In my case To-Do) and hit Ok. After loading all necessary files Visual Studio will show you the new Main page for the project.
3- Create the Main page for the application
This is the result we want for the Main page :
So, in solution explorer under www folder Open Index.html and update html content like this.
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="format-detection" content="telephone=no" /> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /> <link rel="stylesheet" type="text/css" href="css/index.css" /> <title>Just Note</title> </head> <body> <div id="dv-app-title"> <span id="sp-app-title"></span> </div> <div class="container"> <input placeholder=" Your Note Text..." id="txt-note" type="text" /> <button id="btn-add-note">+</button> <div style="padding: 0" class="to-do-list"> <h2>To do list</h2> <hr style="background-color: #166B94;height: 2px"> <ul id="ul-notes"> <li> No Note... </li> <!--<li> <input style="float: left" id="checkbox1" type="checkbox" checked> <label style="float: left" for="checkbox1">Drink some coffee</label> <input type="button" class="btn-remove" value="-" /> </li>--> </ul> </div> <!-- end to-do-list --> </div> <!-- end container --> <script type="text/javascript" src="cordova-2.3.0.js"></script> <script type="text/javascript" src="js/index.js"></script> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/Core.js"></script> <script type="text/javascript"> app.initialize(); </script> </body> </html>
And update the stylesheet file for the Main Page to look like :
* {
-webkit-touch-callout: none; /* prevent callout to copy image, etc when tap to hold */
-webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */
-webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
-webkit-user-select: none; /* prevent copy paste, to allow, change 'none' to 'text' */
}
body {
height:100%;
margin:0px;
padding:0px;
text-transform:uppercase;
width:100%;
background: #e5e5e5;
color: #272727;
font: 16px/40px "Open Sans", sans-serif;
}
h1 {
font-size:24px;
font-weight:normal;
margin:0px;
overflow:visible;
padding:0px;
text-align:center;
}
.event {
border-radius:4px;
-webkit-border-radius:4px;
color:#FFFFFF;
font-size:12px;
margin:0px 30px;
padding:2px 0px;
}
.event.listening {
background-color:#333333;
display:block;
}
.event.received {
background-color:#4B946A;
display:none;
}
@keyframes fade {
from { opacity: 1.0; }
50% { opacity: 0.4; }
to { opacity: 1.0; }
}
@-webkit-keyframes fade {
from { opacity: 1.0; }
50% { opacity: 0.4; }
to { opacity: 1.0; }
}
.blink {
animation:fade 3000ms infinite;
-webkit-animation:fade 3000ms infinite;
}
@charset "utf-8";
h2 { margin: 0; }
hr {
background: #5e5e5e;
border: none;
height: 1px;
margin: 0;
min-height: 1px;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
.container {
height: 100%;
/*left: 50%;*/
/*margin: -160px 0 0 -152px;*/
position: absolute;
top: 45px;
width: 100%;
margin-left: 5px;
}
/* ---------- To-Do-List ---------- */
#txt-note {
height: 40px; width: 80%;border: none;outline: none;background: white;font-size: 16px
}
#dv-app-title {
background-image: url('../img/icon.png');
background-repeat: no-repeat;
background-position: 5%;
top: 0;
background-color: #166B94;
border: none;
height: 40px;
width: 100%;
}
#sp-app-title {
background-image: url('../img/icon.png');
margin-left: 15px
}
#btn-add-note {
background-color: #166B94;
border: none;
outline: none;
text-align: center;
color: white;
font-size: 26px;
font-weight: bold;
width: 12%;
height: 39px;
}
.btn-remove {
background-color: red;
border: none;
outline: none;
text-align: center;
color: white;
font-size: 26px;
font-weight: bold;
width: 30px;
height: 30px;
float: right;
margin-right: 12px
}
.to-do-list {
background: -webkit-linear-gradient(top, #aaa, #fff 2%);
background: -moz-linear-gradient(top, #aaa, #fff 2%);
background: -o-linear-gradient(top, #aaa, #fff 2%);
background: -ms-linear-gradient(top, #aaa, #fff 2%);
background: linear-gradient(top, #aaa, #fff 2%);
-webkit-background-size: 100% 40px;
-moz-background-size: 100% 40px;
background-size: 100% 40px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.200),
0 3px 0 rgba(255, 255, 255, 1.0),
0 4px 0 rgba(0, 0, 0, 0.15),
0 6px 0 rgba(255, 255, 255, 1.0);
font-size: 14px;
-ms-touch-action:pan-y;
width: 95%;
height: 100%
}
.to-do-list h2 {
color: #166B94;
font-size: 28px;
font-weight: bold;
text-align: center
}
.to-do-list input[type=checkbox] {
cursor: pointer;
position: relative;
visibility: hidden;
display: none
}
.to-do-list input[type="checkbox"]:after {
border: 1px solid #166B94;
border-radius: 3px;
color: #fff;
content: "";
display: block;
height: 16px;
line-height: 16px;
position: absolute;
text-align: center;
visibility: visible;
width: 16px;
}
.to-do-list input[type=checkbox]:checked:after {
border: 1px solid #979797;
color: #979797;
content: "✓";
}
.to-do-list input[type=checkbox]:checked + label {
color: #979797;
font-weight: normal;
text-decoration: line-through;
}
.to-do-list label {
color: #166B94;
font-weight: bold;
margin-left: 12px;
}
4- Create the JavaScript Code for Items management(Add, delete, make done)
Create a File named Core.js under js folder and put in it :
/// <reference path="jquery.js" />
/// <reference path="../cordova-2.3.0.js" />
var noteController = {};
var storage = localStorage;
var notes=new Array();
var status=new Array();
noteController.initializeObjects = function () {
notes = JSON.parse(storage.getItem("notes"));
status = JSON.parse(storage.getItem("status"));
if (notes === undefined || notes==null) {
notes = new Array();
storage.setItem("notes", JSON.stringify(notes));
}
if (status === undefined || status == null) {
status = new Array();
storage.setItem("status", JSON.stringify(status));
}
};
noteController.listNote = function() {
$("#ul-notes").html("");
if (notes.length > 0) {
for (var i in notes) {
var itemStatus = $.grep(status, function (e) { return e.id == notes[i].id; })[0].value;
$("#ul-notes").append('<li> <input class="ch-items" id="checkbox' + notes[i].id + '" type="checkbox" '
+ (eval(itemStatus)? "checked":"")
+ '> <label class="lbl-item" id="' + notes[i].id + '" for="checkbox' + notes[i].id + '">' + notes[i].content + '</label>' +
'<input type="button" class="btn-remove" value="-" /></li>');
}
} else {
$("#ul-notes").append("<li style='margin-left:12px'> No Note...</li>");
}
};
noteController.addNote = function (text) {
var id = getId();
notes.push({ id: id, content: text });
status.push({ id: id, value: false });
storage.setItem("notes", JSON.stringify(notes));
storage.setItem("status", JSON.stringify(status));
};
noteController.removeNote = function (id) {
var itemStatus = $.grep(status, function (e) { return e.id == id; })[0];
var itemNote = $.grep(notes, function (e) { return e.id == id; })[0];
var statusIndex = status.indexOf(itemStatus);
var noteIndex = notes.indexOf(itemNote);
notes.splice(noteIndex, 1);
status.splice(statusIndex, 1);
storage.setItem("notes", JSON.stringify(notes));
storage.setItem("status", JSON.stringify(status));
};
noteController.setStatus = function (id,newStatus) {
for (var i in status) {
if (status[i].id == id) {
status[i].value = newStatus;
}
}
storage.setItem("status", JSON.stringify(status));
};
function getId() {
var text = "";
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
for (var i = 0; i < 5; i++)
text += possible.charAt(Math.floor(Math.random() * possible.length));
return text;
}
Go back to Main Page and update the script section in the end of file to look like :
<script type="text/javascript">
app.initialize();
noteController.initializeObjects();
$(document).ready(function() {
noteController.listNote();
$("#btn-add-note").on("click", function () {
var text = $("#txt-note").val();
noteController.addNote(text);
$("#txt-note").val("");
noteController.listNote();
});
$(".ch-items").live("change",function() {
var id = $(this).next().attr("id");
var status = $(this).is(':checked');
noteController.setStatus(id, status);
});
$(".btn-remove").live("click", function () {
var id = $(this).prev().attr("id");
noteController.removeNote(id);
noteController.listNote();
});
});
</script>
5- The result
We are ready now to see the results. Press F5 to run the application.
You can download this app from Windows Phone Market for Free.
