Jan 142013
 
 January 14, 2013  Posted by at 2:10 pm WinRT  Add comments

I’ve gotten quite a few requests in regards to blog posts showcasing JS/HTML and C#/XAML side by side. Seems appropriate as I’m just about to start the step by step guide for JS and HTML Windows Store Apps. I have to admit, JS is not my strongest language, so feel free to correct me if I make any mistakes 🙂 This series will be simple, straight to the point, no fuss. Be aware that this example has no error handling, and shows only a very basic implementation as a step one.
First of all don’t forget to declare that the app will use location, otherwise you will be met by this fine notification:

Don't forget to declare that app uses location

Don’t forget to declare that app uses location

In the app manifest tick this box in capabilities

Don't forget to declare that app uses location

Comparing of the views

Comparing html and xaml in windows store apps

Comparing html and xaml in windows store apps

Comparing JS and C#

Comparing javascript and C# in windows store apps

Comparing javascript and C# in windows store apps

C# and XAML

[sourcecode language=”XML”]
<Page
x:Class="GeolocationWinRT.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock x:Name="notify"/>
<Button Content="Get location" Click="Button_Click_1"/>
</StackPanel>
</Page>
[/sourcecode]

[sourcecode language=”csharp”]
using System;
using System.Collections.Generic;
using System.IO;
using System.Threading.Tasks;
using Windows.Devices.Geolocation;
using Windows.UI.Xaml.Controls;

namespace GeolocationWinRT
{
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
}

private async void Button_Click_1(object sender, Windows.UI.Xaml.RoutedEventArgs e)
{
var position = await new Geolocator().GetGeopositionAsync();
var coordinates = position.Coordinate;

notify.Text = string.Format("Lat: {0} | Long {1} | Accuracy {2}",
coordinates.Latitude,
coordinates.Longitude,
coordinates.Accuracy,
coordinates.Altitude);
}

}
}

[/sourcecode]

Javascript and HTML

[sourcecode language=”HTML”]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>GeolocationJSWinRT</title>
<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>
</head>
<body>
<div style=" position: fixed;top: 50%;left: 50%;margin-top: -50px;margin-left: -100px;">
<div id="notify"></div>
<button id="getLocation">Get Location</button>
</div>
</body>
</html>
[/sourcecode]

[sourcecode language=”javascript”]
(function () {
"use strict";

WinJS.Binding.optimizeBindingReferences = true;

var app = WinJS.Application;
app.onactivated = function () {
document.getElementById("getLocation").addEventListener("click", buttonClickHandler, false);
};
app.start();

function buttonClickHandler() {
var loc = new Windows.Devices.Geolocation.Geolocator();
loc.getGeopositionAsync().then(function (pos) {
document.getElementById(‘notify’).innerHTML =
"Lat: " + pos.coordinate.latitude +
" | Long " + pos.coordinate.longitude +
" | Accuracy " + pos.coordinate.accuracy;
});
}
})();
[/sourcecode]

MSDN how to implement Geolocation in JS
MSDN how to implement Geolocation in C#

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(required)

(required)

What is 13 + 4 ?
Please leave these two fields as-is:
IMPORTANT! To be able to proceed, you need to solve the following simple math (so we know that you are a human) :-)