Category Archives: WP8

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

Advertisements