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.