Steps to implement TelemetryApp in Windows Store apps using API:

 

1. Create Telemetry account (telemetryapp.com)
There are two types of telemetry accounts
Telemetry Enterprise Edition – It is a premium account offering by telemetry. For more information Enterprise Edition account page.
Telemetry Community Edition – It is a free account which has very limited features to provide a preview of telemetry for new organizations. For more information please see our Community Edition account page.
telemetry comunity Account

2. After Successful login in to the telemetryapp.com, initially you will be prompted to add a Board.

create board
Board:
A Board (dashboard) is a collection of widgets linked to metrics organized across a user determined layout. Below is an example screenshot how a board looks after adding widgets.

view board

Agents:

After successful creation of board now we need an agent to communicate with the board.

– Go to Agents tab and select Add agent

Add Agent

– Give a name and click on create

Agent Name

– Copy the Agent token to secure place, you will not be able to see it again.

Agent API tocken

Widgets:

Boards contain widgets. A widget may be a chart, a number or simply a box to contain other widgets

Adding a widget to the board:

a. Select Add Widget option right above board properties

Add properties

b. Now select a widget which is suitable for your application.

sample widgets

c. After adding widget the board looks like below

view widget

Flows:

Flows are objects that represent the flow of metrics within Telemetry.

widget properties

Adjusting Board Properties:

Here you can title your Board and adjust the settings, or properties, of your Board.

board properties

Widget Properties:

After adding Flows to your Board, you can select a Flow and edit the properties of the selected Flow.

view widget properties

Layers:

  • All your widgets on a board can be found as a list of layers under the Layers tab.

Boxes:

  • Each widget box can be moved around, resized, and even layered.
  • Select a widget you want to adjust, and on hover you can see options to drag out and resize your box or to move it.
  • You can even have just one or two very large widgets on a board.

Adding a Logo:

  • The best way to personalize and brand your board, is to add a custom logo to your board.
  • From our Image widget, upload an image of your logo directly to your board if you have a paid plan with us.
  • You can then change the background color of the Image widget so your logo looks its best.

Board Backgrounds:

  • Add an image or color background to give your board(s) a custom theme.
  • Adjust your widget background color and opacity so your widgets and background are visible.

Widget Background:

  • Adjust your widget background color and opacity so your widgets and background are visible.

Board Layout:

  • Do you want to create 5 tidy columns on your board but notice you have extra space or one column is smaller or larger than the others? You can adjust the number of rows and columns your widgets snap to under Board Properties.

3. API
a. Accounts:

The account object represents your account. Typically you’ll see this referenced by other objects. This is a read only object.

Account Object

Parameter

Description

Id

A globally unique static string identifying the object.

name

The name of your account.

contact_email

The contact email address.

contact_phone

The contact phone number.

api_soft_limit

API soft limit.

api_hard_limit

API hard limit.

api_use_last_24

API usage of the last 24 hours.

api_limit_use

API usage of the last hour.

user_limit

Users limit.

board_limit

Boards limit.

agent_limit

Agents limit.

viewer_limit

Viewers limit.

api_version

API version.

Plan

The plan of your account.

plan_expires_at

The plan expiry date (if any).

To read Account Details

GET https://api.telemetryapp.com/account

This method will return your current account.

For Account Update

PATCH https://api.telemetryapp.com/account

This method will update your current account.

b. Boards

The boards object represent the boards (dashboards) within your account.

Boards are collections of widgets and their flows contained together for display.

Board Object

Parameter

Description

id

A globally unique static string identifying the object.

name

The name of the board.

theme

The theme for the board.

columns

The number of columns in the board grid.

rows

The number of rows in the board grid.

size

An array representing the native size of the board.

aspect_ratio

A string with the aspect ratio of the board.

display_board_name

Whether to show the board name at the top of the board or not.

channel_tag

The tag for the default channel for the board.

widget_margins

The external margin of a widget, defaults to 3.

widget_padding

The internal padding of a widget, defaults to 8.

font_size

The size of the font to use, can be ‘small’, ‘normal’ or ‘large’.

font_family

The font family to use, defaults to ‘normal’ which uses the theme default.

background_color

The background color of the board.

background_url

The background image URL of the board.

widget_color

The background color of the widgets.

widget_title_color

The color of the widgets’ titles.

widget_title_size

The size of the widgets’ titles.

Boards Listing

GET https://api.telemetryapp.com/boards

This method will return a list of all boards on your account.

Board Details

GET https://api.telemetryapp.com/boards/:id

This method will return a specific board on your account by id.

Export Board

GET https://api.telemetryapp.com/boards/:id/export

This method will return a specific board on your account by id and also its widgets details.

Create a Board

POST https://api.telemetryapp.com/boards

This method will create a new board.

Import a Board

POST https://api.telemetryapp.com/boards/import

This method will create a new board and widgets based on the json input.

Update a Board

PATCH https://api.telemetryapp.com/boards/:id

This method will update a board object.

Delete a Board

DELETE https://api.telemetryapp.com/boards/:id

This method will delete a board object.

c. Widgets

Widgets are mostly hidden from the Telemetry web interface however they’re

Critical elements to position flows within a board.

Widget Object

Parameter

Description

id

A globally unique static string identifying the object.

board_id

A globally unique static string identifying the board that the widget belongs to.

variant

The variant of the widget: barchart, box, bulletchart, clock, compass, countdown, funnelchart, gauge, graph, grid, icon, iframe, image, log, map, multigauge, multivalue, piechart, scatterplot, servers, status, table, text, tickertape, timeline, timeseries, upstatus, value, video, waterfall, weather.

column

The column of the top left of the widget on a board.

row

The row of the top left of the widget on a board.

width

The width of a widget in columns.

height

The height of a widget in rows.

in_board_index

The layer sorting order of the widget within the board.

background

