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.
Hrichi Mohamed The .net Passion 