|
|
<!DOCTYPE html>
<html>
<head>
<title>Todo list: bjrtodolist</title>
<link rel='stylesheet' href='style/styles.css' />
<!--[if lt IE 9]><script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.1/html5shiv.js"></script><![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<div id='wrapper'>
<article>
<header>
<h2>Windows Azure</h2>
<h1>Mobile Services</h1>
<form id='add-item'>
<button type='submit'>Add</button>
<div><input type='text' id='new-item-text' placeholder='Enter new task' /></div>
</form>
</header>
<ul id='todo-items'></ul>
<p id='summary'>Loading...</p>
</article>
<footer>
<a href='http://www.windowsazure.com/en-us/develop/mobile/'>
Learn more about Windows Azure Mobile Services
</a>
</footer>
</div>
<script src='scripts/jquery-1.9.1.min.js'></script>
<script src='scripts/MobileServices.Web-1.0.0.min.js'></script>
<script src='scripts/app.js'></script>
</body>
</html>
<!--<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="scripts/jquery-1.6.4.js" type="text/javascript"></script>
<script src="scripts/jquery.mobile-1.2.0.min.js" type="text/javascript"></script>
<script src="scripts/cordova.js" type="text/javascript"></script>
<link rel="Stylesheet" href="style/jquery.mobile-1.2.0.min.css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<div data-role="page" id="page1">
<div data-theme="e" data-role="header">
<h3>
Welcome!
</h3>
</div>
<div data-role="content">
<div>
<b>
This is your Nomad project...
</b>
</div>
<ul data-role="listview" data-divider-theme="e" data-inset="true">
<li data-role="list-divider" role="heading">
Getting Started
</li>
<li data-theme="c">
<a href="http://www.vsnomad.com/documentation" target="_newtab">
Read the guide
</a>
</li>
<li data-theme="c">
<a href="http://vsnomad.zendesk.com/" target="_newtab">
Report a problem
</a>
</li>
<li data-theme="c">
Hit the build button and try it on a device!
</li>
</ul>
<hr />
<ul data-role="listview" data-divider-theme="e">
<li data-role="list-divider" role="heading">
Device Information
</li>
<li>
<h3>Compass heading: <span id="heading">n/a</span></h3>
<p>Uses compass.watchHeading</p>
</li>
<li>
<h3>Connection type: <span id="connection">n/a</span></h3>
<p>Uses connection.type</p>
</li>
<li data-theme="c">
<h3>Contacts: <span id="contacts">n/a</span></h3>
<p>Uses navigator.contacts.find</p>
</li>
<li data-theme="c">
<h3>Device properties:</h3>
<p>Uses device.*</p>
<div id="deviceprops" style="font-size: 11px;">n/a</div>
</li>
<li data-theme="c">
<h3>Geolocation: <span id="geolocation">n/a</span></h3>
<p>Uses navigator.geolocation.watchPosition</p>
</li>
<li data-theme="c">
<img alt="" src="images/choosephoto.png" id="picture" /><button data-role="button" data-inline="true" onclick="showPictures();">
Choose a picture
</button>
<p><span id="geolocationerror"></span></p>
</li>
</ul>
</div>
<div data-theme="a" data-role="footer">
</div>
<script type="text/javascript">
function showPictures() {
navigator.camera.getPicture(function (imageURI) {
$('img#picture').attr('src', imageURI);
}, function (error) {
$('img#picture').replaceWith('<p>' + error + '</p>');
}, { sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY, destinationType: navigator.camera.DestinationType.FILE_URI });
}
$(function () {
var compassWatchID, geoWatchID;
document.addEventListener("deviceready", function () {
// Compass
compassWatchID = navigator.compass.watchHeading(function (heading) {
$('span#heading').html(heading.magneticHeading.toFixed(2) + '°');
}, function (error) {
$('span#heading').text(error.code);
}, { frequency: 3000 });
// Connection
var networkState = navigator.network.connection.type,
states = {};
states[Connection.UNKNOWN] = 'Unknown';
states[Connection.ETHERNET] = 'Ethernet';
states[Connection.WIFI] = 'WiFi';
states[Connection.CELL_2G] = 'Cell 2G';
states[Connection.CELL_3G] = 'Cell 3G';
states[Connection.CELL_4G] = 'Cell 4G';
states[Connection.NONE] = 'No network';
$('span#connection').text(states[networkState]);
// Contacts
navigator.contacts.find(['id'], function (contacts) {
$('span#contacts').text(contacts.length + ' found');
}, function (error) {
$('span#contacts').text(error.code);
}, { multiple: true });
// Device properties
$('div#deviceprops').html(
'<strong>Name:</strong> ' + device.name + '<br/>' +
'<strong>Cordova version:</strong> ' + device.cordova + '<br/>' +
'<strong>Platform:</strong> ' + device.platform + '<br/>' +
'<strong>UUID:</strong> ' + device.uuid + '<br/>' +
'<strong>Version:</strong> ' + device.version + '<br/>'
);
// Geolocation
geoWatchID = navigator.geolocation.watchPosition(function (position) {
$('span#geolocation').text(position.coords.latitude.toFixed(2) + 'N, ' + position.coords.longitude.toFixed(2) + 'E');
}, function (error) {
$('span#geolocationerror').text(error.code + ': ' + error.message);
}, { frequency: 3000 });
});
} ());
</script>
</div>
</body>
</html>
-->
|
By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.
If a file you wish to view isn't highlighted, and is a text file (not binary), please
let us know and we'll add colourisation support for it.
Bart is a web and database performance consultant specialising in .NET, SQL Server, and JavaScript across both desktop and mobile platforms.
He is the author and main contributor of the
Dapper.SimpleLoad and
Dapper.SimpleSave extensions for StackExchange's
Dapper microORM, both of which are available on
Nuget.
Formerly he spent almost 10 years at
Red Gate Software, with several years in the company's .NET Developer Tools division leading the development team that built
ANTS Performance Profiler (Red Gate's .NET and SQL Server performance profiling tool), and
ANTS Memory Profiler (their .NET memory profiler). He also lead development of well known tools such as
SQL Prompt and
.NET Reflector.
He can be found at
www.bartread.com, and maintains a free online games site at
arcade.ly, where he hosts HTML5, JavaScript, and CSS versions of classic arcade games such as Star Castle (his version is called
Star Citadel) that he uses to illustrate principles of high performance client-side development.
Submit an article or tip