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 :

Apache Cordova website

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.

new project

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.

empty project

3- Create the Main page for the application

This is the result we want for the Main page :

home 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.

results

You can download this app from Windows Phone Market for Free.

Download

qrcode