The background color of the widget. Possible values are:
“default” => The background will be dark/light depends on the selected theme of the board
“none” => Transparent background
Hex code (e.g. #09ab3f) => Hex code of a color.

renderer

An optional parameter that specifies a specific renderer to use. Things like changing a line chart from a spline to an area. See the renderer options below.

List all Widgets

GET https://api.telemetryapp.com/widgets

This method will return a list of all widgets on your account.

Display a Widget

GET https://api.telemetryapp.com/widgets/:id

This method will return a specific widget on your account by id. It also return an array of flows for the default channel of the board. There’s an optional channel_id parameter to return the flows for that channel instead of the default.

Create a Widget

POST https://api.telemetryapp.com/widgets

This method will create a new widget.

Update a Widget

PATCH https://api.telemetryapp.com/widgets/:id

This method will update a widget object.

Delete a Widget

DELETE https://api.telemetryapp.com/widgets/:id

This method will delete a widget object.

Renderer Options

Different Widgets support different renderer options. You can select the renderer using the Telemetry Manager when designing a board. When embedding a specific widget however in order to use something other than the default renderer you must specify it in the embed tag.

The following renderer options are supported for the following flow variants:

Variant

Options

compass

gauge, heading

gauge

circle, combined, vertical, horizontal

linechart

line, spline, area, bar, scatter

number

equal, number, label, icon

sparkline

spline, line, bar, area

timeseries

line, spline, area, bar, scatter

4. Implement telemetry in Windows store or Phone app using API

In this article I am using bar chart to explain how to implement in windows store apps. The procedure is same for all widgets.
Bar Chart:

A bar chart is a stack of horizontal bars, each with a label, value and colour. The value determines the length of the bar. The bars will be sorted from top to bottom in terms of length by default. You can choose to turn off sorting. Send data with a hash of bars containing an array with each bar as a hash. Bar charts can display a maximum of 20 bars. There may be less than 20 shown if your widget box is too small. Resize your widget box if all your data is not being displayed.

Parameters

Parameter

Notes

Type

Description

bars

Required

array of objects

The bars

bars[]color

Required

CSS color

The color of the bar.

bars[]label

Required

string

The text to overlay on top of the bar.

bars[]value

Required

number

A number representing the value of the barchart. This will determine the length of the bar.

max

 

integer

The min possible value of the bar.

min

 

integer

The max possible value of the bar.

sort

 

boolean

Whether to sort the bars by value or not. The default is true.

– Adding a Bar Chart into board.
Log in into telemetryapp.com, go to boards and select edit board.

edit board

– Now click on add widget, under charts select Bar Chart.

add widget bar chart

select bar chart

After adding Bar chart into board, select the bar chart on board, now go to widget tab in properties window and expand general tab.

bar chart properties

Copy the Flow Tag to a note pad.

bar chart flow tag name

Now we have a widget to display the flow data on board.

5. Create a Windows store or Phone app (Phone 8.1 or Windows 8.1) project in visual studio to send flows to bar chart from windows app, in my example I created a Universal Hub App project.

create windows store app

Open HubPage.xaml.cs, under load state method write the following code to send the flow data to recently created Bar Chart.

To use API we need the following information

  • URI
  • API Token (refer step 2 under Agents)
  • Flow Tag (In earlier step we copied flow tag for bar chart)

URI = “https://api.telemetryapp.com/flows/Flow Tag/”;

For Authentication/Authorization we need to pass Agent Token as user name and password as blank in POST method.

Prepare list of bars information:

In this example I am using bar chart 

public class Bar
        {
            public string color { get; set; }
            public string label { get; set; }
            public int value { get; set; }
        }

        public class BarRootObject
        {
            public List<Bar> bars { get; set; }
        }

 

BarRootObject barRootObject = new BarRootObject();
            barRootObject.bars = new List<Bar>();
            var bar = new Bar();
            bar.color = "#66CC00";
            bar.label = "Users";
            bar.value = 4;
            barRootObject.bars.Add(bar);

            bar = new Bar();
            bar.color = "#FF8900";
            bar.label = "Sessions";
            bar.value = 30;
            barRootObject.bars.Add(bar);

            bar = new Bar();
            bar.color = "#FFFF33";
            bar.label = "Crashes";
            bar.value = 26;
            barRootObject.bars.Add(bar);

            bar = new Bar();
            bar.color = "#FF0000";
            bar.label = "Exceptions";
            bar.value = 75;
            barRootObject.bars.Add(bar);

In above code I am passing four bars information which include colour, label and value (If you want to know/pass more properties info please refer Bar charts Flow Object table above).

POST Method:

string URI = "https://api.telemetryapp.com/flows/testtelemetry_piechart_1/&quot;;
            HttpClient httpClient = new HttpClient();
            httpClient.DefaultRequestHeaders.Authorization = CreateBasicHeader("**Replce with Agent Token**", "");
            metrics metric= new metrics();
            metric.values =new int[]{10,70,25,5};
            metric.labels = new string[] { "A", "B", "C", "D" };
            metric.colors = new string[] { "#1F1F33", "#669900", "#7A0000", "#334C4C" };
            string postData = JsonConvert.SerializeObject(metric);
            StringContent c = new StringContent(postData, Encoding.UTF8, "application/json");
            httpClient.MaxResponseContentBufferSize = 100000;
            var result = await httpClient.PostAsync(URI, c);
            var content = await result.Content.ReadAsStringAsync();

 

Method for creating Authentication Header Value:

public static AuthenticationHeaderValue CreateBasicHeader(string username, string password)
        {
            byte[] byteArray = System.Text.Encoding.UTF8.GetBytes(username + ":" + password);
            return new AuthenticationHeaderValue("Basic", Convert.ToBase64String(byteArray));
        }

6. Run the App

Now go to telemetry dashboard and check the bar chart has added four new bars with values.

bar chart with bars info

New Windows Phone 8.1 OS Features

 

Microsoft updated its mobile game against Apple and Google with a few additions to its Windows Phone OS. At its Build 2014 Developers Conference in San Francisco, Microsoft unveiled Windows Phone 8.1, an update to its mobile OS that introduces a Siri-like Cortana service, a new app store and one-swipe access to Action Center — a spot to view notifications from any app and access phone settings.

There are lot of new additions to keep Windows Phone fans happy, but developers and enterprise also will be pleased that the new OS is now free on all sub-9-inch devices and comes with a bevy of mobile-device management capabilities.

Microsoft said it will release the Windows Phone 8.1 preview software to developers on April 14, and consumers can expect to see it in the April and May time frame.  Here is a closer look at 10 of the coolest new features Microsoft brings to its mobile OS.

1. CortanaYour PERSONAL Digital Assistant

Powered by Bing, Cortana is the only digital assistant that gets to know you, builds a relationship that you can trust, and gets better over time by asking questions based on your behavior and checking in with you before she assumes you’re interested in something. She detects and monitors the stuff you care about, looks out for you throughout the day, and helps filter out the noise so you can focus on what matters to you. Cortana will launch shortly in the U.S. first as a “beta,” and then will launch in the US, the U.K. and China in the second half of 2014 with other countries to follow afterwards into 2015.

Cortana1

In Windows Phone 8.1, you get to Cortana by either a Live Tile on your Start screen or by pressing the search button on your device. This will take you to Cortana Home. To interact with Cortana, you can either speak or type—if you’re in a meeting, just type and Cortana won’t talk out loud. But if you ask her a spoken question, she’ll answer verbally and even carry on a natural conversation.

When you interact with Cortana for the VERY first time, she will start learning things about you… like your name, how to pronounce it, and ask for some personal interests.

2. Enterprise-Friendly

Microsoft warms up to the enterprise with new customizable mobile-device management enrollment options and support for more MDM policies. Also added is VPN and S/MIME support. Other key MDM enhancements include the ability to configure Windows Store app whitelists or blacklists, URL filters and Enterprise Mode for Internet Explorer settings.

3. Action Center

Live Tiles are a great way to “glance and go,” and now Microsoft has added Action Center to enable you to see notifications from ANY app – pinned or not—and to give you a customizable way to quickly access the settings you care about most, like Wi-Fi, Flight Mode, Bluetooth and Rotation Lock.

action centre

4. Windows Store Update

The Windows Phone app store gets a redesign that provides faster access to apps. The Windows Store app is now pinned to the taskbar by default. You also can now find, discover and run apps straight from the Start menu on Windows 8.1.

storestarscreen

5. Windows Phone’s Four New Senses

Data Sense lets you track how much data usage you use in a given month and will give you a breakdown of usage by app so you can see which app is using the most of your data. As you near your data limit, Data Sense will more aggressively offload data to Wi-Fi and limit cellular usage… and in 8.1 there’s a new “high savings” mode that cranks up the compression of images as you browse the web so you can browse even farther using less data than WP8.

datasense

Wi-Fi Sense will automatically connect you to free public hotspots it finds to help you save cellular data. And, if you’d like, you can opt-in to automatically and securely enable your friends and contacts to auto-connect to your home Wi-Fi, so they can use the internet connection at your house without hassling you for the password and typing it in manually. If you turn off Wi-Fi in Wi-Fi Sense, you can have Cortana automatically turn it back on when you reach one of your favorite places as identified in Cortana.

wifisense

Storage Sense to help you get the most out of the memory and storage on your phone. It will help you manage content you have on an SD memory card if your device supports those. You can also move content – like apps, music, photos – between the storage built in to your device and an SD memory card.

storage sense

Battery Saver gives you a clear breakdown of how apps are using your battery so you can make more informed usage decisions. With “automatic mode” enabled, it can dramatically extend your battery life.

battery

6. Calendar

Microsoft gives Calendar a much-needed update, now allowing you to swipe through dates left to right along with adding one-week views. Small weather icons populate the dates. Also, Cortana integrates with calendar so you can schedule events through voice commands.

calendar

7. Internet Explorer

The mobile version of Internet Explorer 11 heads to Windows Phone 8.1, adding HTML improvements such as in-line video playback and adaptive bit-rate streaming. The addition of IE 11 also adds InPrivate tabs, password caching and a new Reading View mode.

8. Customization(Lock Screen)

Microsoft clearly spent time adding personalization tools that allow you to do things such as deeper customization options for home screens. Now you can add more tiles, customize images or customize the colors of live tiles. The lock-screen also can be customized with a host of new lock-screen themes that include images along with animations. The start screen allows three columns of tiles instead of two.

lockscreen

9. Word Flow Keyboard

keyboard in Windows Phone is smart enough to learn your writing style and even knows the names of people in your contacts for faster typing. Best of all, our new Word Flow Keyboard lets you glide your fingers over the keys to type INCREDIBLY quickly…

word-flow-keyboard lumia

10. Start Screen

starscreen

MVVM Light–Visual Studio 2013, Universal Apps, Windows Phone 8.1, Windows Store 8.1 Apps–Part 3 of N

In this part 3, let us see how to build a Universal Application for Windows Phone 8.1 and Windows 8.1 with MVVM Light support. We will also learn how to create a shared viewmodel layer, how to detect design mode and what the result is in Blend and at runtime.

In Part 2, we created a Universal Phone 8.1 app that still uses all the components present inside the project. We will use MVVM Light toolkit and remove some of the classes we created as well as code written in code behind files. Then we will make this a truly Universal App, which can be created for Windows Phone 8.1 and Windows 8.1.  This offers a nice way to structure your app in order to share as much code and other files (Views, View Models, etc) as possible. It makes it easier than ever to create apps which target both the Windows Phone 8.1 and the Windows RT devices like Surface, XBox.

MVVM is the design pattern used to develop apps in Windows Store apps as well as Windows Phone apps. Lets use MVVM Light framework to develop a windows store app. You can get the latest MVVM Light toolkit from http://mvvmlight.codeplex.com/

Creating the Application

Step 1: Open the project created in Part 2 using Visual Studio 2013.
Step 2: Right click on the References folder in the Windows Phone 8.1 application, and select Manage Nuget Packages.
Step 3: Select the Online source for Nuget and search for MVVM Light.
Step 4: Select the package MVVM Light Libraries only. Alternatively you can select the package named MVVM Light Libraries Only (PCL). This will install the exact same binaries and eventually I will remove this package and keep only the main one.
Step 5: Repeat steps 2 to 5 for the Windows 8.1 application.
Step 6: At this point, you have added MVVM Light support to both your applications as shown in Figure 1. Now we can add the files that will bring the full support for the ViewModel layer and the design support.

image

Figure 1: MVVM Light libraries referenced in Universal Projects in VS 2013

Adding ViewModel Layer:

it’s time to instantiate and create the ViewModels. This is the ViewModelLocator class task. This class is quite important in the application structure enabled by MVVM Light. It’s created as a XAML resource in the file App.xaml. This creates the important link between XAML markup and source code, allowing the visual designers to create the ViewModels and to run the design-time code. Lets create two files ViewModelLocator and the MainViewModel.

Adding ViewModelLocator & PersonViewModel:

The main task of ViewLocator is to link up your views with the view models. It’s responsible for creating and disposing of all of your View-Models. In this ViewLocator, mostly we just add additional views. Let’s do that.

The main task of ViewLocator is to link up your views with the view models. It’s responsible for creating and disposing of all of your View-Models. In this ViewLocator, mostly we just add additional views. Let’s do that.

Step 7: Right click on the Shared node and select Add, New Folder. Name this folder ViewModel.
Step 8: Right click on the new ViewModel again and select Add, New Item. Select a Class, and name it ViewModelLocator.cs
Step 9: Modify the ViewModelLocator code to look like in the code segment 1 below.
Step 8: Move the class PersonViewModel.cs from Windows Phone 8.1 to ViewModel present in shared node.
Step 9: Modify the MainViewModel class to look like code snippet 2 below. Of course you can add a bunch of new methods, observable properties and commands to this ViewModel as usual in MVVM.

Here I created PersonViewModelProp property that returns an instance of PersonViewModel and we registered this PersonViewModel class in line 23 of code snippet 1.

Code Snippet 1
  1. public class ViewModelLocator
  2.     {
  3.         public MainViewModel Main
  4.         {
  5.             get
  6.             {
  7.                 return ServiceLocator.Current.GetInstance<MainViewModel>();
  8.             }
  9.         }
  10.  
  11.         public PersonViewModel PersonViewModelProp
  12.         {
  13.             get
  14.             {
  15.                 return ServiceLocator.Current.GetInstance<PersonViewModel>();
  16.             }
  17.         }
  18.  
  19.         static ViewModelLocator()
  20.         {
  21.             ServiceLocator.SetLocatorProvider(() => SimpleIoc.Default);
  22.             SimpleIoc.Default.Register<MainViewModel>();
  23.             SimpleIoc.Default.Register<PersonViewModel>();
  24.         }
  25.     }

Code Snippet 1: ViewModelLocator

Code Snippet 2
  1. public class PersonViewModel : ViewModelBase
  2.     {
  3.         public ObservableCollection<Person> Persons
  4.         {
  5.             get;
  6.             set;
  7.         }
  8.  
  9.         public Person personObject
  10.         {
  11.             get;
  12.             set;
  13.         }
  14.  
  15.  
  16.         private ICommand _savePersonCommand;
  17.         public ICommand SavePersonCommand
  18.         {
  19.             get
  20.             {
  21.                 return _savePersonCommand;
  22.             }
  23.  
  24.             set
  25.             {
  26.                 _savePersonCommand = value;
  27.             }
  28.         }
  29.         public PersonViewModel()
  30.         {
  31.             ObservableCollection<Person> _persons = new ObservableCollection<Person>();
  32.             _persons.Add(new Person { FirstName = IsInDesignMode
  33.                                     ? "bill" : "Bill",
  34.                                       LastName = IsInDesignMode
  35.                                           ? "gates" : "Gates" });
  36.             _persons.Add(new Person { FirstName = "Steve", LastName = "Ballmer" });
  37.             Persons = _persons;
  38.             personObject = new Person { FirstName = "Satya", LastName = "Nadella" };
  39.             _savePersonCommand = new RelayCommand(SavePerson, CanSavePerson);
  40.         }
  41.  
  42.         private bool CanSavePerson()
  43.         {
  44.             if (string.IsNullOrEmpty(personObject.FirstName) || string.IsNullOrEmpty(personObject.LastName))
  45.                 return false;
  46.             else
  47.                 return true;
  48.         }
  49.  
  50.         private void SavePerson()
  51.         {
  52.             Persons.Add(new Person { FirstName = personObject.FirstName, LastName = personObject.LastName });
  53.             //MessageDialog dialog = new MessageDialog(string.Format("Saved: {0}  {0}", personObject.FirstName, personObject.LastName));
  54.             //await dialog.ShowAsync();
  55.  
  56.         }
  57.  
  58.  
  59.     }

Code Snippet 2: PersonViewModel

Adding Locator resource to App.XAML

Open the App.xaml file in Visual Studio 2013 and modify it to look like code snippet 3 below. This creates a new resource with the ViewModelLocator, which we will use in the designer. Notice the addition of the “d” and “mc” XML namespaces so that we can mark the ViewModelLocator as a DataSource, which will make it show up in the Data panel in Blend.

Code Snippet 3
  1. <Application
  2.     x:Class="UniBlank_MVVMBasics.App"
  3.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;
  4.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml&quot;
  5.     xmlns:local="using:UniBlank_MVVMBasics"
  6.      xmlns:d="http://schemas.microsoft.com/expression/blend/2008&quot;
  7.     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006&quot;
  8.     mc:Ignorable="d"
  9.     xmlns:vm="using:UniBlank_MVVMBasics.ViewModel">
  10.     
  11.     <Application.Resources>
  12.         <vm:ViewModelLocator x:Key="Locator"
  13.                              d:IsDataSource="True"/>
  14.     </Application.Resources>
  15.  
  16. </Application>

Making it a truly Universal App:

Since there is nothing great we are doing here, we can easily make it a universal app with all the code shared between both the projects.  Move all the files that we created from Windows Phone 8.1 to Shared node as shown in Figure 2. Delete the files from Windows Phone 8.1 project. In Windows 8.1 project too, delete MainPage.XAML and hurray, we have our first universal app with MVVM. Now, Windows 8.1 store app begins to show up the same UI we have created for Windows Phone 8.1. Amazing!!!!

image

Figure 2: Moving files to Shared node for making this a Universal app code.

Connecting View and ViewModel:

Step 10: Set the DataContext of the Page to the MainViewMode as shown in Code Snippet 4.

Code Snippet 4
DataContext="{Binding PersonViewModelProp, Source={StaticResource Locator}}"

This is the complete code of PersonView User control.

Code Snippet
  1. <UserControl
  2.     x:Class="UniBlank_MVVMBasics.PersonView"
  3.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;
  4.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml&quot;
  5.     xmlns:d="http://schemas.microsoft.com/expression/blend/2008&quot;
  6.     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006&quot;
  7.     mc:Ignorable="d"
  8.     d:DesignHeight="300"
  9.     d:DesignWidth="400" Loaded="UserControl_Loaded"
  10.     xmlns:local="using:UniBlank_MVVMBasics"
  11.     DataContext="{Binding PersonViewModelProp, Source={StaticResource Locator}}" >

Comment the code we wrote in PersonView.xaml.cs

Code Snippet
  1. private void UserControl_Loaded(object sender, RoutedEventArgs e)
  2.       {
  3.           //PersonViewModel personViewModelObject = new PersonViewModel();
  4.           //this.DataContext = personViewModelObject;
  5.       }

 

Download the source code from here.

Getting Started with Visual Studio 2013, Windows Phone 8.1, Window Store 8.1, MVVM –Part 2 of N

 

In Part 1, we have seen how to write code in Model, view and viewmodel to wire up data and show it in the UI. There is a clear separation among the three layers. Now let us extend the sample and see how we can implement commanding. We will just add a Save button and when the user clicks Save, add a record to ObservableCollection and the UI automatically shows the data.

Step 1: Add a new class called DelegateCommand.cs and inherit from ICommand

DelegateCommand.cs
  1. public class DelegateCommand : ICommand
  2.     {
  3.         private readonly Action<object> _executeMethod = null;
  4.         private readonly Predicate<object> _canExecuteMethod = null;
  5.         private bool _isAutomaticRequeryDisabled = false;
  6.  
  7.         public DelegateCommand(Action<Object> executeMethod, Predicate<object> canExecuteMethod, bool isAutomaticRequeryDisabled)
  8.         {
  9.             if (executeMethod == null)
  10.             {
  11.                 throw new ArgumentNullException("executeMethod is null. Please set executeMethod.");
  12.             }
  13.             _executeMethod = executeMethod;
  14.             _canExecuteMethod = canExecuteMethod;
  15.             _isAutomaticRequeryDisabled = isAutomaticRequeryDisabled;
  16.         }
  17.  
  18.         public bool CanExecute(object parameter)
  19.         {
  20.             return _canExecuteMethod == null ? true : _canExecuteMethod(parameter);
  21.         }
  22.  
  23.         public event EventHandler CanExecuteChanged;
  24.  
  25.         public void Execute(object parameter)
  26.         {
  27.             if (_executeMethod != null)
  28.                 _executeMethod(parameter);
  29.         }
  30.  
  31.         //In WinRT, there is no CommandManager to raise events globally. you must update/raise CanExecuteChanged manually
  32.         public void RaiseCanExecuteChanged()
  33.         {
  34.             if (CanExecuteChanged != null)
  35.                 CanExecuteChanged(this, EventArgs.Empty);
  36.         }
  37.  
  38.     }

Step 2: Modify the person class created in Part 1 to includes command for Save.

PersonViewModel.cs
  1. public class PersonViewModel
  2.     {
  3.         public ObservableCollection<Person> Persons
  4.         {
  5.             get;
  6.             set;
  7.         }
  8.  
  9.         public Person personObject
  10.         {
  11.             get;
  12.             set;
  13.         }
  14.  
  15.  
  16.         private ICommand _savePersonCommand;
  17.         public ICommand SavePersonCommand
  18.         {
  19.             get
  20.             {
  21.                 return _savePersonCommand;
  22.             }
  23.  
  24.             set
  25.             {
  26.                 _savePersonCommand = value;
  27.             }
  28.         }
  29.         public PersonViewModel()
  30.         {
  31.             ObservableCollection<Person> _persons = new ObservableCollection<Person>();
  32.             _persons.Add(new Person { FirstName = "Bill", LastName = "Gates" });
  33.             _persons.Add(new Person { FirstName = "Steve", LastName = "Ballmer" });
  34.             Persons = _persons;
  35.             personObject = new Person { FirstName = "Satya", LastName = "Nadella" };
  36.             _savePersonCommand = new DelegateCommand(SavePerson, CanSavePerson, false);
  37.         }
  38.  
  39.         private bool CanSavePerson(object obj)
  40.         {
  41.             if (string.IsNullOrEmpty(personObject.FirstName) || string.IsNullOrEmpty(personObject.LastName))
  42.                 return false;
  43.             else
  44.                 return true;
  45.         }
  46.  
  47.         private void SavePerson(object obj)
  48.         {
  49.             Persons.Add(new Person { FirstName = personObject.FirstName, LastName = personObject.LastName });
  50.             //MessageDialog dialog = new MessageDialog(string.Format("Saved: {0}  {0}", personObject.FirstName, personObject.LastName));
  51.             //await dialog.ShowAsync();
  52.  
  53.         }
  54.  
  55.  
  56.     }

Step 3: Add a button to UserControl in PersonView.xaml and add Command property from viewmodel.

PersonView.xaml
  1. <UserControl
  2.     x:Class="UniBlank_MVVMBasics.PersonView"
  3.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;
  4.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml&quot;
  5.     xmlns:d="http://schemas.microsoft.com/expression/blend/2008&quot;
  6.     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006&quot;
  7.     mc:Ignorable="d"
  8.     d:DesignHeight="300"
  9.     d:DesignWidth="400" Loaded="UserControl_Loaded"
  10.     xmlns:local="using:UniBlank_MVVMBasics">
  11.     <Grid>
  12.         <StackPanel HorizontalAlignment="Left">
  13.             <ListView ItemsSource="{Binding Path=Persons, Mode=TwoWay}">
  14.                 <ListView.ItemTemplate>
  15.                     <DataTemplate>
  16.                         <StackPanel Orientation="Horizontal" Margin="20,20,0,0">
  17.                             <TextBlock Margin="10,0,20,0" Text="{Binding Path=FirstName, Mode=TwoWay}" Style="{StaticResource HeaderTextBlockStyle}"></TextBlock>
  18.                             <TextBlock Text="{Binding Path=LastName, Mode=TwoWay}" Style="{StaticResource HeaderTextBlockStyle}"></TextBlock>
  19.                         </StackPanel>
  20.                     </DataTemplate>
  21.                 </ListView.ItemTemplate>
  22.             </ListView>
  23.         </StackPanel>
  24.  
  25.         <StackPanel>
  26.              <Button Content="Save" HorizontalAlignment="Right" Width="80" Command="{Binding Path=SavePersonCommand}"/>
  27.         </StackPanel>
  28.  
  29.     </Grid>
  30. </UserControl>

Note: In WinRT, you must update/raise CanExecuteChanged manually. There is no CommandManager to do this globally. You could look at this as a pain in the neck, or a serious performance boost now that CanExecute is not called constantly. It does mean you have to think about cascading property changes where before you did not have to. But this is how it is. Manual.

Download the source code from here.

Getting Started with Visual Studio 2013, Windows Phone 8.1, Window Store 8.1, MVVM –Part 1 of N

With the recent release of Universal Apps, Windows Phone 8.1, Visual Studio 2013 Ultimate Update 2 RC , Windows Store 8.1 Update & Windows 8.1 update from Microsoft, I thought to blog some articles on these new technologies and there is no better design pattern to use than MVVM. So I will walk through some of the latest programming updates from MS along with MVVM.

Required Software’s:

Benefits of MVVM:

1. Separation of Concerns (View, ViewModel, Model)
2. Clean testable and manageable code. Can include presentation tier logic in unit testing.
3. No code behind code, so the presentation layer and the logic is loosely coupled.
4. Better way of data binding.
5. With the new Window Runtime support for Windows Phone 8.1, we can now use the same Windows Store code for ICommand pattern implementation.

Overview MVVM Layers

image

Steps to Implement MVVM:

Lets get our hands dirty. Here we are going to develop a Windows Phone 8.1 application using Windows Runtime & XAML (Not Silverlight). Figure 1 shows the UI we are planning to develop.

Before writing code, analyze what we want to achieve and then come up with the class names, draw relation ships on paper and see how all the components fit together. Here I have two variables firstname and lastname and I wanted to show the data in the UI as shown in figure 1. So lets use MVVM to achieve this.

image

Figure 1: Views showing Model data using MVVM design pattern

Step 1: Fun with MVVM begins. Create a Universal Project by opening VS 2013 –> New –> Project –> Templates->Visual C#->Store Apps->Universal Apps and select Blank App (Universal Apps). Name it as UniBlank_MVVMBasics as shown in Figure 2.

image

Figure 2: New Universal Apps Project template in Visual Studio 2013

Step 2: VS 2013 creates two projects. One for Windows Store and other for Windows Phone. Both use Windows Runtime API as the core targeting 8.1 platforms. Shared project is the shared component between the two projects and we will get to this when we learn more about Universal Apps Project template.

image

Figure 3: Universal Apps Projects in VS 2013.

Step 3: Adding a class. Right click on UniBlank_MVVMBasics.WindowsPhone –>Add->Class as shown in Figure 4.image

Figure 4: Adding a class in Visual Studio 2013.

Step 5: Name it as Person.cs as shown in Figure 5.image

Figure 5: Add New Item Dialog

Step 6: Create a Simple Model (Person.cs) with required properties and implement PropertyChanged property of INotifyPropertyChanged.

Person Class Code
  1. class Person : INotifyPropertyChanged
  2.     {
  3.         public event PropertyChangedEventHandler PropertyChanged;
  4.  
  5.         private string _firstName;
  6.         public string FirstName
  7.         {
  8.             get
  9.             {
  10.                 return _firstName;
  11.             }
  12.  
  13.             set
  14.             {
  15.                 if (_firstName != value)
  16.                 {
  17.                     _firstName = value;
  18.                     OnPropertyChanged("FirstName");
  19.                 }
  20.             }
  21.         }
  22.  
  23.         private string _lastName;
  24.         public string LastName
  25.         {
  26.             get
  27.             {
  28.                 return _lastName;
  29.             }
  30.  
  31.             set
  32.             {
  33.                 if (_lastName != value)
  34.                 {
  35.                     _lastName = value;
  36.                     OnPropertyChanged("LastName");
  37.                 }
  38.             }
  39.  
  40.         }
  41.  
  42.         public void OnPropertyChanged(string property)
  43.         {
  44.             if (PropertyChanged != null)
  45.             {
  46.                 PropertyChanged(this, new PropertyChangedEventArgs(property));
  47.             }
  48.         }
  49.     }

Step 7: Create a ViewModel (PersonViewModel.cs) with required logic to bind Model to ViewModel. (Repeat step 3 t step 5 and name class as PersonViewModel.cs.

Code Snippet
  1. class PersonViewModel
  2.     {
  3.         public ObservableCollection<Person> Persons
  4.         {
  5.             get;
  6.             set;
  7.         }
  8.  
  9.         public void LoadPersons()
  10.         {
  11.             ObservableCollection<Person> _persons = new ObservableCollection<Person>();
  12.             _persons.Add(new Person{ FirstName="Bill", LastName="Gates"});
  13.             _persons.Add(new Person{ FirstName="Satya", LastName="Nadella"});
  14.             Persons = _persons;
  15.         }
  16.     }

Step 8: Instead of using MainPage.XAML to show the data, let us create Views as we do typically in a software development. Create a View (PersonView.xaml) and bind the data with ViewModel. Add a User Control to the solution and name it as PersonView.xaml as shown in Figure 6.image

Figure 6: Adding View (User Control) to the project in VS 2013

Step 9: As we have to display firstname and lastname, lets use TextBlock’s. We will use  ItemsControl and Persons (observablecollection property) as DataContext and put them inside a DataTemplate to display the data from model in the view. In PersonView.XAML, write the following code inside Grid tag as shown below.

XAML code- Person User Control
  1. <Grid>
  2.         <StackPanel HorizontalAlignment="Left">
  3.             <ItemsControl ItemsSource="{Binding Path=Persons}">
  4.                 <ItemsControl.ItemTemplate>
  5.                     <DataTemplate>
  6.                         <StackPanel Orientation="Horizontal" Margin="20,20,0,0">
  7.                             <TextBlock Margin="10,0,20,0" Text="{Binding Path=FirstName, Mode=TwoWay}" Style="{StaticResource HeaderTextBlockStyle}"></TextBlock>
  8.                             <TextBlock Text="{Binding Path=LastName, Mode=TwoWay}" Style="{StaticResource HeaderTextBlockStyle}"></TextBlock>
  9.                         </StackPanel>
  10.                     </DataTemplate>
  11.                 </ItemsControl.ItemTemplate>
  12.             </ItemsControl>
  13.         </StackPanel>
  14.  
  15.     </Grid>

Step 10: In PersonView.xaml.cs, let us create an object of PersonViewModel class and pass it as DataContext to the View we just created as shown below.

PersonView.xaml.cs code
  1. private void UserControl_Loaded(object sender, RoutedEventArgs e)
  2. {
  3.     PersonViewModel personViewModelObject = new PersonViewModel();
  4.     personViewModelObject.LoadPersons();
  5.     this.DataContext = personViewModelObject;
  6. }

Step 11: In MainPage.xaml, let us import the xmlns:views=”using:UniBlank_MVVMBasics” namespace and put the views inside the grid as shown below.

MainPage.xaml code
  1. <Page
  2.     x:Class="UniBlank_MVVMBasics.MainPage"
  3.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;
  4.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml&quot;
  5.     xmlns:local="using:UniBlank_MVVMBasics"
  6.     xmlns:d="http://schemas.microsoft.com/expression/blend/2008&quot;
  7.     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006&quot;
  8.     mc:Ignorable="d"
  9.     Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
  10.     xmlns:views="using:UniBlank_MVVMBasics" >
  11.  
  12.     <Grid>
  13.         <views:PersonView></views:PersonView>
  14.     </Grid>
  15. </Page>

That’s it. Download the source code here.

Below are some of the points to remember about MVVM layers.

Model:

1. Represents the Data.
2. The Entity.
3. Model classes are non-visual classes that encapsulate the application’s data and business logic.
4. They are responsible for managing the application’s data and for ensuring its consistency and validity by encapsulating the required business rules and data validation logic.
5. The model classes do not directly reference the view or view model classes and have no dependency on how they are implemented.
6 The model classes typically provide property and collection change notification events through the INotifyPropertyChanged and INotifyCollectionChanged interfaces.
7. This allows them to be easily data bound in the view.
8. Model classes that represent collections of objects typically derive from the ObservableCollection<T> class.
9. The model classes typically provide data validation and error reporting through either the IDataErrorInfo or INotifyDataErrorInfo interfaces.
10. The model classes are typically used in conjunction with a service or repository that encapsulates data access and caching.
11. Not required to know where it gets its data from i.e from a WCF service. WCF RIA Services, etc.
12. May contain validation.

View:

1. The view is a visual element, such as a window, page, user control, or data template.
2. The view defines the controls contained in the view and their look and feel, visual layout and styling.
3. The view references the view model through its DataContext property.
4. The controls in the view are data bound to the properties and commands exposed by the ViewModel.
5. The view may customize the data binding behavior between the view and the view model.
For e.g, the view may use value converters to format the data to be displayed in the UI, or it may use validation rules to provide additional input data validation to the user.
6. The view defines and handles UI visual behavior, such as animations or transitions that may be triggered from a state change in the view model or via the user’s interaction with the UI.
7. The view’s code-behind may define UI logic to implement visual behavior that is difficult to express in XAML or that requires direct references to the specific UI controls defined in the view. 

ViewModel:

1. The ViewModel is a non-visual class and does not derive from any WPF or Silverlight base class.
2. It encapsulates the presentation logic required to support a use case or user task in the application.
3. The ViewModel is testable independently of the view and the model.
4. The ViewModel typically does not directly reference the view. It will have UI Friendly Entities, UI State, Actions and Public properties that are bound to a View.
5. It implements properties and commands to which the view can data bind.
6. It notifies the view of any state changes via change notification events via the INotifyPropertyChanged and INotifyCollectionChanged interfaces.
7. Interacts with View with various Commands.
8. The view model coordinates the view’s interaction with the model.
9. It may convert or manipulate data so that it can be easily consumed by the view and may implement additional properties that may not be present on the model.
10. It may also implement data validation via the IDataErrorInfo or INotifyDataErrorInfo interfaces.
11. The view model may define logical states that the view can represent visually to the user.
12. Invokes services to communicate outside the MVVM triad.

Build 2014–Observations

 

Universal projects in Visual Studio: Developers can create universal projects that share code between Windows Store applications and Windows Phone applications. Microsoft unified the platform so that you can build one application and let you target all the devices in the Windows ecosystem. With this update to Visual Studio, developers can now just open a new project, write their code once and then compile it for Windows Phone 8.1 or as a desktop or tablet app. This, gives developers a single set of tools that spans devices and the cloud.

universal_app_visual_studio

Because Windows 8.1 and Windows Phone 8.1 share the same Windows Runtime, Visual Studio now allows developers to create universal Windows projects that enable developers to build apps that support all Windows devices from a single Visual Studio project and share most of their code. Download release candidate (RC) for Visual Studio 2013 Update 2 from http://www.microsoft.com/en-us/download/details.aspx?id=42307

Developers who have built apps for Windows 8.1 will find it fairly easy to reuse their work and bring tailored experiences to Windows Phone 8.1. Windows Phone 8 developers can use the same code, and also access new features, when they develop for Windows Phone 8.1.

The update also includes some new diagnostic tools for Windows Phone developers. Specifically, developers can now more easily track memory usage and the combined UI responsiveness, energy consumption and CPU utilization.

.NET native code compilation: There is now support for.NET native code compilation for Windows and Windows Phone. .NET was always a very productive language to program in, but it didn’t always deliver the performance we were looking for. With the .NET native ahead-of-time compiler, developers will see faster startup times, lower memory usage and overall better performance, Microsoft promises. This new feature is currently in preview and allows developers to target both the X64 and ARM platforms.

Cortana: Microsoft unveiled Windows Phone 8.1 and introduced Cortana, a personal digital assistant. Powered by Bing, Cortana gets to know you and gets better over time by asking questions based on your behavior and checking in with you before she assumes you’re interested in something. Windows Phone developers can now also integrate their apps with Microsoft’s new personal assistant.

Other new features that make Windows Phone 8.1 smartphones even more personal include Action Center, which complements Live Tiles by showing new activities and notifications at a glance; and Senses, a suite of features that takes the work out of managing data use, storage space and battery life.

Even Cortana delivers developer extensibility. Cortana brings a significant evolution of the speech technology developed by Windows and Bing, which first appeared in Windows Phone 8. In Windows Phone 8.1 we expose new enhancements to the Speech API that developers can use to integrate their apps with the Cortana family of services. Developers can now leverage speech recognition and voice commands to denote a series of actions triggered by heuristically derived scenarios that are surfaced through the Cortana speech recognition service. Fewer steps and more types of natural verbal exchanges open more apps. All of this is delivered through a simple API so developers who use Windows Phone 8 speech features today can plug into Cortana with little additional effort.

When I started using Visual Studio 2013, I noticed that some numbers kept appearing at the top left and top right corners of the Window when I ran the app in Debug mode.  Something like this:

VS2013 Digits

The same sort of thing on the right top side too (not shown in the screen shot).   I could see that the values changed when I moved the mouse in a way that affected the controls on screen, but they clearly weren’t changes in mouse position.

It turns out that the display is showing the current frame counter rate.  And while this might be handy when you’re testing or fine tuning an app, it isn’t something I’d want to see all the time.

So if you want to turn this off, go to the App.xaml.vb file, find the OnLaunched event handler and change the setting for EnableFrameRateCounter from True to False, as shown below:

If Debug

Developing Apps for Microsoft Surface, Windows 8, Windows RT and Windows Phone 8

Recently, at one of the conference i presented at Microsoft Technology center, i was asked the following questions.

  • Is .NET dead? What is .NET Client profile?
  • Is Windows 8 compatible with my current Windows app?
  • Can I build Windows 8 Metro apps in .NET?
  • Can I build apps for both Windows 8 and Windows Phone?

The following table summarizes the latest devices and their operating systems as well as the development technologies along with other useful information (for developers)

image

Well, here are some of the answers and commonly used Windows 8 terminology.

  • Windows Phone 8 now shares a common core with Windows 8. This means you can expect to write apps for one and easily port it to the other, with UI retooling of course. Developers targeting both should use C#/VB + XAML for apps, and C++/D3D for games. Portable class library definitely helps when developing for both the platforms.
  • The term “Metro Apps” now called “Microsoft Design Language” denotes apps that can be purchased in the official Windows App Store and that are built on top of the WinRT runtime, using either C# + XAML, or WinJS + HTML5. Even though Windows Phone features a Metro user interface (and the original one at that), the term Metro Apps does NOT apply to Windows Phone 7.5 apps.
  • The term “Metro Games” denotes apps that can be purchased in the official Windows App Store and that are built on top of the WinRT runtime, using Direct3D (D3D) and C++. Windows RT & Windows 8 Metro games cannot be built in XNA.
  • XNA can still be used to create Windows Phone 7.5, 7.8 and 8.0 games, and sold in the marketplace. You will not need to keep Visual Studio 2010 since Visual Studio 2012 and the Windows Phone 8.0 SDK will still support new development in XNA.
  • WinRT is the new native Runtime for Windows RT and the Metro side of Windows 8. It completely replaces .NET and Win32. Let me make this clear: If you look under the covers of WinRT, there is no .NET and no Win32, all you’ll find is the Windows Kernel. Since the only dev platform supported by Windows RT is WinRT, that means you cannot use .NET to build apps for Windows RT (or for the Metro side of Windows 8). Read this post on Paul Thurrott’s Windows Supersite for a more in-depth explanation.
  • WinRT is not based on .NET but you can use a subset of .NET from WinRT. Microsoft provides a subset of managed types called the .NET APIs for Metro style apps which enables .NET Framework developers to create Metro style apps within a familiar programming framework. Note that porting some .NET apps to WinRT could be trivial while others could be hard, based on which namespaces & classes you use. Check this section of the Metro style development documentation for more details.
  • Side-loading implicates installing non-certified applications using external media, thus bypassing the official Microsoft Windows App Store, whether it originates from a CD/DVD, USB key or web download. Note that developers can always side-load their own apps in a developer-unlocked device.
  • Xbox LIVE games are always platform specific. Microsoft Surface and Windows Phone both feature Xbox LIVE enabled games but this does NOT mean it runs the same Xbox LIVE Arcade games as the Xbox 360.
  • 2D game development can also be done using the same platform as apps. For example, on Windows Phone, 2D games can be built in Silverlight and do not require XNA.
  • Confused about version numbers for Windows Phone? Read my blog post that demystifies it all here.
  • Windows 8 can also be installed on any PC running Windows 7 today, and will also come pre-loaded on future generations of OEM (Dell, HP, Lenovo, Toshiba, etc.) computers, laptops, notebooks, Ultrabooks, Netbooks and tablets. The first column applies to all these other Windows 8 computers as well.
  • Windows RT will also be available on third-party tablet devices offered by Microsoft’s OEM partners (Samsung, Toshiba, Lenovo, etc.) Windows RT cannot be installed manually by a consumer, it must be licensed and pre-loaded by the OEM manufacturing the tablet.