Category Archives: windows phone

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

Hello Windows Phone 8

At the Build developer conference that started at Microsoft’s Redmond campus the last month , the company has published its Windows Phone 8 Developer Platform to the general public. The SDK is available to download from  here.

The new SDK is aligned with the latest Microsoft technologies: it’s based on Visual Studio 2012  and it requires Windows 8 to run. Windows 8 Release Preview and Visual Studio 2012 RC are not supported.

The Windows Phone 8 SDK includes many new features, giving developers new opportunities and allowing them to create better apps. Some of them :

  • Easier to build Fast and fluid UI
  • Live Tiles, Lock Screen, and Wallpaper
  • Speech – launch and control apps with Speech
  • Improved Dev Center and Store
  • Deeper integration with Phone Experiences (opened up access to the camera)
  • Better multi-tasking
  • Advanced networking: Bluetooth data transfer, peer networking, proximity connect
  • Delivered 90% of the top developer requests

Let’s discover the new environment by creating Hello world application.

After the installation process completed with success:

Click on Launch to start Visual Studio 2012. Select File > Create New Project (Ctrl+Shift+N). Select the Windows Phone App template and give the application name as Hello wp8 :

the new sdk targets both windows phone  8 et windows phone 7.1 so the Visual studio ask us to select the windows phone we want to target for this. So we choose windows Phone OS 8.0.

After choosing the OS 8.0 Visual studio create the project, we add a button from the toolbox and drag it to the Xaml editor or the designer :

Double click on the button and add the code to display Hello world.

private void SayHelloClick(object sender, RoutedEventArgs e)

{

MessageBox.Show(“Hello Windows Phone 8”);

}

Press F5 and wait a few seconds to load the emulator.
Once the application is loaded press the button “Say Hello” and the application will display “Hello Windows Phone 8”